Advanced Custom Feld のアドオン Options Page の出力方法を紹介

Last update 
/ Posted by Takumi Hirashima

Advanced Custom Feld のアドオン Options Page の出力方法を紹介

WordPress のプラグイン ACF のアドオン Options Page(オプションページ)の出力方法と、出力されない場合の対処方法などを紹介します。
Options Page は、トップに表示するスライドの専用の管理画面を用意したい時や、フッターに並べるバナーを管理画面から追加や削除したい時などに便利な機能です。

  1. Options Page とは?
  2. 使い方
    1. 基本的な使用方法
    2. メニュー名の変更
  3. オプションページに子ページを作る方法
    1. 高度な編集
  4. 値の表示と取得方法
    1. フィールドを表示
    2. フィールドを取得
    3. サブフィールドからの表示
  5. トラブル
    1. 管理画面のオプションページ以外からから値を消去する方法
  6. まとめ

1.Options Page とは?

Options Page は Advanced custom field の有料アドオンになります。オプションページの機能は、管理画面にカスタム投稿のような独自の項目を追加することができる機能ですが、いくつか注意が必要です。例えば、投稿のような下書きや予約投稿などの機能は組み込まれていないことや、WordPress でエクスポートした際に、オプションページのカスタムフィールドは含まれるが、入力した値は含まれないなどがあります。

2.使い方

この機能を使用するには、ACFのPRO版を購入、オプションページのアドオンをインストールする必要があります。

基本的な使用方法

オプションページを作成するには、次のコードを functions.php に追加します。

/* 【管理画面】ACF OPTIONS を追加 */
if( function_exists('acf_add_options_page') ) {
  acf_add_options_page();
}

追加すると管理画面の左サイドメニューに OPTIONS が追加されます。
オプションページに入力された値を出力する場合は the_field に options を追加します。

<?php the_field('header_title', 'options'); ?>

メニュー名の変更

オプションページのメニュー名を変更することができます。
次のコードを functions.php に追加します。

/* 【管理画面】ACF OPTIONS を追加 & メニュー名変更 */
add_filter( 'acf/options_page/settings', 'my_options_page_settings' );
function my_options_page_settings( $options ) {
  $options['title'] = __( 'OPTIONS' );
  $options['menu'] = __( 'OPTIONS' );
  return $options;
}

このコードは、オプションページの作成も兼ねているので、先に紹介したコードと重複しないようにしましょう。

3.オプションページに子ページを作る方法

オプションページには子ページを作ることもできます。
次のコードは子ページ BANNER・SLIDER を追加する場合です。

/* 【管理画面】ACF OPTIONS を追加 */
if( function_exists('acf_add_options_sub_page') ) {
  acf_add_options_sub_page(‘BANNER');
  acf_add_options_sub_page(’SLIDER’);
}

子ページがある場合にオプションページをクリックすると最初の子にリダイレクトされます。

高度な編集

子ページは管理画面に表示されるタイトルやスラッグを編集することができます。
次のコードは、タイトル・メニュー・スラッグを編集する場合です。

/* 【管理画面】ACF OPTIONS を追加 */
if(function_exists('acf_add_options_sub_page')){
  acf_add_options_sub_page(array(
    'title' => ‘HEADER,
    'menu' => 'HEADER',
    'slug' => ‘header'
  ));
}

4.値の表示と取得方法

オプションページに入力された値を出力する場合は the_field または get_field に option(または options)を追加します。

フィールドを表示

フィールドを表示する場合は次のコードを追加します。

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

値が正しく表示されない原因の多くは、option(または options)の記述忘れです。表示がうまくいかない場合は、この辺りを確認しましょう。

フィールドを取得

フィールドを取得する場合は次のコードを追加します。

<?php $field_name = get_field('field_name','option'); ?>

サブフィールドからの表示

リピーターや柔軟コンテンツを使用した場合は、最初の have_rows で値が取得できれば、それ以降の option(または options)の指定は必要ありません。
次のコードは、ACFのアドオンの一つリピーターを使用した場合の表示方法です。

<?php if( have_rows('repeater','option') ): ?>
<ul>    
<?php while( have_rows('repeater','option') ): the_row(); ?>   
<li><?php the_sub_field('title'); ?></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>

トラブル

フィールドの表示ができない場合は、option(または options)の追記ミスなどがありますが、オプションページを使用していると「オプションページが表示されない」や「値の入力ができない」などのトラブルに見舞われることがあります。このようなトラブルは滅多に起こることはありませんが、原因の一つとしては、入力した値が正しく保存できなかったことなど考えられます。
対処方法として、
1.オプションページを作り直す
2.違うスラッグで子ページを作り直す
3.正しく格納されなかった値を消去する
などがありますが、1,2は根本的な解決にはならないので、3の対応方法を紹介します。

管理画面のオプションページ以外からから値を消去する方法

オプションの値は、blogname(サイトのタイトル) や blogdescription(キャッチフレーズ)などと同じ場所に保存されています。まずは管理画面の設定ページは移動して、表示されるアドレス options-general.php を options.php に変更してアクセスします。するとページの中ほどに options_xxxxx と _options_xxxxx などオプションページの値の項目があるので、入力されている値を一度削除します。このときに、謝って他の関係ない値を消さないようにしてください。値を削除したら、ページ下部の変更を保存をクリック。これで正しく表示されるかどうか確認します。この方法はあくまでも最終手段なので、WordPress のバックアップなどを行ってから、自己責任において実行してください。

まとめ

WordPress のプラグイン ACF のアドオン Options Page の出力方法と、出力されない場合の対処方法などを紹介しました。

スポンサーリンク