WordPress Popular Posts応用編：複数行のカテゴリ別人気記事一覧を作る方法

今回は文末に表示している人気記事一覧の作り方です

steps, Bradford University by Tim Green aka atoach

実は最近もコッソリとカスタマイズやってます。りく（@Rikuma_）です。

WordPressのプラグイン「WordPress Popular Posts」で集計されたデータを利用し、カテゴリ別の人気記事一覧を表示させる方法のエントリー3回目。

1回目では、右サイドバーに表示しているウィジェットの作り方と、プラグインのパラメータでアイキャッチ画像を取得する方法について解説しました。

2回目では、1回目でのアイキャッチ取得方法だと画像の縦横比がおかしくなる場合に、その修正方法について解説しました。

過去2回はいずれも右サイドバーに表示しているウィジェットの作り方を基本的に解説してました。今回の第3回目は、当ブログの本文最後に表示している「カテゴリ別人気記事一覧」の作り方。

どちらも作り方はほぼ同じなんですけど、今回は今まで紹介してなかったパラメータや考え方が少しだけプラスされます。なので「応用編」とタイトル付けてますが、難易度が急に上がるわけではありません。

HTMLコードの違いについて説明します

過去2回でサンプルコードを紹介した「右サイドバーのカテゴリ別人気記事一覧」をHTMLコードで「すごく簡単に」説明すると、以下のような感じになります。

1位から10位まで、<li>タグを10個並べ、それを<ul>タグで囲む方法。

↑図にすると上のような感じですね。縦にズラリと10個並べるスタイル。

「WordPress Popular Posts」でパラメータを指定するだけで、上のようなHTMLコードをプラグインが自動生成してくれます。生成されたコードをそのまんま出力し、CSSで見た目を調整してあげればいいだけ。

一方、今回作る人気記事一覧ですが、

↑1位～5位の「1行目」と、6位～10位の「2行目」、2段で表示させています。

さらに右サイドバーのウィジェットと違い、アイキャッチ画像の下に記事タイトルを持ってきてます。

これをHTMLコードで表現すると、以下のような感じ。

赤い文字にした部分が新たに追加するコードになります。大きく言うとポイントは2点。

画像と記事タイトルの間に<br>タグを入れて改行させるのが1点目。

5位の表示後に一旦</ul>タグを挿入して終了させ（＝1行目を終わらせる）、続けて<ul>タグを挿入し（＝新しい行をスタート）、6位以降を表示させるのが2点目。

1点目の「<br>タグを挿入」するのは、「WordPress Popular Posts」のパラメータ設定で便利なのがありますので、プラグインだけで実現できます。

2点目の「</ul>タグと<ul>タグを挿入」するのは、「WordPress Popular Posts」だけでは無理っぽいです。いろいろ調べてみたけど分からなかった。

なので、ちょっと小細工を入れます。

準備：カテゴリIDを取得

まず、WordPressの「functions.php」というテンプレートファイルにカテゴリID取得用のコードを組み込みます。

「functions.php」を改造する前にくれぐれもバックアップをお忘れなく！

// カテゴリIDの取得（カテゴリー別ランキング用）
add_action('wp_head', 'get_current_category');

function get_current_category()
{
    global $_curcat;
    $cate = null;
    if( is_category() ) {
        //カテゴリー表示だったら
         
        $cat_now = get_the_category();
        // 親の情報を＄cat_nowに格納
        $cate = $cat_now[0];
         
    } else if (is_single() ) {
        //シングルページ表示だったら
        $cates = get_the_category();
        $i = 0;
        $use_category = 0;
        foreach ($cates as $cate) {
            //未分類を除外した配列の一番初めのカテゴリを選択
            if($cate->category_parent > 0 && $use_category == 0) {
                $use_category = $i;
            }
            $i++;
        }
        $cate = $cates[$use_category];
    }
    //カテゴリーのオブジェクトごと保持
    $_curcat = $cate;
    return $cate;
}

サンプルコードと解説

「functions.php」にカテゴリID取得用のコードを組み込んだら、いよいよ人気記事一覧を表示させるPHPコードの作成です。

いきなり完成後のサンプルコード。以下の通りです。

<?php
	global $_curcat;  // functions.phpで定義したグローバル変数の定義
	$caca = $_curcat->cat_ID;  // カテゴリーIDのセット
	if (function_exists('wpp_get_mostpopular')) :
	ob_start();  // バッファリングをオン。出力結果をバッファに保存するようにする
	wpp_get_mostpopular('range=monthly&order_by=views&cat=' . $caca 
	. '&limit=10&stats_comments=0&post_type=post' 
	. '&thumbnail_width=100&thumbnail_height=100' 
	. '&post_start="<li><h4>"&post_end="</h4></li>"'
	. '&do_pattern=1&pattern_form="{image}<br />{title}"');
	$popular = ob_get_clean();  // 変数を初期化
	$popular = explode('</li>', $popular);  // 編集のため配列に一つずつ格納
	$popular_counter = 0;  // カウンター初期化
	foreach ($popular as &$p) {
		if ($popular_counter == 5) {  // 2行目の先頭なので新たにulタグを付加する
			$p = str_replace('<li>', '</ul><ul><li>',$p);
			break;
		}
		$popular_counter++;
	}
	$popular = implode('</li>', $popular);  // 読み込み結果を再び連結させる
	$popular = str_replace('<ul>', '<ul class="relatedorg clearfix">', $popular);  // ulタグを一括修正
	$popular = str_replace('.png', '-100x100.png', $popular);
	$popular = str_replace('.jpg', '-100x100.jpg', $popular);
	$popular = str_replace('.jpeg', '-100x100.jpeg', $popular);
	$popular = str_replace('.gif', '-100x100.gif', $popular);
	$cat_now = get_the_category();
	$cat_now = $cat_now[0];
	$relCatName = $cat_now->cat_name;  // カテゴリー名の取得
