Advanced Custom Fields のオプションページの設定方法と表示方法

Advanced Custom Fields には、便利なオプションページという機能があります。
※オプションページは、有料版であるAdvanced Custom Fields Proが必要となります。

通常のカスタムフィールドは投稿やタクソノミーに関連付けて管理することが出来ますが、このオプションページは独立してカスタムフィールドを使用することが出来ます。

そのため、ヘッダーの一部を管理したり、複数のページで共通して使用するパーツなどをカスタムフィールドで管理する際に便利です。

このAdvanced Custom Fieldsのオプションページの設定方法と表示方法を説明します。

この記事の目次

1 各情報のURL
- 1.1 プラグイン
- 1.2 オプションページの公式ドキュメント
2 導入手順
3 まとめ

各情報のURL

プラグイン

Advanced Custom Fields

オプションページの公式ドキュメント

Options Page

導入手順

1．プラグインをインストール

Advanced Custom Fieldsの管理画面からlicenceを購入後、以下のURLにアクセスし最新版のPro版プラグインをダウンロードしてください。

My Account

その後、WordPressの管理画面に上記でダウンロードしたzipファイルをアップロードし、有効化してください。

プラグインの選び方で困った場合は、以下のページを参考にしてください。

WordPressのプロ直伝！失敗しないプラグインの選び方

2．functions.php にオプションページの記載をする

if( function_exists('acf_add_options_page') ) {
	acf_add_options_page(array(
		'page_title' 	=> 'テストオプションページ',
		'menu_title'	=> 'テストオプションページ',
		'menu_slug' 	=> 'test-optionpage-settings',
		'capability'	=> 'edit_posts',
		'redirect'		=> false
	));
}

if( function_exists('acf_add_options_page') ) {

acf_add_options_page(array(

'page_title' => 'テストオプションページ',

'menu_title' => 'テストオプションページ',

'menu_slug' => 'test-optionpage-settings',

'capability' => 'edit_posts',

'redirect' => false

));

}

※acf_add_options_pageの引数については、以下のURLを参照してください。

acf_add_options_page()

3．管理画面からカスタムフィールドの設定を行う。

管理画面のオプションページにアクセスすると、「カスタムフィールドグループを作成」を促されます。

「カスタムフィールドグループを作成」をクリックすると、カスタムフィールドの作成画面に遷移します。

この画面で必要なカスタムフィールドを作成してください。

4．使用したい箇所のテーマにオプションページに記載した内容を出力する。

オプションページで設定した内容を記載する場合は以下の記述で表示ができます。

get_field('field_name', 'option');

1	get_field('field_name', 'option');

set_field('field_name', 'option');

1	set_field('field_name', 'option');

<?php if (get_field('topic_title', 'option') && get_field('page_link', 'option')): ?>
 <section class="l-main__block">
   <div class="about-feature__inner form__label has-vivid-red-color" style="padding: 5px 20px;">
     <a style="text-decoration: unset;" class="has-vivid-red-color" href="<?php the_field('page_link', 'option') ?>">
       <p class="has-vivid-red-color"><?php the_field('topic_title', 'option') ?></p>
     </a>
   </div>
 </section>
<?php endif; ?>