投稿ページでアイキャッチ画像が設定されている場合には画像の下にmarginを20px開けさせて、アイキャッチ画像が設定されていない場合にはmarginを設定しない…などといったレイアウトを組みたい…となった時に、アイキャッチ画像の有無で条件分岐する方法を活用するとなかなか便利です。
そこで今回はアイキャッチ画像の有無で条件分岐する方法についてご紹介したいと思います！
見本ソース
今回は下記のようなソースを元に解説していきたいと思います。
<div id="a"> <img src="アイキャッチ画像"> </div> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div id=”a”>～</div>にmarginを設定し、テキストとの間に隙間を空ける…という構造にしたいと思います。
つまりは、アイキャッチ画像が設定されていない場合には<div id=”a”>～</div>がない状態にするということですね。
この条件を満たすにはこれから紹介するコードを記述することで可能となります。
アイキャッチ画像の有無で条件分岐させるためのコード
アイキャッチ画像の有無で条件分岐させるためのコードは以下になります。
<?php if(has_post_thumbnail()): ?> <?php the_post_thumbnail(); ?> <?php else: ?> アイキャッチ画像が設定されていない時に表示する内容 <?php endif; ?>
以上のようなコードを記述することで、アイキャッチ画像が表示されている時にはアイキャッチ画像が、アイキャッチ画像が設定されていない時には別の表示をさせる…という表示をしてくれるようになります。
今回の見本ソースでいうと、
<?php if(has_post_thumbnail()): ?> <div id="a"> <?php the_post_thumbnail(); ?> </div> <?php else: ?> <?php endif; ?>
このように記述することで、アイキャッチ画像が設定さている時には<div id=”a”>～</div>を表示し、アイキャッチ画像が設定されていない場合には何も表示しない…という風に条件分岐をさせます。
まとめ
以上がアイキャッチ画像の有無で条件分岐する方法でした。
ブログを書く上でアイキャッチ画像はアクセントとしてもほぼ必要不可欠なものではありますが、もしどうしてもアイキャッチ画像が用意できない…なんて時の場合に備えて、今回紹介したような条件分岐タグを記述しておくことをオススメします！
