カスタムフィールド未入力時に項目ごとOFFもしくは表示する方法

はじめに

タイトルの日本語が果てしなくわかりづらいですね。
ごめんなさい。国語の偏差値２ですので、ご了承ください(´；ω；｀)ｳｯ…

さて、お仕事で
カスタムフィールドを未入力のまま登録されると、デザインが崩れてしまっておりました。
そのための対応方法です。

まずは仕様を確認

例えば、
「果物：りんご」の「りんご」の部分がカスタムフィールドの場合
「果物：　　　」と表示するか、「果物：」の行すら出力しないかってことです。

１.未入力時に項目ごと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 '&nbsp;'; ?></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 '&nbsp;'; ?></li>
<?php endif; ?>

ですね。

最後に

 

↑をそのまま表示できなくて（空白になる）苦戦してしまった・・・
結局あきらめて、＆の後に半角スペースいれました(´；ω；｀)ｳｯ…