?>
<h3 class="relatedh3">「<?php echo $relCatName; ?>」カテゴリーの人気記事</h3>
<?php
	echo $popular; // カテゴリー別人気記事を出力
	endif;
?>

コードの大半は過去2回のエントリーで詳しく解説してますので、今回はサラっと簡単な説明だけで流し、新たに追加した機能やコードを中心に解説します。

    global $_curcat;  // functions.phpで定義したグローバル変数の定義
    $caca = $_curcat->cat_ID;  // カテゴリーIDのセット

↑2～3行目は、「functions.php」で取得したカテゴリIDの受け渡し。

	wpp_get_mostpopular('range=monthly&order_by=views&cat=' . $caca 
	. '&limit=10&stats_comments=0&post_type=post' 
	. '&thumbnail_width=100&thumbnail_height=100' 
	. '&post_start="<li><h4>"&post_end="</h4></li>"'
	. '&do_pattern=1&pattern_form="{image}<br />{title}"');

↑6～10行目は、「WordPress Popular Posts」の機能を使ってランキング上位10記事を取得するところ。本来は1行でもいいのですが、見やすくするため複数行で書いています。

6～10行目で指定しているパラメータは上でまとめた通り。黒文字は過去2回の解説エントリーで詳細を書いたので今回は流します。赤文字のところが初登場のパラメータ。

「post_start」「post_end」というパラメータは、通常「<li>～</li>」で囲む各記事のタグを別のタグで囲みたい時に指定するパラメータ。

私は記事タイトルを<h4>にしたかったので、<li>にプラスして<h4>を表示させるようにしました。ここのパラメータ指定でそれが可能になります。

「do_pattern」は、次に続く「pattern_form」とセットで指定するパラメータで、省略時は「do_pattern=0」とみなされます。「pattern_form」を使いたい場合は「do_pattern=1」にしてあげないと動きません。

「pattern_form」は、画像の記事タイトルの順番を変えたり、その間に別のタグや文字列を加えたりしたい時にとても便利なパラメータ。「{image}」には画像、「{title}」には記事タイトルがそれぞれリンク付でこの位置に表示されますよ、という指定。

私の例では、画像と記事タイトルの間に<br />タグを入れて改行させたかったので、

「pattern_form=”{image}<br />{title}“」

としました。

他にもいろいろ用途がありそうですね。

たとえば先に記事タイトル→次に画像、と順番を変えたい場合は

「pattern_form=”{title}{image}“」

と指定すればOK。記事タイトルを強調文字にしたい場合は（あんまりやらない使い方だと思いますが）、

「pattern_form=”{image}<strong>{title}</strong>“」

と指定すればOK。

	$popular_counter = 0;  // カウンター初期化
	foreach ($popular as &$p) {
		if ($popular_counter == 5) {  // 2行目の先頭なので新たにulタグを付加する
			$p = str_replace('<li>', '</ul><ul><li>',$p);
			break;
		}
		$popular_counter++;
	}

13～20行目は、プログラムが分かる方ならお馴染みの「ループ処理（繰り返し処理）」という方法。

1位から10位まで、合計10個の<li>タグを先頭から順番に調べていき、6番目の<li>タグを見つけたら、その前に「</ul><ul>」のタグを追加してあげてます。

こうすることで、1位～5位の「1段目」と、6位～10位の「2段目」、2つの<ul>タグ群に分割できたことになります。

あとは過去2回で解説したのと全く同じコード。CSSで見た目を整えれば完成です。

13～20行目のところは「配列」というプログラミングの手法を用いているのですが、それを解説してしまうとプログラミングをご存知ない方は余計に混乱する気がしたので、今回は解説しないことにしました。

応用のオマケ

私のサンプルは「横に5個×2行で、合計10個」の一覧ですが、もしこれを「横に3個×3行、合計9個」の一覧にしたい場合は、次のように作り変えればOKです。

◆まず、サンプルコード7行目の「limit=10」を「limit=9」に変更する。（最大9個を取得すればいいので）

◆13～20行目のループ処理を以下のサンプルに差し替えて下さい。

	$popular_counter = 0;  // カウンター初期化
	foreach ($popular as &$p) {
		if ($popular_counter == 3) {  // 3個目が終了したらulタグを付加し、カウンターを初期化
			$p = str_replace('<li>', '</ul><ul><li>',$p);
			$popular_counter = 0;
		}
		$popular_counter++;
	}

「横に3個×2行、合計6個」にしたい時は、「limit=6」に変更し、13～20行目は上の差し替えコードを使えば大丈夫です（確認済み）。

最後に

特にループ処理のところなどは、PHP上級者であればもっと効率の良い綺麗なコードが書けるかもしれないのですが、まだPHP初心者なので原始的な手法しか思い浮かばず、今回のサンプルコードを作りました。ご了承ください。

分かりやすい説明が出来てるかどうか不安なのですが、参考にして頂ければ幸いです。