WORDPRESS

WordPressにて人気記事一覧を導入!デザインを統一する方法

更新日:


YUKA863_goanai15201954-thumb-1000xauto-18747

<スポンサーリンク>

今回はブログカスタマイズテーマ、WordPressのサイドバーに人気記事一覧を表示する方法です!

サイトのサイドバーに人気記事を表示しておくと、訪問者がそのページを見てくれる可能性が高まります。そこで今回はサイドバーに人気記事一覧を表示する方法を紹介します。プラグインを一つインストールし、サイドバーウィジェットに追加すればいいのですが、それだけだとデザインがいまいちなので、新着記事(テーマ「Stinger5」)とデザインを統一する方法も紹介します。

 

人気記事一覧を表示する方法

1.WordPressのプラグイン『WordPress Popular Posts』をインストールして、有効化します。

2.管理画面から【外観】⇒【ウィジェット】を選択します。

3.『WordPress Popular Posts』の項目がありますので、メニューに加えます。

以上で人気記事一覧がサイドバーに表示できます!簡単ですね。

 

人気記事一覧をカスタマイズ

WordPress Popular Posts』をインストールして有効化しただけだとシンプルなリンクのみになりますので、ちょっと物足りない感じがします。そこでデザインに統一感を持たせるためにも「新着記事」と同じデザインにしてみましょう。

1.まずはウィジェットに追加した『WordPress Popular Posts』の設定を以下のようにします。

人気記事一覧

Title:     表示したい項目名を設定してください。(ここでは「人気記事一覧」)

Show up to:   表示した記事数を設定します。(ここでは5つ)

Post settings:  「Display post thumbnail」にチェックを付けて、サイズを縦100px横100pxにしてください。
HTML Markup settings:「Use custom HTML Markup」にチェックを付けて以下のように設定してください。

Before/after title: 空白のままでOKです
Before/after Popular Posts:前半<div id="kanren">、後半</div>
Post HTML Markup:
<dl class="clearfix">
<dt>{thumb}</dt>
<dd>
<h5>{title}</h5>
<p>{stats}</p>
</dd>
</dl>

以上で保存を押下すると完了です。

これで新着記事と同じデザインになって統一感が出てるはずです!

 


<スポンサーリンク>

<スポンサーリンク>

おすすめ記事

1

ネットでお金を稼いで汚い中年どもから独立する方法Content1 ネットでお金を稼いで汚い中年どもから独立する方法1.1 サラリーマンはつらいよ2 ネットでお金を稼ぐ方法【初級編】2.1 お小遣いサイ ...

2

<スポンサーリンク> Amazonでポチる前に知っておくべきお得な裏ワザ・購入方法Content1 Amazonでポチる前に知っておくべきお得な裏ワザ・購入方法2 【初級編】Amazonのお得な裏ワザ ...

-WORDPRESS

Copyright© IT虎の穴 , 2017 AllRights Reserved Powered by AFFINGER4.