人気記事をカテゴリ別にサイドバーへ表示、Gushテーマへの合わせこむよ…ちょっと試行錯誤中とか。

公開日：2014/09/17 最終更新日：2014/11/10

ℹ️本記事にはPRが含まれています。

SiSO-LAB

表示中の記事に合わせてサイドバーの人気記事カテゴリを切り替えようと思い、楽しくあれこれやっています。昨日、とりあえず先人の知恵を拝借しまくって表示までできたので、今日はGushの表示に合わせ込み中です。

本記事は、WordPress V3.9.2と無料テーマのGush V1.1.0にて動作確認を行っています。

WordPress Popular Postで表示記事に合わせてカテゴリ別表示

ここまでの話を要約ですが、SiSO-LABはネタジャンルが広いため、何も考えずに人気記事リストを表示するのはあまり親切でないかな、と思います。iPhoneネタ目的にたどり着いたのに、横を見るとパソコン関係ならともかく、アウトドア関係とか…。たまに合致！することもあるかもしれませんが。

そんなわけで、人気記事を表示するためのプラグイン、WodrPress Popular Postsのテンプレートタグという機能を使い、現在表示している記事のカテゴリに合わせて人気記事を表示する機能を実装中です。

既にいろいろとネタとなる情報がネットに上がっていたので、割と簡単に表示するところまでできました。

今日は、Gushに合わせて書式表示を変更しています。

Gushの「NEW エントリー」に書式を合わせるには？

カテゴリ別人気記事を表示できるサンプルをいくつか参考にさせていただいているのですが、どれも、「＜li＞」というタグを使って記事リストを表示しています。Gushではちょっと異なっているようです。

Gushの「New エントリー」スタイル構造

Gushでは、「NEW エントリー」を表示しているソースコード（sidebar.php）を解析してみると、以下のような構造で表示を行っているようです。


＜div class="side_contents"＞
|　　　＜h4＞NEW エントリー＜/h4＞
|　　　＜div class="side_new"＞
|　　　|　　　＜div class="side_thumb"＞サムネイル表示＜/div＞
|　　　|　　　＜div class="side_title"＞タイトルと日付表示＜/div＞
|　　　＜/div＞
|　　　＜div class="clear"＞＜/div＞
＜/div＞

「＜div class=”side_new”＞～＜/div＞」にて１つの記事情報を定義し、その後、「＜div class=”clear”＞＜/div＞」をしてからループしてリスト表示を行っているようです。

このあたり、どういうやり方が一般的とかはよくわからないのですが、スタイルもGushに登録されているものを使用して完全に合わせこんでしまおうと思います。

ということで、WordPress Popular PostsがHTML出力する時に最初に出力するHTMLを指定する「wpp_start」と、最後のHTMLを指定する「wpp_end」、それから「post_html」にこれらのスタイル名を設定するようにします。

「post_html」ですが、これはサムネイル、記事名、日付を囲うHTMLを指定することができますので、記事１件ずつに指定される書式を指定します。

また、今回は日付を表示する必要がありますので、stats_date_formatの指定をする必要があります。

Gushの「NEW エントリー」のサムネイル画像サイズ

同じく、sidebar.phpのソースコードを眺めていてわかったのですが、Gushの「New エントリー」のサムネイルサイズは100×100でした。


<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumb100' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
<?php endif; ?></a></div>

WordPress Popular Postsのサムネイル画像サイズは、「thumbnail_width」と「thumbnail_height」にて設定可能ですので、パラメータ指定する時に100×100にすることにします。