カスタム投稿タイプでお菓子メーカーを登録して今日食べたお菓子にひもづけるには? #wacja2013

鳥山(@sysbird)です、
WordPress Advent Calendar 2013 6日目のブログになります。Adventとは、キリスト降誕を待ち望む期間のことという。その期間、お菓子が隠された小窓を毎日ひとつづつ開けて楽しむのがAdvent Calendarだ。(昨年よりコピペ)

お菓子にちなみ本日は、私が運営しているブログ「お菓子の虜」にてカスタム投稿タイプを使って国内お菓子メーカーを登録した事例を紹介したい。「お菓子の虜」とはコンビニで買って食べたお菓子を記録するブログだ。いままでに食べたお菓子は2271種類となる。

wacja2013

お菓子メーカーの一覧を作りたい

「お菓子の虜」では、投稿記事となるお菓子に対してお菓子メーカーをカスタムフィールドで入力している。それを10年以上続けていながら、メーカーはある程度決まっているのだから一覧から選択できる方法はないものか?と思っていた。
そんなおりに出会ったのが、遅ればせながらカスタム投稿タイプである。

お菓子メーカーの一覧
 お菓子メーカーの一覧

カスタム投稿タイプを登録する。

まずはお菓子メーカーの一覧をカスタム投稿タイプで作ってみよう。カスタム投稿タイプを利用するは、functions.phpに以下のように記述する。
[PHP]
function my_custom_post_type() {
$labels = array( ‘name’ => ‘お菓子メーカー’,
‘all_items’ => ‘お菓子メーカーの一覧’ );

$args = array( ‘labels’ => $labels,
‘public’ => true, /* 公開するかどうが */
‘show_ui’ => true, /* メニューに表示するかどうか */
‘menu_position’ => 5, /* メニューの表示位置 */
‘has_archive’ => true, /* アーカイブページの作成 */
‘supports’ => array( ‘title’, ‘custom-fields’ ) );

register_post_type( ‘maker’, $args );
}
add_action( ‘init’, ‘my_custom_post_type’, 0 );
[/PHP]

register_post_type()のパラメータsupportsではカスタム投稿タイプでどんな入力項目を使うか指定する。タイトルや本文、アイキャッチなど通常の投稿に用意されているのを同じ入力項目から選ぶことができる。お菓子メーカーでは本文は必要ないので、投稿タイトルとカスタムフィールドのみとした。

するとダッシュボードには「お菓子メーカー」の項目が表示される。

ダッシュボードに「お菓子メーカー」という投稿タイプが追加される
ダッシュボードに「お菓子メーカー」という投稿タイプが追加される

この段階で投稿画面はタイトルのみ。

「お菓子メーカー」の新規登録画面
「お菓子メーカー」の新規登録画面

カスタム投稿でカスタムフィールドを使う

カスタム投稿タイプを登録する際にcustom-fieldsを指定したので、カスタムフィールドを利用して「ふりがな」「URL」を入力するとしよう。

カスタム投稿でカスタムフィールドを使うにはプラグインAdvanced Custom Fields(AFC)がお手軽だ。インストール、有効化したら設定画面にて「お菓子メーカー」というフィールドグループを追加し、ふりがなとURLのフィールドを追加する。

メーカー情報のフィールドグループを追加
メーカー情報のフィールドグループを追加

ルールとして投稿タイプがmakerに等しいとなるように指定する。このフィールドグループがお菓子メーカーの登録画面のみ表示されるようにするためだ。

お菓子メーカーの登録画面では、タイトルのほかにふりがなとURLを入力できるようになる。

「お菓子メーカー」の登録画面でカスタムフィールドを使う
「お菓子メーカー」の登録画面でカスタムフィールドを使う

お菓子メーカーを延々登録していく。

お菓子メーカーの一覧
お菓子メーカーの一覧

投稿画面でお菓子メーカーを参照する

お菓子メーカーの一覧ができたならば、あとは毎日食べるお菓子(投稿)にどのようにひもづけてゆくかである。投稿と投稿の関連付けを行うプラグインとして、以下3つが挙がった。

Custom Post Types Relationships
wacja2013-cptr

