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

スポンサーリンク

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

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


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

Sven & Amanda-120 by johnhope14


過去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」を改造する前にくれぐれもバックアップをお忘れなく!

サンプルコードと解説

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

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

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

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

↑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」をクリックするとパラメータの一覧がズラリと表示されます(全て英語)。

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行目のループ処理を以下のサンプルに差し替えて下さい。

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

最後に

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

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

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします