【当サイトはアフィリエイト広告を利用しています】

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

2013年1月17日

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

steps, Bradford University by Tim Green aka atoach

steps, Bradford University by Tim Green aka atoach

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

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

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

Medal Ceremony by gripso_banana_prune
WordPress Popular Postsでカテゴリ毎の人気記事ランキングを作る

当ブログPC版の右サイドバーにある「人気記事ランキング」ウィジェットの作成法を応用して、記事のカテゴリ毎に人気記事ランキングを作成してみました。

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

Sven & Amanda-120 by johnhope14
カテゴリ別人気記事でアイキャッチ画像がつぶれる場合の解決法

「WordPress Popular Posts」を利用してカテゴリ毎の人気記事一覧を表示する際、アイキャッチ画像の表示(縦横比)がおかしくなってしまう場合の解決策を紹介します。

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

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

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

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

<ul>
  <li>1位記事の画像&タイトル</li>
  <li>2位記事の画像&タイトル</li>
  (略)
  <li>9位記事の画像&タイトル</li>
  <li>10位記事の画像&タイトル</li>
</ul>

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

screenshot_201301_054

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

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

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

screenshot_201301_055

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

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

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

<ul>
  <li>1位画像<br>1位記事タイトル</li>
  <li>2位画像<br>2位記事タイトル</li>
  (略)
  <li>5位画像<br>5位記事タイトル</li>
</ul>
<ul>
  <li>6位画像<br>6位記事タイトル</li>
  <li>7位画像<br>7位記事タイトル</li>
  (略)
  <li>10位画像<br>10位記事タイトル</li>
</ul>

赤い文字にした部分が新たに追加するコードになります。大きく言うとポイントは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取得用のコードを組み込みます。

※以前書いた「WordPress Popular Postsでカテゴリ毎の人気記事ランキングを作る」の中で解説しているものと全く同じコードです。以前すでに作ってる方は今回「functions.php」の作業をする必要がないので飛ばしてください。
また、解説も前述のエントリーに書いてますので、こちらでは割愛します。

「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行でもいいのですが、見やすくするため複数行で書いています。

range=monthly ← 抽出範囲・1ヶ月分
&order_by=views ← 並び条件はアクセス数順
&cat=カテゴリID ← 抽出するカテゴリ
&limit=10 ← 記事の最大数は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」を使う時に指定
&pattern_form=”{image}<br />{title}” ← 画像とタイトルの間に<br />を付加

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}“」

としました。

※サンプルコードはXHTMLで記述したため、改行コードを<br />と書いてますが、HTMLの<br>でも正常に動きます。

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

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

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

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

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

と指定すればOK。

※「WordPress Popular Posts」には他にもパラメータがいろいろあります。詳しくはWordPress管理画面の「設定」>「Wordpress Popular Posts」で設定画面に移動し、左上の「FAQ」をクリックするとパラメータの一覧がズラリと表示されます(全て英語)。
	$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>」のタグを追加してあげてます。

※サンプルコードで「popular_counter == 5」と書いてるので「5番目じゃないの?」と勘違いされることもありますが、0からカウント開始しているので、「5」は6番目という計算になります。

こうすることで、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初心者なので原始的な手法しか思い浮かばず、今回のサンプルコードを作りました。ご了承ください。

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

-WordPress
-