motetai.club

Popular Posts by Webline でカテゴリ別「人気の投稿」実装してみる

Popular Posts by Webline

WordPressのサイトでアクセスの多い記事をサイドバーなどに表示できる「人気記事」表示のプラグイン。
導入している人けっこう多いですよね?有名どころだと「WordPress Popular Posts」とかが有力候補でしょうか?
ボクはマルチプラグインパックの「Jetpack」に搭載されている人気記事ウィジェットを愛用していたのですが、今回はあまりメジャーではない Popular Posts by Webline というプラグインを使って、「カテゴリ別に人気記事の表示内容を変える」方法を試してみたので備忘録。

導入の経緯

まず、今回の導入に至った経緯を軽く説明します。

前述したように、このブログでは以前からJetpackの人気記事ウィジェットを導入してサイドバーに「人気の投稿」をランキング形式で表示していました。
記事ごとのアクセス推移がパッと見れて重宝していたのですが、ブログ開始3ヶ月を過ぎてちょっとした悩みが…。

今現在このブログでアクセスが最もあるのが漫画「ハンターハンター」のレビュー記事です。
ネタバレとか考察とかで検索流入してくるのもほとんどこのカテゴリ。
それ以外の音楽だったり映画だったりのレビューやWordpress関連などのカテゴリもちょくちょく継続的にアクセスはありますが現状、比ではないです。

そうなると必然的に人気記事ランキングを「ハンターハンター」の記事が独占してしまいます。
実際アクセスが多い記事なのだから当然なのですが、他カテゴリに検索からたどり着いた人などコミック関連に興味のないユーザーからしてみれば、この「人気の記事」表示はあまり参考にならないですよね。

当該カテゴリの記事が多め、程度ならスルーしたんですが10位圏内の全記事が「ハンターハンター」なので、ちょっとユーザビリティにも影響するかな、と懸念しはじめました。

そこで、「コミック」カテゴリ以外では「コミック」カテゴリを除いたランキングを表示し、「コミック」カテゴリでは全カテゴリ対象のランキングを表示する方法はないか、と模索しました。

で、最初はJetpackのプラグインをいじることも考えたのですが、プラグインファイルをいじると更新時に後々面倒そうなので見送り。要件を満たすプラグインはないかな〜と探していた時に見つけたのが「Popular Posts by Webline」です。

Popular Posts by Webline

プラグインタイトルからもわかるとおりWeblineというパブリッシャーによって制作されたプラグインです。
リンクからたどるとどうやらインドの開発会社のよう。
http://www.weblineindia.com/

怪しいプラグインは入れないに越したことはないのですが、欲しい機能を備えているので見送り難い。
評価数は少ないですがまずまずの評価値であること、最終更新も比較的最近で現在使っているWordPressのバージョンにも対応していることから導入を決めました。

このWeblineという会社、ほかにもちょっと気になるプラグインをだしてるっぽいのでこの導入で気に入ったら他のプラグインも試してみようと思います。

導入準備

インストール

プラグイン→新規追加 から「Popular Posts by Webline」を検索しインストールします。

インストールし有効化すると特別設定画面などは追加されません。
外観→ウィジェット に移動すると「Popular Posts by Webline」という項目が増えていますので、ウィジェットを設置したい任意の場所へドラッグします。

ウィジェットの項目

次にウィジェットの表示設定をいじります。
まずはウィジェットの各項目の説明を、各項目の説明は後術します。

Title ウィジェットのタイトル
No. of Posts to Show 表示件数
Show Post Before (Days) ランキング対象となる記事を何日前まで含めるか(Noneなら全記事が対象になります)
Sort By 並び順(アクセス数とコメント数のどちらかを選べます)
Show No. of Comments コメント数を表示するかどうか
Show Post Views Count 閲覧数を表示するかどうか
Show Post Date 投稿日表示するかどうか
Show Featured Image サムネイル表示するかどうか
Featured Image Width サムネイルの幅
Featured Image Height サムネイルの高さ
Show Excerpt 記事の抜粋表示するかどうか
Excerpt Length 抜粋の長さ
Read More Text 抜粋文末の処理([…]とか[続きを読む]とか)
Select Category ランキング対象にするカテゴリーを選択
Exclude Current Post 当該記事をランキングに表示するかどうか
Show Relative Date 投稿日の表示を相対表示にするかどうか

ウィジェットの表示設定

今回のボクがやろうとしているカスタム要件は下記。

  • 「コミック」カテゴリの記事では除外せず全カテゴリのランキングを表示
  • 「コミック」カテゴリの記事以外では「コミック」カテゴリをランキングから除外
  • その他のページ(トップや検索結果)などでは「コミック」カテゴリをランキングから除外

このブログでは、単一記事ページではサイドバー下部に人気ランキングを、単一記事以外のページではサイドバー上部に人気ランキングを表示しています。
なのでサイドバー上部用と下部用(コミックカテゴリとそれ以外)の3つのウィジェットを用意します。
※ページの構成によって設定はまちまちでしょうから、この手順を参考にする場合は各サイトに合うように対応させてください。

まず、タイトルにウィジェット名を入力。
ランキング項目は記事ページには5件、それ以外では10件表示させたいのでそれぞれのウィジェットに件数を5と10で入力。

