WordPressのカスタムフィールドの自作方法！出力/取得やプラグインの使い方もご紹介！

WordPressのサイト制作や運用をする中で、

カスタムフィールドって何？
カスタムフィールドのデータを取得・出力する方法は？
カスタムフィールドをプラグインまたは自作する方法は？

このような悩みを抱えたことはありませんか？

今回は、カスタムフィールドの基本知識〜自作コードのサンプルやプラグインの使い方までご紹介ますので、ぜひ最後までご覧ください。

1 WordPressのカスタムフィールドとは？
2 WordPress標準のカスタムフィールドの使い方（追加 / 取得 / 出力）
3 WordPressでカスタムフィールドを自作してみる
4 カスタムフィールドはプラグインで実装するのが一般的
5 まとめ

WordPressのカスタムフィールドとは？

ページ毎にお好きなフィールド（入力項目）を追加できるWordPressの機能です。

この機能は、以下のように投稿や固定ページのエディタの下あたりで利用できます。

これだけ見ても何ができる機能なのかいまいち分からないですよね。

まずは、

どんな場面で使うのか
どのような手順で使うのか
使うメリットは何なのか

について順番にご紹介していきます。

カスタムフィールドを使う場面は？

基本的には、投稿や固定ページに元から備わっているタイトルや本文、抜粋以外のデータを保存したい時に利用します。

例えば、商品ページを作る時、商品の名前や説明文は入力できますが、料金や素材、サイズなどの情報を入力する場所はありませんよね。

カスタムフィールドを使えば、料金用の入力欄、素材用の入力欄といったように独自のデータを追加して保存することができるようになります。

具体的な場面を上げると以下のようなものがありますので、参考にしてください。

サイトの種類	扱うデータ
ECサイト	料金、素材、サイズ、在庫など
不動産サイト	家賃、所在地、最寄り駅、間取りなど
レビューサイト	評価点数、おすすめ度など

カスタムフィールドを使う流れは？

具体的な流れは以下になります。

カスタムフィールドを有効化
カスタムフィールドにデータを追加
テーマ側で呼び出す

フィールドの追加〜データを保存するまで流れは管理画面の操作だけで実現可能です。

しかし、そのデータをサイト上に表示するには、残念ながらお使いのテーマにコード（PHP）を追加する必要があるんですよね。

実際の流れはこの後解説しますので、実際に試してみてください。

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

カスタムフィールドは、独自のデータをページ毎に保存して呼び出せることが分かりました。

他にどのようなメリットがあるのでしょうか？具体的には以下の強みがあります。

管理しやすい	必要な情報を入力欄で整理でき、データの一元管理が可能
自由に表示可能	テーマで呼び出して、一覧・詳細ページに合わせて柔軟に表示可能
機能拡張に役立つ	表示だけでなく、検索・絞り込みや構造化データに活用可能

特に、ページ毎に必要なデータのフォーマットが決まっている場合は、上記3つの恩恵を受けやすいのでおすすめです。

WordPress標準のカスタムフィールドの使い方（追加 / 取得 / 出力）

それでは実際にカスタムフィールドを使って、簡単なデータの追加〜出力（表示）を行います。

今回はサンプルとして、料金用のフィールドを用意するので、同じ手順で操作してみてください。

カスタムフィールドの有効化
カスタムフィールドにデータを追加
カスタムフィールドのデータを取得・出力

カスタムフィールドの有効化

最初にカスタムフィールドを有効化します。（ブロックエディタの場合、カスタムフィールドは最初から無効化されています。）

エディタを開いて、画面右上の「⋮」を押し、開いたメニュー内の「設定」をクリックします。

ブロックエディタの設定画面が表示されるので、そのまま下にスクロールして、「カスタムフィールド」のトグルボタンをONにし、「ページを表示して、リロード」を押してください。

これでカスタムフィールドが使えるようになります。

カスタムフィールドにデータを追加

