【WordPress】カスタムフィールドが未入力の時は項目ごと非表示にする方法

カスタムフィールドで未入力の時は項目ごと非表示に出来ない？

WordPressのカスタムフィールドは、固定ページなど通常編集しないページでも部分的に編集出来るように出来ます。

ただしテキストなど未入力にしたい時もあります。

そしてそのまま未入力にすると不都合が起きる事があるので、今回はそうならないように未入力の時は要素ごと非表示にする方法をご紹介していきます。

※今回はAdvanced Custom Fieldsを使った例で解説していきます。

効率よくWordPress制作したい人はこちら

カスタムフィールドが未入力（空）の時は項目ごと非表示にする方法

例えばカスタムフィールドでテキストを表示させた場合は以下のようになります。

これはテキストの上にmargin-top: 100px;を設定しています。

もしこれをただ未入力にした場合はこのようになります。

これはテキストは未入力なので空だけど、項目自体は残っているからmargin-topも残っているという事になります。

以下のオレンジ部分がmargin-top: 100px;になります。

ただ項目が未入力なのにmarginなど項目に適用されているスタイルが残っているとデザイン的に好ましくない事があると思います。

そういった場合は項目を丸ごと非表示にします。

まずはこちらが通常のカスタムフィールド。

<div class="sample-text">
  <?php the_field('カスタムフィールド名'); ?>
</div>

そしてテキストのclassであるsample-textには以下のようにmargin-top: 100px;を設定しています（sample-textは任意のclass名です）

.sample-text {
  margin-top: 100px;
  text-align: center;
}

この状態でテキストを未入力にすると、先ほどのようにテキストは表示されないけどmargin-topは反映されてしまいます。

それではテキストが未入力の時には要素ごと非表示にするには以下のようにします。

<?php if(get_post_meta($post->ID, 'カスタムフィールド名',true)): ?>
<div class="sample-text">
 <?php echo get_post_meta($post->ID , 'カスタムフィールド名' ,true); ?>
</div>
<?php endif; ?>

この状態でテキストを未入力にするとこのようになります。

今度は要素ごと非表示になったので、margin-topも反映されていません。

今回の例で言えばmargin-topは残っていた方がいいようにも見えますが、その場合は下の画像にmargin-topを設定したりすると思うので、そうなればカスタムフィールドのテキストごと非表示になればちょうどいい余白になるかと思います。

重要なのはカスタムフィールドでその要素がなくなっても崩れないようにコーディングする事ですね。

以上になります。

WordPress案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック