Webのあれこれ

アイキャッチアイコンACFのカスタムフィールドを1箇所の記述で全てのページに適用する

カテゴリ: Others

  • 作成日: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.phpindex.phphome.phpfooter.phpなど自由に、複数箇所に対応させることができます。

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


    この記事へのコメント

    この記事にはまだコメントがありません。

    お気軽にコメント残してください📝

    © 2022 wadeenOpenMojiis licensed underCC BY-SA 4.0