WordPressのカスタムフィールドを使った柔軟なサイト運用とは

CMS開発

皆さんはWordPressで投稿や固定ページを拡張したいと考えることはないでしょうか。 とくに「業務で使うデータをもう少し柔軟に管理したい」と思ったときに便利なのが、カスタムフィールドです。

カスタムフィールドを使うと、WordPress標準の入力欄を超えたデータを格納できます。 たとえば会社概要のページに独自の連絡先や地図情報を簡単に追加したり、商品やスタッフ情報を詳しく管理することが可能です。

ここでは、WordPress 6.3を前提に、カスタムフィールドの基礎知識から具体的な実装手順までを初心者向けに解説します。 それぞれのステップを踏むことで、エンジニア未経験の方でも自由度の高いサイト作りに一歩近づくのではないでしょうか。

さらに、実務で想定されるカスタムフィールドの使いどころを簡単に紹介します。 どのようなシーンで役立ち、どう設計すると運用しやすいかを考えてみましょう。

なお、ここでは初期設定のままのWordPressで扱える標準機能をメインにしつつ、カスタムフィールドをテンプレート内で取り扱うときのサンプルコードも載せます。 具体的なイメージを持ちながら読み進めてみてください。

WordPressのバージョンは常にアップデートされます。 最新バージョンのリリースノートなどを確認しながら使うと、機能面やセキュリティ面で安心できます。

カスタムフィールドとは何か

カスタムフィールドは、WordPressが投稿やページに付加情報(メタデータ)を追加できる仕組みです。 標準では「タイトル」「本文」「抜粋」などの項目が用意されていますが、それだけでは不十分なケースが多いでしょう。

たとえば不動産サイトであれば「部屋数」「賃料」「敷金礼金」「最寄り駅」といった情報が必要になります。 そうしたデータを格納できるようにするのがカスタムフィールドです。

カスタムフィールドを活用すると、データの入出力が整理され、テーマファイルのテンプレートで自由に表示制御ができます。 これによって、投稿・固定ページ以外にも、スタッフ情報や商品カタログのような独自情報を簡単に扱えるのです。

WordPressの編集画面には「カスタムフィールド」という項目が非表示の場合があります。 投稿画面の上部にある「表示オプション」やブロックエディターの設定で、必要に応じてカスタムフィールドのパネルを有効にすると操作しやすくなるでしょう。

カスタムフィールドを追加するメリット

カスタムフィールドを導入すると、運用効率が向上しやすいです。 具体的には下記のようなメリットがあります。

  • 入力管理を一元化しやすい
  • テンプレートに自由度を持たせられる
  • 表示ロジックの調整が行いやすい
  • 他の投稿タイプやプラグインとの連携がスムーズになる

たとえば複数の投稿タイプで共通する要素をまとめておきたい場合に便利です。 「価格」「公開日」「タグライン」などをカスタムフィールドで一括管理すれば、編集者が入力漏れを防ぎやすくなります。

入力項目が明確だと、あとでテンプレート側で表示を変更したいときにもフィールド名を変えるだけで済むケースが多いです。 結果として、開発者だけでなく運用担当者にもわかりやすい構造になります。

基本的な設定方法

カスタムフィールドの表示を有効化する

WordPressのブロックエディター(Gutenberg)を使っている場合、デフォルトでカスタムフィールドが隠れていることが多いです。 投稿・固定ページの編集画面で、画面上部のオプションから「カスタムフィールド」を表示してみてください。

クラシックエディターを利用している場合は、画面右上の「表示オプション」をクリックし、「カスタムフィールド」にチェックを入れればOKです。 カスタムフィールドの入力欄が編集画面下部に出てきます。

投稿や固定ページにフィールドを追加する

カスタムフィールドを表示させたら、実際に追加してみましょう。 投稿や固定ページの編集画面下部に「カスタムフィールド」のボックスがあるはずです。

そこにある「新規フィールドを追加」のようなボタンを押して、フィールド名と値を入力してください。 たとえば「特設情報」「連絡先」など、用途に応じた名前を指定すると管理しやすいでしょう。

入力したら投稿を更新(または公開)します。 これで投稿のメタデータとして、指定したフィールド名と値がデータベースに保存されます。

テーマテンプレートにカスタムフィールドを表示する

get_post_meta関数の基本

