カスタムフィールドの値を入力してない場合に何も表示しない方法

665 回閲覧されました

みなさんこんにちは、WEB制作のエンジニアのjonioです。

不動産サイトとかで物件の画像を入力する項目がありますが物件によって使う画像の枚数が変わります。

そんな時に入力しないとHTMLは↓になります。

画像の入力をしてないからsrc属性は空の状態になっていますがコーディングするときにこれが邪魔をして画面崩れする時があります。

またSEOを考えた時にimgタグ自体が表示されていたら問題ないですがimgタグがあって何も入ってない状態だとSEOに影響するかもしれません。

この記事ではカスタムフィールドで値や画像を入力するときに何も入力していない場合はカスタムフィールドの入力してない部分自体を非表示にする方法の解説をします。

コピペでできるのでぜひ使ってください。

それでは解説します。

 

値を入力してない部分を非表示にするコード

早速ですがコードは↓です。

3行目がカスタムフィールドの値を入力してない時に表示する内容ですがここを空にすればいいです。

6行目〜7行目はカスタムフィールドの値がある時に表示する内容で今は画像を表示するようにしていますが表示したい内容に合わせて書き換えて下さい。