OXY NOTES

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

oxy

カスタムフィールドを導入して余った時間はコンテンツの充実に振り向けよう

「同じフォーマットのページを作るのに、テーブルを毎回コピペをしている。」
「ページによって要素が変わって、いつの間にかフォーマットがバラバラ。」
もうそんな不毛な作業は必要ありません。カスタムフィールドを使えば、変更点だけを入力すればいいので、わかりにくいHTMLエディタでの作業から解放されます。

論より証拠、今回は「アクアリウムWiki」のページをカスタムフィールドで再現してみます。以下は最終目標のイメージです。

Custom Field Templateのインストール

カスタムフィールドを作るにはCustom Field Template（カスタムフィールドテンプレート）というプラグインを使います。
完全日本語化されていて直感的に作業できるのでぜひ導入しましょう。
ではCustom Field Templateをインストール。有効化します。インストールの方法がわからない方は「WordPressにプラグインをインストールする方法」を参照してください。

基本設定

ありがたい事に全て日本語化されているので特に迷うことは無いと思います。
管理画面の「設定 > カスタムフィールドテンプレート」をクリックすると新規作成ページに移動します。

各設定の解説

その他の設定

日本語なのと、デフォルトで問題なく使えるので解説も必要ないと思いますがオススメ設定を書いておきます。

#cft dl { margin:15px 0px 15px 5px; }
#cft dl:after { content:" "; clear:both; height:0; display:block; visibility:hidden; }
#cft dt { width:20%; clear:both; float:left; display:inline; font-weight:bold; text-align:right; }
#cft dt .hideKey { visibility:hidden; }
#cft dd { margin:0 0 0 21%; }
#cft dd p.label { font-weight:bold; margin:5px 0px; }
#cft_instruction { margin:10px; }
#cft fieldset { border:1px solid #CCC; margin:5px; padding:5px; }
#cft .dl_checkbox { margin:0; }

ちなみに今回は使用しませんが「[cft] and [cftsearch] Shortcode Format」にフォーマットを書いて、[cft format=0]という書式を投稿画面に書くと出力してくる機能もあります。
ショートコードのような書式でキーを[英名]と書けば出力してくれるのでより簡単にフォーマットが作れます。さらにこの方法ならテンプレートをいじらずに済みます。表にテキストを流しこむだけ、などという場合に便利な機能です。

テンプレートの作成

今回はカスタム投稿タイプ「魚（fish）」ページ専用のカスタムフィールドを作成します。

1.「テンプレートタイトル:」に「熱帯魚」

2.今回はカスタム投稿タイプ「魚(fish)」にカスタムフィールドを表示させたいので
「カスタムポストタイプ （カンマ区切り）:」に「fish」と入力。

3.「テンプレートコンテンツ:」を編集します。
書式は「オプションリスト」にあります。使い方はサンプルを参考にしてもらえれば、分かると思います。htmlのフォームのように指定します。今回は以下のようにしました。

[魚の画像をアップロード]
type = file

[英名]
type = text
size = 35

[分類]
type = text
size = 35

[通称]
type = text
size = 35

[分布]
type = text
size = 35

[分布]
type = text
size = 35

[最大体長]
type = text
size = 35
label = ※cmで表記すること

[餌]
type = checkbox
value = 人工飼料 # 冷凍飼料# 活餌
label = ※複数選択可

[飼育難易度]
type = select
value = 難しい# 普通 # やさしい
default = やさしい

[特徴・飼育上の注意 ]
type = textarea
rows = 4
cols = 40
htmlEditor = true

としました。

4.入力が終わったら「オプションを更新する」ボタンをクリック。

カスタムフィールドでページを編集

今回はカスタム投稿タイプ「魚（fish）」用にカスタムフィールドを作ったので、「魚（fish）」に「ネオンテトラ」ページを作り編集します。編集画面を開くと以下のようになっています。

本文の編集の下にカスタムフィールドテンプレートという項目が増えています。作ったテンプレート「熱帯魚」をプルダウンメニューで選択して「読込」ボタンを押して下さい。

すると以下のように展開されます。

必要な情報を入力したら、右上にある「保存」ボタンをクリックして保存します。
今回はネオンテトラページ用に以下のように入力して保存しました。

カスタムフィールドの仕組み

慣れれば簡単な仕組みですが、耳慣れない言葉も出てくるので初めに以下のことを理解しておいてください。
カスタムフィールドは「メタデータ」という情報を持っています。メタデータは「名前」と「値」の組み合わせです。カスタムフィールドの値を表示するには「get_post_meta()」等を使いますが、「メタ」という記述があるのはそのためです。
「名前」は「キー（key）」とも呼びます。関数内で「$key」と書くことで取得する「値」を指定するのに使います。

「WordPress Codex カスタムフィールドの使い方ページ」に詳しい解説があります。

さまざまなカスタムフィールドの記述方法

