ACFのカスタムフィールドを1箇所の記述で全てのページに適用する

⚠︎WordPressのカスタムフィールドプラグイン「Advanced Custom Fields」の記事になります
Advanced Custom Fields(以下ACF)とインストールしている前提で進めていきます！

通常のカスタムフィールドだと、page-xxx.phpにキーを書き、プラグインの設定項目で紐付けて、
各固定ページ編集画面で内容の入力をすることが一般的かと思います。
今回は、ヘッダー・フッター、フロントページなどの任意の箇所でカスタムフィールドを使うための方法をご紹介します。

WordPress上での準備

ヘッダーやフロントページなど別々に作成してもいいですが、今回はカスタムフィールド専用のページを作ります。

固定ページを作成

固定ページでスラッグを、"custom_field" とします。

カスタムフィールドの設定

＊9/21にACFがバージョン6にアップデートしたのでデザインが変わっています。使用方法は特に変更ないです。

先ほど作成したカスタムフィールドページにのみ適用させます。


後は普段と同じようにフィールドタイプの作成と、固定ページで適用します。



固定ページ


基本的に通常通り作成すれば大丈夫です！

カスタムフィールドを呼び出す

ここからがメインです。
header.phpのTwitterのリンク遷移先を、カスタムフィールドのテキストを適用させます。

_header.php

（・・・）
<li>
  <a href=" 
  <?php
  $page = get_page_by_path('custom_field');  // 適用中のスラッグ名を取得
  $id = $page->ID; // ページのIDを取得
  $get_field = get_field_object('twitter_link', $id); // 第一引数にフィールド名、第二引数に先ほどのページID
  echo esc_url($get_field['value']); // 配列で返すため、valueを出力
  ?>
  ">Twitter</a>
</li>
（・・・）

上から解説していくと、

  $page = get_page_by_path('custom_field');

ここで先ほど作成した、カスタムフィールド専用ページののスラッグ名を取得します。
複数ある場合は、それぞれ適用させればいいので種類別でページを分けてもOKです！
get_page_by_pathというのはWordPressで用意されている固定ページを取得する関数になります。

  $id = $page->ID;

上記で取得した固定ページのIDを取得します。

get_page_by_pathを使わずに、IDを取得した方が簡潔に書けますが、
サーバー引っ越しやデプロイ先などでIDが変わる可能性があるのでスラッグ名を基準にしています。

  $get_field = get_field_object('twitter_link', $id);

get_field_objectという関数で、第一引数にフィールド名、第二引数にページIDを記述すると、
任意のページでカスタムフィールドを使うことができます。

取得した$get_fieldは、連想配列になっているため、その中の'value'を出力させます。
また今回は、URLとして指定してるのでesc_url()でエスケープ処理をさせます。

  echo esc_url($get_field['value']); 

配列の返却値については、以下の通りになります。

array(
    "my_field" => array(
        'ID'                => 0,
        'key'               => '',
        'label'             => '',
        'name'              => '',
        'prefix'            => '',
        'type'              => 'text',
        'value'             => null,
        'menu_order'        => 0,
        'instructions'      => '',
        'required'          => 0,
        'id'                => '',
        'class'             => '',
        'conditional_logic' => 0,
        'parent'            => 0,
        'wrapper'           => array(
            'width'             => '',
            'class'             => '',
            'id'                => ''
        )
    ),
    ...
);

参照：https://www.advancedcustomfields.com/resources/get_field_objects/

まとめ

上記のやり方で、
front-page.php、index.php、home.php、footer.phpなど自由に、複数箇所に対応させることができます。

カスタムフィールドをうまく使えると、納品後もデザインを崩さずに、さらにお客様にも分かりやすく変更してもらうことができますね🙌