Sibatabi

旅の経験を情報として配信するブログ

「WordPress Popular Posts」の人気記事一覧をカテゴリ別表示&サイドバー以外に追加するカスタマイズ

 2016/02/10 
stinger6

今回ブログをカスタマイズしていく中で、プラグイン「Wordpress Popular Posts」を使って、人気記事一覧をサイドバー以外の部分に追加したり、カテゴリ別に表示したりする方法を学んだので備忘録も兼ねてまとめます。

 

今回行ったカスタマイズ

人気記事一覧をトップページのヘッダー下に表示させる

「STINGER6」カスタマイズまとめ

人気記事一覧をトップページヘッダーと、記事一覧・サイドバーの間に追加しました。

 

記事下に同じカテゴリ内の人気記事一覧を表示させる

「STINGER6」カスタマイズまとめ

記事本文下に、今開いているカテゴリと同じカテゴリ内の人気記事一覧を表示するようにしました。

 

カテゴリ一覧ページのヘッダー下にカテゴリ内人気記事一覧を表示させる

「STINGER6」カスタマイズまとめ

カテゴリ一覧ページでは、ヘッダー下に同じカテゴリ内の人気記事一覧を表示するようにしました。

 

モバイル版での表示

「STINGER6」カスタマイズまとめ

3パターンとも全て上記のようなデザインにしています。

 

PHPファイルの編集

トップページのヘッダー下人気記事一覧

home.phpに上記コードを追加しています。

PCとモバイルで条件分岐をして、出力するサムネイルサイズを変えています。

 

記事下のカテゴリ内人気記事一覧

single.phpの入れたい部分に上記コードを追加。

デザインは「関連記事」と同じになるように<div id=”kanren”>で囲いました。

 

カテゴリ一覧ページのヘッダー下カテゴリ内人気記事一覧

archive.phpに上記を追加。

 

style.cssの編集

共通部分に上記を追加。

 

上記をPC部分に追加。

 

以上で、カスタマイズ完了です。

デザインについては、適宜cssで調整してみてください。