WordPressで記事本文の下にカテゴリごとの人気記事ランキングを載せる方法

WordPressで、記事本文の下にカテゴリごとの人気記事を載せる方法。
具体的にはこんな感じにする↓

これの目的は今見ている記事に関連する人気記事を表示することで、サイトを回遊してもらいやすくする。それによって、いろんな記事を見てもらいやすくするわけだ。

さて、自分のサイトではなんとか完成したのだが。
かなりいろいろやったので、これ時間が経ったら、まず思い出せないと思う。

(´・ω・｀) 今もすでにあやふやな状態

というわけで、手順の整理も兼ねて、忘れないようにメモしておきます。

ちなみに、ＰＨＰをいじって実現する方法もあるようですが、今回はプラグインを使用してる方法です。
あと、ＣＳＳで見た目も調整します。

参考にしたサイト

↓まず、こちらのサイト様を参考にさせていただきました。感謝！！

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

で、手順の詳しい説明は上記のリンク先にあるので、ここではざっくりと要約していく。

おおまかな流れ

やることとしては、WordPressで人気のプラグイン「WordPress Popular Posts」を基本として、「WPP Plus Widget」というプラグインをさらに追加することで、カテゴリ別に人気記事が表示できるようになる。

WPP Plus Widgetを手に入れて有効化まで

WPP Plus Widgetは公式プラグインではない。
だから、作者様のサイトからダウンロードが必要。それがこちら↓

　参考：WPP Plus Widget | 8wired

ダウンロードしたらWordPressの管理画面からインストール。
［プラグイン］→［新規追加］→［プラグインのアップロード］→ ファイルを選択する →［今すぐインストール］→ インストール後［有効化］までを行う。

もちろん、［WordPress Popular Posts］のほうも有効化までしておく。

ウィジェットの設定

先ほどのリンク先にも、ウィジェットの設定について説明されているが、ここからがこちらとは少し異なってくる。

リンク先ではサムネイルを表示して、そのウィジェットをサイドバーに配置させる前提。

でも、こちらはサムネイルは表示しない。

それを踏まえて、ウィジェットの各欄への設定について詳しく書いていく。

［タイトル］欄

なんでもよい。リンク先のとおり「人気記事」と入力した。

［深さ］欄

カテゴリの深さ。「１」とした。
この欄は、もしも親 → 子 → 孫 カテゴリがあったとして。
孫カテゴリの記事を表示している場合に、「１」と設定しておくとランキングが親カテゴリでの集計となる。
これは孫カテゴリの記事数が少ない場合に便利。

［パラメータ］欄

とりあえず、こんな感じで。

上から順に「表示件数」「集計期間」「集計の方法」をそれぞれ指定している。
もっと詳しく知りたい場合は、先ほどのリンク先で説明してくださっているので参照。

表示記事を除外する

これはその名のとおり、オンでしょう。ありがたい機能ですね。

［フォーマット設定］欄

あとでCSSの対象にしやすくするために少し変更する。
変更内容は、ここもリンク先のとおりとさせていただいた。

［記事フォーマット］欄

リンク先と違って、こちらはサムネイルは表示しない。
タイトルだけにするので、下記を入力する。

ここまでがウィジェットの設定となる。

ランキングを表示する設定

実は、ウィジェットの設定だけではランキングの数字がでない。
これは別に設定する必要がある。

ランキングの数字が不要であれば、この項の手順は必要ない。
でも、ランキングの数字が無いと寂しいよね。

(｀・ω・´)o だから頑張る！

ｊｓは使わず

参考にさせていただいているリンク先だが、ランキング数字の部分については、Jsを使った方法となっていた。

管理人はそれ自信ない。

(´・ω・｀) ｊｓ無理っすよ･･･

というわけで他の方法を探す。

するとＣＳＳでできることがわかる。

(｀・ω・´)b ｃｓｓならいける！

ＣＳＳの設定

ＣＳＳの設定。↓これはこちらのサイトを参考にさせていただいた。

参考：ヨッセンス

このサイト好きなんですよね。
管理人さんの説明も上手だし、とても参考になります。

設定したＣＳＳ

設定したＣＳＳです。
それと、管理人はWordPressのテンプレートはSimplicityを使っていますので、その場合のＣＳＳです。

各部分の説明はもう省略させていただく。
一応、/* */で簡単な説明は入れてあります。

もしも上記のCSSを参考にされる方がいましたら、数値はサイトによって異なると思うので微調整してください。

ていうか、おかしな点ありましたらご指摘いただきたい。

(´・ω・｀) 大ざっぱな独学ですゆえ･･･

あと、これ、実はどこかのサイトで公開されていたＣＳＳもかなり参考にさせていただいたのだが。
そのサイトを見失ってしまいました･･･

(´・ω・｀) すまぬ･･･