Blog スタッフブログ

WEB制作

【WORDPRESS】投稿時の最初の画像をサムネイルとして表示する方法

こんにちは、WEB開発のYTです。

トップページやアーカイブページで投稿した最初の画像を取得する際のコードをお伝えしたいと思います。

ますはfuction.phpにこちらをコピぺでもかまいませんので記載します。

function first_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches[1][0];
  if(empty($first_img)){
    $first_img = '';
  }
  return $first_img;
}

そしてサムネイルとして表示させたい箇所には

<?php if(first_image()): ?>
	<img class="img-responsive" src="<?php echo first_image(); ?>" alt="<?php the_title(); ?>">
	<?php else : ?>
		<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/no_image.png<?php echo my_get_filetime('/images/no_image.png');?>" alt="<?php esc_html(bloginfo('name')); ?>">
<?php endif; ?>

を記載してください。

画像が投稿されていなかった場合はno__imageが表示される形となっています。

戻る一覧へ戻る