ACF(アドバンスカスタムフィールド)の表示

2024.06.13

基本の使い方

ACFでのテキストの表示や真偽値を反映させる方法をメモします。
WP管理画面のフィールド名を使い、呼び出すことでサイト表示に反映することができます。
下記はACFの管理画面の表示です。

あとはこのフィールド名をコードに貼り付けていきます。
大まかにはthe_field()とget_field()の2つに分かれます。

<?php the_field('フィールド名'); ?>
<!-- 
the_field()は管理画面で入力したテキストを取得して、直接「サイト上に直接表示する」場合に使う。 
-->

<?php get_field('フィールド名'); ?>
<!--
get_field()は真偽値の判定や、画像情報のオブジェクト(画像パスとかファイル名など)を取得して何か処理をするのに使う。
 -->

the_field()の使い方と表示例

そんなにパターンは多くないと思います。管理画面で設定したテキストの表示が多いかなと。

<a href="<?php the_field('url'); ?>" target="_blank" rel="noopener"></a>
<p><?php the_field('text'); ?></p>
<p><?php the_field('textArea'); ?></p>

get_field()の使い方と表示例

画像の表示や真偽値による表示切り替え、PDFなどのファイルも設定できます。

<!-- 画像を表示する  -->
<img src="<?php $image = get_field('image'); echo $image['url'];?>" alt="">

<!-- 真偽値で判定  -->
<?php if ( get_field( 'check' ) ): ?>
    <p>管理画面でチェックした場合の表示</p>
  <?php else: ?>
    <p>管理画面でチェックしなかった場合の表示</p>
<?php endif; ?>


<!-- 「ファイル形式」で表示する方法 -->
<?php $pdf= get_field('pdf'); ?>
<?php if(get_field('pdf')): ?>
    <a href="<?php echo $pdf['url']; ?>" target="_blank" class="btn"><span>PDF</span></a>
<?php endif; ?>


少し複雑な表示方法

管理画面上の選択形式がラジオボタンなどの場合は少し複雑になります。
下記はラジオボタン場合の表示です。管理画面の返り値を「両方 (配列)」にしないとラベルとバリュー値の両方のデータを取得できません。


  <?php
    $radioArray = get_field('radioButton');// フィールド名areaを取得
    $value = $radioArray['value'];// ラジオボタンフィールドの値を取得
    $label = $radioArray['label'];// ラジオボタンフィールドのラベルを取得
  ?>

  <?php if($value === 'value1'): ?>
      <p>テキスト1</p>
   <?php elseif($value === 'value2'): ?>
      <p>テキスト2</p>
   <?php elseif($value === 'value3'): ?>
      <p>テキスト3</p>
   <?php else: ?>
    //選択をしてない場合は何も表示しない
  <?php endif; ?>
totop Page Top