Secure Custom Fields（SCF）とは

Secure Custom Fields（SCF）は、WordPressの投稿、固定ページ、カスタム投稿タイプなどに独自の入力欄を追加できるプラグインです。通常のタイトルや本文だけでは管理しづらい情報を、専用の入力欄として分けて管理できます。

たとえば、会社概要ページに「代表者名」「電話番号」「営業時間」を追加したり、イベント情報に「開催日」「画像」「説明文」「リンク」を追加したりできます。本文に直接書くよりも、入力欄を分けた方が編集者にとってわかりやすく、テンプレート側でも表示を統一しやすくなります。

SCFはカスタムフィールドを扱いやすくするプラグイン

WordPressにはもともとカスタムフィールド機能があります。ただし、標準機能のままだと入力画面がシンプルすぎて、画像、URL、繰り返し項目のような実務的な入力には向いていない場面があります。

SCFを使うと、テキスト、画像、URL、グループ、繰り返しフィールドなどを管理画面から作成できます。編集者は決められた入力欄に沿って入力できるため、デザインを崩さずに更新しやすい管理画面を作れます。

WordPress.orgで配布されている安心感がある

SCFはWordPress.orgのプラグインディレクトリで配布されており、公式ページでは提供元としてWordPress.orgが表示されています。WordPress管理画面の「プラグイン」から検索して追加できるため、導入しやすいのもメリットです。

プラグインを選ぶときは、機能だけでなく、更新状況、配布元、ドキュメントの有無も大切です。SCFにはDeveloper.WordPress.org内にHandbookが用意されているため、フィールドの考え方やAPIを確認しながら学習できます。

公式ページはこちらを参照ください。
Secure Custom Fields – WordPress.org

どんなサイト制作で役立つか

SCFは、同じ形の情報を複数ページで扱うサイトに向いています。たとえば、採用情報、施設紹介、スタッフ紹介、イベント一覧、料金表、よくある質問などです。

毎回本文に手作業でHTMLを書くと、入力ミスやレイアウト崩れが起こりやすくなります。SCFで入力欄を用意しておけば、編集者は必要な情報を入れるだけで済み、テーマ側で統一したHTMLとして表示できます。

SCFを使うメリット

SCFのメリットは、単に入力欄を増やせることだけではありません。管理画面をわかりやすくし、制作後の更新作業を安定させる点に価値があります。

特にWeb制作では、納品後にクライアントや運用担当者が自分で更新することが多いです。そのとき、どこに何を入力すればよいかが明確になっていると、保守もしやすくなります。

管理画面の入力項目を整理できる

SCFを使うと、本文欄にすべてを書かせるのではなく、「見出し」「画像」「説明文」「リンク」のように入力欄を分けられます。これにより、編集者が迷いにくくなります。

たとえばイベントカードを更新する場合、本文にHTMLを書いてもらうより、「画像」「タイトル」「説明文」「リンク先」を入力してもらう方が安全です。テーマ側でHTMLを固定しておけば、入力内容が増えても見た目を揃えやすくなります。

繰り返しフィールドを無料で使える

SCFで特に注目したいのが、繰り返しフィールドです。繰り返しフィールドは、同じ入力セットを必要な数だけ増やせるフィールドです。公式ハンドブックでも、サブフィールドのセットを繰り返し作成できるフィールドとして説明されています。

たとえば「画像、タイトル、説明文、リンク」のセットを1行として、イベント情報を3件、5件、10件と増やせます。手作業でHTMLを複製する必要がないため、更新作業がかなり楽になります。

繰り返しフィールドの公式ドキュメントはこちらを参照ください。
Repeater Field – Secure Custom Fields Handbook

テンプレート側で表示を統一できる

SCFで入力欄を作っておくと、表示側のHTMLはテーマファイルで管理できます。編集者は入力だけに集中し、開発者はテンプレート側でデザインと出力処理を管理できます。

この分担ができると、更新のたびにデザインが崩れるリスクを減らせます。特に、カード型レイアウト、リスト、スタッフ紹介、FAQのように同じ形を繰り返すパーツでは効果が大きいです。

繰り返しフィールドの基本

繰り返しフィールドは、「同じ入力項目のセットを、管理画面から行として追加できる機能」と考えるとわかりやすいです。1件分の入力欄を作っておき、必要に応じて行を増やしていきます。

たとえば、イベント情報であれば、1行の中に「画像」「タイトル」「説明文」「リンク」を持たせます。イベントが増えたら行を追加し、減ったら行を削除します。

繰り返しフィールドで管理しやすい情報

繰り返しフィールドは、件数が固定ではない情報に向いています。イベント情報、よくある質問、スタッフ紹介、料金プラン、トップページのバナー、会社の特徴リストなどが代表例です。

逆に、常に1つしかない情報には通常のテキストフィールドや画像フィールドで十分です。繰り返しフィールドは便利ですが、何でも繰り返しにするのではなく、増減する可能性がある情報に使うと管理しやすくなります。

