WordPress Popular Postsで人気記事の表示とカスタマイズ方法

ブログの回遊率を上げるために、サイドバーや記事本文の周辺に最新投稿や人気記事、関連記事を掲載して、ブログ内の他のページへと誘導します。

今回はWordPressプラグイン「WordPress Popular Posts」を使った人気記事の掲載方法をご紹介します。

通常のウィジェットを使った基本的な使い方から、ページごとに分岐する2通りの方法です。

カテゴリページはそのカテゴリの人気記事、記事詳細ページはその記事が属するカテゴリの人気記事、それ以外は全カテゴリの人気記事を掲載します。ランキング形式らしくサムネイル画像の左上に「1」「2」といった数字をCSSで指定して自動で貼り付けます。

WordPress Popular Postsの設置方法と使い方

WordPress管理画面から「プラグイン」→「新規追加」を選択し、検索窓から「WordPress Popular Posts」を検索してください。表示されたWordPress Popular Postsの「いますぐインストール」ボタンを押します。

Toolの設定

WordPress Popular Postsプラグインのインストールが完了し、管理画面メニュー「設定」の中に「WordPress Popular Posts」が追加されます。
「Tool」タブメニューから設定を行います。

Thumbnails

Default thumbnailは、人気記事一覧でサムネイル表示する画像が記事になかった場合に表示させる画像です。そのままでも「No Thumbnail」という画像が表示されますのでデフォルト（初期値）のままでいいと思います。

Pick image from（表示画像の指定）は次の3つ。

• Featured image（アイキャッチ画像）
• First image on post（記事に最初に表示される画像）
• Custom field（カスタムフィールド）

基本的には記事ごとに、その記事の象徴となるアイキャッチ画像をアップロードしていきますので、「Featured image」を選択します。「Custom field」を指定した場合、「Custom field name」項目欄が表示されますので、カスタムフィールド名を記入します。

Data

Log views from（閲覧数の記録方法）は次の3つ。

• Visitors only（訪問者のみ）
• Logged-in users only（管理画面のログインユーザーのみ）
• Everyone（全アクセスユーザー）

「Visitors only」にしておかないと、おそらく一番閲覧するであろうあなたの閲覧数までカウントされてしまい、性格な数値を取ることが出来ません。
私はこのブログアフィリ課を閲覧する時は、常にWordPressにログオンした状態を保っています。

これ以外の項目はデフォルト（初期値）のままで問題ないと思います。

しばらくしてデータ蓄積されるにつれ、Statsタブに24時間別、1週間（7日）別、30日別、全データ別のランキングが表示されます。

ウィジェットで人気記事を表示

WordPress管理画面の「外観」→「ウィジェット」に移動します。

「ウィジェット」ページの左側にある「利用できるウィジェット」の「WordPress Popular Posts」をクリックして、人気記事ウィジェットを表示させたい右側にあるウィジェット名を選択した後に、「ウィジェットを追加」ボタンを押します。

右側にあるウィジェットは、テーマごとに異なります。通常はサイドバーに設置しますので、サイドバー用のウィジェットを選択します。

Title:

「人気記事」「今月の人気記事」など、ウィジェットのタイトル名を記入します。

Show up to:

ウィジェットに表示させる記事数を記入。ベスト10の場合は、10を記入。

Sort posts by:

記事の並び順の基準となるものを次の3つから指定します。

• Comments（コメント）
• Total views（累積閲覧数）
• Avg. daily views（１日の平均閲覧数）

基本的には、Total Views を指定して、閲覧回数を基準とした人気記事順にします。

Time Range:

ランキングの期間を次の4つから選択します。

• Last 24 hours（24時間）
• Last 7 days（直近の1週間）
• Last 30 days（直近の1ヶ月）
• All-time（累積）

好きな期間を選択してください。

Post type(s):

ランキングの範囲を指定します。

• post（投稿ページ）
• page（固定ページ）

記事が対象になるため、「post」を選択してください。

Post(s) ID(s) to exclude:

除外したい記事のIDを指定します。
管理画面から除外したい記事の編集ページにアクセスして、次のようなブラウザーアドレス欄の「post=」以降に続く数字を指定します。
wp-admin/post.php?post=1234&action=edit

Category(ies) ID(s):

除外したいカテゴリIDを指定します。
管理画面から「投稿」→「カテゴリ」にアクセスして、次のようなブラウザーアドレス欄の「category&tag_ID=」以降に続く数字を指定します。
wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=21&post_type=post

Shorten title:

タイトルの文字数を指定します。
記事タイトルが長過ぎて表示がキレイにならない時に指定します。
「characters」にチェックを入れます。words（単語）は英語用です。

Display post excerpt:

記事の要約を表示します。

Display post thumbnail:

サムネイルの表示を指定します。

「Display post thumbnail」をチェックしても詳細設定項目が表示されない場合は、一端ウィジェットの「保存」ボタンを押してください。

「Use predefined size」欄に希望サイズがあればそれを選択します。または「Set size manually」に好きなサイズを記入します。

Stats Tag settings:

• Display comment count（コメント数を表示する）
• Display views（閲覧数を表示する）
• Display author（投稿者を表示する）
• Display date（投稿日時を表示する）
• Display category（カテゴリ名を表示する）

掲載したい項目にチェックを入れます。

Use custom HTML Markup:

初期設定のままでは、人気記事一覧の表示スタイルが崩れたり、意図したものではないのでカスタマイズをしますので、ここにチェックを入れます。

Before / after title:

タイトルの前後に追加するタグの指定をします。今回の紹介方法では未使用です。

Before / after Popular Posts:

