WordPress アイキャッチ画像がないときに自動で「デフォルト画像」を表示させる方法

WordPressの画像について Cocoon

WordPressでアイキャッチ画像がない場合の替わりの画像を表示する方法はいくつか方法があります。

CSSで代替え画像を設定する

該当のアイキャッチ画像が表示される箇所のCSSのクラス名を取得する。親テーマがある場合は、子テーマを作り、Style.cssファイルの中に該当するサムネイル画像(アイキャッチ画像)のクラスの背景を設定する。

/*-------------------------------
画像がなければsample.pngを表示する
-------------------------------*/
img {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-weight: 300;
  line-height: 2;
  text-align: center;
  min-width: 300px;
  min-height: 50px;
  position: relative;
}
img::before {
  content: "";
  width: 100%;
  height: calc(100% + 10px);
  background-color: #ccc;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: -2px;
  transform: translateY(-50%);
}
img::after {
  content: url("http://www.example.com/sample.png");
  font-size: 18px;
  color: rgb(100, 100, 100);
  display: block;
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0;
  width: 100%;
  height: 100%;
}

functionに記述して保存時に自動で指定画像を表示する方法

functionに記述することで、アイキャッチ画像がない場合は、任意の画像に自動で置き換えることができます。まずは、投稿ページをひとつ作り、メディアライブラリに画像を登録して、記事のIDを確認します。記事の投稿を保存するときにアイキャッチがなければの指定した投稿記事IDの‘_thumbnail_id’を保存するというものです。投稿IDに紐づいたアイキャッチ画像を取得していくるので、投稿ページ自体は非公開設定でも投稿記事のアイキャッチを取得できます。

add_action( 'save_post', 'save_default_thumbnail' );
function save_default_thumbnail( $post_id ) {
    $post_thumbnail = get_post_meta( $post_id, $key = '_thumbnail_id', $single = true );
    if ( !wp_is_post_revision( $post_id ) ) {
        if ( empty( $post_thumbnail ) ) {
            update_post_meta( $post_id, $meta_key = '_thumbnail_id', $meta_value = '画像id' );
        }
    }
}

テーマのphpの個別ページを編集する。

親テーマは編集せずに、子テーマを作ります。子テーマの中に、個別ページのphpファイルを作り、編集します。子テーマに追加ページがなければ親ページが適用されます。画像をURLを直接指定できます。

<?php
			if (has_post_thumbnail()) {
				the_post_thumbnail( array(150,150) );
			}else {
				echo '<img src="' . get_bloginfo('template_directory') . '/img/default.png' . '" width="150" height="150" alt="thumbnail" />';
			}
?>

WordPressテーマCocoonの場合

Cocoon設定の中のOGP画像を指定すると、その画像のりサイズがアイキャッチ画像が指定されていない場合の、デフォルト画像として表示されるようになります。

タイトルとURLをコピーしました