保存したカスタムフィールドの値を表示するには、テーマテンプレート内でPHPの関数を使います。 代表的なのがget_post_metaです。

以下は、単純に値を取り出して表示するサンプルコードです。

<?php
  // 投稿や固定ページのIDを取得
  $post_id = get_the_ID();

  // カスタムフィールド名(例: 'special_info')を指定
  $field_key = 'special_info';

  // 値を取得
  $field_value = get_post_meta($post_id, $field_key, true);

  // 取得できた値があれば表示
  if(!empty($field_value)) {
    echo '<p>特設情報: ' . esc_html($field_value) . '</p>';
  } else {
    echo '<p>特設情報は設定されていません。</p>';
  }
?>

上記のように、第一引数には投稿ID、第二引数にはフィールド名を指定します。 第三引数にtrueを入れると文字列として値が返ってきます。

カスタムフィールドは配列として値を持つ場合もありますが、通常はtrueを指定すればシンプルに扱えるでしょう。 表示の際には、esc_htmlesc_urlを使い、セキュリティや表示上のトラブルを防ぐことが大切です。

テンプレートファイルへの記述例

このコードをsingle.phppage.phpなど、表示したいテンプレートの適切な場所に挿入すると、投稿やページごとに個別のデータを表示できます。 また、複数のカスタムフィールドを扱いたい場合は、同様のコードを複数書いていけばOKです。

たとえば、get_post_metaで取得したいカスタムフィールド名を「contact_info」と「map_url」の2つ用意しているなら、同じ流れで2つ分の値を表示することになります。 こうして複数のカスタムフィールドを組み合わせることで、さまざまな情報をページ単位で管理できる仕組みが出来上がるのです。

実務での活用例

商品カタログサイト

商品名や価格、在庫状況、JANコードなどをカスタムフィールドに格納し、一覧ページや詳細ページで出力するイメージです。 価格変更や在庫の更新がある場合は、その投稿のカスタムフィールドを修正するだけなので、運用コストを抑えられます。

スタッフ紹介ページ

スタッフそれぞれの役職、得意分野、連絡先などをカスタムフィールドで管理すると便利です。 テンプレートで均一に表示されるので、見た目の統一が図れます。

イベント情報

開催日時、場所、募集人数といった詳細情報をフィールド化します。 一度テンプレートを作っておけば、イベントページを追加するときにも入力枠がそろってわかりやすいでしょう。

ACFプラグインを活用する場合

標準の機能だけでも十分なケースは多いですが、もっと複雑な項目を管理したいという場面も出てきます。 そうしたときに利用されるのが Advanced Custom Fields (ACF)のようなプラグインです。

フィールドの種類が増えるだけでなく、編集画面でのUIが格段に扱いやすくなります。 たとえばチェックボックスやリピートフィールドなど、多様な入力フォームを簡単に作れるため、運用担当者にも親切な構成を作りやすいです。

ただし、プラグインが増えるとサイト全体の管理が複雑になりがちなので、本当に必要な機能だけ導入する姿勢が大切です。 標準機能で事足りるなら、まずはそれで運用してみるのも一案でしょう。

カスタムフィールドの注意点

不要なフィールドを増やさない

カスタムフィールドを増やしすぎると、管理画面が複雑になり、データベースのメタテーブルも肥大化しやすいです。 必ず使う項目だけ追加し、不要なものは整理する工夫が必要です。

一貫した命名規則を使う

フィールド名をつけるときは、一貫性をもった命名を心がけます。 あとから見返したときに何を意味するかが明確であれば、運用や開発がスムーズです。

もし複数人でプロジェクトを進める場合は、事前に決めたルールに沿ってフィールド名を管理しておくと混乱が少なくなります。 例: prefix_をつける、英語でまとめる、など。

テーマやプラグインとの衝突を避ける

一部のテーマやプラグインは、特定のカスタムフィールド名を独自に使っていることがあります。 functions.php内で管理する場合には、そうした命名の衝突を避けるように注意してください。

同じ名前のフィールドを別用途で使ってしまうと、意図しないデータが上書きされるリスクがあります。 コンフリクトを避けるために、名称を確認してから設定するのが安心です。

カスタムフィールドとカスタム投稿タイプの組み合わせ

カスタムフィールドは、カスタム投稿タイプと組み合わせるとさらに使い勝手が良くなります。 投稿、固定ページだけでなく、専用の投稿タイプを作ってデータを整理することで、運用担当者にもわかりやすい入力画面を提供できます。

