Advanced Custom Fieldsで作ったフィールドが空の場合は非表示にする方法

備忘録

Advanced Custom Fields

Advanced Custom Fields
パワフルでプロ仕様、そして直感的なフィールドで WordPress をカスタマイズ。

WordPressのカスタムフィールドを使うときにはこれが一番簡単で使ってる人も多いプラグイン。

非表示にするってどういうことか

例えばSNSのユーザーページURLを入力するフィールドを作り、値があれば連動してアイコンを表示させたり、記事に資料を添付したらダウンロード用のテキストや画像を表示させる、なんて使い方が結構あったりする。

その際、普通にフィールドを作り値が空欄のままだとソース上には<a href=""#></a>とか<img scr="" alt="">なんていうゴミだけ出力されてしまう。そのため、ブラウザ上ではリンクテキストだけが表示されたり、画像の場合はリンク切れ表示になってしまってかっこ悪いから、値がないときはその要素を非表示にする必要がある。

非表示にする方法

<!-- 指定したフィールドIDに値があれば<?php if ~ endif;?>を出力 -->
<?php if( get_field('フィールドID') ):?>

    <!-- ===========================================
    フィールドに値がある場合に表示したい内容/HTMLを記述
    例えば以下のようなリンク
    ============================================ -->
  <a href="<?php the_field('フィールドID'); ?>" target="_blank">
    <img src="" alt="">
  </a>
<?php endif; ?>

以上。色々こねくり回してDOM操作したりするよりシンプルでよい。

タイトルとURLをコピーしました