人気記事全体の前後に追加するタグの指定をします。
今回は下記のようにしました。
Before欄

<div id="popular-post"><ul class="wpp-list">

after欄

</ul></div>

Post HTML Markup:

表示される人気記事のスタイルを指定します。
今回は下記のようにしました。

<li>{thumb} {title} <span class="post-stats">{stats}</span><div class="clear">　</div></li>

「保存」ボタンで更新します。

カテゴリ別人気記事を表示

ウィジェットでは、全ページ同じランキング表示になってしまいます。

そこでランキングを表示しているsidebar.phpをカテゴリ、詳細ページ、それ以外のページに分岐するようにカスタマイズして、表示するランキングに変化を付けます。

カテゴリページではそのカテゴリだけのランキングを表示し、記事詳細ページではその記事が属するカテゴリのランキング、それ以外は全カテゴリの人気記事を掲載します。

sidebar.phpからランキングを掲載したい箇所を探して、下記を追記します。
sidebar.php

<?php if (is_category()) { ?>

<?php
$categoryname = single_cat_title('',false);
$categoryid = get_cat_ID($categoryname);
?>
<div class="widget popular-posts">
<h3 class="widget-title">「<?php echo $categoryname; ?>」人気記事</h3>

<?php
 $wpp = array (
 'cat' => ''.$categoryid.'',
 'limit' => '5', 
 'range' => 'all',
 'order_by' => 'views',
 'post_type' => 'post',
 'stats_comments' => '0', 
 'stats_views' => '0', 
 'title_length' => '25', 
 'thumbnail_width' => '70',
 'thumbnail_height' => '70',
 'stats_category' => '0', 
 'wpp_start' => '<div id="popular-post"><ul class="wpp-list">',
 'wpp_end=' => '</ul></div>',
 'post_html' => '<li>{thumb} {title} <span class="post-stats">{stats}</span><div class="clear">　</div></li>',
); ?>
<?php wpp_get_mostpopular($wpp); ?>
</div>

<?php } elseif (is_single()) { ?>

<?php
wp_reset_query();
$cat = get_the_category();
$cat_id = $cat[0]->cat_ID;
$cat_name = $cat[0]->cat_name;?>

<div class="widget popular-posts">
<h3 class="widget-title">「<?php echo "$cat_name"; ?>」人気記事</h3>

<?php
 $wpp = array (
 'cat' => ''.$cat_id.'',
 'limit' => '5', 
 'range' => 'all',
 'order_by' => 'views',
 'post_type' => 'post',
 'stats_comments' => '0', 
 'stats_views' => '0', 
 'title_length' => '25', 
 'thumbnail_width' => '70',
 'thumbnail_height' => '70',
 'stats_category' => '0', 
 'wpp_start' => '<div id="popular-post"><ul class="wpp-list">',
 'wpp_end=' => '</ul></div>',
 'post_html' => '<li>{thumb} {title} <span class="post-stats">{stats}</span><div class="clear">　</div></li>',
); ?>
<?php wpp_get_mostpopular($wpp); ?>
</div>

<?php } else { ?>
<div class="widget popular-posts">
<h3 class="widget-title">人気記事</h3>
<?php
$cat_now = get_the_category();
$cat_now = $cat_now[0];
$now_id = $cat_now->cat_ID;
?>

<?php
 $wpp = array (
 'limit' => '5', 
 'range' => 'all',
 'order_by' => 'views',
 'post_type' => 'post',
 'stats_comments' => '0', 
 'stats_views' => '0', 
 'title_length' => '25', 
 'thumbnail_width' => '70',
 'thumbnail_height' => '70',
 'stats_category' => '0', 
 'wpp_start' => '<div id="popular-post"><ul class="wpp-list">',
 'wpp_end=' => '</ul></div>',
 'post_html' => '<li>{thumb} {title} <span class="post-stats">{stats}</span><div class="clear">　</div></li>',
); ?>
<?php wpp_get_mostpopular($wpp); ?>
</div>

<?php } ?>

range

集計タイプ daily　weekly　monthly　all

limit

掲載記事数

order_by

ソート条件 views　comments　avg

post_type

ポストタイプを指定 post page

stats_comments

コメント数表示 1=表示、0=非表示

stats_views

閲覧数表示 1=表示、0=非表示

title_length

タイトル文字制限数

thumbnail_width

サムネイル画像の幅

thumbnail_height

サムネイル画像の高さ

stats_category

カテゴリ名の表示 1=表示、0=非表示

wpp_start

ウィジェットの開始タグ

wpp_end

ウィジェットの終了タグ

post_html

表示するhtmlの設定

上記のCSSを指定します。
style.css

/*WordPress Popular Postsプラグイン*/
#popular-post ul.wpp-list li{
	border-bottom: #ccc 1px dotted;
}
#popular-post ul.wpp-list li:last-child{
	border-bottom: #fff 0px dotted;
}
#popular-post {
    counter-reset: wpp-ranking;
}

#popular-post ul li:before {
    color:#fff;
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
    text-align:center;
    opacity:0.999;
　　font-size:11px;
    float:left;
    line-height:18px;
    width: 18px;
    height: 18px;
    background-color:#00a0e9;
    border-radius: 2px;
    -moz-border-radius: 2px;
}
#popular-post li img {
	float:left;
	margin-left:-18px;
}

下図のような表示になります。

まとめ

あなたも他ブログでサイドバーで人気記事を見かけて、思わずクリックしてしまった経験があると思います。当然自分のブログでもそういう手段を設けておくべきです。

投稿記事がある程度増えた時点で「WordPress Popular Posts」をインストールしてお試しください。