よもやまチョモランマ

記事内の最初の画像をサムネイルに使用する

アイキャッチいちいち設定するの面倒くさい。
記事にある画像を勝手にサムネイルにしてくれ。

言ってることはズボラでも、ラクをするための努力は惜しまない、この矛盾。
調べに調べて、試しに試して、やっとたどり着いた答えがコチラです。

<?php
$args = array(
  'post_parent' => $post->ID,
  'post_type' => 'attachment',
  'post_mine_type' => 'image',
  'order' => 'ASC',
  'posts_per_page' => 1,
);
$attachments = get_children($args);
?>

<?php if( !empty($attachments) ): ?>
<?php foreach($attachments as $attachment): ?>
<?php $url = wp_get_attachment_image_src($attachment->ID, 'sidebar-thumbnail'); ?>
<?php $alt = esc_html(get_post_meta($attachment->ID, '_wp_attachment_image_alt', true)); ?>
<img src="<?php echo $url[0]; ?>" alt="<?php echo $alt; ?>" />
<?php endforeach; ?>

<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/デフォルト画像のルート" alt="no-img"/>
<?php endif; ?>

【参考】
WordPressで記事内の画像を自動リサイズして一覧表示させるやり方
WordPressで記事内に画像がない場合の一覧表示用画像の設定

参考にした記事では function.php にメディアサイズを追加しておけとありましたが、今回は反映されていないようでしたので、省きました。ノープロブレム。

add_image_size('sidebar-thumbnail', 80, 80, true);

また、今回、引き換えに消されたコードは「アイキャッチがあれば表示する、無ければ用意してあるデフォルト画像を表示する」というものでしたが、これはこれで王道コードなので、ド忘れしたときのために残しておきます。

<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('medium'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/デフォルト画像のルート" alt="no-img"/>
<?php endif; ?>


左のサムネイルがアイキャッチ、右が記事画像。

問題点

ただし、このコードにはひとつ問題がありまして。
「そのページ編集時に最初にアップロードした画像」が選ばれるんです。
厳密にいえば「そのページに表示されている最初の画像」ではないということです。
複数の画像をいっぺんにアップロードして記事を書くときは要注意。
マンガなのに1コマ目が表示されないと悲しいですぞ~。