今表示している記事のカテゴリの人気記事を簡単に表示できるプラグイン【WPP Plus Widget】

 2015/01/12

カテゴリ別人気記事とウィジェット
人気記事を表示できるWordPressにプラグイン【WordPress Popular Posts】をご利用されている方、多いと思います。【WPP Plus Widget】は【WordPress Popular Posts】ではできないカテゴリ別での人気記事の表示を、ウィジェットで簡単に管理できる拡張機能的なプラグインです。
【WPP Plus Widget】が優れているのは表示するカテゴリーの階層も簡単に設定でき、現在表示されている記事は人気記事からは排除することも簡単にできるのです。そしてさらに!複数カテゴリを選択していた場合にはどれか一つを選んで表示させるのです。すごい便利!
今回はランキングを表示するcss部分もあわせてご紹介します。

スポンサーリンク


人気記事を設定するプラグインの用意

人気記事を表示するには【WordPress Popular Posts】が必要ですので、ダッシュボード【プラグイン】→【新規追加】からインストールしておいてください。有効化を忘れずに。【WordPress Popular Posts】はインストール後からのアクセスを収集しますのでログがたまるまで少し時間が必要です。

【WPP Plus Widget】のインストール

【WPP Plus Widget】は公式プラグインではないので作者様のサイトからダウンロードさせていただきましょう!くわしい説明も作者様のサイトにで確認してください。

プラグインをダウンロードしましたら、Zipファイルを解凍せずにダッシュボードの【プラグイン】→【プラグインのアップロード】から【ファイルを選択】→【今すぐインストール】でインストールさせてください。
インストール完了後、ウィジェットに【WPP Plus Widget】が追加されています。

Attention

ウィジェットには【WordPress Popular Posts】の項目もありますが、使用するのは【WPP Plus Widget】の方ですのでご注意を!

【WPP Plus Widget】の設定

まずは、WPP Plus Widgetをウィジェットの任意の箇所に設置します。次にWPP Plus Widgetの設定をしていくのですが後で説明するCSSに合うように設定します。
プラグインの設定方法

①タイトル

ここは見出しになります。ここはお好みのタイトルで構いません。
たとえば『人気記事』と入力したとすると、【「–カテゴリ名–」カテゴリの人気記事】と出力され、トップページには【人気記事】とタイトルが表示されます。

②深さ

こちらはカテゴリの階層の深さになります。深さを1に設定したとして、親カテゴリー→子カテゴリー→孫カテゴリーとあった場合、現在表示されている孫カテゴリーの記事でも人気記事には親カテゴリーでの人気記事が表示されます。
カテゴリーの記事数が少ない場合にはこの機能は画期的ですよね!

④パラメータ

こちらは元のプラグイン【WordPress Popular Posts】のパラメーターを入れるところです。細かな条件指定はいろいろありますが、ざっくりとご紹介します。わたしが設定しているのはこんな感じ。

limit=5 
range=weekly  
order_by=views
thumbnail_width=100
thumbnail_height=100

limit=

表示件数。5なら最大で5記事まで。

range=

いつまでのデータを利用するか。
monthly(1か月間)、weekly(1週間分)、daily(1日分)、all(プラグインWordPress Popular Postsをインストールしてからすべての期間)があります。

order_by=

人気記事一覧を何の順番でならべるか。
views(アクセス数)、comments(コメント数)、avg(1日の平均アクセス数)があります。

thumbnail_width=、thumbnail_height=

アイキャッチの画像のサイズです。

excerpt_length=

わたしは設定していないのですが、excerpt_lengthは抜粋文です。excerpt_length=【文字数】で表示させます。

④表示記事を除外する

ここにチェックを入れると現在表示している記事は人気記事ランキングから除外されます。
この機能はわたしが作者様におねがいして付けていただいた機能です!本当にありがとうございます!!!

⑤記事一覧の前後

前  <div id="popular-post"> <ul>
後  </ul></div>

⑥記事フォーマット

<li>{thumb} {title}</li>

{stats}は抜粋文です。必要な場合は</li>の前に入れてください。

これでウィジェットの設定はおわりです。このままでもそれなりに表示されていると思いますが、アイキャッチ部分にランキングを入れるスタイルをご紹介します。

人気記事一覧にランキングを表示するcss

ランキングを表示する方法は色々あるようですがわたしはJsを使った方法をご紹介します。キャリコ(@calicocatxyz)さんの記事を参考にさせていただきました!

外部Jsファイルに以下を記述

※STINGER5ではbase.jsの一番下にコピペです。

/*---------------------------
人気記事ナンバリング
------------------------------*/
$(function(){
$('#popular-post ul li').each(function(i){
$(this).attr('class','number' + (i+1));
});
});

Memo

