hijiriworld Web

目次

• 1. カスタムフィールドとは？
• 2. カスタムフィールドの使い方
• 3. カスタムフィールドの表示方法
• 4. カスタムフィールドのちょっとした小技
• 5. 拡張プラグイン Custom Field Template
• 6. 拡張プラグイン Advanced Custom Fields

1. カスタムフィールドとは？

WordPressの投稿フォームには、「タイトル」と「本文」の2つがあります。
ただのブログであればこれで十分ですが、CMSとしてWebサイトを構築しようとしたら不十分です。
WordPressには、投稿フォームに「カスタムフィールド」を追加できる機能があります。この任意の情報は「メタデータ」と呼ばれ、「名前」とその「値」の組み合わせからなっています。
つまり、「タイトル」と「本文」以外に、任意の入力フォームを追加できる機能といえます。

↑目次に戻る

2. カスタムフィールドの使い方

投稿フォームの「カスタムフィールド」ボックスを使います。

「名前」の欄に「今日の天気」、「値」の欄に「晴れ」と入力してみましょう。
入力したら「カスタムフィールドを追加」ボタンを押して、記事にカスタムフィールドを追加します。
※一度追加したカスタムフィールドの「名前」は、以後、プルダウンメニューから選択できるようになります。

3. カスタムフィールドの表示方法

カスタムフィールドの値を取得するには、get_post_meta() 関数を使います。この関数は、WordPressループ内で使用します。

• get_post_meta ($post_id, $key, $single);
• $post_id： 記事ID。ループ内では $post->ID 。
  $key： 取得するカスタムフィールドのキー（名前）
  $single： true または false。trueの場合は結果を1つの文字列として、false の場合は配列で返します

記事内に、さきほど追加した「今日の天気」という名前のカスタムフィールドの値を表示させたい場合は、以下のようにします。

	<?php if (have_posts()) : ?>
		
		<?php while (have_posts()) : the_post(); ?>
			
			<div <?php post_class(); ?>>
				
				<h2><?php the_title(); ?></h2>
				
				<?php echo get_post_meta($post->ID, '今日の天気', true); ?>
				
				<div class="entry">
					<?php the_content(); ?>
				</div>
				
			</div>
		
		<?php endwhile; ?>
	
	<?php else : ?>
		
		Not found
		
	<?php endif; ?>

また、同じ名前のカスタムフィールドに、複数の値を入力することも可能です。
そうした場合は、get_post_meta () の第三引数を falseにして、配列として取得して表示させるとよいでしょう。

4. カスタムフィールドのちょっとした小技

カスタムフィールドに画像を保存することもできます。
正確には、カスタムフィールドの「値」に、アップロードした画像のパスを保存しておく方法です。

新たにカスタムフィールドを追加して、「名前」の欄に「今日のにゃんこ」、「値」の欄には、以下の手順に従ってアップロードした画像のパスを入力します。

① 投稿画面の画像アップローダーを起動
② 画像をアップロード
③ 「リンクURL」の値をカスタムフィールドの「値」に入力

これで、「今日のにゃんこ」というカスタムフィールドの「値」に、アップロードした画像のパスが保存されます。
これを、記事内で画像として表示させたい場合は、次のようにすればよいですね。

<img src="<?php echo get_post_meta($post->ID, '今日の一枚', true); ?>" />

5. 拡張プラグイン Custom Field Template

ダウンロード: Custom Field Template
作者のページ: 作者のページ

5-1. プラグイン Custom Field Template とは？

プラグイン Custom Field Template は、カスタムフィールドの機能を支援・拡張してくれるプラグインです。
あらかじめ、カスタムフィールドのテンプレートを登録しておくことで、カスタムフィールドの「名前」を、その都度入力することなく、テンプレートの項目に値を入力していくだけでよくなります。
とても便利ですね。

5-2. 使い方

Custom Field Template をインストールしたら、「管理画面 > 設定 > カスタムフィールドテンプレート」から設定を行います。

設定画面の下の方には、いろんな設定項目がずら～っと並んでいますが、テンプレートの設定だけでも十分使えますので、今回は特にノータッチでいきます。

では、テンプレートの設定について。
ディフォルトでは、サンプルとして以下のコードが入力されています。

[Plan]
type = text
size = 35
label = Where are you going to go?

[Plan]
type = textfield
size = 35
hideKey = true

[Favorite Fruits]
type = checkbox
value = apple # orange # banana # grape
default = orange # grape

[Miles Walked]
type = radio
value = 0-9 # 10-19 # 20+
default = 10-19
clearButton = true

[Temper Level]
type = select
value = High # Medium # Low
default = Low

[Hidden Thought]
type = textarea
rows = 4
cols = 40
tinyMCE = true
mediaButton = true

HTMLがある程度分かっている人であれば、なんとなく分かるでしょうか？
大体こんな感じです。

[ ] – カスタムフィールドのキー（名前）
type – フォームタイプ
label – 入力フォームの表示項目
その他いろいろ – フォームタイプごとのオプション項目

※設定できるオプション項目の詳細については、作者のページか、「管理画面 > 設定 > カスタムフィールドテンプレート」の「オプションリスト」を参照してください。

このテンプレートは、投稿画面ではこうなります。

では、さきほどの、「今日の天気」と「今日のにゃんこ」をテンプレート化すると、こうなります。

[今日の天気]
type = text
size = 35
label = 今日の天気
     
[今日のにゃんこ]
type = file
label = 今日のにゃんこ

投稿画面ではこうなります。

画像もそのままアップロードできて、さらに、アップロードした画像のサムネイルも表示されるので、見やすいですね。

※テンプレートを複数登録しておけば、使用するテンプレートをプルダウンから選択できるようにもなります。

5-3. 添付ファイルの扱い方

カスタムフィールドテンプレートで保存したカスタムフィールドの値を取得する時も、get_post_meta() を使えばよいのですが、添付ファイルに関しては少し注意が必要です。

先に取得方法を書いてしまいます。

echo wp_get_attachment_image(post_custom('今日のにゃんこ'),'full');

• wp_get_attachment_image( $attachment_id, $size, $icon ); – アタッチメント（添付ファイル）のHTMLテキストを取得する
• $attachment_id： 添付ファイルの記事ID
  $size： 画像サイズ（thumbnail, medium, large, full, もしくは縦横サイズを配列で指定）
  $icon： メディアアイコン付加の有無（ディフォルト：false）
• post_custom – 指定したキー（名前）の値を取得

カスタムフィールドテンプレートで「今日のにゃんこ」の画像をアップロードすると、「今日のにゃんこ」の「値」には、記事ID が入ります。
データが登録されたデータベースのテーブルを見ると、どうなっているかが分かります。

データベースの wp_postmeta テーブルを見てください。

カスタムフィールドで、「値」に画像のURLをテキストで入力した場合、データは以下のように登録されています。

post_id： 記事ID
meta_key： キー（名前）
meta_value: 値

一方、カスタムフィールドテンプレートを使って、画像をアップロードすると、データは以下のように登録されます。

このように、カスタムフィールドテンプレートで添付ファイルを保存した場合、「今日のにゃんこ」の「値」には、アップロードされた添付ファイルのパスが登録されている記事IDが登録される、という仕組みです。

6. 拡張プラグイン Advanced Custom Fields

カスタムフィールドのプラグインとしては非常に完成度が高く、標準で組み込んでもいいのではないか？と思うほどすばらしいプラグインです。超オススメ。