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

  • このエントリーをはてなブックマークに追加
  • 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でレイアウト変更も可能になります。

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

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

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

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

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

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

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

まとめ

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

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

- 新コースでワードプレスを学ぶ【AD】-

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください