LAST UPDATE   | Posted by Takumi Hirashima

Advanced Custom Feld のアドオン Options Page の表示方法

Advanced Custom Feld のアドオン Options Page の表示方法

WordPress のプラグイン ACF のアドオン Options Page(オプションページ)の表示方法を紹介します。
例えば、スライドやバナー専用の管理画面を作成したい時に便利な機能です。
一般的な表示方法と、表示がうまくいかない時の対処方法も合わせて紹介します。

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

1.Options Page とは?

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

2.使い方

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

基本的な使用方法

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

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

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

<?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_fieldoption(または 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(オプションページ)の表示方法を紹介しました。

スポンサーリンク