WordPress カスタムフィールドを使ってランチ料金を表示する


WordPressのカスタムフィールドは、WordPressにない項目を独自に追加することができる機能の一つです。

たとえば、ランチのまとめサイトを作るとします。
その場合、店舗ごとにメニューや、料金、営業時間など、さまざまな項目を入力できるようにしておけば、レイアウトをあとから自在に変えることができますし、場合によっては料金や時間順に並べ替える、といったことも出来ます。

つまり、普通、投稿で入力できる項目は、基本的にタイトルと本文だけですが、料金や営業時間といった項目を、カスタムフィールドを使うことで新たに追加することが出来るのです。

そのカスタムフィールドを実際に使う方法ですが、大きく分けて二通りの方法があります。

ひとつは、テーマの中の、function.php にプログラムを書き加えることで追加します。プログラムといっても、それほど難しいことではないのですが、プログラマ出ない人は、ちょっととっつきにくいかもしれません。

もうひとつは、プラグインを使ってカスタムフィールドを使う方法です。
プログラムを打ち込む必要がないので、初めての人でも取っ付き易いです。(とはいえ慣れが必要ではありますが)

そこで、今日はプラグインの使い方をお話します。
私達がよく利用するプラグインは、
Advanced Custom Fields と Types の2つがあります。

Typesは非常に多機能で、カスタム投稿も追加することが出来ます。 ただ、どんなプラグインでもそうですが、他のプラグインと相性がわるく、正しく動作しないことがあります。経験上、Typesは多機能なせいなのか、他のプラグインと相性が悪いことが多いので、シンプルな、Advanced Custom Fields を使うことをおすすめします。

1406270001

Advanced Custom Fields を追加すると、メニューに「カスタムフィールド」項目が追加されます。
[新規追加] をクリックすると、新しいカスタムフィールドを追加できます。

1406270002

カスタムフィールドのタイトルを付けて、[+フィールドを追加]ボタンをクリックします。

1406270005

フィールドラベル に、フィールドの項目をつけます。これは、投稿画面にカスタムフィールドを表示される名前です。

フィールド名 に、フィールドの名前をつけます。かならず半角の英数、アンダーバー、ハイホンを使います。
このフィールド名は、カスタムフィールドに入力された内容を表示させるときにも使います。

フィールドタイプは、「テキスト」の場合一行の入力欄が用意されます。他には「テキストエリア」を選べば複数行の入力欄、「画像」を選べば画像選択欄 、などを追加することが出来ます。

ここでは、例として、

フィールドラベル : ランチ料金

フィールド名 : lunch_price

フィールドタイプ : テキスト

としてみました。

 

1406270006

[+フィールドを追加] ボタンをクリックすると、さらにフィールドを追加することが出来ます。ここでは追加せずにそのまま進めます。

次に、「位置」のところで、追加するカスタムフィールドをどこに表示させるかを決めることが出来ます。

投稿タイプ で post であれば、このカスタムフィールドを表示させるということですが、postは、投稿のことを意味しています。

「投稿タイプ」以外を選択すれば、カテゴリの編集画面や、メディアの編集画面などにも追加することが出来ます。

postを選択すれば、投稿の編集画面に。
pageを選択すれば、固定ページの編集画面に、カスタムフィールドが表示されます。

ここでは、投稿の編集画面に表示させたいのでこのままで進めます。

1406270007

[公開]ボタンをクリックすれば、準備完了です。

1406270008

ためしに、[新規投稿]してみてください。ランチ料金 の項目が追加されているのが確認できます。

次に、実際にホームページ上に表示させる方法ですが、
get_post_meta($post->ID,’lunch_price’,true )
これをテンプレートに入れるだけです。

テーマによって、どこに書き込むべきかはちがいますが、ここでは例として、 Twenty Fourteen の場合です。
外観→テーマの編集→content.phpで、タイトルの下辺りに次のように追加します。

<?php
endif;
if ( is_single() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' );
endif;
?>
<?php if ( get_post_meta($post->ID,'lunch_price',true ) ) { echo get_post_meta($post->ID,'lunch_price',true ).'円';}?>
<div class="entry-meta">

そうすると、投稿の個別ページのタイトル下に料金が表示されるようになります。

1406270010

ちなみに、
if ( get_post_meta($post->ID,’lunch_price’,true ) ) としているのは、もし料金が入力されていない時だけ表示させるためです。

なので、かならず表示させるのであれば、

<?php echo get_post_meta($post->ID,'lunch_price',true ); ?>円

でOKです。

さらにWordPress 3.5 以降であれば、もっとシンプルに記載できます。

<?php echo $post->lunch_price; ?>円

カスタムフィールドは、プログラマでなくても比較的簡単に扱えるので、チャレンジしてみてもいいのでは?