【WordPress】WPtouchとPopularPostsでスマホにサムネイル付のカテゴリー別人気記事を表示

WordPressプラグイン「WPtouch」でブログを簡単にスマホ対応した後は、PC版と同じようにカスタマイズを楽しんでいます。今回は記事の下にカテゴリー別の人気記事の一覧を表示する方法についてです。

ゆめぴょんです。こんちはっ(^^)/

プラグインWPtouchについては、導入からサムネイル画像表示やソーシャルボタン設置まで、下の2記事を読めばわかるように書いています。参考にしてみてください。iPhone、Android対応です。

◆【WordPress】WPtouchでスマホ対応！サムネイル表示やAnalytics設定方法
◆【WordPress】WPtouchでソーシャルボタンやAdsense設置と日付表記の変更方法

ブログに関連する人気記事を表示するメリット
人気記事一覧表示プラグイン「Popular Posts」の特徴とインストール
WPtouchのスマホ用画面に人気記事一覧を表示する方法
まとめ：今日のゆめぴょんの知恵

ブログに関連する人気記事を表示するメリット

このブログでも何度か書いてきましたが、大きく次の2つのメリットがあると思っています。

訪問者の利便性の向上。関心ある記事を続けて探せる
SEO対策。関連する記事（内部リンク）のGoogleへのアピール

私自身が他のブログを検索で見つけた時も、必ず新着や人気記事はチェックしているし、そこでもっと探したかった記事を見つけることも多いです。

また関連記事を表示することは、良質の内部リンクならGoogleにも評価されて、検索結果に表示されやすくなるというメリットもあります。

PC版に設置する時は下の記事が参考になるかも知れません。人気記事を表示するだけだと必ずしも「関連記事」になりません。しかしカテゴリー別の人気記事なら十分に関連記事です。

WPtouchのスマホ用画面に人気記事一覧を表示する方法

表示する人気記事一覧の設定について

今回設置する人気記事一覧は次のような設定にしています。必要に応じて変更してください。

現在表示されているメインカテゴリーと同じ人気記事を表示
現在表示されている記事は除く
サムネイル画像つき。サイズは60×60（簡単に変更可）
24時間以内のページビュー数の順番で表示（簡単に変更可）
10件の記事を表示（簡単に変更可）

テーマファイルの編集方法

ここから先はWPtouchのテーマファイルを編集しますので、必ず事前にバックアップは作成しておいてください。そうしないとエラーが発生した時に元に戻せなくなってしまいます。

また編集後のテーマファイルもプラグインのバージョンアップ時に上書きされる可能性があるのでコピーを作成してください。作業はすべて自己責任でお願いします。

WPtouchのテーマファイルはWordPress管理フォルダ内の「/wp-content/plugins/wptouch/themes/default/」の中にあります。今回は個別記事のみに表示するので「single.php」を編集します。

具体的には記事本文を表示している箇所「<?php the_content(); ?>」を検索して、そのすぐ下に次のソースコードをコピペすればOKです。もちろん場所はあなたの好みでいいです。私はソーシャルボタンの下に設置しました。

[html]
<style>
.cate_popular {
overflow: auto;
}
.cate_popular .wpp-list {
width: 99%;
margin: 0 0 15px 0;
padding: 0 1px 4px 0;
border: 1px solid #bbb;
}
.cate_popular li {
display: block;
overflow: hidden;
width: 100%;
list-style: none;
line-height: 1.3;
vertical-align: top;
margin: 4px 0 0 0;
padding: 0 0 5px 0;
border-bottom: 1px dashed #666;
background-color: #ffffdd;
font-size: 14px;
}
.cate_popular .wpp-thumbnail {
float: left;
max-width: 60px;
height: 60px;
margin: 0 4px 0 0;
-moz-box-shadow: 2px 2px 3px #ccc;
-webkit-box-shadow: 2px 2px 3px #ccc;
box-shadow: 2px 2px 3px #ccc;
}
.cate_popular p {
float: right;
max-width: 72px;
margin: 0;
padding: 0;
}
</style>

<?php
if (function_exists(‘wpp_get_mostpopular’)) {
$post_id = get_the_ID();
$cat = get_the_category();
$cate_id = $cat[0]->term_id;

ob_start();
$html = "<li>{thumb} {title}</li>";
wpp_get_mostpopular(‘range=daily&order_by=views&pid=’ . $post_id . ‘&cat=’ . $cate_id
. ‘&limit=10&post_html="’ . $html . ‘"&wpp_start="<ul class=""wpp-list"">"&thumbnail_width=60&thumbnail_height=60’);
$popular = ob_get_clean();

echo ‘<div class="cate_popular"><span style="margin-top:15px; font-size:14px">★関連ある人気記事もオススメです！</span>’. $popular . ‘</div>’;
}
?>
[/html]