WordPressで人気記事をサムネイルありで表示する(WordPress Popular Posts)

この記事は約11分で読めます。

  • LINEで送る

Wordpress Popular Posts

WordPressで人気記事をサムネイルありで表示する方法です。
人気記事は、サイドバーなどに表示しておくことでページビューの向上につながります。

今回はプラグイン「Wordpress Popular Posts」を利用して、
人気記事をサムネイルありで表示する方法を説明します。

WordPress Popular Postsを導入して人気記事表示

「Wordpress Popular Posts」はインストールすると、
そこから、人気記事(閲覧数やコメント数)をカウントしていきます。

表示しなくても、後々使う予定があれば早めに導入して人気精度だけ上げておきましょう。

インストール

Wordpress Popular Posts

「プラグイン > 新規追加」から「Wordpress Popular Posts」を検索します。
直接ダウンロードは以下のページから可能です。
WordPress › WordPress Popular Posts « WordPress Plugins

Wordpress Popular Posts

Wordpress Popular Posts

「Wordpress Popular Posts」を今すぐインストールし、インストール完了後にプラグインを有効化します。

初期設定

Wordpress Popular Posts

インストール直後は画像のように人気記事データがありません。
この状態だと、ウィジェットなどに貼り付けても当然表示されないので、
人気記事データ(閲覧数やコメント数)がある程度たまるまで待ちましょう。

Wordpress Popular Posts

次に、「ツール」から以下の各項目を設定します。

  • Open links in:人気記事リンクを同タブで開く(Current)か、別タブで開く(New tab)かを選択
  • 次のものから閲覧数を記録します:閲覧数カウントのルール、ログイン管理者も含むかどうかを選択
  • デフォルトのサムネール:サムネイル表示時にサムネイルがない記事の場合は、ここで設定したサムネイルが表示
  • 次から画像を選ぶ:サムネイルをどこから取得するかを選択
  • WordPress Popular Postsのスタイルシート:独自のスタイルを適用するかどうかを選択
  • Ajaxを使うウィジェット:キャッシュ系プラグインでの誤カウントを防ぐ
  • キャッシュを空にする:これまで蓄積された人気記事のキャッシュを削除
  • 全てのデータを空にする:これまで蓄積された人気記事カウントを全て削除する

基本的に、インストールしたままの設定で使用できます。
個人的に注意している点は以下の2点です。

  • サムネイルを使用する場合は、「デフォルトのサムネール」を設定する
  • デザインの独自カスタマイズをする場合は「WordPress Popular Postsのスタイルシート」を無効にする

サイドバーにサムネイルつきで人気記事を表示

それでは、サイドバーに人気記事を表示する方法を説明します。
賢威6.1でのデザインカスタマイズ方法も同時に説明します。

ウィジェットの追加

Wordpress Popular Posts

「外観 > ウィジェット」から「Wordpress Popular Posts」をサイドバーに設置します。
細かい設定がウィジェット内で可能なので、1つずつ説明します。

Wordpress Popular Posts

  • タイトル:人気記事を表示する見出しの名前
  • 表示する数:表示する人気記事の数
  • 時間間隔:どの範囲での人気記事を表示するか、「24時間、1週間、1ヶ月、累計」から選択
  • 並べ替え順:順位を付ける基準、「コメント、累積閲覧数、1日の平均閲覧数」から選択
  • 投稿設定:表示内容を選択
  • フィルタ:投稿タイプ(post,page)や除外カテゴリなどを設定
  • サムネール設定:サムネイル表示有無の設定、サイズもここで指定する
  • 統計タグ設定:表示する統計内容を選択
  • HTMLマークアップの設定:独自タグで表示したい場合に、HTMLを記載

それぞれ設定しましょう。
ここまで設定すると、サイドバーの人気記事が表示されます。

Wordpress Popular Posts

しかし、このままではデザインがぐちゃぐちゃなので、スタイルを整えます。

スタイルの調整

出力されるHTMLは以下のとおりです。
しっかり、「<div>」や「リスト」で囲まれているので、スタイル調整はしやすいです。

