Wordpresでカスタムフィールドを活用する手法！取得！追加ボタン！表示するために設定！

カスタムフィールドは、WordPressの投稿やページにさまざまなデータや情報を追加できる便利なWordPress機能です。

人気のあるWordPressプラグインやテーマの多くは、カスタムフィールドを使用して重要なデータを保存しています。カスタムフィールドを使用して独自のデータを保存し、それをWebサイトで使用することもできます。

WordPressのカスタムフィールドとは何ですか？

WordPressを扱っているなら知っておきたいカスタムフィールドについてお伝えします。記事のタイトルや本文以外に別の情報を追加してサイトに掲載する属性を設定できる機能があります。

カスタムフィールド（Custom Fields）は、 WordPress に標準で用意されている編集機能の一つとなります。

WordPressのカスタムフィールドは、編集中の投稿やページに関連する情報を追加するために使用するメタデータです。デフォルトでは、WordPressは新しい投稿、ページ、または任意のコンテンツタイプを書くときに、2つの異なる領域に保存されます。

WordPressは、作成した各記事やページに、必要なメタデータを自動的に追加します。

こうした情報を本文に書き込んで管理することもできます。
「カスタムフィールド」を使うとさらに便利です。
カスタムフィールドを使えば、「タイトル」や「本文」だけではなく任意のフォームを追加できます。
テンプレートタグを駆使することで、後ほど「評価が高い順に並べ替える」といったこともできるようになります。

ちょっとしたコードを付け加えるだけで、このメタデータに投稿の表示期限を付け加えたりすることも可能です。

メタデータは名前と、その値の組み合わせからなっています。名前は、メタデータ要素の名称のことを指します。値は、その要素に対応する情報を指します。

WordPressでカスタムフィールドを使うメリットは？

「決まった項目の入力データが扱いやすくなる」については、ショッピングサイトなどを思い浮かべていただくとイメージしやすいと思います。

「商品名」「価格」「特徴」と 商品の情報を管理する場合、入力項目は一定。

入力が必要な項目を予め用意することで、データ入力のストレスを大幅に低減できることでしょう。 感覚的には「入力のテンプレート」といった感じですね。

WordPressのビジュアルエディタを利用して、写真や画像を上記イメージのように並び替えを行うには、

といったように、初心者にとって導入のハードルが高いと言えます。

しかし、カスタムフィールドを設定することで、

といったことが簡単にできるようになります。

WordPressでカスタムフィールドを追加・表示・取得させる方法！

表示になってるカスタムフィールドは、投稿、ページ、または任意のコンテンツタイプに関連する任意の情報を追加するために使用することができます。

このメタ情報は、あなたのテーマによってそれぞれ表示することができます。編集するには、WordPressのテーマファイルを編集する必要があります。

非表示

デフォルトでは、カスタムフィールドのオプションは、投稿の編集画面では非表示になっています。表示するには、画面右上の3点メニューをクリックし、メニューから「オプション」を選択する必要があります。

カスタムフィールド（Custom Fields）は、 WordPress に標準で用意されている編集機能の一つ。

ブログ記事であれば、「タイトル」「本文」だけでよいです。

ブログ記事などの場合はこの二つの編集項目で事足りそうですが、ショッピングサイトや物件紹介サイトななどの場合は、「タイトル」「本文」以外に 「価格」「商品の特徴」 などの項目があるとコンテンツを管理しやすそう。

例えば次のようなテーマだと、追加で情報をまとめておきたい場合があります。

不動産サイト：
　　場所・交通情報・築年数・賃料・敷金礼金・おすすめポイントなど
レストランのレビューブログ：
　　場所・交通情報・評価・価格帯・おすすめ料理など
アパレルショップ：
　　ブランド・価格・サイズ・在庫数など
日記：
　　今日の天気・今日の気分・一言コメントなど

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

①デフォルトでは、カスタムフィールドオプションは投稿編集画面では非表示になっています。

表示するには、画面右上の3点メニューをクリックし、メニューから「オプション」を選択する必要があります。すると、ポップアップが表示されますので、Advanced Panelsの下にある「カスタムフィールド」オプションにチェックを入れてください。ここでカスタムフィールドの設定を行うことになります。

②カスタムフィールドを追加したい投稿またはページを編集し、カスタムフィールドメタボックスに移動する必要があります。次に、カスタムフィールドの名前を指定し、その値を入力する必要があります。カスタムフィールドの追加]ボタンをクリックして、保存します。

フィールドは保存され、カスタムフィールドメタボックスにこのように表示されます。

このカスタムフィールドはいつでも編集可能で、更新ボタンをクリックすると変更が保存されます。また、必要に応じて削除することもできます。
これで、カスタムフィールドの設定を保存するために、投稿を保存することができます。

「カスタムフィールドを追加」で新しく属性(キー)を追加します。次回以降はプルダウンメニューから属性を選択することができます。

WordPressテーマでカスタムフィールドでボタンなど表示する

まず、カスタムフィールドを表示するために編集する必要のあるテーマファイルを探す必要があります。

設定したカスタムフィールドを、記事の中に表示します。

記事にカスタムフィールドを表示させるには、

• the meta()テンプレートタグを
• WordPressループ内に設置する

といった作業が必要です。

phpファイルに上書きするため、編集を失敗するとサイト画面の崩れたりする恐れがあります。

またWordPressテーマによっては、書き込む先のphpファイルが異なるため、編集は慎重に行わなければなりません。

カスタムフィールドの値を、テンプレートソース内の任意の箇所に表示させたい場合が多いと思います。この関数は特定の投稿の特定のキーからカスタムフィールドの値を取得します。すべてのカスタムフィールド値を取得するには get_post_custom() を使うとよいでしょう。

single.php または content-single.php ファイルを編集する必要があります。WordPressのループの中にカスタムフィールドのコードを入力する必要があります。次のような行を探します。

理想的には、単一の投稿ページに表示させたいところです。

1	<?php while ( have_posts() ) : the_post(); ?>

次の行の前にコードを追加していることを確認したい。

1	<?php endwhile; // end of the loop. ?>

ここで、このコードをテーマファイルに追加する必要があります。

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

キーをカスタムフィールドの名前に置き換えることを忘れないでください。例えば、デモテーマではこのようなコードを使用しました。

<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>

これで変更を保存して、カスタムフィールドを追加した投稿にアクセスし、その動作を確認することができます。

これで、このカスタムフィールドを他のすべてのWordPress投稿でも使用できるようになりました。

新しい投稿を作成するか、既存の投稿を編集するだけです。カスタムフィールドメタボックスに移動し、ドロップダウンメニューからカスタムフィールドを選択し、その値を入力します。

まとめ

投稿ページでカスタムフィールドを表示させるまでは簡単に再現できると思います。記事に反映させようとすると、phpファイルの編集が不可欠となります。