WordPress Popular Postsカスタマイズ・Luxeritasでカテゴリーごとに人気記事を表示

2018年3月8日ITwordpress, カスタマイズ

WordPress Popular Posts
本記事の目標:プラグインはWordPress Popular Postsのみを利用して、カテゴリーごとの人気記事ランキングをサイドバーに表示させる。人気記事のデザインをLuxeritas(ルクセリタス)のサイドバーになじませる。

スポンサーリンク

カスタマイズの流れ

  1. カテゴリーごとに人気記事を抽出するPHPを作成・子テーマに保存
  2. 上記PHPをショートコード化できるようなPHPをfunctions.phpに追記
  3. WordPress Popular Postsのスタイルを子テーマのCSSに追記
  4. ショートコードを書いたテキストウィジェットをサイドバーに追加

カテゴリーごとに人気記事を抽出するPHPを作成

まずは、こちらのPHPを「任意の名前.php」ファイルとして作成。子テーマ内のフォルダに保存する。

このPHPはアフェリ課様のWordPress Popular Postsで人気記事の表示とカスタマイズ方法を参考に記述いたしました。

PHPの変更点

アフェリ課様の元のPHPに対して上記PHPは下記変更を行いました。

  1. thumbnail_width ’70’だったところを’100’に変更
  2. thumbnail_height ’70’だったところを’100’に変更
  3. div class=”widget popular-posts” を削除
  4. 「php echo $categoryname;」人気記事 を削除
  5. ‘excerpt_length’ => ’40’を追加
  6. ‘wpp_start’ ‘wpp_end=’ ‘post_html’の内容を変更

1.2はサムネイルの画像サイズ変更。
3.4.5.6はLuxeritas(ルクセリタス)のデザインを人気記事一覧に適用させるための変更。

‘excerpt_length’ => ’40’を追加

アフェリ課様のPHPは抜粋を表示させるものではなかったため、そのままでは{excerpt}が表示できず。抜粋の文字数を指定するパラメータを追記して対応。パラメータに関して、下記記事に詳しく書いてあり勉強になりました。
参考記事:WordPress Popular Postsのカスタマイズ方法や使い方

wpp_start’ ‘wpp_end=’ ‘post_html’の内容を変更

アフェリ課様のPHPはWordPress Popular Postsのデフォルトのマークアップでしたが、どらみ様のCSSをそのまま適応させるため(後述します)PHPを書き換えました。どらみ様のCSSの方を書き換えることも検討しましたが、変更箇所はまとめた方が覚えやすいと思ったので、PHPを変更しておきました。

PHPをショートコード化

Luxeritas(ルクセリタス)の作者 るな様のブログにて紹介されていた「WordPress でプラグイン使わずにウィジェットで PHP コード動かす」を利用してショートコード化を行う。

るな様のブログでは、テキストウィジェットにショートコードを記載すると紹介されていますが、カスタムHTMLウィジェットでも同様の手順でショートコードが使えます。

WordPress Popular PostsのスタイルをCSSに記述

子テーマのCSSにこちらを追記する。

このCSSはどらみ様のWordPress Popular Postsのランキング表示をLuxeritas(ルクセリタス)の新着表示となじませるからの転載です。近いうちにデザインを少々変更するつもり。その時は、こちらのCSSも書き換えます。

PHPマークアップ部分変更の理由

WordPress Popular Postsデフォルトのカスタム HTML マークアップ

どらみ様記述のカスタム HTML マークアップ

どらみ様のマークアップ部分のhtmlがデフォルトと異なるため、PHPのマークアップ部分を書き換えました。

ショートコードを書いたテキストウィジェットをサイドバーに追加

WordPress Popular Posts
テキストウィジェットかカスタムHTMLウィジェットのタイトルに「人気記事」と書き、本文にショートコードを記述すれば終了です。

番外:WordPress Popular Postsウィジットの設定

デフォルトのマークアップのclassの表記とCSSのclassの表記が異なってます。カスタムした人気記事のウィジェットではなく、WordPress Popular Postsオリジナルのウィジットを使用する際、写真のようにカスタム HTML マークアップの記述変更をお忘れなく。
WordPress Popular Posts

スポンサーリンク