WordPressで記事内の画像を自動リサイズして一覧表示させるやり方

  • 公開日 : 2015年7月2日
  • カテゴリ : WordPress

クリスマス

2019年追記：このページの内容は以下のページでわかりやすく書き直しています。
https://www.1-firststep.com/archives/8054

WordPressの記事内の画像を一覧表示する時の問題点で書いたように、WordPressにおいて各記事内の1枚目の画像を自動リサイズさせて一覧表示させるやり方を解説します。

まず、完成形は以下のようなHTMLにするとします。
これはこのブログのサイドバー部分と同じです。

<ul>
  <li><img src="画像のURL" alt="" /><a href="投稿ページのURL">投稿ページのタイトル</a></li>
</ul>

このブログの本文領域の幅の関係で変な位置で改行が起きていますが、なんとなく読み取ってください。
または、コードをコピーしてテキストエディタなどに貼り付けると見やすくなります。

まずは各投稿ページのタイトルとリンクを表示させる

記事一覧を表示させるテンプレートファイル、今回の例の場合はsidebar.phpに書くとして、以下のように記述する。

<ul>
<?php
$args = array(
  'posts_per_page' => '5',
  'post_type' => 'post',
);
$custom_post = get_posts($args);
?>
<?php foreach($custom_post as $post): setup_postdata($post); ?>
  <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</ul>

上記のコードでは投稿ページを最新5件表示させている。
get_postsで記事を取得し、foreachによって繰り返し表示させている。
これにより出力されるHTMLは以下のようになる。

<ul>
  <li><a href="投稿ページ1のURL">投稿ページ1のタイトル</a></li>
  <li><a href="投稿ページ2のURL">投稿ページ2のタイトル</a></li>
  <li><a href="投稿ページ3のURL">投稿ページ3のタイトル</a></li>
  <li><a href="投稿ページ4のURL">投稿ページ4のタイトル</a></li>
  <li><a href="投稿ページ5のURL">投稿ページ5のタイトル</a></li>
</ul>

各投稿ページ内の1枚目の画像を表示させる

次に、一覧表示させる画像の大きさをサイドバー表示用として80ピクセル×80ピクセルにする場合、function.phpにて新たなサイズを設定するために以下のコードを記述する。

//アイキャッチ画像を有効化
add_theme_support('post-thumbnails');

//メディアのサイズを追加
add_image_size('sidebar-thumbnail', 80, 80, true);

上記のadd_image_sizeの第1引数には「新しい画像サイズの名前 」を、第4引数には「画像の切り抜きを行うか否かを指定」をtrueまたはfalseで設定します。
指定しない場合の初期値はfalseになります。
関数リファレンス/add image size – WordPress Codex 日本語版

次に、繰り返し表示をしているforeachの中で各投稿ページの画像を取得するためのコードを記述する。
foreachの開始直後、つまり出力するli要素の前に記述してください。

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

上記のコードによって各投稿ページ内の1枚目の画像が取得できる。
関数リファレンス/get children – WordPress Codex 日本語版

そして、上記コードに続いて以下のように記述し、各画像を出力する。

<?php foreach($attachments as $attachment): ?>
<?php $url = wp_get_attachment_image_src($attachment->ID, 'sidebar-thumbnail'); ?>
  <li><img src="<?php echo $url[0]; ?>" alt="" /><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>

これにより、各投稿ページ内の1枚目の画像が表示される。
関数リファレンス/wp get attachment image src – WordPress Codex 日本語版
この時点で出力されているHTMLは以下のようになる。

<ul>
  <li><img src="画像URL" alt="" /><a href="投稿ページ1のURL">投稿ページ1のタイトル</a></li>
  <li><img src="画像URL" alt="" /><a href="投稿ページ2のURL">投稿ページ2のタイトル</a></li>
  <li><img src="画像URL" alt="" /><a href="投稿ページ3のURL">投稿ページ3のタイトル</a></li>
  <li><img src="画像URL" alt="" /><a href="投稿ページ4のURL">投稿ページ4のタイトル</a></li>
  <li><img src="画像URL" alt="" /><a href="投稿ページ5のURL">投稿ページ5のタイトル</a></li>
</ul>

各画像のalt属性も表示させたい場合は、前述のコードのforeach内に以下のコードを追加し、

<?php $alt = esc_html(get_post_meta($attachment->ID, '_wp_attachment_image_alt', true)); ?>

出力するimg要素の部分は以下の記述に変更する

<img src="<?php echo $url[0]; ?>" alt="<?php echo $alt; ?>" />

関数リファレンス/get post meta – WordPress Codex 日本語版

完成形のコード

完成形のコードは以下のようになります。

<ul>
<?php
$args = array(
  'posts_per_page' => '5',
  'post_type' => 'post',
);
$custom_post = get_posts($args);
?>
<?php foreach($custom_post as $post): setup_postdata($post); ?>
<?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 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)); ?>
  <li><img src="<?php echo $url[0]; ?>" alt="<?php echo $alt; ?>" /><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</ul>

完成形とは言いましたが、このコードでは投稿ページ内に画像が1枚もなかった場合のデフォルト画像の設定がしてありません。
そのあたりに関してはまた次の機会に追加説明します。

続きは「WordPressで記事内に画像がない場合の一覧表示用画像の設定」のページへどうぞ。

このページを見た人はこんなページも見ています