ぱんぶろ

パンジーの「いいね!」ブログ

WordPressサイドメニューにカテゴリ毎の人気記事ランキングを付ける方法。(STINGERの追尾広告につけてみました。)

      2016/03/30  

medium_9799383106
photo credit: RayMorris1 via photopin cc

テーマをSTINGERに変更して早2ヶ月ちょっと。
やっと追尾広告欄に使い始めました!
(スクロールしたら付いてくるやつですね。)

何がいいかなーってずっと考えてたんですけど、
やっぱユーザからしたら同じカテゴリの話題があった方がいいよねって結論に至り。

ということでカテゴリ毎の人気記事ランキングを載せています。
その方法を紹介していきます!

スポンサード リンク

2つのプラグインを用意

STINGERの追尾広告のところに追加するために、
プラグインが2つ必要になります。

PHP Code Widget

まず1つ目は、「PHP Code Widget」。
これはウィジェット編集の際にPHPを使えるようにするものです。

追尾広告のウィジェットに
人気ランキングのPHPコードを書くことになりますので、

入れておく必要があります。

「PHP Code Widget」で検索し、有効化までしておいてください。
cate_popu

WordPress Popular Posts

2つ目は、「Wordpress Popular Posts」。
人気記事を手軽に表示できるようにしてくれる、ありがたいプラグインです。

こちらも「Wordpress Popular Posts」で検索し、有効化までしておいてください。
cate_popu_02

スクロール広告用に「PHP CODE」を追加

「PHP Code Widget」を有効化すると、
ウィジェットに「PHP CODE」なるものが登場しますので、

スクロール広告用欄にドラッグ&ドロップで追加しちゃってください。
cate_popu_03

ちょっと大変なコードを書くお時間

現在表示されているカテゴリと同じカテゴリの人気記事を表示するということで、
動的にカテゴリを取得する必要があります。
(だからPHPで書くわけですね。)

あまりPHPに慣れていない方は難しく思うかもしれませんが、
1個1個見ていけば、理解できるはずです。

記載するのは、先ほど追加した「PHP CODE」の中です。
cate_popu_05

では、早速PHPコードを見ていきましょう。

<?php if (is_single() || is_category()) :?>
<?php
/* 現在のカテゴリ-の取得 */
$cat_now = get_the_category();
$cat_now = $cat_now[0];
$now_id = $cat_now->cat_ID; /* カテゴリID */
?>
<h4 class="menu_underh2">「<?php echo $cat_now->cat_name; ?>」に関する人気記事</h4>
<?php if (function_exists('wpp_get_mostpopular')) {
$args = '
limit=5&
range=monthly&
order_by=views&
thumbnail_width=100&
thumbnail_height=100&
cat="'.$now_id.'"&
wpp_start=""&
wpp_end=""&
post_start="<div class="popular-post"><ul>"&
post_end="</ul></div>"&
stats_comments=0&
stats_views=1&
post_html="<li><a href=\'{url}\'>{thumb}</a><a href=\'{url}\'>{text_title}</a><span class=\'post-stats\'><span class=\'wpp-views\'>{stats}</span></span><a href=\'{url}\'  class=\'link-box\'></a></li>"
';
wpp_get_mostpopular($args);
} ?>
<?php endif; ?>

コードに関しては、グアバさんの記事を参考にさせていただきました。
WordPress Popular Postsで今見てる記事と同じカテゴリの人気記事を表示させる方法

11~21行目の意味は以下のとおりです。

limit…何記事表示するか。私は5記事にしました。

range…集計期間。daily、weekly、monthly、allが使えます。

order_by…並び順を決めます。comments、views、avgが使えます。

thumbnail_width…サムネイルの横幅。

thumbnail_height…サムネイルの高さ。

cat…カテゴリ。これは取得したカテゴリIDを指定しています。

wpp_start…リストの開始タグを指定します。私は未使用。

wpp_end…リストの終了タグを指定します。私は未使用。

post_start…それぞれの記事の最初にhtmlを指定するときに使います。

post_start…それぞれの記事の最後にhtmlを指定するときに使います。

stats_comments…コメント数を表示するかどうか。1は表示、0は非表示。

WordPress Popular Postsで今見てる記事と同じカテゴリの人気記事を表示させる方法

ちょっと追加・変更したのが3点。
(8行目)カテゴリ一覧のリンクではなく、カテゴリIDからカテゴリ名を取得する形にしました。
指定してるカテゴリIDは一つなのに、表示が2つになったりするので。
(複数カテゴリを設定しているせいなんですが。)

(22行目)stats_viewsを1にして閲覧数を表示しています。(0だと非表示)

(23行目)post_htmlで表示形式をカスタムしてます。
CSSで編集しやすかったりしてかなり便利です!
ここは自分が使いやすいようにアレンジしてください。
(post_htmlに書いている事が理解できない人は、この1行(23行目)を丸々消しちゃっても問題ありません。)

完成!

今あなたの右に表示されている「WordPress」に関する人気記事が完成形です。
(表示形式はCSSでイジっています。)

cate_popu_04

異なるカテゴリの記事を見てもらうと分かりますが、
そのカテゴリ毎の人気記事が表示されているはずです!

まとめ

WordPressサイドメニューにカテゴリ毎の人気記事ランキングを付ける方法の紹介でした。
STINGERの追尾広告に悩んでいる方は、これやってみてはいかがでしょうか。