特定のカテゴリーの記事をカスタムフィールドの値でソート!自動更新される「一覧ページ」を作ってみた。せっかくCMSをを使うんだからね!!

「映画の感想」をメインコンテンツとしている当ブログ。
前身となるブログ『e視点』も同じように「映画の感想」がメインで、これまでに書いた感想をまとめた一覧ページってものを設置していた。
(参考:【もくじ】映画_作品名順のもくじ|e視点

さて、この一覧ページ。
どうやって作っていたかというと、新しい記事をアップする度に手動でリンクを追加するという超泥くさい方法を使っていました。
まだまだコンテンツ数は少ないんだけど、「ultimate-ez.com」でも同様に一覧ページを作りたいな〜、と思ったんだけど、せっかくWordpressというCMSを使っているんだから、なるべく泥くさくない方法で作りたいもの。

というわけで、カスタムーフィールドをうまいこと使って、「自動生成される一覧ページ」を作ってみました。

ベースとなるページを作成

最初に、一覧ページのベースとなるページを作成します。

一覧ページを自動生成するってことは、Wordpressのページ生成のプログラム(基本的にはPHP)を走らせることが必要条件になります。
この条件を満たすページを作るわけですが、お手軽に作る方法は以下の2つ。

1.「投稿ページ」をベースにページを生成。投稿ページ内でphpのプログラムを実行可能にするプラグイン『Exec-PHP』を導入する。
2.「固定ページ」をベースにページを生成。独自のテンプレートを読みこませる。

個人的に「どこでもPHPを走らせることができる」ことのリスクが重いと思ってしまったので、今回は「2」の方法を採用することにしました。

というわけで、「固定ページ」を生成します。

Screenshot1018a

記事の内容はテンプレート内に記述するので、ここは適当に書いておいて大丈夫。もちろん何も書かなくてもOKです!

「固定ページテンプレート」を作成

wordpressのテーマフォルダ内に、任意のファイル名のphpファイルを生成。(僕は「cinemaindex.php」というファイルを作成しました。)
ファイルを開き、以下のように「テンプレート名」を記述します。

[php]
<?php
/*
Template Name: Cinema Index
*/
?>
[/php]

すると、WordPressの管理画面から「外観>テーマ編集」を選択した画面に、以下のように「固定ページテンプレート」が表示されているはずです。

Screenshot1018c

再び「固定ページ」の編集画面(クイック編集でも可)に戻り、テンプレートとして先ほど作成した「固定ページテンプレート」を選択します。

Screenshot1018b

こうすることで、作成した「固定ページ」は読み込ませた「固定ページテンプレート」を元に生成されることになります。

適切な「カスタムフィールド」を用意

今回作成する「一覧ページ」は、以下のように想定しています。

1.個々の投稿が持つ「映画の点数」によってソートしたい。
2.個々の投稿にはタイトルがついているんだけど、一覧ページでは「投稿のタイトル」ではなく「映画のタイトル」を表示したい。

というわけで、以下2つのカスタムフィールドを使うことにしました。

1.ezcom_score :映画の点数
2.ezcom_title :映画の作品名

ちなみに、新規投稿を作成する際に「ezcom_title」「ezcom_score」の値の記述を忘れないよう、『Custom Field Template』というプラグインを使っています。
こちらのプラグインについても記事を書いていますので、ご参考までに。
wordpressのカスタムフィールドを使いやすくするプラグイン「Custom Field Template」を導入してみた。 | ultimate-ez.com
カスタムフィールドを使うなら、このプラグインが便利!


これで、下準備は完了。
あとは、ガシガシと「固定ページテンプレート」をカスタマイズしていきます。

テンプレートをカスタマイズ

ヘッダー、フッター、サイドバーなどを他のページと同じように設置しつつ、肝心のコンテンツ部分の生成コードは以下の通り。

[php htmlscript=”true”]
<!– コンテンツ –>
<div id="content">
<?php query_posts(‘cat=8&nopaging=1&ignore_sticky_posts=1&meta_key=ezcom_score&orderby=meta_value_num&order=DESC’); ?>

<p class="cinemalist">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php if(get_post_meta($post->ID, ‘ezcom_score’, true)): ?>
<li>
<a href="<?php the_permalink(); ?>"><?php echo post_custom(‘ezcom_title’); ?></a>
<span>(<?php echo post_custom(‘ezcom_score’); ?>点) </span>
</li>
<?php endif; ?>
<?php endwhile; endif; ?>
</p>

</div>
[/php]

それでは、個々の要素を説明していきましょう。

一番重要なのはこの部分。

[php htmlscript=”true”]
<?php query_posts(‘cat=8&nopaging=1&ignore_sticky_posts=1&meta_key=ezcom_score&orderby=meta_value_num&order=DESC’); ?>[/php]

「query_posts()」と言えば、wordpressのカスタマイズをやったことがある人なら必ず目にするWordPressループを作るための重要な記述。
ざっくり言うと、投稿一覧を作成するためのSQLを作っているわけですが、ここで「特定のカテゴリーの記事をカスタムフィールドの値でソートした投稿一覧」のSQLを作るために「パラメータ」を指定しているというわけです。

指定しているパラメータは6個。

・cat(整数):カテゴリーID。指定したカテゴリーの記事のみが吐き出されるようにカテゴリーIDを指定します。「カテゴリー:映画の感想」のカテゴリーIDである「8」を指定。

・nopaging(ブーリアン):全ての投稿を表示するかページ送りを使うかを指定。デフォルトは”false”で、WordPressの管理画面から「設定>表示設定>1ページに表示する最大投稿数」ごとにページ送りされます。作りたいのは「一覧ページ」なので「すべて表示」=”1(true)”を指定します。

・ignore_sticky_posts(ブーリアン):記事の投稿時に設定した「先頭に固定表示」を無視するかどうか。デフォルトは”false”ですが、任意の値でソートをしたいので”1(true)”を指定して、「固定表示」を無視します。

meta_key(文字列):カスタムフィールドのキー。ソートに使いたいカスタムフィールドのキーを文字列で指定します。今回は「映画の点数」順にソートしたいので「ezcom_score」を指定。

orderly(文字列):ソート方法を指定します。ここでは「映画の点数」という数値でソートをするので’meta_value_num’を指定。(’meta_value’を指定してしまうと、1,10,11…19,2,21,22…と先頭文字でソートされてしまうので注意!!)

order(文字列):ソートの昇順/降順を指定。ここでは高得点のものを上に表示したいので’DESC’(降順)を指定します。

その他にも「query_posts()」のパラメータは無数にあります。以下のページをひと通り見ておくといいと思います。
テンプレートタグ/query posts – WordPress Codex 日本語版

あとは、いわゆる「wordpressループ」の記述になるわけですが、1点だけ注意。
今のままループを書き出すと、catで指定したカテゴリーIDに属する投稿は、カスタムフィールドの有無にかかわらず全て書きだされてしまいます。
なので、ループ内に「ezcom_score(映画の点数)を持たない投稿が書きだされないような処理」が必要になります。

それが以下の処理。

[php htmlscript=”true”]
<?php if(get_post_meta($post->ID, ‘ezcom_score’, true)): ?>
<li>
<a href="<?php the_permalink(); ?>"><?php echo post_custom(‘ezcom_title’); ?></a>
<span>(<?php echo post_custom(‘ezcom_score’); ?>点) </span>
</li>
<?php endif; ?>
[/php]

[php htmlscript=”true”]
<?php if(get_post_meta($post->ID, ‘ezcom_score’, true)): ?>
[/php]
この条件文で、対象のカスタムフィールドezcom_scoreが値を持っているか否かをチェック。
値がある場合にのみ、映画のタイトル(映画の点数)というフォーマットで各投稿へのリンクを書き出しています。

というわけで、もっとうまい書き方があるのかもしれませんが、これで「特定のカテゴリーの記事を任意のカスタムフィールドの値でソートした、自動更新される一覧ページ」が無事に完成です!

完成した一覧ページはこんな感じ。投稿数も少ないし、デザインも何もないリストだけど、間違いなく自動生成されています!
映画の感想一覧―得点順― | ultimate-ez.com

う〜ん、さすがWordpress。以前まで使っていたアメブロでは実現するのが難しい機能がカンタンに追加できて、ブログを引っ越したかいがありました!

Commentsこの記事についたコメント

コメントを残す

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