さぁ!検索しよう!

アイキャッチ画像を設定していなければ記事内の一番最初の画像をサムネイルとし、記事内の画像も無ければ代わりに用意した画像をサムネイルとする方法を紹介します。

通常、アイキャッチ画像を設定しなければ、下記のような記述で代わりに用意した画像を表示させる方法が一般的です。

<section class="eye-catch">
<?php if(has_post_thumbnail()): ?>
<p><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></p>
<?php else: ?>
<p><a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-img.jpg" alt=""/></a></p>
<?php endif; ?>
</section>

しかし、上記の方法ではアイキャッチ画像を毎回用意し設定しなければいけないことや、アイキャッチ画像を設定せずに代わりの画像が表示されても、その画像ばかりが記事一覧に並ぶのは見栄えが悪くなります。
そこで今回は、プラグインは使わずにfunctions.phpとサムネイル画像を表示したいテンプレートファイルへの記述のみで変更させます。

参考記事:DATARAME HOMEPAGE

記事内の一番最初の画像を取得してサムネイル画像表示

追加するテンプレートファイルは2つのみです。それでは順番に説明していきます。

手順

  1. functions.phpに下記を追加します。
  2. 	function catch_that_image() {
    	global $post, $posts;
    	$first_img = ”;
    	ob_start();
    	ob_end_clean();
    	$output = preg_match_all(‘/<img.+src=[’"]([^’"]+)[’"].*>/i’, $post->post_content,$matches);
    	$first_img = $matches [1] [0];
    	
    	return $first_img;
    	}
    	
  3. index.phpのサムネイルを表示したい部分に下記を追加します。
  4. 	<section class="eye-catch">
    	<?php if(has_post_thumbnail()): ?>
    	<p><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></p>
    	<?php elseif(catch_that_image()): ?>
    	<p><a href="<?php the_permalink(); ?>"><img src="<?php echo catch_that_image(); ?>" /></a></p>
    	<?php else: ?>
    	<p><a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt=""/></a></p>
    	<?php endif; ?>
    	</section>
    	

else以下の<p><a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt=""/></a></p>の記述は、代わりの画像を表示するための記述ですので、ご自身のディレクトリに合わせてパスを変更してください。

以上です。