WordPress

WordPressのカスタムフィールドとは?追加方法やプラグインのおすすめ3選

document 428331 1920 - Wordpressのカスタムフィールドとは?追加方法やプラグインのおすすめ3選

Wordrpressの「カスタムフィールド」という言葉を聞いたことがあるでしょうか?

「それって何?」と思う方も多いかもしれませんが、カスタムフィールドはWordPressに用意されている便利な機能のひとつです。

カスタムフィールドを使えるようになると、さらに自由度が高くなります。そこで今回は、カスタムフィールドについてお伝えします。

そもそもWordpressのカスタムフィールドって何?

easter 1237478 640 - Wordpressのカスタムフィールドとは?追加方法やプラグインのおすすめ3選

WordPressの投稿フォームには、デフォルトで「タイトル」と「本文」の2つが用意されていますが、ここに入力する情報を追加できるのがカスタムフィールドです。

簡単に言うと、記事を書く時のフォーマットをカスタマイズできる機能になります。

また、カスタムフィールドを使うことで「評価が高い順番に並べ替える」ということも柔軟に行えます。

例えば、以下のようなサイトを構築する際に使うことが多いです。

  • たくさんの情報を扱うサイト(例:不動産サイトなど)
  • 決まったフォームで記事を書きたいブログ(例:飲食店紹介など)

これらのサイトを構築する場合、店舗情報などの詳細情報を定型的に表示することができません。

そんな時に「カスタムフィールド」を使うことで、あなたの好きなように任意のフォームを追加できるのです。

WordPressのカスタムフィールドの設定方法とは?

adult 2477756 640 - Wordpressのカスタムフィールドとは?追加方法やプラグインのおすすめ3選

カスタムフィールドはデフォルトでは表示されていないことが多いです。そのため、表示させたい時には、表示させるための設定が必要になります。

設定というと、難しいイメージがあるかもしれません。ですが、この設定はこれから説明していくのと同じように画面をクリックしていけばよいので、簡単にできます。

まず、「新規追加」をクリックして新規投稿を追加できる状態にします。次に画面右上にある「表示オプション」をクリックします。

option - Wordpressのカスタムフィールドとは?追加方法やプラグインのおすすめ3選

すると、チェックボックスが表示されます。その中にある「カスタムフィールド」にチェックを入れます。

custom field - Wordpressのカスタムフィールドとは?追加方法やプラグインのおすすめ3選

下の方にスクロールすると、カスタムフィールドを設定するフォームが表示されます。

2017 07 20 - Wordpressのカスタムフィールドとは?追加方法やプラグインのおすすめ3選

これでカスタムフィールドの設定が完了です!

カスタムフィールドをWebページに出力させるためには?

image portal 658240 640 - Wordpressのカスタムフィールドとは?追加方法やプラグインのおすすめ3選

WordPressの新規投稿画面で、カスタムフィールドを表示させるための設定を行っただけではWebページに表示されません。

ここではカスタムフィールドをWebページに出力させるためのカスタマイズ方法についてお伝えします。

カスタマイズをするファイルは、使っているテーマ中にある「content.phpです。このファイルに、カスタムフィールドを出力させるように編集していくことになります。

「content.php」は、記事ページのテンプレートファイルになっています。このファイルを編集することでカスタムフィールドを表示させることができます。

カスタムフィールドを表示させるコードとしては、次の4つに分類することができます。

カスタムフィールドを表示させるコード4種類

  • カスタムフィールドの名前(キー)を指定して、値(バリュー)を表示させる
  • カスタムフィールドの同じ名前(キー)の値(バリュー)を複数表示する
  • カスタムフィールドを表示するとき、指定した「名前(キー)」がなかった場合、デフォルト値を表示させる
  • 設定されているカスタムフィールドのすべての「キー」と「バリュー」を両方出力する

カスタムフィールドを使う場合は、この4つをあなたの用途に合わせて使い分ける必要があります。

こちらのサイト(カスタムフィールドを設定する方法)に詳細が記載されていますので、直接コードをいじる方法に興味のある方は確認してみてください。

簡単!カスタムフィールドが使えるプラグインを利用

ux 789162 640 - Wordpressのカスタムフィールドとは?追加方法やプラグインのおすすめ3選

直接コードを編集するとなると難しいと感じる方も多いでしょうが、実はプラグインを使うことで、簡単にミスなくカスタムフィールドを出力させることができます。

カスタムフィールドが使えるプラグインとして有名なのは、以下の3つが挙げられます。

  • Custom Field Template(カスタムフィールドの入力フォームを使いやすい形式に変更できる)
  • Advanced Custom Fields(様々な形式の入力形式に対応している)
  • Custom Field Suite(プラグインの安定性、パフォーマンスを追求している)

人によって「こっちのプラグインの方が使いやすい」とか「このプラグインは使いにくい」ということがあると思うので、使い比べてみるのも良いでしょう。

また、どのプラグインも無料で使えるのもうれしいですよね。詳しい使い方については以下のサイトをご覧ください。

Custom Field Templateの使い方―WordPressプラグイン【初心者向け】

独自のカスタムフィールドを作成できる!Advanced Custom Fieldsの使い方―WordPressプラグイン【初心者向け】

ワードプレスのプラグインCustom Field Suiteの使い方

カスタムフィールドを使って計算できる!?

calculator 178127 640 - Wordpressのカスタムフィールドとは?追加方法やプラグインのおすすめ3選

最後に、カスタムフィールドを使ってできる面白いことについて紹介します。このカスタムフィールドでは入力した数値を計算してWebページに出力させることができます。

ここでは、そのやり方について紹介していきます。

カスタムフィールドに入力した数値を使って、足し算、引き算、掛け算、割り算ができます。ただし、必ず半角数字を入力しないと計算が行われず、計算結果がWebページに出力されることもないので、注意が必要です。

このカスタムフィールドはプラグインを使っている場合でもできます。ですが、どのプラグインを使った場合でもテンプレート側のカスタマイズが必要になります。

PHPファイルを少し編集して入力した値で計算が行われるようにしていきます。詳しいやり方については以下のサイトをご覧ください。

このサイトでは、実際に使っているコードも掲載されているので、まだイメージできていないという方でもうまくできるでしょう。

カスタムフィールドを使って計算 WordPress

カスタムフィールドに関するまとめ

以上、いかがでしたか?

今回はカスタムフィールドの使い方や設定方法をお伝えしました。カスタムフィールドを使うことでタイトルや本文以外に載せたい情報を自由に追加できるようになります。

いきなりPHPファイじってカスタムフィールドを表示させるのは難しいと思いますので、ここで紹介したプラグインを使っていくことをおすすめします。

最後まで読んでいただき、ありがとうございました。