WordPress Popular Postsのランキング表示をLuxeritas(ルクセリタス)の新着表示となじませる

2017.11.22カスタマイズ

WordPress Popular Postsをインストールすると、ウィジットを使用してサイトに簡単にランキング表示が追加できるようになりますね!
でも、デフォルトのまま追加するとLuxeritas(ルクセリタス)のサイドバーになじまないんですよ><
そこで今回は設定を変更して、サイドバーに「最近読まれた記事」として人気順に表示する方法をご紹介したいと思います。

サイドバーに”最近読まれた記事”をサムネイル付きで表示

WordPress Popular Postsウィジェットを設置する

  1. 「外観」→「ウィジェット」の一覧からWordPress Popular Postsをお好みの場所へ追加する
  2. キャプチャ画面

WordPress Popular Postsウィジェットの設定をする

WordPress Popular Post ウィジェット

    ウィジットの設定画面

  1. タイトル:任意のタイトルを入力する
  2. 最大表示数:表示したい記事の数を入力する
  3. ソート順:総閲覧数を選ぶ
  4. 計測期間:任意の期間を選択する
  5. 投稿タイプ:post(投稿記事),page(固定ページ),free-tweets(当サイトのカスタム投稿の場合)をカンマで区切って入力する
  6. タクソノミー:カテゴリーを選択
  7. 「抜粋を表示」にチェックを入れていったん保存し、「抜粋の長さ」を「40」とする
  8. 「アイキャッチ画像を表示」にチェックを入れていったん保存し「thumb100(100×100) 」を選ぶ
  9. 統計タグの表示:閲覧数を表示・日付を表示にチェック
  10. カスタム HTML マークアップを使うにチェックを入れて、いったん保存する
  11. カスタムHTMLを以下のように変更し、保存する
  12. 投稿の前/後
    <ul id="popular-posts" class="wpp-list"></ul>
    
    投稿のHTMLマークアップ:
    <li>
    {thumb}
    <div class="wpp-post-title">{title}</div>
    <div class="wpp-views"><i class="fa fa-arrow-right"></i> {views}PV <i class="fa fa-edit"></i> {date}</div>
    <div class="wpp-excerpt">{excerpt}</div>
    </li>
    

    ただし8行目の下記の部分は、閲覧数や日付を表示しない場合は削除してください。

    <div class="wpp-views"><i class="fa fa-arrow-right"></i> {views}PV <i class="fa fa-edit"></i> {date}</div>

    WordPress Popular Postsのスタイルを追記する

    以下を子テーマのスタイルシートに追記する

    2018.03.26CSSを一部変更しました。
    CSS
    /* popular Post */
    .wpp-post-title {
        font-size: 14px;
        font-size: 1.4rem;
        font-weight: 700;
        padding: 0;
        margin: 0 0 5px;
    	line-height: 1.4;
        text-decoration: none;
    }
    .wpp-excerpt {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-size: 1.2rem;
        line-height: 1.4;
    }
    .wpp-views {
    	font-size:1.3rem;
    	line-height:1.4;
    	color:grey;
    }
    ul#popular-posts.wpp-list li img {
    	border-radius: 5px;
    	border: 1px solid #ddd;
    	padding: 1px;
    	margin: 0 10px 0 0;
    	width:auto;
    	height:auto;
    }
    ul#popular-posts.wpp-list {
    	counter-reset: pupular-ranking;
    }
    ul#popular-posts.wpp-list li {
    	position: relative;
    	padding: 15px 0;
    	border-top:0;
    	border-bottom: 1px dotted #ccc;
    }
    ul#popular-posts.wpp-list li:last-child {
    	border-bottom: none;
    }
    ul#popular-posts.wpp-list li:before {
    	background: none repeat scroll 0 0 #e44d26; /* 数字の背景色 */
    	color: #fff; /* 数字の色 */
    	content: counter(pupular-ranking, decimal);
    	counter-increment: pupular-ranking;
    	font-size: 100%;
    	left: 0px;
    	top: 16px;
    	line-height: 1;
    	padding: 4px 7px;
    	position: absolute;
    	z-index: 1;
    	opacity: 0.9; /* 透明度 */
    }
    .wpp-list li {
    	overflow: hidden;
    	float: none;
    	clear: both;
    }
    .wpp-thumbnail {
        display: block;
        float: left;
    }
    

    プラグインの設定を変更する

    [ツール] ⇒ [その他] を開き、プラグインのスタイルシートの使用を無効にします。
    WordPress Popular Post Toul
    下のような表示になっていたら完成です!
    WordPress Popular Post Preview
    ランキング数字の背景色と数字の色は上記CSSの45行目と46行目で変更できますので、お好きな色に変えてくださいね♪

    以下の記事もお読みください。

    あとがき

    本日(2018.03.26)この記事を大幅リニューアルしました。
    マニュアルを作るため、別サイトにプラグインをインストールして初期画面を確認してみたり、スタイルを書き替えてみたり、いろいろやっているうちに、うっかり、まるっと。で稼働中のウィジェット(WordPress Popular Post)を削除してしまいました。

    一瞬、目が点になってしまったのは言うまでもありません。
    マニュアルも最後まで書き終わっていなかったために、現在の設定が消えてしまい、一からやり直すしかなくなってしまいました。(;´д`)トホホ
    何しろフォントアイコンなどを追加していたため、もう一度調べるのが大変で億劫です。

    もうバックアップからの復元しか方法はない!と思って、結局、復元して事なきを得ました。
    ほんとにバックアップって大事、、、。
    そして、疲れた。

    お役に立ちましたら「拍手」ボタンなどクリックしていただけると励みになります!

0
この記事を書いた人
どらみ

パソコン歴はWindows98からの元パソコンインストラクターです。以前はMS Office系のソフトウェアを主に教えていました。 今はWordPressのテーマLuxeritasにはまっています♪ 質問されると、つい親身になってしまう自称「ポジネガ人間」です。

応援する にほんブログ村 ブログブログ ブログノウハウへ