WordPressのカスタムフィールドとは?プラグインの追加方法など使い方を解説

最終更新日:2023年03月17日
株式会社Weathercock
監修者
代表取締役 大野淳
WordPressのカスタムフィールドとは?プラグインの追加方法など使い方を解説
この記事で解決できるお悩み
  • WordPressのカスタムフィールドって何?
  • カスタムフィールドを設定するとどうなるの?
  • カスタムフィールドを使うメリットは?

カスタムフィールドを使うと、同じフォーマットのページをWordPressで簡単に作れるようになります。この記事では、WordPressのカスタムフィールドについて知りたい方に向けて、設定や使い方を解説。

メリットや簡単な使い方についても紹介するので、カスタムフィールドがあまりよくわからない人も必見です。

WordPressのカスタムフィールドとは?簡単に解説

pixta_24272273_M

WordPressのカスタムフィールドとは、タイトルと本文以外の情報を追加できる機能です。順番に沿って内容が表示されるため、まとまりのあるサイトにできます。

自由に追加できて、どんな内容でも入力可能です。タイトルと本文以外の項目を追加することで、見やすく情報が整理されたページを作成できます。

カスタムフィールドを使う2大メリット

カスタムフィールドを使う2大メリット

項目を固定し入力を効率化できる

カスタムフィールドでは、入力項目をフィールドと呼びます。商品紹介ページをたくさん作る場合、次のようなフィールドを作ります。

  • 商品名
  • 特徴
  • 価格
  • 寸法

フィールドにコメントを入れると入力方法が一目でわかり、効率よく入力できるようになります。

投稿者が複数でも表記を統一できる

カスタムフィールドでは、どこにどんな情報を入れるか指定できるので、誰が入力しても統一した表記が可能です。複数の投稿者がいても内容に漏れがなく体裁も整ったページを作ることができます。

カスタムフィールドで全角・半角混在が防げる!

複数名で入力していると、全角・半角が混在してしまう場合も。フィールドのコメントに「ここは全角」「数字は半角」など指定を入れることで、入力ミスを防げます。

これは見やすい!カスタムフィールド使用例3選

カスタムフィールド使用例3選

洋服の型番やサイズ表記

洋服の型番やサイズ表記は、カスタムフィールドの使用がおすすめです。カスタムフィールドを使うことで、体裁が整い情報が見やすくなります。

飲食店の紹介

飲食店の紹介ページにも、カスタムフィールドがおすすめ。店名や住所、メニューなどの固定項目をフィールドにすると、体裁の整ったサイトになります。

不動産会社での施工実績

不動産会社の施工実績も、カスタムフィールド向きの情報です。以下の情報をカスタムフィールドに入れると、見やすいサイトが完成します。

  • 工事の予算
  • 施工エリア
  • 施工内容

情報の中身も体裁も揃ったサイトにすることで、より訪問者の興味を引くことができます。

カスタムフィールド設定方法その1|投稿ページから設定する

カスタムフィールドは、WordPressにもともと備え付けられている機能です。最初に、投稿ページからのカスタムフィールド設定方法を解説します。

  1. カスタムフィールドを新規に設定する
  2. テンプレートファイルにタグを挿入する

1. カスタムフィールドを新規に設定する

WordPressは、初期の状態でもカスタムフィールドが使えます。カスタムフィールドを追加することで、プルダウンメニューからカスタムフィールドを選択できるようになります。初期状態での設定方法は、次のとおりです。

  1. 新規投稿から表示オプションを選択
  2. 表示オプションの中にあるカスタムフィールドにチェックを入れる
  3. 「新規追加」をクリック
  4. 追加したフィールドに名前や値を入力
  5. 「カスタムフィールドを追加」を押す

カスタムフィールドは、デフォルトではタイトルと本文が入っています。フィールドを追加したい場合は「新規追加」をクリックして項目を増やしましょう。

2. テンプレートファイルにタグを挿入する

