記事内の最初の画像をサムネイルに使用する
WordPress
アイキャッチいちいち設定するの面倒くさい。
記事にある画像を勝手にサムネイルにしてくれ。
言ってることはズボラでも、ラクをするための努力は惜しまない、この矛盾。
調べに調べて、試しに試して、やっとたどり着いた答えがコチラです。
<?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コマ目が表示されないと悲しいですぞ~。