wp 投稿の画面最初の画像をアイキャッチ画像にする

Wordpress関連
2020年12月15日

kobayashi kenji atelierサイトトップページで各カテゴリーの最新記事の最初の画像をアイキャッチにして表示させる

functions.phpに以下のコードを追加

//記事の最初の画像を取得
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];
 
if(empty($first_img)){ //Defines a default image
$first_img = "ここには画像が無い時に表示される画像のURLを.jpg";
}
return $first_img;
}

出力させる場合のあれこれ
普通に呼び出す場合はこれだけ

<?php echo catch_that_image(); ?>

新着記事一覧等の場合は以下を

<ul>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>" >
<img src="<?php echo catch_that_image(); ?>" alt="" width="290" height="218" />
</a>
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
</li>
<?php endwhile; endif; ?>
</ul>

更に今回役に立ったのが以下。指定したカテゴリーの新着投稿一覧から1件のみをパーマリンクなどせずにシンプルに画像のみ表示させた。

<ul>
<?php
$posts = get_posts('numberposts=3&category=4');
global $post;
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>" >
<img src="<?php echo catch_that_image(); ?>" alt="" width="290" height="218" />
</a>
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
</li>
<?php endforeach; endif; ?>
</ul>

実装したコード

<div class="info-img">
            <?php
            $posts = get_posts('numberposts=1&category=13');
            global $post;
            ?>
            <?php
            if($posts): foreach($posts as $post):
            setup_postdata($post);
            ?>
            <img src="<?php echo catch_that_image(); ?>" alt="" />
        </div>
        <?php endforeach; endif; ?>
PAGE TOP