ワードプレス

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

アイキャッチ画像取得

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

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

記事投稿の参考例

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

WordPress管理画面-投稿
WordPress管理画面-投稿
ブラウザ表示-投稿
ブラウザ表示-投稿

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

WordPress管理画面-投稿
WordPress管理画面-投稿
ブラウザ表示-投稿
ブラウザ表示-投稿

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

WordPress管理画面-投稿
WordPress管理画面-投稿
ブラウザ表示-投稿
ブラウザ表示-投稿

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

WordPress管理画面-投稿
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のイメージ画像
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のイメージ画像
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, //1ページあたりの表示件数
			);
			$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件までの表示に設定。

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そのタームが付与されている投稿数
取得一覧

カスタム投稿をプラグインで実装

カスタム投稿は「Custom Post Type UI」を使って投稿タイプを分けて、ページネーションは「WP-PageNavi」で表示する事ができるようになります。

Custom Post Type UIとWP-PageNavi
ブログ一覧ページをCustom Post Type UIとWP-PageNaviを組み合わせて作る方法【プラグイン】Web製作で必須となる企業のブログ一覧ページの作り方についての記事になります。カスタム投稿は「Custom Post Type UI」を使って投稿タイプを分けて、ページネーションは「WP-PageNavi」で表示させます。...