WordPress Popular Postsで、現在とそれ以外のカテゴリの人気記事をそれぞれ表示する

このブログでは、wordpress popular postsというプラグインを使ってサイドバーに人気記事を表示しているんですが、カテゴリごとの人気記事や、特定のカテゴリを除外したランキングなどもできるみたいなので色々試してみました。

PV向上を考える

• ランディングページ最適化編・ブログのアクセスアップを考察*frasm

この記事を拝読して、なるほど新規訪問だけじゃなくて、訪問別ページビューを上げるというのも重要だなぁと思いました。現在、記事終わりに関連記事を表示していますが、これは同じタグがついているものを新しいものから5件表示するだけなので、過去の記事は出にくい構造になっています。

• 【ブログの人気記事をどこにでも表示することができる】「wordpress popular posts」のテンプレートタグを使ってトップページに人気記事表示 | 今村だけがよくわかるブログ

そこで、こちらを参考にさせて頂いて関連記事に加えて人気記事も表示させてみよう！と思いました。丁度wordpress popular postsを使っており、サイドバーに全記事の人気5つを表示させているので、現在のカテゴリの人気記事とかいいなぁ…という妄想からスタート。

特定カテゴリ除外もできるらしい

カテゴリを絞っての人気表示ってたしかできたはず…と、Popular Postsのテンプレートタグを眺めていたら、こんな記述を発見。

マイナスするとそのカテゴリを除外できる…！これは素敵機能だ！

それなら、現在のカテゴリの人気記事と、それ以外のカテゴリの人気記事とか表示したら素敵じゃないかしらと妄想が加速。

完成図

関連記事の下に、このように出してみました。数字アイコンはモダンブラウザのみ表示されます。

※現在は件数を変えています。

実装

single.php

<?php
/* 現在のカテゴリ－の取得 */
$cat_now = get_the_category();
$cat_now = $cat_now[0];
$now_id = $cat_now->cat_ID; /* カテゴリID */
$now_name = $cat_now->cat_name; /* カテゴリ名 */
$now_slug = $cat_now->slug; /*スラッグ名*/
?>

<div class="cat_pop">
<h3>「<?php the_category(', ') ?>」の人気記事</h3>
<?php if (function_exists('wpp_get_mostpopular')) {
$args = '
limit=2&
range=monthly&
order_by=views&
thumbnail_width=114&
thumbnail_height=100&
cat="'.$now_id.'"&
wpp_start="<ol>"&
wpp_end="</ol>"&
post_start="<li>"&
post_end="</li>"&
stats_comments=0';
wpp_get_mostpopular($args);
} ?>
</div>

<div class="cat_pop">
<h3>他カテゴリの人気記事</h3>
<?php if (function_exists('wpp_get_mostpopular')) {
$args = '
limit=2&
range=monthly&
order_by=views&
thumbnail_width=114&
thumbnail_height=100&
cat="-'.$now_id.'"&
wpp_start="<ol>"&
wpp_end="</ol>"&
post_start="<li>"&
post_end="</li>"&
stats_comments=0';
wpp_get_mostpopular($args);
} ?>
</div>

8行目までで現在のカテゴリー情報を取得して、10～27行目で同じカテゴリの出力、29～46行目でそれ以外カテゴリの出力を行っています。11行目では、現在のカテゴリへのリンクもつけた見出しです。

thumbnail_widthとthumbnail_heightなどの各種パラメータはお好みで変更してください。今回の場合、数字を出してランキングっぽくしたかったのでol要素を使ってますが、ulでも良いかと。19行目がカテゴリID指定、38行目がマイナスしてカテゴリ指定することでそのカテゴリが除外になります。

追記：脆弱性への対処を！

WordPress Popular Posts内のtimthumb.phpに脆弱性が見つかっているそうです！回避するには、wp-content/plugins/wordpress-popular-posts内のwordpress-popular-posts.phpの、