<div class="contents widget-conts popular-posts">
<h3>1週間の人気記事10選</h3>
<ul class="wpp-list">
<li><a href="http://www.keni-customize.net/sidebar-category-narabikae-699/" title="賢威サイドバーのカテゴリーを並び替える方法" target="_self"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/sidebar-newpost-80x80.jpg" alt="" border="0" width="80" height="80" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a><a href="http://www.keni-customize.net/sidebar-category-narabikae-699/" title="賢威サイドバーのカテゴリーを並び替える方法" class="wpp-post-title" target="_self">賢威サイドバーのカテゴリーを並び替える方法</a> <span class="post-stats"><span class="wpp-views">65 views</span></span></li>
<li><a href="http://www.keni-customize.net/toukou-waku-706/" title="賢威で投稿部分に枠をつける方法(角丸枠、浮かせた影付き枠)" target="_self"><img src="http://www.keni-customize.net/wp-content/uploads/2013/11/keni-customize-80x80.jpg" alt="" border="0" width="80" height="80" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a><a href="http://www.keni-customize.net/toukou-waku-706/" title="賢威で投稿部分に枠をつける方法(角丸枠、浮かせた影付き枠)" class="wpp-post-title" target="_self">賢威で投稿部分に枠をつける方法(角丸枠、浮かせた影付き枠)</a> <span class="post-stats"><span class="wpp-views">46 views</span></span></li>
<li><a href="http://www.keni-customize.net/youtube-umekomi-612/" title="賢威にyoutube動画を埋め込む方法(スマホ表示の幅も合わせる)" target="_self"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/youtube-umekomi-80x80.jpg" alt="" border="0" width="80" height="80" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a><a href="http://www.keni-customize.net/youtube-umekomi-612/" title="賢威にyoutube動画を埋め込む方法(スマホ表示の幅も合わせる)" class="wpp-post-title" target="_self">賢威にyoutube動画を埋め込む方法(スマホ表示の幅も合わせる)</a> <span class="post-stats"><span class="wpp-views">43 views</span></span></li>
<li><a href="http://www.keni-customize.net/column-change-599/" title="賢威6.1でページごとにカラム数を変更する方法" target="_self"><img src="http://www.keni-customize.net/wp-content/uploads/2013/11/keni-customize-80x80.jpg" alt="" border="0" width="80" height="80" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a><a href="http://www.keni-customize.net/column-change-599/" title="賢威6.1でページごとにカラム数を変更する方法" class="wpp-post-title" target="_self">賢威6.1でページごとにカラム数を変更する方法</a> <span class="post-stats"><span class="wpp-views">37 views</span></span></li>
<li><a href="http://www.keni-customize.net/permalink-5/" title="WordPressのパーマリンクはどの形がベストか?" target="_self"><img src="http://www.keni-customize.net/wp-content/uploads/2013/11/eye-catch-80x80.jpg" alt="" border="0" width="80" height="80" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a><a href="http://www.keni-customize.net/permalink-5/" title="WordPressのパーマリンクはどの形がベストか?" class="wpp-post-title" target="_self">WordPressのパーマリンクはどの形がベストか?</a> <span class="post-stats"><span class="wpp-views">30 views</span></span></li>
</ul>
</div>

以下のCSSを追加します。
「外観 > テーマ編集」から「design.css」に追加します。

.popular-posts ul li{
	background: none;
	overflow: hidden;
	clear: both;
	margin: 0;
	padding: 0 0 1.0em 0;
}

.popular-posts img{
	width: 30%;
	float: left;
	padding: 2px;
	border: solid 1px #ccc;
	background-color: #fff;
}

.popular-posts .wpp-post-title,
.popular-posts .post-stats{
	width: 60%;
	float: left;
	padding: 0.5em;
}

Wordpress Popular Posts

このように表示されました。
サムネイルを左側、タイトルと閲覧数を右側に表示しています。
細かな調整は、各ブログに合わせて行ってください。

  • LINEで送る

“WordPressで人気記事をサムネイルありで表示する(WordPress Popular Posts)” への1件のフィードバック

コメントを残す

このページの先頭へ