カスタムフィールドを表示させるには、テンプレートファイルへのタグ挿入が必要です。テンプレートファイルとは、WordPressを構成するファイルです。「.php」という拡張子のphpファイルにタグを挿入すると、カスタムフィールドが表示されるようになります。テンプレートファイルに挿入するタグを紹介します。

  • the_meta()
  • post_custom()
  • get_post_meta()
  • get_post_custom()

the_meta()

the_meta()を使うと、カスタムフィールドで設定した項目全部が表示されます。

post_custom()

post_custom()は、指定した項目だけを表示させるタグです。()内には、カスタムフィールド名を設定します。例えば、カスタムフィールド名を「代金」、金額を1,000円と指定した場合、「代金」のフィールドにある1,000円だけが表示されます。他の項目は表示されません。

get_post_meta()

get_post_meta()は、特定の投稿からカスタムフィールドの値を取得するタグです。同じカスタムフィールドを使っていても、投稿ごとで値が違っている場合があります。get_post_meta()を使うと、どの投稿のカスタムフィールドの値を表示するか指定が可能です。

get_post_custom()

get_post_custom()は、指定した記事や固定ページからすべてのカスタムフィールドの情報を返します。

get_post_custom()とget_post_meta()の違い

get_post_meta()を使うと、1ページに複数のカスタムフィールドがあった場合に「1ページ目のカスタムフィールドBを表示させる」指定が可能です。

get_post_custom()を使うと、1ページ目のカスタムフィールドをすべて表示させます。ページ内に複数のカスタムフィールドがあっても、個別の指定はできません。

カスタムフィールドの表示オプションがない場合

メニューにカスタムフィールドの表示オプションがない場合、探さなければなりません。クラシックエディタとブロックエディタで、カスタムフィールドの探し方が違います。

クラシックエディタの場合

クラシックエディタの場合、右上の表示オプションにカスタムフィールドがあるか確認します。カスタムフィールドの項目があれば、チェックを入れましょう。見当たらない場合は、プラグインの「Advanced Custom Fields」がインストールされている可能性が高いです。

ブロックエディタの場合

ブロックエディタの場合は、右上の縦に点が3つ並んだ記号をクリックし「設定」を選択しましょう。拡張機能の一覧にあるカスタムフィールドボタンを有効にすることで、カスタムフィールドが表示されます。

カスタムフィールド設定方法その2|プラグインを使用する

pixta_83360022_M

プラグインを使うことで、カスタムフィールドが楽に設定可能です。カスタムフィールドの設定に便利なプラグインを、5つ紹介します。

  • Advanced Custom Fields
  • Custom Field Template
  • Custom Field Suite
  • Meta Box
  • Smart Custom Fields

Advanced Custom Fields(ACF)

Advanced Custom Fieldsは「ACF」とも呼ばれ、シンプルで使いやすいプラグインです。30種類以上の項目が無料で使えます。有料版のProでは、カスタムフィールドの種類を投稿ごとに分けられる機能があります。

Custom Field Template

Custom Field Templateは、初心者でも扱いやすいプラグインです。投稿ごとに、カスタムフィールドのテンプレートを入れ替えられます。Custom Field Templateを使うと、カスタムフィールドの入力フォームが投稿画面内に表示される点も魅力です。

Custom Field Suite

Custom Field Suiteは、シンプルで使いやすいプラグインです。日本語に対応しているため、初心者でも簡単に使えます。

Meta Box

Meta Boxを使うことで、カレンダーや画像など40種類以上のカスタムフィールドを設定できます。Meta Boxだけでは、カスタムフィールドは使えません。別プラグインのインストールが必要となります。

Smart Custom Fields

Smart Custom Fieldsは、カスタムフィールドを繰り返し表示させられるプラグインです。カスタムフィールドの入力画面にある「+」ボタンをクリックするだけで、全く同じ入力画面が追加されます。

カスタムフィールドが出力されないときに試したい4つの対策

