人気記事を表示できるWordPressにプラグイン【WordPress Popular Posts】をご利用されている方、多いと思います。【WPP Plus Widget】は【WordPress Popular Posts】ではできないカテゴリ別での人気記事の表示を、ウィジェットで簡単に管理できる拡張機能的なプラグインです。
【WPP Plus Widget】が優れているのは表示するカテゴリーの階層も簡単に設定でき、現在表示されている記事は人気記事からは排除することも簡単にできるのです。そしてさらに!複数カテゴリを選択していた場合にはどれか一つを選んで表示させるのです。すごい便利!
今回はランキングを表示するcss部分もあわせてご紹介します。
こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。
目次
人気記事を設定するプラグインの用意
人気記事を表示するには【WordPress Popular Posts】が必要ですので、ダッシュボード【プラグイン】→【新規追加】からインストールしておいてください。有効化を忘れずに。【WordPress Popular Posts】はインストール後からのアクセスを収集しますのでログがたまるまで少し時間が必要です。
【WPP Plus Widget】のインストール
【WPP Plus Widget】は公式プラグインではないので作者様のサイトからダウンロードさせていただきましょう!くわしい説明も作者様のサイトにで確認してください。
プラグインをダウンロードしましたら、Zipファイルを解凍せずにダッシュボードの【プラグイン】→【プラグインのアップロード】から【ファイルを選択】→【今すぐインストール】でインストールさせてください。
インストール完了後、ウィジェットに【WPP Plus Widget】が追加されています。
ウィジェットには【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));
});
});
ブロガーさんはエックスサーバーを使われている方が多いと思います。mod_pagespeedを活用するのにもJavaScript関係は外部ファイルにまとめちゃうといいです。
WordPress Popular Postsのスタイルシートの適応を外す
人気記事のスタイルはWordPress Popular Postsのスタイルシートが適応されますので、こっちを使用しない設定にします。プラグインのスタイルシートに直接cssを書き込んでしまうとプラグインアップデートですべて消えてしまうので、cssはテーマに書き込んでしまったほうが楽です。
ダッシュボードの【設定】→【WordPress Popular Posts】→【Tools】→【Use plugin’s stylesheet:】を【Disabled】に。そして【Apply】
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】は本当に便利ですね!ぜひお試しください!!
10 件のコメント
はじめまして。現在サイト製作中で、カテゴリ別のランキング表示をしたくて色々調べておりましてこちらのサイトにたどり着きました。何点か質問させてください。
カテゴリ別にRSSプラグインで外部から取得したニュース記事を表示するようなサイトです(故にwordpress的には投稿記事になりますがクリックすると _brank で外部サイトに飛びます。)。まず、この場合でもこちらで紹介されている方法のランキングは可能でしょうか?
また、実際に紹介されている二つのプラグインをインストールして設定も済ませましたが、サイドバーに表示できておりません。sidebar.php に何らか記述しないとならないようなのですが、出力するためのタグはご存じないでしょうか?
ご回答よろしくお願いいたします!
かゆいところに手が届きました!
私の環境では無事にWPP Plus Widgetがスマホでも動作。
解説ありがとうございます。
ところで。
記事フォーマットの抜粋文は{stats}ではなく{summary}のようです。
{stats}はviews数が表示されました。
私の環境だけの動作だったらごめんなさい!
こんにちは。正に探していたプラグインです!
これを記事下に「関連記事」のように表示させたいのですが、
やり方わかりますか?
サイドバーは通常のWPPで記事下にカテゴリ毎のランキングが並ぶようにしたいです。
よろしくお願いします。
Yu様
WPP Plus Widgetは人気記事を表示するプラグインWordpress Popular postsをウィジェットで使いやすくするプラグインです。
記事下に人気記事を挿入したいのならば、記事下にウィジェットを作り、そこにWPP Plus Widgetを設置してはどうでしょうか?
(※動作確認はしていません。またその際には当サイトに載せているcssは使えません)
もしくは、WPP Plus Widgetを使わずにWordpress Popular postsを直接弄る方法もあります。Wordpress Popular postsのカスタマイズはググるといくらでも出てくるかと思います。
ちゅんこ様、こんにちは。
丁寧に教えて頂き、ありがとうございました。
おかげで、今表示しているカテゴリーの人気記事を表示することができました!
これからもいろいろ参考にさせて頂きたいです。
はじめまして。
スティンガー5のカスタマイズをしようとさ迷って、こちらのサイトにたどり着きました。
とっても可愛いので早速参考にさせて頂きたいのですが、初心者でよくわかっておらず、base.jsがどこにあるのか発見できず先に進めません。
もし、よろしければどこにあるのか教えて頂けますか?
くみんぼ様
はじめまして。コメントありがとうございます。
base.jsの場所ですが、
テーマのフォルダ内でstyle.cssやsingle.php、header.phpと同じ階層にある【js】といフォルダの中に入ってます。
WordPressの【テーマの編集】からは編集できないのでサーバーをFTPソフトで繋いで編集することになります。
ご確認ください。
可愛いカスタマイズです!
りんりんさん
ありがとうございます!
りんりんさんからがはじめてのコメントです(^O^)
コメント欄カスタマイズしたので動作確認。
コメント絶賛受付中!!