MENU
  • Services
  • Contact
ラノベ・ガジェットのコメットキャットの趣味ブログ
  • Services
  • Contact

WP Popular Postsをオリジナルデザインにカスタマイズして人気記事ランキングを表示する

2022 5/24
ウェブデザイン
WordPress
2022年5月24日
comet cat

人気のWordPressプラグインである、WP Popular Posts。
こちらのサイトでも使っており、人気記事ランキング表示する際にとても便利です。

使い方はプラグインをインストールし人気記事ランキングを表示したい箇所に、「wpp_get_mostpopular()」を記述するだけ。

そのまま使うと記事ランキングがデザインと合わないことが多いので、オリジナルデザインにできるようにHTMLの出力を変更して、CSSのカスタマイズをやりましょう。

よくあるカスタマイズと今回のカスタマイズの違い

記事執筆時点の情報ですが、WP Popular Postsで人気記事ランキング表示し、オリジナルにカスタマイズする方法は複数あります。

よくある記事では以下のような形が多い。

  • functions.phpに記述し、wpp_get_mostpopular()の出力自体を変更する
  • functions.phpに記述し、wpp_post等をフックし新しい関数を作る
  • wpp_get_mostpopular()のパラメーターを変更して少し変える

この記事では上記とは違い、WP_Queryのような形で記事を取得し使う方法を紹介します。
なので、PHPを調整する必要はなく自由なHTMLに出力するだけになります。

下準備:管理画面から設定を変更

WP Popular Postsをホームページにインストールし、管理画面よりカスタマイズしやすい状態に設定を変更します。

WP Popular Postsの設定画面を開き、画像のツール部分をクリック。

管理画面の設定より、ツールをクリック

ツール画面が開いたら、一番下までスクロールすると画像のような部分が出てきます。

「プラグインのスタイルシートを使う」が最初は有効になっているので、無効に変更します。これで、元からかかるスタイルが無効になります。

WP Popular Postsのスタイルシートを無効にする

HTML自体をオリジナルのものに変更するので、あってもなくても影響は無いのですが使わなければ読み込む必要のないスタイルシートなので必ずやっておきましょう。

人気記事のデータを取得する

人気記事のデータを取得するために、WP_Queryと同じようにパラメーターを配列にまとめます。
今回は3つだけ

$wpp_args = array (
  'range' => 'monthly', // ランキングの期間指定
  'post_type' => 'post', // 投稿タイプ指定
  'limit' => 3, // 取得する順位
);

全て書くと大量にあるので、もっとカスタマイズしたい方は公式の情報を参照してください。

配列を「\WordPressPopularPosts\Query」に使います。

$wpp_query = new \WordPressPopularPosts\Query( $wpp_args );

この時「get_mostpopular()」を使うと、非推奨なので警告がでます。
必ず\WordPressPopularPosts\Queryを使うようにしてください。

foreachで取得した記事を表示する

foreachを使って記事を表示します。基本的な形はこちら。
指定したパラメーターが入っているので、echoを使ってどこにでも出力できます。

$rank_num = 0; // ランキングの数字を表示するための変数
foreach( $wpp_query->get_posts() as $rank_post ){
  $rank_num++;
  echo $rank_post->id // 記事ID
  echo $rank_post->title // 記事タイトル
~~~~

パラメーターを扱うのがよくわからない….という方はちょっとめんどくさいですが、以下のようにget_postにidを入れることで記事情報を改めて取得することもできます。

$rank_post_content = get_post($rank_post->id);

パラメーターを細かく取得しなくても記事情報が取れます。

最後に

いろんなカスタマイズがありますが、処理の速さや、わかりやすさ等々の人それぞれの基準でやり方を選ぶと良いのかなと思います。

WP Popular Postsのgitのwikiでは細かく説明が書いてあるので、カスタマイズがとてもしやすいプラグインだと思います。

参考

  • 【公式】WP Popular Postsのフィルター一覧
  • 【公式】WP Popular Postsのパラメーター一覧
ウェブデザイン
WordPress
よかったらシェアしてね!
  • URLをコピーしました!
コメットちゃんのグッズを見る

Recent Posts

  • 2024年を振り返る
  • 第8回 2024年11月版 独りよがりな 小説家になろう・カクヨムおすすめ作品紹介してみました
  • 第7回 2024年10月版 独りよがりな 小説家になろう・カクヨムおすすめ作品紹介してみました
  • 【WordPress公式テーマ】コンセプトと今後のアップデート予定を紹介
  • WordPress公式テーマが登録されたので、制作中のお話をブログにしました

Recent Comments

  1. 小説家になろうのランキングっていくつある?仕組みも調べてみた に 小説家になろうのランキング、更新はいつ?どのタイミングで行われるの? | COMET CAT BLOG より

Archives

  • 2024年12月
  • 2024年11月
  • 2024年10月
  • 2024年9月
  • 2024年8月
  • 2024年7月
  • 2024年6月
  • 2024年5月
  • 2024年4月
  • 2024年3月
  • 2024年2月
  • 2024年1月
  • 2023年12月
  • 2023年11月
  • 2023年10月
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年3月
  • 2023年2月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年3月
  • 2021年10月
  • 2021年8月
  • 2021年7月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2020年10月
  • 2020年9月
  • 2020年7月
  • 2020年6月
  • 2019年10月
  • 2019年9月
  • 2019年7月
  • 2019年5月
  • 2019年3月
  • 2019年1月
  • 2018年12月
  • 2018年8月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月

Categories

  • Amazonレビュー
  • ウェブデザイン
  • ゲーム
  • ブログ
  • 写真と動画
  • 小説を読む
  • 趣味

Amazonのアソシエイトとして、Comet Catブログは適格販売により収入を得ています。

  1. ホーム
  2. ウェブデザイン
  3. WP Popular Postsをオリジナルデザインにカスタマイズして人気記事ランキングを表示する
  • Services
  • Contact

© ラノベ・ガジェットのコメットキャットの趣味ブログ.

目次