$thumb .= "<img src=\"". $this->pluginDir ."/timthumb.php?src={$path}&h={$tbHeight}&w={$tbWidth}\" width=\"{$tbWidth}\" height=\"{$tbHeight}\" alt=\"{$title}\" border=\"0\" class=\"wpp-thumbnail wpp_fi\" />";

の箇所を

$thumb .= "<img src=\"{$path}\" width=\"{$tbWidth}\" height=\"{$tbHeight}\" alt=\"{$title}\" border=\"0\" />";

へ書き換えて、timthumb.phpを削除します。

• [Я]Wordpress Popular Postsでカテゴリ毎の人気記事ランキングを作る ： りくまろぐ

こちらの記事を参考にさせて頂きました！どのような脆弱性なのかも詳しく書かれているので、ご一読されることをおすすめします。

※注記：ver2.3.3からtimthumb.phpが無くなっているそうです！

style.css

.cat_pop{
	width:270px;
	margin-right:10px;
	float:left;
	}
.cat_pop h3{
	padding:10px 0 5px 0;
	background: url(images/line.png) no-repeat bottom;
	}
.cat_pop ol{margin:0;}
.cat_pop ol li{
	width:120px;
	margin:0 6px 10px 6px;
	float:left;
	font-size:85%;
	line-height:15px;
	}
.cat_pop ol li img{
	border-top: 1px #ddd solid; /*画像枠*/
	border-left: 1px #ddd solid;
	border-right: 1px #999 solid;
	border-bottom: 1px #999 solid;
	padding: 3px;
	background: #fff;
	margin:0 0 3px 0;
	}
.cat_pop ol {
	counter-reset:li; /*カウントリセット*/
	}
.cat_pop ol li {
	list-style:none; /*デフォルトナンバリングを消す*/
	position:relative;
	z-index:0;
	margin-top:10px;
	padding:0;
	}
