アイキャッチ画像が設定されてなくても、記事内の画像をアイキャッチ画像に設定する方法【優先順位を決める】

WordPressの投稿でアイキャッチ画像が設定されていない場合でも「記事内の画像をアイキャッチ画像に指定する」「アイキャッチ画像と記事内に画像がない場合は別の画像を取得する」このようにアイキャッチ画像を取得する優先順位を決めて出力する方法について解説します。

簡単に言えば、どのパターンでもアイキャッチ画像が表示される仕様にする設定です。

記事投稿の参考例
コード
カスタム投稿をプラグインで実装

記事投稿の参考例

アイキャッチ画像なし、記事内の画像あり

アイキャッチ画像なし、記事内の画像なし

アイキャッチ画像あり、記事内の画像あり

アイキャッチ画像あり、記事内の画像なし

様々なパターンで最優先されるのは、アイキャッチ画像で、そのアイキャッチ画像がなければ記事内の画像で、記事内の画像がなければNO IMAGE画像を表示する設定になっています。

優先順位：アイキャッチ画像→記事内の画像→NO IMAGE画像

コード

キーとなるのは<?php echo catch_that_image(); ?>のコードです。

アイキャッチ画像が設定されている場合はそのままアイキャッチ画像を表示し、アイキャッチ画像がないときはcatch_that_image()で作成したif (has_post_thumbnail())imgパスで表示するように条件分岐しています。

※アイキャッチ画像取得の記述<?php echo catch_that_image(500,500); ?>は先にfunctions.phpで定義しないとWordPress管理画面でのファイル更新がうまくいかないので、functions.phpからコードを記述更新。

functions.php

▪実際にVSCodeに貼り付けると下記の画像のようになります（functions.php）⇩

▪functions.phpのコード⇩

<?php

// 投稿のみアイキャッチ画像有効化
add_theme_support( 'post-thumbnails', array( 'post' ) );

// アイキャッチ画像取得
function catch_that_image($width,$height) {
	global $post, $posts;
	$catch_url = '';
	$catch_img = '';
	ob_start();
	ob_end_clean();

	if (has_post_thumbnail()) {
		$attach_id = get_post_thumbnail_id(get_the_ID());
		$catch_url = wp_get_attachment_image_src($attach_id, array($width,$height), false);
		$catch_img = '<div class="u_of"><img src="' .$catch_url[0]. '" width="' .$catch_url[1]. '" height="' .$catch_url[2]. '" alt=""></div>';
	} if (!has_post_thumbnail()) {
			$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
			$img_url = $matches [1] [0];
			$img_size = "/-\d{2,9}+[Xx]\d{2,9}/i";
			$img_full_url = preg_replace($img_size, "", $img_url);
			$img_id = attachment_url_to_postid($img_full_url);

			if ($img_id == 0) {
				$catch_url = $img_url;
				$catch_img = '<div class="u_of"><img src="' .$catch_url. '" width="' .$width. '" height="' .$height. '" alt=""></div>';
			} else {
					$catch_url = wp_get_attachment_image_src($img_id, array($width,$height), false);
					$catch_img = '<div class="u_of"><img src="' .$catch_url[0]. '" width="' .$catch_url[1]. '" height="' .$catch_url[2]. '" alt=""></div>';
			}

			if (empty($catch_url)) {
				$catch_img = '<div class="c_no-image"><img class="no-image-img" src="'. get_stylesheet_directory_uri() .'/img/common/no-image.jpg" width="480" height="270" alt=""><p class="no-image-txt">NO IMAGE</p></div>';
			}
	}
	return $catch_img;
}

コード簡易詳細

get_stylesheet_directory_uri() .’/img/common/no-image.jpg”でアイキャッチ画像と記事内に画像がなかった場合にNOIMAGEの画像を表示するよう指定しているので、imgフォルダ→commonフォルダの中にno-image.jpgの画像を入れることで画像なしを回避できます。

front-page.php

▪実際にVSCodeに貼り付けると下記の画像のようになります（front-page.php）⇩

▪front-page.phpのコード⇩

<section data-scroll class="m_news">
	<div class="u_container u_scranm-flow">
		<h2 class="c_headline"><span>NEWS</span></h2>
		<?php
			$args = array(
				'post_status' => 'publish', //投稿ステータス(公開)
				'post_type'	=> 'post', //投稿タイプ
				'posts_per_page' => 3, //１ページあたりの表示件数
			);
			$news_query = new WP_Query($args);
		?>
		<?php if($news_query->have_posts()): ?>
			<div class="news-list-wrap">
				<ul class="c_news-list">
					<!-- ループさせる記事↓ -->
					<?php while ($news_query->have_posts()): $news_query->the_post(); ?>
					<li class="item">
						<a href="<?php the_permalink(); ?>">
							<div class="item-img">
								<?php echo catch_that_image(500,500); ?>
							</div>
							<div class="item-state">
								<time class="item-date"><?php the_time('Y.m.d'); ?></time>
								<?php if ($terms = get_the_terms($post->ID, 'category')): ?>
								<ul class="item-cata-list">
									<?php foreach ($terms as $term) {echo '<li class="cata-item '.$term->slug.'">'.$term->name.'</li>';} ?>
								</ul>
								<?php endif; ?>
							</div>
							<p class="item-ttl"><?php the_title(); ?></p>
							<p class="item-excerpt"><?php echo get_the_excerpt(); ?></p>
						</a>
					</li>
					<?php endwhile; ?>
					<!-- ループさせる記事↑ -->
				</ul>
			</div>
			<a class="c_morebtn" href="<?php echo home_url(); ?>/news"><span>MORE</span></a>
		<?php else: ?>
		<p class="no-post">現在お知らせはありません。</p>
		<?php endif; ?>
	</div>
</section>

コード簡易詳細

<?php echo catch_that_image(500,500); ?>で高さと幅が500px以上にならないようになっています。

‘posts_per_page’ => 3,でページ上に3件までの表示に設定。

<li class=”item”></li>の中でアイキャッチ画像・日付・カテゴリー・本文の一部を表示を取得し、ブラウザ上に出力。

上記までのコードは、投稿タイプ‘post’のみの出力の設定になるのでカスタム投稿の場合は下記より実装可能です。

コード簡易詳細（カテゴリー分け）

この記事ではカテゴリーをイベントとニュースの2つに分けていて、イベントだとクラス名eventが付きニュースだとnewsがulのliに付きます。

▪WordPress管理画面投稿⇩

▪WordPress管理画面カテゴリー⇩

▪ブラウザ上の表示⇩

<?php if ($terms = get_the_terms($post->ID, 'category')): ?>
	<ul class="item-cata-list">
		<?php foreach ($terms as $term) {echo '<li class="cata-item '.$term->slug.'">'.$term->name.'</li>';} ?>
	</ul>
<?php endif; ?>

$term->slugでタームスラッグを取得、$term->nameでターム名を取得して表示しています。

ターム値の取得一覧

$term->term_id	タームID
$term->name	ターム名
$term->slug	タームスラッグ
$term->term_group	グループID
$term->term_taxonomy_id	タクソノミーID
$term->taxonomy	タクソノミー名
$term->description	タームの説明
$term->parent	タームの親ID
$term->count	そのタームが付与されている投稿数