ブロガーさんはエックスサーバーを使われている方が多いと思います。mod_pagespeedを活用するのにもJavaScript関係は外部ファイルにまとめちゃうといいです。

WordPress Popular Postsのスタイルシートの適応を外す

人気記事のスタイルはWordPress Popular Postsのスタイルシートが適応されますので、こっちを使用しない設定にします。プラグインのスタイルシートに直接cssを書き込んでしまうとプラグインアップデートですべて消えてしまうので、cssはテーマに書き込んでしまったほうが楽です。
ダッシュボードの【設定】→【WordPress Popular Posts】→【Tools】→【Use plugin's stylesheet:】を【Disabled】に。そして【Apply】
WordPress Popular Postsの設定

Style.cssに記述

.wpp-list li {
float: none;
clear: left;
}
.wpp-thumbnail {
display: inline;
float: left;
margin: 0 10px 0 0;
border: none;
}
#popular-post a {
font-size: 14px;
text-decoration : none;
}
#popular-post li {
padding : 20px 10px;
border-bottom: #d2d7e6 1px solid;
line-height: 1.5;
overflow: hidden;
text-align: left;
}
#popular-post li:hover { background-color: rgba(238,238,238,0.3) }
#popular-post ul li { position : relative }
#popular-post li:last-child { border-bottom: none }
#popular-post { counter-reset : wpp-ranking }
#popular-post ul li::before {
position : absolute;
top : 15px;
left : 5px;
color : #ffffff;
counter-increment : wpp-ranking;
text-align : center;
z-index : 9999;
float : left;
line-height : 25px;
width : 25px;
height : 25px;
border-radius : 2px;
}
#popular-post ul li.number1::before,
#popular-post ul li.number2::before,
#popular-post ul li.number3::before,
#popular-post ul li.number4::before,
#popular-post ul li.number5::before {
content : counter(wpp-ranking, decimal);
background-color : #f09696;
}

うまくいくとこのような感じでアイキャッチ左上にランキングが表示されます。スタイルはお好みで変更してくださいね!
人気記事完成図

まとめ

カテゴリ別に人気記事を表示したいと考えている方には【WPP Plus Widget】は本当に便利ですね!ぜひお試しください!!
それではちゅんこ@shufulifeがお送りしましたー!!

WordPress

Please comment!

  

8件のコメント

  • Yu 2016年3月13日 1:29

    こんにちは。正に探していたプラグインです!

    これを記事下に「関連記事」のように表示させたいのですが、
    やり方わかりますか?

    サイドバーは通常のWPPで記事下にカテゴリ毎のランキングが並ぶようにしたいです。
    よろしくお願いします。

    • ちゅんこ 2016年3月14日 16:35

      Yu様

      WPP Plus Widgetは人気記事を表示するプラグインWordpress Popular postsをウィジェットで使いやすくするプラグインです。
      記事下に人気記事を挿入したいのならば、記事下にウィジェットを作り、そこにWPP Plus Widgetを設置してはどうでしょうか?
      (※動作確認はしていません。またその際には当サイトに載せているcssは使えません)

      もしくは、WPP Plus Widgetを使わずにWordpress Popular postsを直接弄る方法もあります。Wordpress Popular postsのカスタマイズはググるといくらでも出てくるかと思います。

  • くみんぼ 2015年7月13日 10:53

    ちゅんこ様、こんにちは。

    丁寧に教えて頂き、ありがとうございました。
    おかげで、今表示しているカテゴリーの人気記事を表示することができました!
    これからもいろいろ参考にさせて頂きたいです。

  • くみんぼ 2015年7月11日 4:54

    はじめまして。
    スティンガー5のカスタマイズをしようとさ迷って、こちらのサイトにたどり着きました。
    とっても可愛いので早速参考にさせて頂きたいのですが、初心者でよくわかっておらず、base.jsがどこにあるのか発見できず先に進めません。
    もし、よろしければどこにあるのか教えて頂けますか?

    • ちゅんこ 2015年7月12日 11:36

      くみんぼ様

      はじめまして。コメントありがとうございます。
      base.jsの場所ですが、

      テーマのフォルダ内でstyle.cssやsingle.php、header.phpと同じ階層にある【js】といフォルダの中に入ってます。

      WordPressの【テーマの編集】からは編集できないのでサーバーをFTPソフトで繋いで編集することになります。

      ご確認ください。

  • りんりん 2015年1月26日 0:11

    可愛いカスタマイズです!

    • ちゅんこ 2015年1月26日 16:30

      りんりんさん
      ありがとうございます!
      りんりんさんからがはじめてのコメントです(^O^)

  • ちゅんこ 2015年1月20日 16:51

    コメント欄カスタマイズしたので動作確認。
    コメント絶賛受付中!!

Messege




9件のトラックバック