.cat_pop ol li:before {
	content:counter(li); /*カウンターのインデックスを挿入*/
	counter-increment:li; /*ナンバリングを生成*/
	/* ここから番号のスタイル */
	position:absolute;
	z-index:10;
	top:5px; /*位置*/
	left:5px;
	width:30px; /*幅*/
	height:39px; /*高さ*/
	padding-top:7px;
	color:#fff; /*文字色*/
	background:url(images/cat_pop.png) no-repeat; /*背景画像*/
	font-family: 'Federo', sans-serif; /*webフォント*/
	font-size:200%;
	text-align:center;
	filter: alpha(opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
	display:none\9; /*IE8は非表示*/
	}

こんな感じのCSSにしています。olでWebフォントを使った数字つきリストにして、背景画像と一緒にちょっと透過させてみてます。IE7以下には表示されません。

で、56行目なんですが…IE8だとフォントの背景画像がサムネイル画像よりも後ろにいってしまい、z-indexで指定してもうまくいかず…数字だけ見えててもおかしいし、どうせIE7以下じゃ見れないので、IE8もCSSハックで非表示にすることにしました。。

※IE8に効くハックのはずなんですけど私のIE9ブラウザで表示されないんですがどういうことなの…(´Ａ｀) chromeとかではOKだと思うんですが。変なところありましたら情報頂けたら嬉しいです！

前よりちょっと見栄えも良くなったかな？w しばらくこんな感じで様子を見てみます！

2013年7月追記

サムネイル表示が一時的に出なくなった

2013年6月中旬頃より、一時的にサムネイルが読み込めなくなる現象があったようでした。このプラグインは2013年6月6日にバージョンが2.3.5にアップデートされていて、なにかあったのかなーと。

サムネイルさえなければ読み込みも正常だったので、とりあえず暫定でサムネイル無しで運用して様子を見ていたら、間もなく修正されたようでした。

指定サイズの画像が生成される仕様に…？

それ以降、どうも画像を生成してくれるようになったっぽい…！　以前は、元ファイルは違う大きさでも、サイズ指定（例えば、横220縦150とします）しておくと、元のファイルを

<img src="sample.png" width="220" height="150">

のようにして表示してくれる仕様だったはずなのですが、見てみたら

<img src="sample-220x150.png">

という指定したサイズの画像が自動生成されていました…！　私の個人的な好みだとは思うのですが、画像が勝手に増えるのは…！　いやだッ…！((└(:3」┌)┘))

2013年5月末までは、画像が自動で追加されているということはなかったので（バックアップで四苦八苦してたものでちょうど覚えてました）新しい仕様だと思うのですが…！

ということで、画像を自動生成しないでどうにか同じことはできないものか…！　と、WP-PostViewsというプラグインで同じレイアウトにしてみた記事がこちらになります。

• WP-PostViewsで、現在とそれ以外のカテゴリ人気記事（サムネイル付き）を表示

2014年3月4日追記

またもやこちらのプラグインに舞い戻ってきましたw やはり週間や月間などで範囲を区切れるのがすごく魅力的…ッ！　画像を自動生成しないで表示する方法や、上記のコードだと複数カテゴリにまたがっているときにひとつしか取得できていないので、そのへんも含めた+αカスタマイズを書き残しておきます。

現在の記事を除外

<?php if (function_exists('wpp_get_mostpopular')) {
$args = '
pid="'.get_the_ID().'"&
//略;
wpp_get_mostpopular($args);
} ?>

パラメーターの中にこれを追記してやればOK。現在表示されている記事IDを指定してやります。

複数カテゴリにまたがる記事がある場合

<?php
//現在のカテゴリ－IDを配列で取得
$now_id = wp_get_post_categories($post->ID,'fields=ids');
?>
<div class="xxx">
<h3>「<?php the_category(', '); ?>」の月間人気記事</h3>
<?php if (function_exists('wpp_get_mostpopular')) {
$args = '
cat="'.implode(',',$now_id).'"&
//略;
wpp_get_mostpopular($args);
} ?>
</div>

<?php
//現在以外のカテゴリ－IDを配列で取得
$args = array('exclude'=>$now_id,'fields'=>'ids');
$ext_id = get_terms('category',$args);
?>
<div class="xxx">
<h3>他カテゴリの月間人気記事</h3>
<?php if (function_exists('wpp_get_mostpopular')) {
$args = '
cat="'.implode(',',$ext_id).'"&
//略;
} ?>
</div>

現在のカテゴリを配列で取得しておいて（3行目）、その配列をカンマ区切りで文字列化したものを入れてやります（9行目）

他カテゴリは、さっき取得した現在カテゴリ以外のカテゴリを配列に入れて（17, 18行目）、カンマ区切りの文字列化して入れ込む（24行目）という感じ。

サムネイルを自動生成しないで表示

こちらの方法は、プラグイン編集からwordpress-popular-posts.phpを直接いじる形になるので、お勧めはしません。アップデートなどで元に戻ってしまいますし、自己責任の上ご参照ください。

<?php if (function_exists('wpp_get_mostpopular')) {
$args = '
wpp_start="<ol>"&
wpp_end="</ol>"&
post_start="<li>"&
post_end="</li>"&
//略;
} ?>

今まではこのように書いていましたが、

<?php if (function_exists('wpp_get_mostpopular')) {
$args = '
wpp_start="<ol>"&
wpp_end="</ol>"&
post_html="<li>{title}</li>"&
//略;
} ?>

こう書いてみます。こうすると、wordpress-popular-posts.phpの1234行目あたりに書いてある、

'title' => '<a href="'.$permalink.'" title="'.$title.'">'.$title_sub.'</a>',

この部分が{title}で呼び出されます。なのでここを、

'title' => '<a href="'.$permalink.'">' . get_the_post_thumbnail( $p->id, array(100, 100), array('alt'=>$title_sub) ) . $title_sub . '</a>',

このようにサムネイルも一緒に呼び出すように書いてあげます。この例ではサムネイルの大きさが長辺が100px、altにタイトルが入るように書いてあります。

2014年5月27日追記

また違うプラグインに移行しました(;´Д`) 詳しくはこちら。

• Jetpack by WordPress.comの情報を取得して人気記事を表示する