はじめに
タイトルの日本語が果てしなくわかりづらいですね。
ごめんなさい。国語の偏差値２ですので、ご了承ください(´；ω；｀)ｳｯ…
さて、お仕事で
カスタムフィールドを未入力のまま登録されると、デザインが崩れてしまっておりました。
そのための対応方法です。
まずは仕様を確認
例えば、
「果物：りんご」の「りんご」の部分がカスタムフィールドの場合
「果物： 」と表示するか、「果物：」の行すら出力しないかってことです。
１.未入力時に項目ごとOFFするかどうか
「（行すら出ない）」のパターンですね。
未入力の場合は・・・・
「if文」ですね。きたーーー！！！！苦手なif文だ！！
まずは、参考サイトがないかググってみる。
ありました。
WordPress｜カスタムフィールドで値無記入の場合、項目非表示。
フリーランスWEBデザイナーの仕事
<?php if(get_post_meta($post->ID,'wpcf-fruit',true)): ?> <div class="fruit">果物：<?php echo get_post_meta($post->ID,'wpcf-fruit',true); ?></div> <?php endif; ?>
なるほど。タグごとif文で囲ってしまえばいいんですね。
2.未入力時は項目は残して出力する
「果物： 」のパターンですね。
基本的にこういった場合２パターンあると考えられます。
- 「& nbsp;（←余白は抜いて記載）」を入れる
- CSSでどうにかする
min-heightを指定すればデザインが崩れずにいけるかなと思った私は、
デザイナーさんに確認してみました。
すると
「height系で調整の場合、ブラウザでフォントサイズを大きくされると崩れる危険がある」
とのことでした。
なーるーほーど！！！！
なので、
「「& nbsp;（←余白は抜いて記載）」を入れる」で処理することにします。
コードは
<?php if(post_custom('fruit')): ?>
<li><?php echo post_custom('fruit'); ?></li>
<?php else: ?>
<li><?php echo ' '; ?></li>
<?php endif; ?>ん?post_costomとは？
コピペしていると何気なく使っちゃってるんですよね。
日本語CODEXではヒットしないようです。
指定したキーに対して入力した値が1つだけの場合
参考サイト→カスタムフィールドの指定したキーの値だけ表示する方法
に使えるようなので、get_post_metaで書きなおしましょう。
<?php if(get_post_meta('fruit')): ?>
<li><?php echo get_post_meta('fruit'); ?></li>
<?php else: ?>
<li><?php echo ' '; ?></li>
<?php endif; ?>ですね。
最後に
↑をそのまま表示できなくて（空白になる）苦戦してしまった・・・
結局あきらめて、＆の後に半角スペースいれました(´；ω；｀)ｳｯ…