Written by Kasumi

Advanced Custom Fields Pro(ACFPRO)を使いオプションページを作成する方法

全ページ共通で出力できるカスタムフィールド専用管理ページを新規で作成したい。

結論:WordPressプラグインAdvanced Custom Fields Pro(以下ACFPRO)のオプションページ機能を使えば簡単に実装できます!

本記事ではACFPROのオプションページ作成方法について解説します。

functions.phpにコードを追加

//-----------------------------------------------------
// 【共通ページ管理】
//-----------------------------------------------------
if( function_exists('acf_add_options_page') ) {
  acf_add_options_page(array(
    'page_title' => '共通ページ管理', // ページタイトル
    'menu_title' => '共通ページ管理', // メニュータイトル
    'menu_slug' => 'page_other', // メニュースラッグ
    'capability' => 'edit_posts',// アクセス権限
    'redirect' => false,
    'position' => 6//メニューが表示される位置
  ));
}

functions.phpに上記コードを追記、オプションページをWP管理画面内に追加します。

プロパティの値にそれぞれ任意の値を入力します。

page_title
オプションページのタイトル名を入れます。

menu_title
オプションページのメニュー名を入れます。

menu_slug
オプションページのスラッグ名を入れます。

capability
アクセス権限をいれます。

position
オプションページをWP管理画面のサイドバーリストから何番目に入れるか位置指定します。

上記コードを追加後、WP管理画面に入り左サイドバーにオプションページのメニュー名が表示されたら成功です。

オプションページにカスタムフィールド枠を追加


次にオプションページで使うカスタムフィールドを登録します。

ACFPROの編集ページへ行き、任意のカスタムフィールド項目を追加します。

上記が完了したら下部にある位置欄でカスタムフィールドを表示する場所を指定します。

表示する条件でプルダウンから前章で追加したオプションページを選択します。

完了したら保存します。

オプション管理ページへ遷移し、追加したカスタムフィールドが表示されていれば完了です。

出力コード

<!-- オプションページ出力 -->
<?php $text = get_field('text', 'option'); echo $text; ?>

オプションページのカスタムフィールド値を取得するには

get_field('フィールド名', 'option');

と記述すれば取得できます。

後は取得したカスタムフィールドをechoすれば出力されます。

繰り返しフィールドを出力

<!-- オプションページ繰り返しフィールド出力 -->
<?php $repeat = get_field('repeat', 'option'); ?>
<?php foreach ($repeat as $repeat_value) : ?>
    <?php echo $repeat_value['repeat_txt']; ?>
<?php endforeach; ?>

繰り返しフィールドを出力する場合は上記コード例のように、foreach文を使ってカスタムフィールド値を取り出してあげればOKです。

以上の流れでAdvanced Custom Fields Proプラグインを使ったオプションページ作成の完了です。

まとめ

get_field関数を使ってページ固有IDを指定し、別ページでもカスタムフィールドを出力できます。

ACFPROプラグインは有料ですので無料版ACFをお使いの方は上記方法で試すのも良いかもしれません。

以上で解説を終わります。

目次

関連記事

プログラミング

【PHP】パラメータを使ってテストページを作成しよう

更新日:2020.06.12
2137
WordPress プログラミング

ワードプレスの管理画面をアクセス制限(IP制限)してセキュリティを強化しよう

2021.03.01
2182
WordPress プログラミング

【簡単】wordpressプラグインで投稿記事を非公開予約する方法

2022.01.05
6691
HTMLCSS プログラミング

【簡単】CSSを使って要素を非表示にせず、要素内のテキストだけ見た目上消す方法

2022.01.19
9348