ブログ記事に登場する人物を紹介するテンプレートを作りたくて、

WordPressのカスタムフィールド周りを調べてみた。

 

カスタムフィールドを実現できるプラグインで、一番有名なのはおそらくAdvanced Custom Fieldsだろう。

スクリーンショット 2014-12-04 6.13.00

 

他にも、typesとか、使いやすそうだった。

スクリーンショット 2014-12-04 6.13.13

 

でも今回は、「ユニットグループ」としての機能を使いたかった。

つまり、複数のカスタムフィールドをグループ化して、まるごと複製できるもの。

 

a-blog cmsとか導入してたら、かなりシンプルに実現できそうな気配はむんむんする。

スクリーンショット 2014-12-04 6.16.08

むしろ、a-blog cmsの中の人に、
「なんでa-blog cmsでやらないの?」とか言われそうだけど、
今回は、Custom Field Template というWordPressのプラグインを使ってみた。

 

ちなみに、予め断るけれど、僕はプログラムを書くことができない。

なので、基本的にはネットに落ちている情報のコピペをベースに作っている。

つまり、ここに書いてあることは僕のメモ書きなので、あくまでも「動作した」というレベルです。
「コード違うじゃん」というご指摘があれば、ぜひアドバイスいただきたい。

 

Custom Field Template

スクリーンショット 2014-12-04 6.19.36

http://ja.wpcft.com

 

Custom Field Templateのメリット

カスタムフィールドグループを作ることができる。

通常のカスタムフィールドも、複製可能なフィールドは作れるけれど、グループとして複製することはできない。

※できるのかもしれないけれど、少なくとも僕にはわからない。

 

例えば、ブログに登場した人物の紹介を作るとして、

・お店の名前
・ホームページ
・紹介文
・画像

の4つを、1まとめにして、複数の人物を紹介したいとき、

基本的なカスタムフィールドだけだと、管理が面倒になってしまう。

 

そこで、Custom Field Templateなら、上記のような項目をグループ化して、複製することができる。

 

Custom Field Templateのデメリット

項目を複製した後に、並び替えることができないのがキツい。

削除・追加 はあるけれど、移動ができない。

 

3〜4件のデータを管理するだけなら、手動でコツコツできる範囲だけれど、
数十個のデータを管理する場合には、かゆいところに手が届かないので、向いていないと思う。

 

まずは、グループを作る

カスタムフィールドテンプレートオプションという項目で、複数のカスタムフィールドを1つにまとめたグループを作る。

このテンプレートオプションも、多少アナログな感じはするけど、覚えてしまえば楽に追加できる。

例えば今回は、こんな感じのテンプレートを作った。

[field0]
type = fieldset_open
legend = 登場人物
multipul = true
multipleButton = true

[salon_name]
type = textfield
size = 35
label = 店舗名
blank = true

[therapist_name]
type = textfield
size = 35
label = 個人名
blank = true

[salon_url]
type = text
size = 35
label = 店舗URL
blank = true

[salon_descr]
type = textarea
rows = 4
cols = 40
label = 店舗紹介
tinyMCE = true
htmlEditor = true
mediaButton = true
blank = true

[salon_asset]
type = file
label = サロン画像
mediaPicker = true
mediaRemove = true
blank = true

[facebook_id]
type = text
size = 50
label = FacebookID
blank = true

[field0]
type = fieldset_close 

 

これで、店舗情報を追加するフィールドができる。

スクリーンショット 2014-12-04 6.30.48

登場人物の横にある「追加」をクリックすれば、このボックスごと、複製することができる。

複製したい場合は、

[field0]
type = fieldset_open
legend = 登場人物
multipul = true

ここの multipul の記述が大事みたい。

 

テキスト登録の時の注意

複数行テキストに文字を追加する時は、注意が必要。

長い文章を書いても、これを気をつけないと、保存ボタンを押した後に白紙に戻ってしまう場合がある。

それは、プレーンテキストで書かないこと。

ちゃんと、<p>とかが入っていないと、消えてしまう場合がある。
今回も、せっかく書いたテキストが消えて、多少イラッとした。

 

保存した内容を書き出す

内容を書き出すには、以下の手順を踏む。

難しい言葉はよくわからないので、自分なりの感覚的な言葉に落としこんですみません・・。

 

まずは、カスタムフィールドを設定。

<?php
	$cf  = get_post_custom( $post->ID );
	$value0= $cf['salon_name'];
	$value1= $cf['salon_url'];
	$value2= $cf['salon_descr'];
	$value3= $cf['facebook_id'];
	$value4= $cf['salon_asset'];
	$value5= $cf['therapist_name'];
	$field0 = $cf['field0'];
	$length = $field0[0];
?>

これで、登録したカスタムフィールドを配列に置き換える。

 

つまり、salon_name というカスタムフィールドは、いったん value0 という箱に入れちゃう。

この value0 という箱には、

  • 一番目のサロン名
  • 二番目のサロン名
  • 三番目のサロン名

という感じで、複数の情報が入ってる。

箱の中に、カルテシートが入ってる感じ。

「サロン名という箱に入ってる、3番目のカルテを取り出す」と言えば、3つめのサロン名を取り出すことができる。

 

 

そして、書き出す時はこう。
ここでは、登録したセラピスト名を書き出してみる。

for( $i = 0; $i < $length; $i++ ){
    echo '<div class="therapist_name">' .$value5[$i]. ' さん</div>';
?>

これで、セラピスト名を出力できる。

 

どういうことかというと、

$length というものには、$field0 の内容が入ってる。

$field0は、multipul というオプションで設定したフィールドで、

「いくつのカルテが入っているか」の情報が入ってる。

例えば、上記の場合は、「カルテは3枚はいってる」という情報が保存されてる。

for( $i = 0; $i < $length; $i++ ){

という部分で、

「最初は0枚ね、それをカルテ数を超えるまで、1ずつ足してね」という指定をして、ループさせる。

 

つまり、1番目のカルテ → 2番目のカルテ → 3番目のカルテ という順番に、

カルテの枚数合計である3を超えるまで繰り返すことになる。

 

あとは、書き出したものをスタイルシートで整えれば完成。

 

実際に書き出したものは、こちら

サロン名、個人名、紹介文、ホームページアドレス、FacebookIDを記録してる。

FacebookIDは、FacebookのAPIを使って、プロフィール画像を読み込んでる。

https://graph.facebook.com/ユーザーID/picture?type=large

で、大きな画像を取得できるので、

<img src="https://graph.facebook.com/' .$value3[$i]. '/picture?type=large" alt="' .$value0[$i]. 'のFacebookプロフィール" />

これで、設定したIDから、Facebookのプロフィール画像を表示できる。

 

スクリーンショット 2014-12-04 6.55.55

 

 

 

Custom Field Templateについて思うこと

まだ、使い始めてみただけだから、いいとか悪いとかはわからない。

ただ、ノンプログラマの僕でも使えたということは、ある程度のわかりやすさがあるのは、間違いないと思う。

 

その中で、懸念していることは、「データを使い回す」という時。

例えば、山田さんという登場人物が、複数のブログで出てくる場合、

その都度、山田さんの情報を入力する必要が出てくる。

 

その方法だと、山田さんが結婚をして鈴木さんに変わった時、
全てのブログ記事を1つ1つ修正する必要があるので、対策が必要だ。

 

対策としては、別にデータを保存しておく場所を作り、

その保存してあるデータを引っ張ってくることになりそう。

 

これは、次回対応しよう・・・。