Show Post Before (Days)はとくに指定がなければNone(全記事対象)でよいでしょう。
対象記事を日付で絞れる項目なのですが、たとえば「30」を選択すると1ヶ月以上前に投稿した記事はランキング対象外になります。アクセスのある記事が1ヶ月以上前に書かれていたとするとアクセスがいっぱいあっても表示されなくなるので注意です。

並び順も通常は「アクセス数」(Post Views Count)で問題ないでしょう。
コメント数、回覧数、投稿日の表示については各々のサイトデザインに併せて選んで下さい、ボクの場合は必要ないので非表示にしました。
サムネイルは表示、サイズもデフォの100×100にしました。
んで、抜粋文は非表示。

上記まで終えたら、一旦CSSでデザインを整えました。
そのまま使っても問題はないですが、ボクはテーマ(STINGER7)に合うようにCSSをいじりました。
ただコメント数、回覧数、投稿日を表示させるとCSSの配置が複雑になるので慣れていない人はやらないほうが吉。

カテゴリ判別

本題のカテゴリ判別。
といっても、ウィジェットの「公開状態」を併せて使うだけで簡単に実装できます。

まず単一記事「コミック」カテゴリ用。
とくべつ除外対象は作らず全カテゴリをランキング対象にします。Select Categoryで何も選択肢ないと全てのカテゴリが対象になります。
「公開状態」をクリックし「以下の場合に表示」を選択。例では「コミックレビュー」とサブカテゴリの「HUNTER×HUNTER」を選択しました。

ここで選んだ「カテゴリー」の記事ページでは「全カテゴリ」を対象にしたランキングが表示されます。

 

次に「コミック」カテゴリ以外の単一記事。
「コミック」カテゴリを除外するため、Select Categoryで「コミックレビュー」とサブカテ「HUNTER×HUNTER」以外すべてを選択しました。

「公開状態」をクリックし「以下の場合に表示」を選択。例では「コミックレビュー」とサブカテの「HUNTER×HUNTER」以外を全て選択しました。
カテゴリ選択の項目が増えてちょっと面倒なのですが、「以下の場合に非表示」を利用するとアーカイブページやメディアページなど他種ページでの表示に影響して面倒だったので、この方法を取りました。

※無論カテゴリを追加したら、この部分も追加する必要があります。

 

上記で単一記事ページ用は用意出来たので、残りの全てのページ用の設定をします。
Select Categoryで「コミックレビュー」とサブカテ「HUNTER×HUNTER」以外すべてを選択し、「公開状態」を「以下の場合に非表示」で投稿ページ(単一記事ページ)を選択します。

上記はあくまでボクの欲していた表示設定なので、そのまま流用するのは現実的ではないですからそれぞれのサイトに併せて表示設定をいじってみてください。

ちなみにウィジェット最後の項目ですが、

Exclude Current Post は該当記事をランキングに含めるか否かを選択できます。
たとえば「おいしいイタリアン」という人気記事があったとして、その記事内のランキングに「おいしいイタリアン」が上位表示されてもあまり意味ないですよね。いますでにその記事を読んでいるんですから。
こういうときに該当記事をランキングから除外し、下位ランクの記事を自動的に詰めてランキング表示してくれます。
意外と使える機能だと思うのでボクはチェックしてます。

Show Relative Date は投稿日時の相対表示です。
通常だと投稿日が「2016/06/09」とか表示されますが、この項目をチェックすると記事を見た日時に応じて「3日前」「5日前」とか相対的に表示してくれます。
更新頻度の高いサイトなどでは有用かもしれません。

プラグイン競合に注意

別のパブリッシャー同士のプラグインが競合してエラーを起こすってのはよくあることなんですが、このプラグインでも1つ確認しました。

外部リンクに自動的にアイコンを付けて、新規ウィンドウで表示してくれるプラグイン「WP External Links」というのがあるのですが、これと競合しています。致命的な表示エラーを起こしたりはしませんが、表示するページに寄ってフッターにエラー文が吐き出されるようになってしまいました。

自分にとって、外部リンクへのアイコン付加と新規ウィンドウ表示は必須の機能ではなかったのですが、あったほうが便利だよなあ…。
ということで代替プラグインを模索。

似た名前の「External Links」というプラグインで代替することにしました。
「WP External Links」に比べるとシンプルで、複雑な設定ができませんが、アイコン付加と新規ウィンドウ表示はこれで可能なので良しとしました。

同じケースでお悩みの方は検討してみては…?

あとがき

検索した限りだと、日本語サイトでは使ってる方があまりいないのか実用例が見つからないプラグインでした。
なのでちょっと不安だったのですが、使ってみた感じけっこう良さそう。なにより求めていたとおりバッチリ判別表示してくれてます。

注意点としては、アクセスのカウント自体はウィジェットを設置してから開始されるので、これまで別のプラグインでランキング実装していた場合は、一旦ランキングのリセットを余技なくされます。まあこれは他のランキングプラグインもほぼ同じ仕様なので仕方がないですね。

あと自分がアクセスした分もカウントされてしまうので正確なランキングをとりたい場合は、留意しておいたほうがよいでしょう。