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

人気の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では細かく説明が書いてあるので、カスタマイズがとてもしやすいプラグインだと思います。

参考

よかったらシェアしてね!
  • URLをコピーしました!
目次