【Advanced Custom Fields (ACF)】カスタムフィールドの値がない(未入力)の場合に非表示にする方法を解説

WordPress

前提として

当記事は「Advanced Custom Fields (ACF)」のカスタマイズ解説記事にになります。

プラグインの導入はWP左メニュー「プラグイン」→「新規プラグインを追加」で「Advanced Custom Fields」と検索してインストールするか、下記URLよりzipファイルでダウンロードしてください。

Secure Custom Fields
Secure Custom Fields は Advanced Custom Fields プラグインのフリーのフォーク...

カスタムフィールドの値がない(未入力)場合に非表示にする方法

<?php if( get_field('dammy') ):?>
<p><?php the_field('dammy'); ?></p>
<?php endif; ?>

簡単なコードの解説

ここではフィールド名を「dammy」としています。ここの部分は各サイト適宜変更してください。

「dammy」フィールドが未入力の場合、2行目のpタグの行を表示しないイメージです。

カスタムフィールドの値の有無で表示するものを切り替えたい場合

<?php if( get_field('dammy') ):?>

<!-- 値がある場合 -->
<p><?php the_field('dammy'); ?></p>

<?php else:?>

<!-- 値がない場合 -->
<p>入力されていません。</p>

<?php endif; ?>

「dammy」フィールドに入力がない場合に、下のpタグが表示されるイメージです。

こんな使い方も?

<div class="table__flex">
<?php if( get_field('name') ):?>
<p class="table__title">会社名</p>
<p class="table__content"><?php the_field('name'); ?></p>
<?php endif; ?>
</div>

ABOUTページにありがちな会社概要の表をイメージしています。

「name」フィールドが未入力の場合に、会社名の列のpタグもいっしょに非表示にするイメージです。結構実務で使うので、こんなのあったなーと頭のどこかに残しておきましょう。

まとめ

Advanced Custom Fields (ACF)は作る側(コーダー)も使う側(クライアント)にもやさしいプラグインだと思いますので、これからもカスタマイズ方法の記事を更新していきます。

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