次に、カスタムフィールドにデータを追加していきます。

名前と値を入力した後、「カスタムフィールドを追加」を押すと追加できます。今回は料金用のデータなので、名前に「price」、値に「3000」と入力しました。

すると、以下のように新たなフィールドが追加されます。

これでデータを追加できました。このデータは削除・編集が可能です。

カスタムフィールドのデータを取得・出力

続いて、追加したデータを取得して、サイト上に表示してみましょう。

ここからは、PHPを編集する必要があるので、該当ファイルをコードエディターで開くか、テーマエディターで書き換えるなどで対応してください。（本番環境ではしないように）

今回は、投稿のカスタムフィールドにデータを追加したので、「single.php」などを探して、以下を追記すると「3000」と表示されるはずです。

<?php echo get_post_meta( get_the_ID(), 'price', true ); ?>

このget_post_meta()は、カスタムフィールドで追加したメタデータを取得できる関数です。この関数の「price」部分を他のデータの名前に変更すると、別のデータを表示できます。

もし、どこに貼り付けたら良いか分からない場合は、以下をfunctions.phpの最後に追加してみてください。該当ページを開けば、画面の一番上あたりに表示されるはずです。

add_action( 'wp', function(){
  echo get_post_meta( get_the_ID(), 'price', true );
} );

WordPressでカスタムフィールドを自作してみる

ここまでカスタムフィールド機能の使い方をご紹介しましたが、フィールドに入力できるのは名前と値のテキストだけですので、正直実用的とはいえません。

実際の現場では、カスタムフィールドをPHPで自作して、独自の画面をテーマ側で用意してあげることが多いです。

以下に投稿や固定ページに価格のフィールドを追加する最小構成のコードを記載しましたので、functions.phpに追記してみてください。

/**
 * 投稿編集画面にメタボックス（独自フィールド）追加
 */
add_action( 'add_meta_boxes', function () {
  add_meta_box(
    'my_box',
    '自作フィールド',
    function ($post) {
      wp_nonce_field('save_my_box', 'my_box_nonce');

      // 価格用の入力項目
      $price = get_post_meta($post->ID, 'price', true);
      echo '<p>金額を入力してね</p>';
      echo '<label for="my_box_price">価格</label>';
      echo '<input id="my_box_price" type="number" name="price" value="'.esc_attr($price).'">';

      // ここにその他の項目を追加
    },
    ['post'],
    'normal',
    'default'
  );
} );

/**
 * 追加したフィールドの保存処理
 */
add_action('save_post', function ($post_id) {

  // 自動保存/リビジョン/権限チェック
  if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return;
  if ( ! current_user_can('edit_post', $post_id) ) return;
  if ( ! isset($_POST['my_box_nonce']) || ! wp_verify_nonce($_POST['my_box_nonce'], 'save_my_box') ) return;

  // 価格の保存処理
  if ( isset($_POST['price']) && $_POST['price'] !== '' ) {
    update_post_meta($post_id, 'price', absint($_POST['price']));
  } else {
    delete_post_meta($post_id, 'price');
  }

  // その他に追加した項目があれば、ここで保存
});

追記すると、以下のようなフィールドが投稿のエディタ下部に表示されます。

価格以外の入力欄も追加できるので、カスタマイズしてみてください。

※出力方法は、カスタムフィールドのデータを取得・出力する方法と同じです。

カスタムフィールドはプラグインで実装するのが一般的

自作する方法は最も自由度が高いんですが、なんといっても非常に面倒なんですよね。

そこで便利なのが、カスタムフィールド拡張系プラグインを利用する方法です。

このようなプラグインを使えば、先程の自作コードで行っていた作業を管理画面上で操作でき、チェックボックスやラジオボタン、画像フィールドなども追加可能です。

それでは実際に価格フィールドを、最もメジャーなプラグイン「Advanced Custom Fields」で実装する流れをみていきましょう。