カスタムフィールドで入力したデータをページに表示します。表示させるためのタグはいくつか用意されいるので、まずはタグの紹介をします。

1.「the_meta()」「get_post_custom()」について

カスタムフィードの値を一覧にして出力するには「the_meta()」もしくは「get_post_custom()」を使います。（the_meta()はループ内でしか使えません。）

<?php the_meta(); ?>

とループ内に書くと以下のようにメタデータの一覧が出力されます。

補足

以下のように自動で成形されるので一覧を取得する以外にあまり使わないと思います。

<ul class="post-meta">
<li><span class="post-meta-key">pvc_views:</span> 155</li>
<li><span class="post-meta-key">英名:</span> Neon tetra</li>
</ul>
・・・

 

2.「post_custom()」について

現在の投稿に関するカスタムフィールドの値を得るには「post_custom()」をループ内に記述します。一番簡単な記述法です。

<?php echo "英名：".post_custom('英名'); ?>

とループ内に書くと以下のように出力されます。

 

3.「get_post_meta()」について

特定のIDと特定のカスタムフィールドの値を得るには「get_post_meta()」を使います。こちらはIDを指定するのでループの外でも動作します。

<?php echo "英名：".get_post_meta($post->ID, '英名', true); ?>

と書くと以下のように出力されます。

それぞれ詳しくは「WordPress Codex」へどうぞ

実際に書いてみます

今回は覚えるためにも色んな指定が出来る「get_post_meta()」を使って表示します。カスタム投稿タイプ「魚（fish）」で表示したいので「loop-single-fish.php」のループ内に以下の記述をします。

<?php 
$image_fish = wp_get_attachment_image_src( get_post_meta($post->ID, '魚の画像をアップロード', true),'full' ); // 画像IDを「wp_get_attachment_image_src」に渡す。「full」で画像サイズを指定、「thumbnail、midium、large、full」が使える
?>
<img src="<?php echo $image_fish[0]; ?>" width="<?php echo $image_fish[1]; ?>" height="<?php echo $image_fish[2]; ?>"><br /> <!-- それぞれ画像に関する情報を取得。[0]でURL、[1]で幅、[2]で高さを指定できる。 -->
</br>
<?php echo get_post_meta($post->ID, '英名', true); ?></br><!-- カスタムフィールドのキー「英名」の値を出力 -->
<?php echo get_post_meta($post->ID, '分類', true); ?></br><!-- カスタムフィールドのキー「分類」の値を出力 -->
<?php echo get_post_meta($post->ID, '通称', true); ?></br><!-- カスタムフィールドのキー「通称」の値を出力 -->
<?php echo get_post_meta($post->ID, '分布', true); ?></br><!-- カスタムフィールドのキー「分布」の値を出力 -->
<?php echo get_post_meta($post->ID, '最大体長', true); ?></br><!-- カスタムフィールドのキー「最大体長」の値を出力 -->
<?php echo get_post_meta($post->ID, '寿命', true); ?></br><!-- カスタムフィールドのキー「寿命」の値を出力 -->

<?php
	$foods = get_post_meta($post->ID, '餌', false); // $foodsに値を配列として代入
	echo implode("、", $foods); // implodeで配列を書き出し、区切り文字で「、（句読点）」を指定
?></br>

<?php echo get_post_meta($post->ID, '飼育難易度', true); ?></br><!-- カスタムフィールドのキー「飼育難易度」の値を出力 -->
<?php echo nl2br(get_post_meta($post->ID, '特徴・飼育上の注意', true)); ?><!-- テキストフィールドの値を改行ありで出力するため「nl2br()」で囲っている -->

解説

2行目「get_post_meta($post->ID, ‘◯◯’, true)」で画像のIDを取得しています。そのIDを画像のURLやサイズを取得する関数「wp_get_attachment_image_src()」に渡しています。
4行目「$◯◯[0]」といった書式で、変数の後に角括弧つけて0～2の値を入れると、[0]で画像のURL、[1]で画像の幅、[2]で画像の高さを出力してくれます。

14～15行目チェックボックスなどの複数の値を持つものはパラメータで「false」と入力することで配列としてデータを受け取ります。出力には「implode(“、”, $◯◯);」を使います。
ちなみにforeachでループさせても値を得られます。

カスタムフィールドでテキストエリアに入力したデータは改行が反映されません。そこで19行目「get_post_meta($post->ID, ‘特徴・飼育上の注意’, true)」を「nl2br()」で囲んで改行を反映させています。

以上の記述をすると、下のように出力されます。

CSSとHTMLで成形

上のままだと味も素っ気もない記述なのでHTMLとCSSで成形します。
今回は以下のようになりました。

初めに目標としたアクアリウムWikiのネオン・テトラページと比べてみます。

意図した通りになりました。

これでCustom Field Templateを使ってカスタムフィールドを作り、表示するところまでできるようになりました。
カスタムフィールド上手く活用して、サクサクページを投稿しましょう。