ワードプレスでアイキャッチ画像の有無で条件分岐するカスタマイズ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日は業務メモ。ワードプレスでは投稿ページや固定ページにアイキャッチ画像(投稿に紐づいたサムネイルイメージ)を設定できます。1記事に対して1つのイメージ画像を差し込める機能はとても便利です。

ワードプレスでアイキャッチ画像の有無で条件分岐するカスタム

もし投稿ページや固定ページでレイアウトを複雑にカスタマイズする場合は「アイキャッチ画像の有無を判定して条件分岐をかける方法」が便利です。下記の条件分岐を活用して命令文として実装しましょう。

アイキャッチ画像の有無を判定する条件分岐

以下のコードを投稿ページを表示させるテンプレート「single.php」に差し込むと、アイキャッチの有無のよって出力する文字をコントロールできます。アイキャッチ画像が設定された投稿では「enable-eyecatch-image」という文字列が出力されて、アイキャッチ画像がない投稿では「disabled-no-eyecatch-image」と出ます。

<?php if(has_post_thumbnail()){ echo "enable-eyecatch-image"; } else { echo "disabled-no-eyecatch-image"; } ?>

アイキャッチ画像の有無によって出力文字が異なる状況が作れるとCSSのclassやidとしてhtml内で出力されるタグを調整できるのでアイキャッチがあるかないかで細かくCSSでレイアウト変更も可能になります。

アイキャッチ画像がある投稿

アイキャッチは投稿ページ毎にあります。以下がアイキャッチが設定された状態。上記に掲載した条件分岐をsingle.phpのなかに差し込むと「enable-eyecatch-image」という文字列が出力される仕組みです。

アイキャッチ画像がない投稿

アイキャッチ画像を設定していない場合が以下です。アイキャッチがどのような役目で使われているかは現在導入しているテーマにもよりますがカスタマイズ時にアイキャッチ画像の設定状態によってレイアウト変更を行いたい場合は上記の条件分岐が便利です。状況に応じて細かくレイアウト調整を行う際はぜひご活用ください。

htmlタグに文字が出力された例

参考として以下がソース内に文字出力させた状態です。投稿ページ毎でのアイキャッチ有無状態によってclassに特定の文字を出力できるとCSSでレイアウトやデザインを調整する際に使用可能となります。

まとめ

CSSのclassやidとしてhtmlタグを文字出力するだけであればページ上に文字は一切出ません。htmlタグの一部に出力すればレイアウト調整のためだけに使えるので活用方法が肝となります。記事側でアイキャッチ画像を設置した場合と、設定しなかった場合でレイアウトを変更したいというシチュエーションが出てきたらぜひ本記事の条件分岐を活用してカスタマイズしてみてください。アイキャッチ画像の有無によって余白のバランスを変更したい場合などアイキャッチ有無によってCSS指定をかけたいときに重宝する条件分岐です。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する