
アイキャッチ画像(WordPressのサムネイル画像)がない場合、いらない場合は、これで解決。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
アイキャッチ画像(サムネイル画像)が設定されていないときにできる空白をなくしたい。
ブログ投稿時にちょうどいい感じの画像が見つからないときや、そのまま投稿してしまいたい場合がある。
だからといってそのまま投稿してしまうと、アイキャッチ画像が入るはずの箇所に空白ができるので、見た目が悪くなってしまう。
そのようなことにならないために、あらかじめアイキャッチがない場合の代替となるデフォルト画像を用意しておくと良い。(デフォルト画像として会社などのロゴを表示させるという方法がよく使われる。)
テンプレートテーマであればプラグインでも良いかもしれないが、オリジナルテーマであればPHPで記述しておく方が後々使い回しがしやすい。
なにより、プラグインによりサイトが重くなるという事態や、管理・移転時の手間を避けられる。
対応方法。デフォルトの画像を設定しておく。
投稿時にアイキャッチ画像が設定されていない場合用に、デフォルトの画像を用意しておく。それをimgタグで出力する。
手順は次の通り。
アイキャッチ画像を表示させたいループ内で切り分ける。
アイキャッチ画像を表示させたいファイルのループ内で、条件分岐を使い、デフォルト画像とアイキャッチ画像を切り分ける。
記述するファイル。
- ホームページやフロントページの場合は、index.phpやhome.php、もしくはfront-page.phpなどのループ内に記述する。
- 投稿一覧ページの場合は、archive.phpなどのループ内に記述する。
- 個別投稿ページの場合は、single.phpなどのループ内に記述する。
記述方法。
ループ内でアイキャッチ画像(サムネイル画像)を表示させるテンプレートタグ「the_post_thumbnail」の記述を、下記に置き換えれば解決する。
PHP(変更前)
「the_post_thumbnail」で、アイキャッチ画像を表示する。
- この場合は、アイキャッチ画像が設定されていないときは、空白ができる。
<?php the_post_thumbnail(); ?>
PHP(変更後)
まず条件分岐用の「has_post_thumbnail」で、アイキャッチ画像があるかどうか調べる。
アイキャッチ画像がある場合は、「the_post_thumbnail」でアイキャッチ画像を表示させる。
アイキャッチ画像がない場合は、「img」で指定されている画像を表示させる。
- この場合は、アイキャッチ画像が設定されていないときは、imgタグで指定されているデフォルト画像が表示される。
- imgタグの画像のパスなど「xxxxx」の部分は、環境や用途に合わせて変更する。
<?php if (has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/xxxxx.jpg" alt="xxxxx" loading="lazy" width="xxxxx" height="xxxxx">
<?php endif; ?>
上記コードは、メインループでもサブループでも、投稿でもカスタム投稿でも実装可能。(2つのサイトで動作確認済み。)
アイキャッチ画像(サムネイル画像)がいらない場合は?
「the_post_thumbnail」を使わない。
そもそもアイキャッチ画像がいらないというときもある。そういう場合は、ループ内で「the_post_thumbnail」を使う必要がないので記述をしない。
この場合、WordPress投稿画面の表示オプションでも、チェックを外しておくと良い。
これで、WP管理画面の投稿画面で、アイキャッチ画像の設定項目が非表示となる。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。