Advanced Custom Fieldsのインストール
Advanced Custom Fieldsでフィールドを追加
Advanced Custom Fieldsのフィールドの取得・出力

Advanced Custom Fieldsのインストール

管理画面の「プラグインを追加」画面にて、右上の検索フォームに「acf」を入力し、「Advanced Custom Fields (ACF®)」をインストールしてください。

「Advanced Custom Fields (ACF®)」をインストールして有効化

インストール後に「有効化」を押せば、インストール完了です。

Advanced Custom Fieldsでフィールドを追加

次は、管理画面の再度メニューにある「ACF」をクリックし、設定画面を開きます。

「フィールドグループを追加する」をクリックしてください。

フィールドグループの追加画面が表示されるので、以下の通りに入力してみてください。

1. フィールドグループ名	フィールド全体の名称を入力
2. フィールドタイプ	入力項目の種類を選ぶ（テキストやラジオボタンなど）
3. フィールドラベル	入力項目に表示されるラベル
4. フィールド名	プログラム上で使用するフィールドの識別名称（半角英数字で入力）
5. 初期値	最初に入れておきたい値があれば入力
6. 変更内容を保存	ここを押すと設定が保存される

これで、独自のカスタムフィールドを追加できました。

実際に、管理画面の表示を確認してみると、無事実装できていることが分かりますね。

Advanced Custom Fieldsのフィールドの取得・出力

最後に追加したフィールドをサイト上に表示していきます。プラグインを使っても、この処理はテーマのPHPファイルを編集する必要があります。

「Advanced Custom Fields」の場合は、専用の関数が用意されているので、以下のように出力します。

// 'price'の部分はフィールド名を入力

// フィールドの出力（表示する時はこっち）
the_field('price');

// フィールドの取得（変数に格納する時はこっち）
$price = get_field('price');

その他のフィールドの値を扱う場合は、「price」部分を他のフィールド名に書き換えてみてください。

まとめ

今回は、WordPressのカスタムフィールドの基本知識や使い方についてご紹介しました。

タイトルや本文以外のデータを扱う時に利用することが多いので、入力するデータのフォーマットが決まっている時に使ってみてください。

使い方は大きく分けると3種類ですが、以下のように使い分けると良さそうです。

標準機能で実装	実務で利用することはほぼ無し →テスト・検証などで使うくらい
PHPで自作	最も自由度が高いUIを構築可能 →高度なUI実装やWordPress開発慣れしている方向け
プラグイン利用	実務レベルで最も使われている方法 →一定の制限あるが、管理画面の開発工数を削減できるのでコスパ最強

Coneの中の人

資料・記事など、BtoBコンテンツについてCone社のメンバー一同で知識を集めあわせて解説します。株式会社Coneを応援してね！※Twitterリンクは代表のものです。

WordPressのカスタムフィールドとは？

カスタムフィールドを使う場面は？

カスタムフィールドを使う流れは？

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

WordPress標準のカスタムフィールドの使い方（追加 / 取得 / 出力）

カスタムフィールドの有効化

カスタムフィールドにデータを追加

カスタムフィールドのデータを取得・出力

WordPressでカスタムフィールドを自作してみる

カスタムフィールドはプラグインで実装するのが一般的

Advanced Custom Fieldsのインストール

Advanced Custom Fieldsでフィールドを追加

Advanced Custom Fieldsのフィールドの取得・出力

まとめ

Coneの中の人

関連記事

営業組織における情報共有方法。効率化ツール8選とエクセルでの方法も解説

【パワポフォーマット付】中期経営計画の作り方｜構成やデザインも解説

記事数はSEOに無関係？成果を出すための「量と質」の関係性を徹底解説

DSR（デジタルセールスルーム）とは？基本的な機能・使い方と運用開始手順

商談につながるホワイトペーパーの作り方6ステップ。制作後の活用メソッドも解説。

WordPressのLPの作成方法は3つ！おすすめのテーマやプラグインもご紹介！