黒色ワナビーの住処

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

Stinger3のサイドバーに人気記事一覧を違和感なく追加する方法

      2015/06/18

ども。昼よりも夜の方が元気な生き物、くろわなです。

昨日の記事で、当ブログにStinger子テーマである『CANDY CRAZY』を導入した件をお伝えしたのですが、それに併せてサイドバーにもいくつか新しいウィジェットを追加しています。

目立つ追加要素としては「Twitterのタイムライン」と「今週の人気記事一覧」の部分でしょうか。

今日はこのうち「人気記事一覧」をサイドバーに追加する方法、しかもStingerテーマに違和感なく馴染ませるやり方についてご紹介したいと思います。

 

スポンサーリンク

 

Stinger3のサイドバーに自然な形で人気記事一覧を差し込む方法

必要となるプラグイン

必要となるプラグインは『WordPress Popular Posts』です。
このプラグインの導入方法についてはこちらのブログ記事などを参考にされるとイイ感じだと思います。

人気記事一覧の追加に成功。しかし物足りない……

Stinger3に『WordPress Popular Posts』を追加したところ

さきほど紹介した記事を参考にプラグインを導入し、サイドバーに『WordPress Popular Posts ウィジェット』を追加した状態が上の画像。赤枠で表示した部分が、今回追加した人気記事のリストになります。

この時点で人気記事一覧をサイドバーに表示させるという目的は達成出来てますが、デザインがシンプルすぎてどうにもパンチが足りません。せっかくの人気記事なので、もっと力強く閲覧者様にアピールしていきたいところです。

またデザインに統一感を持たせるという意味でも、もう一工夫欲しいところです。

Stinger3のサイドバーには標準で新着記事のリストが挿入されていますので、こちらのデザインを参考にブラッシュアップしていくことにしましょう!

WordPress Popular Postsのカスタマイズ

WORDPRESSの管理画面より外観→ウィジェットと進み、先ほど追加していただいた『WordPress Popular Posts』の設定画面を開きます。

タイトル、時間間隔、並べ替え順、投稿タイプ辺りの設定は、あなたのお好みでお選びください。

「投稿サムネールを表示する」の項目にはチェックを。チェック後に保存ボタンを押すと、幅・高さの設定項目が表示されます。新着記事一覧に併せるため、それぞれ100ピクセルに設定しなおしましょう。

次が最重要ポイントです。「カスタムHTMLマークアップを使う」にチェックを入れ、いったん保存します。人気記事一覧に対するマークアップ方法を変更できるようになりますので、ここをStingerの新着記事のマークアップ構造と同じになるように変更しましょう。

下記のとおりに入力して貰えればうまくいくはずです。

タイトルの前:

<h4 class="menu_underh2">

タイトルの後:

</h4>

投稿の前:

<div id="topnews"><div>

投稿の後:

</div></div>

投稿用HTMLマークアップ:

<dl>
 <dt>{thumb}</dt>
 <dd> {title} <br />{stats}</dd>
 <p class="clear"></p>
</dl>

上記のように設定して頂ければ、下記画像のように新着記事一覧と同じ形式のスタイルが適用されるはずです。

Stinger3に人気時期を追加!

デフォルト状態のリストと比べると、こちらの方が人気記事が目立ってイイ感じですね。

子テーマを利用する場合も同様の設定でOK!

Stinger3のid、classをそのまま引用してスタイルを当てているため、Stinger対応の子テーマであれば、テーマ変更後も全体の統一感を保つことが出来ます。

下の画像は『CANDY CRAZY』導入後に、上記の設定を行った状態。

子テーマ適用後の人気記事一覧

新着記事部分のスタイル変更に併せて、人気記事一覧部分のスタイルも変更されていることが分かりますね。

簡単な変更でページビューアップが見込めるこのカスタマイズ。皆さんも是非お試しください!

 

【2015/05/13追記】
関連記事として、Stinger5のサイドバーにカテゴリ別の人気記事一覧を追加する方法! を公開しました。宜しければこちらもドウゾ。

 - ブログ運営 ,