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

はじめに

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

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

まずは仕様を確認

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

1.未入力時に項目ごと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.未入力時は項目は残して出力する

「果物:   」のパターンですね。

基本的にこういった場合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; ?>

ですね。

最後に

&nbsp;

↑をそのまま表示できなくて(空白になる)苦戦してしまった・・・
結局あきらめて、&の後に半角スペースいれました(´;ω;`)ウッ…