導入が簡単
関連付け候補の投稿タイプを指定することができない
カスタムフィールドに保存される(シリアライズ化)

Posts 2 Posts
wacja2013-p2p

導入が面倒(functions.phpの編集が必要)
関連付け候補の投稿タイプを指定することができる
独自のテーブルに保存される

Advanced Custom Fields
wacja2013-acf

導入が簡単
関連付け候補の投稿タイプを指定することができる
候補の検索UIがよい
カスタムフィールドに保存される(シリアライズ化)

独自のテーブルに保存されるのは避けたい。かといってカスタムフィールドの値がシリアライズされるのもよくないと思いつつAdvanced Custom Fieldsを選んだ。投稿画面での検索UIがよく、関連付け候補の投稿タイプを限定できるのがポイントだった。

Advanced Custom Fieldsでお菓子メーカーを関連付ける

Advanced Custom Fields(AFC)は先ほどお菓子メーカーを登録する際にも利用した。ここでは投稿画面のために「お菓子情報」というフィールドグループを追加し、価格とメーカーのフィールドを追加する。
フィールドタイプのルールとして投稿タイプがpostに等しいとなるように選択する。このフィールドグループが通常の投稿画面のみ表示されるようにするためだ。

お菓子情報のフィールドグループを追加
お菓子情報のフィールドグループを追加

メーカーのフィールドタイプは関連とし、関連づける投稿タイプをmakerにしておく。

関連づける投稿タイプを指定する
関連づける投稿タイプを指定する

こうすることで、投稿画面でお菓子メーカーを選択する際にmakerの一覧より検索できるようになる。

お菓子の投稿画面でお菓子メーカーを選択
お菓子の投稿画面でお菓子メーカーを選択

ブログ上でお菓子メーカーを表示するには?

ブログ上でお菓子メーカーを表示してみよう。
ACFでは、設定したカスタムフィールドの値を取得するための関数get_field()が用意されている。トップページ(index.php)や詳細ページ(single.php)でお菓子メーカーを表示するには以下のようになる。

[PHP]

お菓子メーカーの表示

お菓子メーカーの表示

お菓子メーカーの一覧を表示する

カスタム投稿タイプmakerの投稿一覧は、
ブログURL/maker/
というパーマリンクとなる。テンプレートはarchive.phpだ。

ページタイトル

カスタム投稿タイプの一覧のページタイトルは、条件分岐で通常のアーカイブページと区別する必要がある。

[PHP]



label; ?>

」に関するお菓子

[/PHP]

カスタム投稿タイプの一覧

投稿一覧を表示する場合も、カスタム投稿タイプと投稿では持つデータが異なる場合があるので区別したほうがよいだろう。
例えば、
・カスタム投稿タイプの一覧 → 記事タイトル(メーカー名)とふりがなを表示
・それ以外のアーカイブ → 記事タイトル(お菓子名)とメーカー名を表示

[PHP]

4件のコメント

  1. […] 初めまして! WordPress Advent Calendar 2013 6日目担当の木谷(@kimipooh)です。 今年初めての参加です。 本日は、私以外に鳥山さん(@sysbird)もご担当ですね。はやい….もうアップされてる…。しかも綺麗で纏まったデザインですよねぇ。そこはマネできない部分なので、マイペースで行きたいと思います! また本サイトのデザイン・レイアウトは全くカスタマイズしてません。というか個人サイトぐらいは管理運用から離れたいので、もういいや!みたいな感じです…そのため多少見づらいかもしれません、そのあたりはご容赦を… […]

  2. 仕事のサイト(http://www.tuj.ac.jp/icas/)ではposts2postsを使っていますが、その時に下記2つも検討しました。Typesは結構よい感じだったんですが、かゆいところに手が届くには有料版が必要で。。。て感じで、Podsは機能盛りだくさんで複雑そうだったのでやめました。

    WordPress › Types – Custom Fields and Custom Post Types Management « WordPress Pluginshttp://wordpress.org/plugins/types/

    WordPress › Pods – Custom Content Types and Fields « WordPress Pluginshttp://wordpress.org/plugins/pods/

  3. >Toruさん、
    ありがとうございます!お菓子メーカーに関してはこれで完成とせずに、いろいろ試していきたいです

Toru にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください