AFFINGER カスタマイズ ブログ

「WordPress Popular Posts」で任意の記事を順位付きでランキング表示する方法

2018年1月20日

手軽に人気記事ランキングを作成できるプラグインとして有名な「WordPress Popular Posts」

デフォルトでも十分使えるのですが、色々とカスタマイズしたくなりますよね。

そんなカスタマイズの中で、今回ご紹介するのが、このランキング記事自体を自分の好きな記事をピックアップするというものです。

いわゆる、ランキング操作。
不正です(笑)

ブログを続けていると、「PVを稼ぐ記事」と「読んでほしい記事」が違ってくることがありますよね。

例えば、初めて来た訪問者へ自分の会心の記事を見てもらったり、アフィリエイトをやっている人なら成果が多く出ている記事をオススメしたり、なんてことができます。

あと、SEO的にはここに表示される記事がブログの特性を示していると判断される可能性があるようです。

例えば、グルメ記事が多かったら、「このブログはグルメに強い」ということでSEO的にはグルメジャンルが強くなったり、ということです。

そう考えると、結構重要ですよね。

ということで、任意記事ランキングをちょっとしたカスタマイズのおまけと一緒にご紹介します。

デフォルトからのカスタマイズ要素

デフォルトはこのような状態かと思いますが、今回カスタマイズした内容は任意記事ランキングに加えてこちら。

カスタマイズした内容

  • サムネイル間が詰まり過ぎているので、少し余白をつける
  • タイトル「人気記事ランキングTOP5」の文字の大きさを大きくする
  • 1位から5位までの順位表示をつける

この内容を踏まえてカスタマイズ終了後はこのようになります。

順位付きランキングとサムネイル調整

カスタマイズの方法はCSSに追記するだけなので、とっても簡単です。
細かい説明は置いておいて、下記をCSSの一番下に追記してください。

これでランキング表示と窮屈なサムネイル解消ができたかと思います。

順位付けのカラーを変更したい場合は下記をお好きな色にどうぞ。

また、サムネイルの間隔を変更したい場合は下記をお好きな数字にどうぞ。

記述した順に「上、右、下、左」の余白になります。

タイトル文字の大きさを調整したい場合

これで基本的な見え方は問題ないのですが、個人的にはタイトル文字の大きさ「人気記事ランキングTOP5」が少し小さい気がしたので調整しました。

先ほどのCSSへ下記を追記するだけです。

「font-size」をお好きな数字に変更ください。

また、タイトル周りの余白が気になる人は「margin」の数字を調整ください。
こちらも、記述した順に「上、右、下、左」の余白になります。

任意の記事ランキングのカスタマイズ実装方法(CSS)

見え方のカスタマイズが完了したところで、いよいよ任意の記事をランキングしていきます。
「タグ」と「WordPress Popular Posts」のウィジェット設定を施します。

「タグ」の設定

やることは簡単。
これ用のタグを作成して、表示したい特定の記事にこのタグを追加するだけです。

私は「人気記事TOP5」という名前にしましたが、なんでもOKです。

記事下やサイドバーにタグ表示を設定している人は、実際の見え方を意識した名前にしましょう。

「WordPress Popular Posts」ウィジェットの設定

続いてウィジェットの設定を変更していきます。
変更した箇所はこちら。

  • 計測期間を「過去24時間」
  • タクソノミーのタグ設定
  • 閲覧数を非表示

タクソノミーのタグに先ほど設定したランキング用のタグの数字を設定します。

確認方法はタグ設定の編集画面のURLで確認できます。

この赤線部分がタグNoなので設定しましょう。

計測期間の設定に関しては、長い期間にしてしまうとランキングが固定されて面白くないので、24時間としましたが、お好みでどうぞ。

閲覧数の非表示に関しては、任意のランキングになるため、表示していると「ランキングの順番違うじゃん!」ということになってしまいます。

カスタマイズは以上です!
やり始めると、とことんこだわってしまうから危ないですよね、、、。

上手くいきましたでしょうか。
誰かのお役に立てれば幸いです。

-AFFINGER, カスタマイズ, ブログ