2022/03/10

カスタムフィールドACFのセレクターの値を取得する方法

こんにちは、ふるぽん（＠FURUP0N）です。

今回も忘備録になります。
みなさんカスタムフィールドでACFを使っている方、多いと思います。
ACFでセレクターを使って表示させる時、各値ごとのスタイルを変えたい時に少し戸惑ったのでここにメモしておきます。
分かりやすいように、以下の「有数の名医」と「街の名医」をACFのセレクターで出力しているのですが、それぞれスタイルが違いますよね。
全く難しくはないのですが、つまずきました笑
有数の名医と街の名医の部分をカスタムフィールドで出力

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

まずカスタムフィールドを作成していきます。
基本の使い方は以下の記事をどうぞ。

それでは、
下の画像のようにセレクターを設定していきます。
カスタムフィールドの設定
この時、valueとlabelの両方を設定していきます。
上の画像の例だと

master_doctorが「value」
有数の名医が「label」

になります。

次に返り値を設定していきます。
「value」に設定して出力すると、master_doctorと表示され、
「ラベル」に設定すると、有数の名医と表示されます。
今回は両方の値を受け取って、別々に出力していきますので、Both(Array)を選択。
返り値の設定

フィールドの値を取得して表示する

では出力を見てみましょう。
コードは以下の通り

<?php $field = get_field('master');
         if($field):?>
          <span class="<?php echo $field['value'];?>">
            <?php echo $field['label'];?>
        </span>

get_field()でまずはフィールドの値を取得します。
Bothに設定しているので「value」と「ラベル」の両方の値を取得します。
<span class="<?php echo $field['value'];?>">でspanのクラスに「value（master_doctor)」を設定して、
<?php echo $field['label'];?>でラベルを出力します。

HTMLはこうなっています。
デベロッパーツール
後はこのクラスにスタイルを当てれば最初の画像のように、別々の背景色で分かりやすく表示されます。

以上、簡単な事なんですが、迷ってしまうと頭を抱えてしまいます。
同じような人のためにお役に立てれば嬉しいです。

ゲームで仮想通貨の不労所得を稼ぐ【オンラインカジノBetfuryのやり方】