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

公開日:  最終更新日: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>」にて1つの記事情報を定義し、その後、「<div class=”clear”></div>」をしてからループしてリスト表示を行っているようです。

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

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

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

また、今回は日付を表示する必要がありますので、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にすることにします。

しっかり下調べしたら後は実装するだけ?

とまあ、要素的な部分はわかりましたが、あらら実際に書いてみるとすんなり行きせん。ちょっとだけ表示がずれちゃったりとか…主に「wpp_start」、「wpp_end」、「post_html」に悩み中です。

もう1つは、WordPress Popular Postsで日付を表示させると、どうしても「posted on」という文字列が日付の前に付いてしまいます。ちょっとネットで調べてみましたが、オプションで外れそうもないですね…。

なんか微妙に違うのも嫌だし、だからといってWordPress Popular Postsのソースコードをいじるのもどうかと思います。そんなわけで、Gushには申し訳ないのですが、Gushの「NEW エントリー」表示の方に「posted on」を付けちゃおうかな?ともくろみ中です。

 

今日の一言二言三言

 

しっかり練習したら

あとは本番を楽しむだけさ!

 

みたいなことを、ジャズ・テナーサックス奏者のスコット・ハミルトン氏が何かのインタービューで答えていました。かっちょいいっす。

 

表示記事と同じカテゴリの人気記事をサイドバーへ表示

SiSO-LAB WordPress Popular Postsを使うと簡単に人気記事を表示することができますが、一歩突っ込んだ使い方をして、表示記事と同じカテゴリの人気記事を表示できるようにしてGushに組み込もうとアレコレしています。

まとめ記事

  • このエントリーをはてなブックマークに追加
  • Pocket

関連前後記事

Your Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

*

PAGE TOP ↑