グループフィールドと組み合わせると整理しやすい

Cursorで確認したmemo.phpの例では、繰り返しフィールドcompany-eventの中に、グループフィールドg-1があり、その中に画像、タイトル、説明文、リンクが入る構造でした。

このようにグループを使うと、1件分の情報をまとめて扱いやすくなります。コード側でも$row['g-1']のように取り出せるため、「この行の中の1セット」として理解しやすくなります。

フィールド名はテンプレートと一致させる

SCFのフィールド名は、PHPで値を取り出すときに使います。管理画面で作ったフィールド名と、テンプレートに書く名前が違っていると値は表示されません。

たとえばcompany-eventというフィールド名で作った場合、PHP側でもget_field('company-event')と書きます。フィールド名は後から見ても意味がわかる名前にしておくと、保守が楽になります。

SCFの繰り返しフィールドをPHPで表示する方法

ここからは、繰り返しフィールドの表示方法を整理します。今回の例では、company-eventという繰り返しフィールドを取得し、その中のg-1というグループから各項目を表示します。

コードを書く前に、何をしているかを整理します。まずget_field()で繰り返しフィールド全体を取得します。次にforeachで1行ずつ取り出します。最後に、画像、タイトル、説明文、リンクをHTMLとして出力します。

get_fieldで繰り返しフィールドを取得する

get_field()は、SCFのフィールド値を取得するために使う関数です。繰り返しフィールドの場合、複数行のデータが配列として返ってくるため、foreachで1件ずつ処理します。

<?php
$events = get_field( 'company-event' );

if ( $events ) :
  foreach ( $events as $row ) :
    $event = $row['g-1'];
  endforeach;
endif;
?>

この段階では、繰り返しフィールドの中身を取り出す準備だけをしています。$rowが繰り返しフィールドの1行分、$eventがその中にあるグループフィールドの中身です。

画像・タイトル・説明文・リンクを出力する

次のコードは、memo.phpの考え方を記事用に整理したものです。画像フィールドは、返り値の設定によってURL文字列になる場合と配列になる場合があるため、どちらでも表示できるように分岐しています。

<?php
$events = get_field( 'company-event' );

if ( $events ) :
?>
  <div class="event-list">
    <?php foreach ( $events as $row ) : ?>
      <?php
      $event     = $row['g-1'];
      $image     = $event['img-1'] ?? '';
      $image_url = '';

      if ( is_array( $image ) && ! empty( $image['url'] ) ) {
        $image_url = $image['url'];
      } elseif ( is_string( $image ) ) {
        $image_url = $image;
      }
      ?>

      <article class="event-card">
        <a href="<?php echo esc_url( $event['link-1'] ); ?>">
          <?php if ( $image_url ) : ?>
            <img src="<?php echo esc_url( $image_url ); ?>" alt="">
          <?php endif; ?>

          <h3><?php echo esc_html( $event['txt-1'] ); ?></h3>
          <p><?php echo esc_html( $event['txt-2'] ); ?></p>
        </a>
      </article>
    <?php endforeach; ?>
  </div>
<?php endif; ?>

ここで重要なのは、出力時にesc_url()やesc_html()を使っていることです。URLはURL用に、テキストはHTML表示用にエスケープすることで、安全に表示しやすくなります。

$event['img-1']は画像、$event['txt-1']はタイトル、$event['txt-2']は説明文、$event['link-1']はリンク先という想定です。実際に使うときは、SCFの管理画面で作ったフィールド名と合わせてください。

画像フィールドの返り値に注意する

画像フィールドは、設定によって返り値が変わることがあります。URLとして返す設定なら文字列、画像配列として返す設定ならurlなどを含む配列になります。

Cursorで確認したコードでも、画像の返り値がURLか配列かで分岐していました。これは実務的にとても大切です。返り値の形式を確認せずに$image['url']だけで書くと、URL文字列で返ってきた場合にうまく表示できません。

SCFを使うときの注意点

SCFは便利ですが、運用しやすくするには設計が大切です。フィールドを増やしすぎると、管理画面が逆に複雑になることもあります。

最初に「誰が」「どの情報を」「どの頻度で更新するのか」を考え、必要な入力欄だけを作ると扱いやすくなります。

フィールドを作りすぎない

便利だからといって、すべての情報を細かくフィールド化すると、編集画面が長くなりすぎることがあります。更新担当者が迷わないように、必要な項目に絞ることが大切です。

たとえば、文章量が多く自由に編集したい部分は本文ブロックに任せ、決まった形で出したい情報だけSCFにする、という分け方が扱いやすいです。

表示側では必ずエスケープする

SCFで入力した値は、テンプレートで表示するときにエスケープします。テキストならesc_html()、URLならesc_url()、属性値ならesc_attr()のように、出力する場所に合わせて使い分けます。

公式ハンドブックでも、入力値の検証や出力のエスケープは重要な考え方として扱われています。安全に運用するためにも、コード例をそのまま貼るだけでなく、出力処理までセットで理解しましょう。