WordPressのテンプレートでアイキャッチ画像が表示されないとき

2024.01.19 09:00
2024.10.16 10:51
WordPressのテンプレートでアイキャッチ画像が表示されないとき

WordPressで記事を作って一覧表示をさせるときに、アイキャッチ画像が表示されなくて困りました。
状況としては、トップページに「get_posts」を使ってブログ記事を表示しようとしたのですが、そこで「get_the_post_thumbnail」でアイキャッチ画像が表示されませんでした。

通常のarchive.phpとかsingile.phpなら問題なかったのですが、「get_posts」の場合はちょっと違ったようです。

まずはうまく行かなかったコード。

<?php
// ブログを取得
wp_reset_postdata();
$blogs = get_posts([
  'posts_per_page' => 4,
  'orderby' => 'date',
  'order' => 'DESC'
]);
?>

<?php foreach ( $blogs as $blog ): setup_postdata( $blog );?>
  <?php if ( has_post_thumbnail()):?>
    <img src="<?php echo get_the_post_thumbnail(); ?>">
  <?php endif ; ?>
<?php endforeach;?>

アイキャッチがあれば表示するという画像ですが、コレだとうまくいきませんでした。通常のアーカイブであれば、これで表示されるのですが・・。

では次に表示されたコード。

<?php
// ブログを取得
wp_reset_postdata();
$blogs = get_posts([
  'posts_per_page' => 4,
  'orderby' => 'date',
  'order' => 'DESC'
]);
?>

<?php foreach ( $blogs as $blog ): setup_postdata( $blog );?>
  <?php if ( has_post_thumbnail( $blog->ID )):?>
    <img src="<?php echo get_the_post_thumbnail( $blog->ID, 'post-thumbnail'); ?>">
  <?php endif ; ?>
<?php endforeach;?>

こんな感じです！
IDを指定してあげる必要があるんですね。

ちなみにコレだと画像に色々なclassがついてきてしまうので、それが邪魔になるときがあります。そんな場合はurlだけを拾います。

<?php
// ブログを取得
wp_reset_postdata();
$blogs = get_posts([
  'posts_per_page' => 4,
  'orderby' => 'date',
  'order' => 'DESC'
]);
?>

<?php foreach ( $blogs as $blog ): setup_postdata( $blog );?>
  <?php if ( has_post_thumbnail( $blog->ID )):?>
    <img src="<?php echo get_the_post_thumbnail( $blog->ID, 'post-thumbnail'); ?>">
  <?php endif ; ?>
<?php endforeach;?>

これで表示されました！

ちなみに「functions.php」に「add_theme_support(‘post-thumbnails’);」を指定する必要があるので、コレを忘れずに！

今回は以上です！