atoach実は最近もコッソリとカスタマイズやってます。りく(@Rikuma_)です。Posts」で集計されたデータを利用し、カテゴリ別の人気記事一覧を表示させる方法のエントリー3回目。1回目では、右サイドバーに表示しているウィジェットの作り方と、プラグインのパラメータでアイキャッチ画像を取得する方法について解説しました。Postsでカテゴリ毎の人気記事ランキングを作る2回目では、1回目でのアイキャッチ取得方法だと画像の縦横比がおかしくなる場合に、その修正方法について解説しました。過去2回はいずれも右サイドバーに表示しているウィジェットの作り方を基本的に解説してました。今回の第3回目は、当ブログの本文最後に表示している「カテゴリ別人気記事一覧」の作り方。どちらも作り方はほぼ同じなんですけど、今回は今まで紹介してなかったパラメータや考え方が少しだけプラスされます。「応用編」とタイトル付けてますが、難易度が急に上がるわけではありません。HTMLコードの違いについて説明します過去2回でサンプルコードを紹介した「右サイドバーのカテゴリ別人気記事一覧」をHTMLコードで「すごく簡単に」説明すると、以下のような感じになります。<ul><li>1位記事の画像&タイトル</li><li>2位記事の画像&タイトル</li>(略)<li>9位記事の画像&タイトル</li><li>10位記事の画像&タイトル</li></ul>1位から10位まで、<li>タグを10個並べ、それを<ul>タグで囲む方法。↑図にすると上のような感じですね。縦にズラリと10個並べるスタイル。Posts」でパラメータを指定するだけで、上のようなHTMLコードをプラグインが自動生成してくれます。生成されたコードをそのまんま出力し、CSSで見た目を調整してあげればいいだけ。↑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点目。Posts」のパラメータ設定で便利なのがありますので、プラグインだけで実現できます。Posts」だけでは無理っぽいです。調べてみたけど分からなかった。準備:カテゴリIDを取得まず、WordPressの「functions.php」というテンプレートファイルにカテゴリID取得用のコードを組み込みます。Postsでカテゴリ毎の人気記事ランキングを作る」の中で解説しているものと全く同じコードです。以前すでに作ってる方は今回「functions.php」の作業をする必要がないので飛ばしてください。解説も前述のエントリーに書いてますので、こちらでは割愛します。「functions.php」にカテゴリID取得用のコードを組み込んだら、いよいよ人気記事一覧を表示させるPHPコードの作成です。完成後のサンプルコード。バッファリングをオン。バッファリングをオン。カテゴリー別人気記事を出力endif;?>コードの大半は過去2回のエントリーで詳しく解説してますので、今回はサラっと簡単な説明だけで流し、新たに追加した機能やコードを中心に解説します。カテゴリーIDのセット↑2~3行目は、「functions.php」で取得したカテゴリIDの受け渡し。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}」には記事タイトルがそれぞれリンク付でこの位置に表示されますよ、という指定。/>{title}“」としました。/>と書いてますが、HTMLの<br>でも正常に動きます。他にもいろいろ用途がありそうですね。先に記事タイトル→次に画像、と順番を変えたい場合は「pattern_form=”{title}{image}“」と指定すればOK。「pattern_form=”{image}<strong>{title}</strong>“」と指定すればOK。Posts」には他にもパラメータがいろいろあります。Posts」で設定画面に移動し、左上の「FAQ」をクリックするとパラメータの一覧がズラリと表示されます(全て英語)。'</ul><ul><li>',$p);break;}$popular_counter++;}13~20行目は、プログラムが分かる方ならお馴染みの「ループ処理(繰り返し処理)」という方法。1位から10位まで、合計10個の<li>タグを先頭から順番に調べていき、6番目の<li>タグを見つけたら、その前に「</ul><ul>」のタグを追加してあげてます。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行目のループ処理を以下のサンプルに差し替えて下さい。0;}$popular_counter++;}「横に3個×2行、合計6個」にしたい時は、「limit=6」に変更し、13~20行目は上の差し替えコードを使えば大丈夫です(確認済み)。最後に特にループ処理のところなどは、PHP上級者であればもっと効率の良い綺麗なコードが書けるかもしれないのですが、まだPHP初心者なので原始的な手法しか思い浮かばず、今回のサンプルコードを作りました。分かりやすい説明が出来てるかどうか不安なのですが、参考にして頂ければ幸いです。