カスタムフィールドが出力されないときに試したい4つの対策

値もタグも合っているのに、カスタムフィールドが出力されない場合があります。特に、Advanced Custom Fields(ACF)を利用している際に起こりやすい現象です。

カスタムフィールドが出力されないのは、フィールドに書かれた値を取得できていないからです。カスタムフィールドが出力されないときに試したい4つの対策を紹介します。

記事を更新する

最初に試して欲しいのは、記事の更新です。過去の記事でカスタムフィールドの値を変更した場合は、記事を更新してください。記事を更新することで、カスタムフィールドのデータも更新されるからです。

ループ内でタグが書かれているか確認

WordPressでは、繰り返し処理の際に、処理開始と終了のタグがそれぞれ書かれています。開始と終了のタグの間で行われる処理をループと呼びます。get_meta()などのタグがループの外に書かれていると、カスタムフィールドが表示されません。カスタムフィールドのタグは、whileとendwhileの間もしくはifとendifの間に入れましょう。

ループタグの例

始まり:ifー終わり:endif

始まり:whileー終わり:endwhile

Advanced Custom Fields(ACF)のバージョンを変える

ACFをバージョンアップした際に、カスタムフィールドの値を取得できないなど不具合が生じる場合があります。バージョンアップで仕様が大きく変わったときに起こりうる事象です。ACFのバージョンが変わってカスタムフィールドの値が取得できないときは、あえてダウングレードしてみると解決する場合もあります。

他のプラグインと干渉していないか調べる

最後に、他のプラグインと干渉していないか調べてみましょう。Advanced Custom Fields(ACF)は、他のプラグインとの干渉が起こりやすいです。干渉を調べるには、他のプラグインをオフにしどれが干渉しているかを1つずつ確認していきます。干渉しているプラグインがわかれば、原因となるプラグインを一度削除しましょう。

まとめ

WordPressでのカスタムフィールドは便利ですが、自作が大変です。タグの記載場所が1行違うだけで、カスタムフィールドが表示されなくなる場合も。

WordPressカスタムフィールドの管理運用が負担になった場合、外注すると楽になります。弊社運営の『比較ビズ』なら、無料で複数社から見積もりとプランの請求が可能です。サイトの運営の外注を検討している際は、ぜひ『比較ビズ』をご利用ください。

自社にぴったりのホームページ制作会社を探すには?

ホームページ制作会社選びでお困りなら「比較ビズ」が解決します!

  • 費用相場がわからず不安...
  • 発注先選びを失敗したくない…
  • 忙しくて探す時間がない...

今年で運営17年目の「比較ビズ」は、仕事を”依頼したい人”と”請けたい人”を繋ぐマッチングサービスです。これまでサイトリニューアル、ECサイト、SEO対策の依頼など多くのご相談を頂き1万社以上もの企業様の発注をサポートしてまいりました。

まずは下記のボタンより、お気軽にご相談ください。

監修者の一言

WordPressでカスタムフィールドを使うことで、色々なタイプの投稿ページを作成する事が出来ます。例えば、料理のレシピであったり旅行先のホテルの概要であったり、スタッフの紹介ページであったりと様々なタイプの投稿ページを作成する事が出来ます。

また、記事内で紹介されている「Advanced Custom Fields」というWordPressプラグインをインストールする事でカスタムフィールドの幅もかなり広がります。 ホームページ制作においてもカスタムフィールドを使う機会も多いと思います。

WordPressを用いてホームページを作成される場合はとても便利な機能なので、ぜひ前向きに取り入れてみてはいかがでしょうか。

株式会社Weathercock
代表取締役 大野淳
監修者

愛媛県でホームページ制作・SEO対策を行なっている会社。コーポレートサイトやECサイトの構築はもちろん、オウンドメディアの構築を行う。クライアントに寄り添ったWEB制作を心がけており、WEBマーケティングを通して見込み客の欲求に合わせたコンテンツ作成を行うことをモットーに行う。