べんりワザ・WordPressのカスタムフィールド(ACF・SCF)

ACFのオプションページでサイト共通の情報を管理する

電話番号・SNS・共通CTAなど、サイト全体で使う情報を管理画面から編集できるオプションページの作り方。acf_add_options_pageの書き方と、値の取り出しに必須の'option'指定を解説します。

電話番号・住所・SNSリンク・共通のキャッチコピー——サイト全体で使う情報をテンプレートに直書きしていると、変更のたびにコードを触ることになります。ACF(SCF)のオプションページを作れば、管理画面から編集できるようになります。

作業は2つだけ。functions.phpでページを追加し、取り出すときに'option'を渡す——これだけです。

べんりワザACFとSCF、どっちを入れればいい?ACFとSCFの違いと選び方はこちら1

手順1:オプションページを追加する

function my_acf_options_page() {
  if (!function_exists('acf_add_options_page')) {
    return;   // プラグインが無い環境でも落ちないように
  }
  acf_add_options_page([
    'page_title' => 'サイト設定',
    'menu_title' => 'サイト設定',
    'menu_slug'  => 'site-settings',
    'capability' => 'edit_posts',   // 編集者でも触れるようにする
    'position'   => 30,             // メニューの表示位置
    'icon_url'   => 'dashicons-admin-generic',
    'redirect'   => false,          // サブページを作らないならfalse
  ]);
}
add_action('acf/init', 'my_acf_options_page');

管理画面の左メニューに「サイト設定」が追加されます。あとはフィールドグループの「場所」を「オプションページ=サイト設定」に設定すれば、そこに入力欄が並びます。

手順2:取り出すときは'option'を渡す

これが最大のポイントです。第2引数に'option'を渡さないと、値は取れません。

<p class="tel">電話:<?php echo esc_html(get_field('tel', 'option')); ?></p>
<p class="address"><?php echo esc_html(get_field('address', 'option')); ?></p>

出力だけならthe_field()でも同じです。

<?php the_field('tel', 'option'); ?>

くり返し・グループもそのまま使える

SNSリンクのように「いくつ増えるか分からないもの」は、くり返しフィールドをオプションページに置くと便利です。have_rows()の第2引数にも'option'を渡します。

<?php if (have_rows('sns', 'option')) : ?>
  <ul class="sns">
    <?php while (have_rows('sns', 'option')) : the_row(); ?>
      <li>
        <a href="<?php echo esc_url(get_sub_field('url')); ?>">
          <?php the_sub_field('name'); ?>
        </a>
      </li>
    <?php endwhile; ?>
  </ul>
<?php endif; ?>

グループならget_field('company', 'option')['tel']のように、いつもどおり配列をたどります。

べんりワザACFの繰り返しフィールドの出し方くり返しフィールドの書き方はこちら

サブページで整理する

項目が増えてきたら、親メニューの下にサブページを並べると迷いません。

acf_add_options_page([
  'page_title' => 'サイト設定',
  'menu_slug'  => 'site-settings',
  'redirect'   => true,   // 親を開いたら最初のサブページへ
]);

acf_add_options_sub_page([
  'page_title'  => '会社情報',
  'menu_title'  => '会社情報',
  'parent_slug' => 'site-settings',
]);

acf_add_options_sub_page([
  'page_title'  => 'SNS',
  'menu_title'  => 'SNS',
  'parent_slug' => 'site-settings',
]);

サブページを使うときは、親の'redirect' => trueにしておくと、親をクリックしたときに空のページが表示されるのを防げます。

何を置くと便利?

実務でよく置くのはこのあたりです。

  • 連絡先——電話番号・営業時間・住所(フッターと問い合わせページで共用)
  • SNSリンク——くり返しフィールドで増減自由に
  • 共通のお知らせバー——「年末年始の休業について」など期間限定の1行
  • ロゴ・OG画像——画像フィールドで差し替え可能に
  • コピーライト表記——年号だけPHPで、社名は管理画面から

「2か所以上に出てくる文言」はオプションページの候補——この基準で拾っていくと、直書きがどんどん減ります。

プラグインに頼らない代替案

オプションページはプラグインの機能なので、プラグインを外すと編集できなくなります。プラグイン非依存にしたいなら、固定ページで代用する方法があります。

<?php
$settings_id = 12;   // 「サイト設定」固定ページのID
echo esc_html(get_field('tel', $settings_id));
?>

「サイト設定」という非公開の固定ページを作り、そこにフィールドを置いて、IDを指定して読む形です。IDを直書きしたくない場合は、get_page_by_path('site-settings')でスラッグから引く手もあります。

標準機能だけで済ませたいなら、テーマカスタマイザーcustomize_register)という選択肢もあります。ただし入力欄の作りこみはACFのほうが圧倒的に楽です。

まとめ

  1. functions.phpacf_add_options_page()——管理画面に共通設定のページを追加できる
  2. 取り出しはget_field('名前', 'option')'option'を忘れると必ず空になる
  3. くり返し・グループも使える(have_rows('sns', 'option'))。項目が増えたらサブページで整理
  4. 2か所以上に出る文言はオプション化の候補。プラグイン非依存にしたいなら固定ページで代用

直書きが減ると、「文言を1つ直すだけの依頼」に開発作業が要らなくなります。

よくある質問

オプションページの値はどう取り出しますか?
get_field('tel', 'option')のように第2引数に'option'を渡します。これを忘れると投稿のフィールドを探しにいくため、値が空になります。
オプションページはACFの無料版で作れますか?
ACF(WP Engine版)では有料のACF PROが必要です。WordPress公式配布のSCFには無料で入っているため、SCFならそのまま作れます。
オプションページに繰り返しフィールドを置けますか?
置けます。have_rows('items', 'option')のように第2引数に'option'を渡してループします。SNSリンクの一覧などによく使われます。
固定ページで代用することもできますか?
できます。「サイト設定」という固定ページを作ってフィールドを置き、get_field('tel', 12)のようにそのページIDを指定して取り出す方法です。プラグインの機能に頼らず作れるのが利点です。