アイキャッチ画像(WordPressのサムネイル画像)がない場合、いらない場合は、これで解決。 / いがわ

.

Memo

アイキャッチ画像がない場合の対応。

アイキャッチ画像(サムネイル画像)が設定されていないときにできる空白をなくしたい。

アイキャッチ画像、サムネイル画像がないとき。

画像はないけど投稿はしたい。

ブログ投稿時にちょうどいい感じの画像が見つからないときや、そのまま投稿してしまいたい場合がある。

だからといってそのまま投稿してしまうと、アイキャッチ画像が入るはずの箇所に空白ができるので、見た目が悪くなってしまう。

テンプレートテーマとオリジナルテーマ。

テンプレートテーマであればプラグインでも良いかもしれないが、オリジナルテーマであればPHPで記述しておくと後々使い回しがしやすい。

なにより、プラグインによりサイトが重くなるという事態や、管理・移転時の手間を避けられる。

アイキャッチ画像有りと無しの設定をしよう。

代わりの画像を用意しておく。

代替画像の用意。

そのようなことにならないために、あらかじめアイキャッチがない場合の代替となるデフォルト画像を用意しておくと良い。

デフォルト画像として、会社などのロゴを表示させるという方法がよく使われる。)


アイキャッチ画像を表示させたいループ内で切り分ける。

デフォルト画像の設定方法。

投稿時にアイキャッチ画像が設定されていない場合用に、デフォルトの画像を用意。それをimgタグで出力する。

PHPの条件分岐で切り分ける。

アイキャッチ画像を表示させたいファイルのループ内で、条件分岐を使い、デフォルト画像とアイキャッチ画像を切り分ける。

記述するファイル。

  • ホームページやフロントページの場合は、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つのサイトで動作確認済み。)

WordPressのアイキャッチ画像(サムネイル画像)を条件分岐したい。


アイキャッチ画像(サムネイル画像)がいらない場合は?

アイキャッチ画像(サムネイル画像)がいらないとき。

「the_post_thumbnail」を使わない。

そもそもアイキャッチ画像がいらないというときもある。そういう場合は、ループ内で「the_post_thumbnail」を使う必要がないので記述をしない。

この場合、WordPress投稿画面の表示オプションでも、チェックを外しておくと良い。

WordPresa投稿画面の上部にある、表示オプションから外す。

「表示オプション」 > 「アイキャッチ画像」のチェックを外す。

WordPressのアイキャッチ画像オプション。

これで、アイキャッチ画像の設定項目が非表示となる。

WordPressのアイキャッチ画像、サムネイル画像の切り分け方法を見つめる猫ちゃん。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

WordPress 関連メモ。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。