WordPressで記事一覧に表示させる画像を個別に指定したい場合のやり方

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

サイドバー部分に画像を表示
このページの内容は以下のページの続きになります。

１、WordPressの記事内の画像を一覧表示する時の問題点
２、WordPressで記事内の画像を自動リサイズして一覧表示させるやり方
３、WordPressで記事内に画像がない場合の一覧表示用画像の設定

上記３のページで解説したように、ここまでのやり方だと「投稿記事を編集している時に、最初にアップロードした画像」が一覧表示に使用されます。
ですから、最初にアップロードした画像を記事内で使用しなかったとしても、一覧にはその画像が表示されてしまうという問題点があります。

今回はこの問題点を解決する方法を説明しましょう。

前回までにできているコード

<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 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)); ?>
  <li><img src="<?php echo $url[0]; ?>" alt="<?php echo $alt; ?>" /><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
<?php else: ?>
  <li><img src="デフォルト画像のURL" alt="デフォルト画像" /><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endif; ?>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</ul>

これに必要なコードを追加していきます。

考え方

基本的には、一覧で表示される画像は自動で選択されるほうが運用していく上で楽でしょう。

しかし冒頭で説明したような理由から、自分が想定している画像が一覧に使用されなかった場合やあえて別の画像を指定したい場合には、それを実現できる仕組みがあると便利ですね。

ですから、記事編集画面では何らかの形で画像アップロード欄を１つ用意しておいて、sidebar.phpなどのテンプレートファイル側ではそのアップロード欄に画像があるかどうかを判定した上で、一覧表示の画像を振り分ければ良い。ということになります。

画像アップロード欄を新たに追加するにはカスタムフィールドを使う手もありますが、今回はアイキャッチ画像を使用して説明していきます。

実際のコード

アイキャッチ画像を有効化するコードは以下のものですが、これはすでに前回までのページで記述されていると思います。(function.phpに記述)

add_theme_support('post-thumbnails');

次に、アイキャッチ画像が登録されている場合はそれを優先的に表示させるコードを追加していきます。
上記コード内の、

$attachments = get_children($args);
?>

の下に、

<?php if(has_post_thumbnail()): ?>

を書きます。
この記述によってアイキャッチ画像が登録されているかどうかを判定しています。
さらに、それに続いてアイキャッチ画像を表示させる以下のコードを記述します。

  <li><?php the_post_thumbnail('sidebar-thumbnail'); ?><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

これで、アイキャッチ画像が登録されている場合にはその画像が優先的に一覧表示に使用されることになります。
sidebar-thumbnailというのは、前回までの説明でfunction.phpに登録した「一覧表示用の画像サイズの名称」ですね。
アイキャッチ画像はこのサイズに自動リサイズされ、一覧表示されるわけです。

そして、その後にある以下のif文は、

<?php if( !empty($attachments) ): ?>

ちゃんと以下のようにelseifに変更しておきましょう。

<?php elseif( !empty($attachments) ): ?>

これで完成です。

一覧表示で選択される画像の優先順位

一覧で表示される画像の優先順位は以下のようになります。

１、アイキャッチ画像がある場合には優先的に表示。
２、アイキャッチ画像がなく、記事に紐付けられた画像がある場合にはその1枚目の画像を表示。
３、それらがない場合にはあらかじめ登録しておいたデフォルト画像を表示。

となります。
もちろんすべて自動でリサイズされます。

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