軽い気持ちでやってみたら思いのほか大変でした（汗）
WordPressはPHPを使ったらいろいろできるみたいですが、その中でも以前からやりたかった現在見ている記事のカテゴリの人気記事の表示にチャレンジしてみました。
例えば現在見ている記事のカテゴリが「WordPress」だったらWordPressカテゴリの記事の中でアクセス数が多い順に記事を取得して並べて表示する、といったことです。
ジャンルが似ている人気記事が表示されるので読者にとっても良い情報を探す手間を省けるメリットがありますね。
もくじ
カテゴリ別人気記事を表示してくれるプラグイン
PHPをいじって作らないといけないかなぁと思ってましたが調べてみたらプラグインが存在していました。
WPP Plus Widget
というプラグインです。
こちらが開発者さんの公式サイト。
設置方法や設定方法が簡単にまとめられています。
さらにインストールから設定内容まで細かく説明してくれている記事も紹介しておきます。
かんったんに箇条書すると、
- WordPress Popular Postsをインストールしてなければインストール
- 公式サイトから「WPP Plus Widget」のzipファイルをダウンロード
- WordPress管理画面のプラグイン新規追加からzipファイルをアップロード
- ウィジェット編集画面で「WPP Plus Widget」を設置・編集
これでひとまずカテゴリ別の人気記事が表示されるようにはなります。
ただしその後自分のブログに合わせてレイアウトを調整するのはCSSをいじったりタグをカスタマイズする必要があるかもしれません。
カスタマイズに関しては先ほどリンクを貼ったShufulifeさんの記事も参考になります。
基本的な使い方などはいろんな記事で詳しく説明されているのでこの記事では自分がどういう設定をしたのか、なぜその設定にしたのかなどを交えて書いていきます。
スクロール追従領域にウィジェットを設置
記事をある程度スクロールしたらサイドバーに常駐するように追従領域ウィジェットに設置しました。
※WordPressのテーマにSimplicityを利用していて最初からスクロール追従領域のウィジェット領域が用意されています。他のWordPressテーマだと最初から用意されていない場合もあります。
スクロール追従領域に設置することである程度記事を読み進めた段階でサイドバーに同じカテゴリの人気記事が表示されるので、
- 目的の情報が無くて他の記事に移動
- 読み終わって他の記事に移動
こういう時にサイドバーに常駐していたら使われるかなという想定です。
もっとデータを取って最適な配置を吟味したいですけどいかんせんまだ少ないアクセスなのでアクセス解析を見ても優位な差が出ずに自分の思い込みを脱してませんので追従が最適かどうかはわかりません。
プラグインの設定内容
簡単にではありますけどウィジェットで設定できる内容をちょっとだけ。
「タイトル」を入力すると、
「カテゴリ名」カテゴリのタイトル
というふうにサイドバーに表示されます。（赤字の部分に入力内容が代入されます）
「深さ」は2にすると親カテゴリと子カテゴリまで含めて集計するみたいです。
パラメータは
- limitは最大表示件数
- rangeはデータを集計する期間（日・週・月など）
- order_byはアクセス数やコメント数など集計の対象を指定
- thumbnail_widthは画像を表示する場合のサイズ指定
というふうになっています。これは公式サイトなどを見たほうが詳しくわかると思います。
サムネイル画像は表示せずに記事タイトルだけ
続いてその下のフォーマット設定。
最初は人気記事一覧が<ul></ul>で囲まれているだけですが、CSSで編集しやすいようにdivにidを付けて前後を囲みました。（自分でCSSカスタマイズしない場合は必要ありません）
前：<div id=”popular-post”><ul>
後：</ul></div>
そして記事フォーマットはタイトルだけにしてサムネイル画像を表示しないように{title}を残しています。
なぜサムネイル画像を表示しないかと言うと追従領域で常に見える状態なので本文に集中できないという想定です。読者によって感じ方は違うでしょうけどね。
まぁ細かいことだし検証しないとわからないことなのでサムネイル画像があっても全然OKだと思います。というか追従領域でもサムネイル付きのほうがよく見掛けます。
ちなみにサムネイル画像と記事タイトルを表示する場合の記事フォーマットは
<li>{thumb}{title}</li>
というふうになります。
WPP Plus WidgetのCSSカスタマイズ
今書きながらCSSのカスタマイズまで全部書こうとしたらとんでもなく長くなるのですべての細かい説明は断念しましたｗ
簡単にで申し訳ないですけどある程度CSSカスタマイズの経験があるという人はどうぞ。
WordPress Popular PostsのCSSをオフにする
「WordPress Popular Posts」の設定画面で「Use plugin’s stylesheet」をオフにして自分でCSSをカスタマイズできるようにします。
Webフォントで記事タイトルの手前にマークを付ける
Font Awesome（フォントオーサム）を使って記事タイトルの手前に小さなマークを付けます。
CSSでFont Awesomeを使う時に参考にしたサイトはこちら
最初のウィジェットの設定で記事一覧の前後を
前：<div id=”popular-post”><ul>
後：</ul></div>
このように囲っているのでCSSは「#popular-post」を含めて指定して、
|
1 2 3 4 5 6 7 8 9 10 11 |
#popular-post li:before{ content: "\f0f6"; font-family: FontAwesome; font-size: 15px; display: block; width: 1em; height: 1em; position: absolute; left: 1px; top: 6px; } |
このようにフォントを読み込みました。
そしてliのCSSは以下のようにカスタマイズ。
|
1 2 3 4 5 6 7 8 9 |
#popular-post li { font-size: 14px; line-height:150%; list-style-type: none; padding-top: 7px; padding-bottom: 7px; padding-left: 1.7em; position: relative; } |
このようにCSSを設定すると2行目以降も改行が回り込みません。
#popular-post li:before （Webフォント）の部分でpositionがabsolute（絶対位置）になっていて、leftとtopの値を設定することによって本文とは別の部品として扱われるのかな？と思います。
リスト本文の #popular-post li では padding-left: 1.7em; を指定することによって左側にWebフォントが入る隙間を空けています。
ブログによって最適な値は変わる
たぶん上記のCSSタグをそのままコピペしてもブログによってサイドバーの幅やフォントサイズが違うので、
- padding
- margin
- top
- left
これらの最適な値が違ってくると思います。あくまで部分的にパクる参考にどうぞ。
ウィジェットのタイトルをシンプルに
初期設定のままだと、
「【カテゴリ名】」カテゴリーの【自分が設定したタイトル】
のような形式で見出しが2行に渡って表示されたりするかもしれないので、
WordPressの管理画面からプラグイン編集を開いてWPP Plus Widgetの105行目にある記述を編集します。
変更前がこちらで
|
105 |
$title = ($depth > 0 and $cat_name) ? '「'.$cat_name.'」カテゴリーの'.$title : $title; |
変更後がこちらです。
|
105 |
$title = ($depth > 0 and $cat_name) ? '「'.$cat_name.'」の'.$title : $title; |
カギカッコが付いていてカテゴリーだということはなんとなく分かるので「カテゴリー」という文字列を消しました。
これでスッキリ表示されるようになりました。
サイドバーの見出しが大きくて改行されてしまう人などは参考にしてください。
取得されるカテゴリは1個だけ
WPP Plus Widgetの注意点のひとつですが一つの記事に複数カテゴリを設定していてもその中のカテゴリひとつだけから抽出されているみたいです。
ブログのジャンルが統一されていてカテゴリの数が少なくてカテゴリあたりの記事数が多いほど人気記事の精度が上がりそうですね。
効果があるかはアクセス解析しないとわからない
ここまで書いた内容は「きっと●●だろう」という想定でカスタマイズしたにすぎないので本当のところはABテストをしてみないとわからないと思います。
どっちみち自分の目と他人の目は絶対違うのであくまで良いか悪いかの判断は数値を見ないといけないんですよね。
最近地元の友達にブログを見てもらったら視点が違いすぎてブロガーが悪い意味でネットサーフィンに慣れすぎているってことがよくわかります。