ACFのカスタムフィールドを1箇所の記述で全てのページに適用する
- 作成日:2022/09/27
⚠︎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
など自由に、複数箇所に対応させることができます。
カスタムフィールドをうまく使えると、納品後もデザインを崩さずに、さらにお客様にも分かりやすく変更してもらうことができますね🙌
この記事へのコメント
この記事にはまだコメントがありません。
お気軽にコメント残してください📝