たとえば「不動産物件」というカスタム投稿タイプを作り、「所在地」「間取り」「賃料」などのフィールドをセットにするイメージです。 表示面でも、物件一覧ページや詳細ページのテンプレートを作り分けることで、見た目の自由度が高まるでしょう。

カスタムフィールドを使った柔軟なレイアウト

ブロックエディターとの組み合わせ

Gutenberg(ブロックエディター)でデザイン性のあるコンテンツを作りつつ、細かなデータはカスタムフィールドで管理する方法もあります。 たとえば商品説明などはブロックエディターでレイアウトを整え、価格だけはカスタムフィールドに入力する、といった運用が可能です。

これは表面的なデザインとデータを分離するメリットをもたらします。 運用担当者はデザインを整える部分と、価格変更などの部分を分けて管理できます。

ショートコードを活用する

テーマテンプレートに直接コードを書くのではなく、ショートコードを使う方法もよく行われます。 functions.phpでショートコードを定義し、それを投稿や固定ページ本文に挿入する形です。

ショートコード内でget_post_metaを呼び出すことで、カスタムフィールドの値を表示できます。 これならテーマファイルを触らなくても、本文の好きな場所にフィールド値を挿入することができるでしょう。

ショートコードの例

<?php
function my_special_info_shortcode() {
    $post_id = get_the_ID();
    $field_value = get_post_meta($post_id, 'special_info', true);

    if(!empty($field_value)) {
      return esc_html($field_value);
    }

    return '';
}
add_shortcode('my_special_info', 'my_special_info_shortcode');

上記をfunctions.phpに記述した上で、投稿本文中に[my_special_info]と入力すると、その投稿のspecial_infoフィールドの値が表示されます。 このようにテンプレートを大きく修正できないときに有効な手法です。

運用時に気をつけること

バックアップとテスト環境の活用

カスタムフィールドの追加・変更を行うときは、万が一のためにバックアップを取っておくと安心です。 テスト環境を作り、そちらで動作を確認してから本番環境に反映するのもよくある手順です。

カスタムフィールドのバリデーション

基本的にカスタムフィールドの入力値は、ユーザーが自由に書き込める状態です。 誤ったデータを入れられると表示崩れが起こる可能性もあります。

プラグインやカスタム投稿タイプの機能を利用して、バリデーションや入力項目の制御を検討するのも良いでしょう。 また、テンプレート側でif文を活用して、空の場合にはデフォルトメッセージを表示するなどの工夫をすると親切です。

カスタムフィールドを戦略的に使うために

WordPressのカスタムフィールドは、運用者と開発者の両方がメリットを感じやすい機能です。 独自の情報を管理するための柔軟性が高く、テンプレートに組み込めば表現の幅が広がります。

運用をイメージしながら、必要な情報を明確にし、フィールド設計をすることが大事です。 どういったデータを扱い、どんな形で表示させるのかを最初に考えると、あとでの修正を減らせます。

テーマやプラグインを更新する際に、テンプレートで利用しているカスタムフィールドの呼び出し処理が影響を受ける可能性があります。 アップデート後は表示を確認し、問題がないかをチェックすることをおすすめします。

まとめ

WordPressでカスタムフィールドを使うと、データ構造とテンプレートの柔軟性が一気に高まります。 投稿に追加するだけでなく、カスタム投稿タイプやプラグインと組み合わせれば、さらに複雑な要件にも対応しやすいです。

初心者の皆さんでも、以下のステップを押さえればカスタムフィールドを活用できるでしょう。

  • カスタムフィールドの表示を有効化する
  • 投稿や固定ページでカスタムフィールドを追加する
  • テンプレートファイルやショートコードでデータを呼び出す
  • 一貫した命名規則と運用ルールを定めておく

実際にサイトを作りながらカスタムフィールドを設定してみると、管理画面の使い勝手やテンプレートの仕組みがよく理解できるはずです。 こうした流れを覚えれば、会社紹介やイベント、商品情報など、さまざまなサイト要件に対応しやすくなるのではないでしょうか。

自分の運用スタイルに合った設計を工夫し、カスタムフィールドで皆さんのWordPressサイトを扱いやすくしてみてください。

WordPressをマスターしよう

この記事で学んだWordPressの知識をさらに伸ばしませんか?
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。