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

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

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


ご注意

現在はこのプラグインを使っておりませんので、記事内容が古い可能性があります。

PV向上を考える

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

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

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

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

121220-1

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

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

完成図

121220-2

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

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

サムネイルつき関連記事の表示方法はこちら

実装

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_widththumbnail_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を削除します。

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

※注記: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以下には表示されません。

ol要素のカスタマイズ方法などはこちらの記事でもご紹介しています。

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

※IE8に効くハックのはずなんですけど私のIE9ブラウザで表示されないんですがどういうことなの…(´A`) 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というプラグインで同じレイアウトにしてみた記事がこちらになります。

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日追記

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

公開日:2012/12/20
更新日:2014/05/27

3件のピンバック

  1. […] WordPress Popular Postsで、現在とそれ以外のカテゴリの人気記事をそれぞれ表示する *Ateitexe […]

12件のコメント

  1. わこう より:

    参考にさせていただきました!
    ありがとうございます。

    こちらのサイトのセンスの良さにひかれてしまいましたよー

    • *you より:

      わこうさん、コメントありがとうございます!
      なんて…なんて嬉しいお言葉…。・゚・(ノД`)・゚・。
      是非また遊びにきてくださいー(*´∀`*)

  2. わこう より:

    いえいえ!めっちゃありがたいソースコードのご提供だったんですが、
    れいの脆弱性のコードを消しちゃうと・・・
    サムネイルのサイズってどうやって処理すればいいのでしょうか?
    サイドバーにサムネイルをつきの記事をいれたくって・・・・こんなこときいちゃってごめんなさい。

    • *you より:

      ウィジェットの使えるテーマならそこからも設定できますし、この記事のsingle.phpの例で示した17,18行目のように書けば、縦横のサイズを指定できるはずですよー!

  3. わこう より:

    すいません。返事が遅くなってしまいました!
    ありがとうございます。
    設定できました!感謝感謝です。
    これからもいろいろと教えてくださいませ!

    • *you より:

      いえいえお返事なんていいんですよー!
      でもありがとうございます(*´∀`*)

  4. belle より:

    すごくわかりやすかったです。
    カテゴリ除外といい、レイアウトといい、やりたいことが全て書いてありました。
    ありがとうございました!

    • *you より:

      belleさん、コメントありがとうございます。お役に立てて光栄です!(*゚ω゚*)

  5. *youさん初めまして。
    こちらの記事を参考にさせて頂きました。
    なぜか私の環境ではwp_get_post_categories()で抽出できない問題が発生。。。
    うーむ何故なんでしょう??
    一応下記の記事にも書きましたが
    http://lightning2014.ensyutsubu.com/blog/post-6279/
    余計な作業が増えてしまっています。
    一応 ご報告まで

    • *you より:

      ライトニングさん、コメントありがとうございます。

      そんなことあるんですね! 試せないので何とも言えませんが、ウィジェット内だからなのかもしれませんね。別の方法で実装できていれば良いと思いますよー、ご報告ありがとうございます!

  6. 渡辺 より:

    管理人様
    いつも楽しく拝見させてもらってます。
    良かったらこれにカスタムフィールドで設定した値を追加する方法も教えていただけたらありがたいですσ^_^;
    調べてもよく分からなかったのでσ^_^;


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)