カスタムフィールドを使ってみよう
投稿に情報を付随させる
投稿にタイトルや本文など通常以外の情報を持たせたくなるときがあります。
カスタムフィールドを設定すると、通常の投稿では持っていない情報を持たせることができます。
例えば本の紹介を考えてみよう。この記事には本のタイトル、作者、出版社、ページ数、評価点数 出版社のURLなどの情報が考えられます。
カスタムフィールドが無いと大変
もしカスタムフィールドを使わない場合、記事内にすべての情報を入れることになります。そうするとテンプレートファイルからはthe_content()や$post->post_contentでしか、記事内容にアクセスすることができず、個々の情報ごとに処理することはできないです。
例えば評価には☆を付けたいとすると、毎回記事内で、☆を付ける為のタグなりを入れなくてはなりません。
しかも☆が付く個数も毎回違いとおもうので単純なコピーペーストもできないです。つまり見栄えを作る為には記事内でタグを打たなくてはいけなくなり、とても大変なことになってしまいます。
カスタムフィールドの威力
そこでカスタムフィールドの出番です。本のタイトル、作者、出版社、ページ数、評価点数 出版社のURLをカスタムフィールドとして格納することで、テンプレートファイルから呼び出せるようになり、テンプレートで見栄えを作ることができます。
いちいち記事本文内でタグ打ちをしなくても、しっかり整形できるという訳です。
このようにカスタムフィールドは「テンプレートファイルから投稿に付随した情報を扱う」ための機能と言えます。
カスタムフィールドを使う手順
実際にカスタムフィールドの基本的な使い方を説明したいと思います。プラグインを使うこともできますが、今回は標準装備の機能で説明を進めたいです。もし機能についての理解ができたらプラグインなどの利用をしてもらえたらと思います。
準備
カスタムフィールドの入力は投稿執筆画面で行えます。 しかしデフォルトでカスタムフィールド機能は表示されていないので、表示オプションでカスタムフィールドにチェックを入れる必要があります。
表示設定をするとエディタの下方に以下のようなスペースが表示されているかと思います。これでカスタムフィールドを使う準備ができた。
カスタムフィールドの入力
カスタムフィールドは「名前」と「値」から成っています。名前は値を呼び出す際の識別で、値は情報自体です。
名前は日本語でも構わないですが、通常は英数字を指定することが多いです。値は文字列、数値、URL、タグなどなんでもOKです。
例では以下のように入力してみましました。
- 本のタイトル = book
- 作者 = author
- 出版社 = public
- ページ数 = page
- 評価点数 = ster
- 出版社の = URLpublic_url
wordpressのカスタムフィールドでは複数同じ「名前」を付けることもできます。 bookカスタムフィールドを二つ用意して、一気に２冊のレビューをするというようなことも可能です。
テンプレートからカスタムフィールドを取得する
カスタムフィールドを取得する方法はいくつか存在しています。
the_meta()
リスト形式でカスタムフィールドを表示してくれるテンプレートタグ。名前と値をul,li,spanタグで整形し、post-meta-keyというclassを出力してくれます。 単純に出力するにはとて楽な方法ですが、カスタマイズは出来ないです。以下のように出力されます。
<ul class='post-meta'>
<li><span class='post-meta-key'>book:</span> 内容の無い本</li>
<li><span class='post-meta-key'>author:</span> バカ田バカ男</li>
<li><span class='post-meta-key'>page:</span> 1080</li>
<li><span class='post-meta-key'>public:</span> 発禁堂</li>
<li><span class='post-meta-key'>ster:</span> 5</li>
<li><span class='post-meta-key'>public_url:</span> http://hoge.hoge.jp/hakkindo?a=bakadabakao&b=naiyounonai</li>
</ul>get_post_meta()
カスタムフィールドを細かくコントロールしたいならget_post_meta()を使おう。引数が3つあり以下のようになります。
get_post_meta( 投稿ID , 名前(キー) , 文字列or配列)
投稿IDは直接指定も可能だし、ループ内ならget_the_ID()を使うのが便利です。名前はカスタムフィールドで設定した名前のこと。 文字列or配列は戻り値を文字列にするか配列にするかをtrue(文字列)、false(配列)で指定します。 デフォルトはfalse(配列)です。
値が配列になるのは不思議に思うかもしれないですが、同一の名前で違う値のカスタムフィールドを複数設定できるので、取得できる値が複数である場合もある為です。
単純に（ループ内などで)今の投稿のbookというカスタムフィールドの値を取得したい場合は以下の様に記述します。 出力にはechoが必要です。
<?php echo get_post_meta( get_the_ID() , "book" ); ?>また、投稿IDのみを指定した場合はすべてのカスタムフィールドを取得することができます。
<?php $meta = get_post_meta( get_the_ID() ); ?>戻り値は配列になるので、一旦変数に代入するなどすると使いやすいかと思います。
get_post_custom()
get_post_meta( get_the_ID() )と同じように、指定した投稿のすべてのカスタムフィールドを配列で取得する関数。
$meta = get_post_custom();get_post_custom_values()
指定した投稿IDと名前を条件に値を配列で取得します。 同一の名前に複数の値が存在する場合などに便利。以下は(ループ内等での)今の投稿のbookという名前をもつ値を取得する記述。
$meta = get_post_custom_values( get_the_ID() , "book" );get_post_custom_keys()
この関数は値を得るのではなく、名前(キー)を得えることができます。 投稿IDを指定すると、すべてのカスタムフィールドの名前が配列で取得できます。 以下は(ループ内等での)今の投稿のすべてのカスタムフィールドの名前を取得する記述。
$meta = get_post_custom_keys( get_the_ID() );コード参考例
コード
実際にカスタムフィールドをテンプレートファイルから取得してみるコードを書いてみましました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
body{
width: 100%;
margin: 0;
float: left;
}
#container{
width: 100%;
padding: 10%;
margin: 0;
box-sizing: border-box;
float: left;
}
.book{
width: 100%;
margin-bottom: 2%;
font-size: 200%;
float: left;
}
.item_div{
width: 100%;
margin-bottom: 2%;
float: left;
}
.item{
height: 32px;
background-color: #ff6600;
margin-right: 2%;
padding: 1%;
border-radius: 8px;
font-size: 60%;
box-sizing: border-box;
float: left;
}
.value{
line-height: 32px;
float: left;
}
.sters{
line-height: 32px;
float: left;
}
img.ster{
width: 8%;
}
#article_content{
line-height: 150%;
}
</style>
<title>カスタムフィールドデモ</title>
</head>
<body>
<div id="container">
<?php if (have_posts()) : the_post();?>
<div class="book">
<?php echo get_post_meta(get_the_ID(),"book",true); ?>
</div>
<div class="item_div">
<span class="item">
出版社
</span>
<span class="value">
<?php echo get_post_meta(get_the_ID(),"public",true); ?>
</span>
</div>
<div class="item_div">
<span class="item">
出版社のURL
</span>
<span class="value">
<?php echo get_post_meta(get_the_ID(),"public_url",true); ?>
</span>
</div>
<div class="item_div">
<span class="item">
著者
</span>
<span class="value">
<?php echo get_post_meta(get_the_ID(),"author",true); ?>
</span>
</div>
<div class="item_div">
<span class="item">
ページ数
</span>
<span class="value">
<?php echo get_post_meta(get_the_ID(),"page",true); ?>
</span>
</div>
<div class="item_div">
<span class="item">
お勧め度
</span>
<?php
$ster = get_post_meta( get_the_ID() , "ster" , true );
echo "<span class=\"sters\">";
$ster_p = 5 - $ster;
for( $i = 0 ; $i < $ster ; $i++ ){
echo "<img class=\"ster\" src=\"" . get_template_directory_uri() . "/img/ster_o.png\">";
}
for($i=0;$i<$ster_p;$i++){
echo "<img class=\"ster\" src=\"" . get_template_directory_uri() . "/img/ster_p.png\">";
}
echo "</span>";
?>
</div>
<div id="article_content">
<?php echo the_content(); ?>
</div>
<?php endif; ?>
</div>
</body>
</html>補足説明
コードは簡素極まりないですが、カスタムフィールドの基本的な使い方は理解していただけるかと思います。
お勧めの項目ではカスタムフィールドから取得した値を元に評価スターの個数を計算して、☆の画像を出力する処理を書いています。本来はfunctions.phpに書いたほうがいいのですが、例の為に直に書きました。
この☆のように、カスタムフィールドの値を活用するとさまざまなカスタマイズが可能になることがお分かりいただけるのではないかと思います。
まとめ
カスタムフィールドはとにかく便利。投稿内容だけに縛られないコンテンツ作りが可能になるといっても過言ではないです。
今回は単にカスタムフィールドを表示させるデモの紹介だったが、それ以外にもカスタムフィールドの値で投稿をソート、カスタムフィールの名前を元にループを作るなど、ループ系処理にも使うことができます。
アイデアは無限なので、今回の記事を参考にしてもらい、プラグインを使うのもよし、ガシガシ関数を書くのも良し、いろいろチャレンジしてみたら面白いのではないかと思います。
