黒色ワナビーの住処

フリーゲーム・ブラウザゲームをやりながら筋トレで体を鍛えるブログ

Stinger5のサイドバーにカテゴリ別の人気記事一覧を追加する方法!

      2015/05/27

以前、「Stinger3のサイドバーに人気記事一覧を違和感なく追加する方法 」という記事を書きましたが、今回はそれの応用編になります。

 

今回のカスタマイズで目指すモノは下記の2点!

・Stinger5のサイドバーに人気記事一覧を違和感なく溶け込ませる。
現在表示しているページのカテゴリに応じた人気記事一覧を表示させる

1つ目の項目は前回Stinger3に対して行ったカスタマイズと同じやり方で達成できそうです。
ただし、Stinger3とStinger5で内部のHTML構造が変わっているので、それを踏まえた調整が必要となります。

2つ目のカテゴリ別表示が今回のカスタマイズの肝ですね。

以前からカテゴリ毎の人気記事表示はやってみたいと思っていたのですが、ネットで紹介されている方法の多くが、PHPコードの編集を伴うものばかりだったので敬遠していました。

私以外にも、同じような思いで断念された方は多いのでは?

でもご安心を。今回紹介するやり方ではPHPを弄る必要はありません
CSSについても、現在利用中のStingerテーマのCSSをそのまま適用しますので変更不要です!

スポンサーリンク

お手軽! Stinger5のサイドバーにカテゴリ毎の人気記事一覧を差し込む方法!

必要となるプラグイン

必要となるプラグインは2つ。

WordPress Popular Posts』と『WPP Plus Widget』です。

『WordPress Popular Posts』はインストールして有効化だけして貰えばOK!

『WPP Plus Widget』については、公式プラグインではないため作者様のサイトからダウンロードする必要があります。作者様のサイトはコチラ

設定方法については、ココとかココを参考にしてみてください。

 

デザインに統一感を持たせるための一工夫!

『WPP Plus Widget』を使うことで、カテゴリ別の人気記事一覧の表示までは出来たかと思います。

ここから追加した人気記事一覧をStinger5に馴染ませるためのカスタマイズを行っていきます。

まずはサムネイル画像のサイズ設定から行います。

Stinger5の「NEW POST」の表示に併せたいので、「thumbnail_width」と「thumbnail_height」の値を100に変更してください。

他のパラメーターについては好みで変更して頂ければ大丈夫だと思います。

続いての設定はフォーマット設定の所です。
テーマが持つスタイルを使いまわすために、Stinger5の「NEW POST」と同じHTML構造となるように変更しましょう。

下記のとおり入力して貰えれば大丈夫かと思います。

(注:当方Stinger5のVer20141227を利用して動作確認をしています。最新Verでは一部のマークアップ構造が変わっているとのことですので、ご利用の際はご注意ください)

記事一覧の前:

<div id="kanren">

記事一覧の後;

</div>

記事フォーマット:

<dl class="clearfix">
  <dt>{thumb}</dt>
  <dd>
    <h5>{title}</h5>
    <p>{stats}</p>
  </dd>
</dl>

 

子テーマを利用する場合も上記設定のままで問題なし!

前回のカスタマイズ時にも述べましたが、Stinger5が使用しているid、classをそのまま引き継ぐ形でスタイルを当てていますので、Stinger5対応の子テーマであれば、上記設定そのままで利用することが出来ます!

私自身、Stinger5用の子テーマである「SIMPLESTER」を愛用していますが、上記設定のままで、デザイン崩れなどもなく快適に利用できています。

人気記事一覧サンプル

 

カテゴリ毎にリストの表示内容を切り替えることで、ブログに来てくれたお客さんの興味に合致した記事をオススメ出来る可能性が上がります。

うまくいけばPVアップにも繋がりますので、是非お試しください!

 - ブログ運営 ,