アイキャッチ画像をサイドメニューに表示させる方法

WordPressの記事や固定ページには、アイキャッチ画像と呼ばれる、関数で呼び出して表示をさせる事ができる、記事ごとに固有の画像を登録しておく事ができます。 […]

WordPressの記事や固定ページには、アイキャッチ画像と呼ばれる、関数で呼び出して表示をさせる事ができる、記事ごとに固有の画像を登録しておく事ができます。

そのページの見出し画像などに使うのが通常の使い方ですが、関数を使って呼び出すことができますので、サイドメニューなどに表示する「最新の記事一覧」に表示する画像に使うといった事も可能です。

アイキャッチ画像を上手く使うことで、一味も二味も違う記事一覧コンテンツが作れると思います。

▼知りたいところから読む

アイキャッチ画像を表示する方法

まずアイキャッチ画像は、標準ではOFFになっているはずなので、有効にするためにfunctions.phpに以下のコードを追加します。

add_theme_support( ‘post-thumbnails’ );

アイキャッチ画像は「the_post_thumbnail」という関数を使うと表示する事ができます。
この関数には配列で表示サイズを指定する事もできます。

//40×40ピクセルでアイキャッチ画像を表示
the_post_thumbnail( array(40,40) );

通常、サイドメニューの記事一覧コンテンツはウィジェットの機能を使って表示させると思いますが、当ホームページではウィジェットを使用せずに、以下のコードをテンプレートに直接書いています。

<?php
//記事を9つ取得
query_posts(‘posts_per_page=9’);

//記事表示のループ
if(have_posts()):
while(have_posts()): the_post();
?>

//アイキャッチ画像を表示
<?php the_post_thumbnail( array(40,40) ); ?>

//ループの終点
<?php endwhile; endif; ?>

サイドメニューには最新の記事9つを表示しますので、常にアイキャッチ画像が設定されている前提です。
そのため、このコードにはアイキャッチ画像が設定されているかを確認する関数は設定していません。

もしアイキャッチ画像が記事に設定されていない可能性がある場合には、has_post_thumbnail関数を使って、設定の有無を確認します。

<?php if(has_post_thumbnail()): ?>
//アイキャッチが設定されている場合の処理
<?php else : ?>
//アイキャッチが設定されていない場合の処理
<?php endif; ?>

いかがでしょうか。それほど難しいカスタマイズでも無いと思います。
この方法は、サイドメニューだけでなくトップページのテンプレートや、もちろん投稿記事のテンプレートなどでも使えますので、使い方の幅は広いと思います。

hp-guideでは、
・トップページの最新記事の見出し
・サイドメニューの最新記事一覧
・各ページの「同じカテゴリの記事一覧」
といった箇所で使用しています。

各記事ごとに画像を作る必要はありますが、やはり文字情報だけでなく画像も組み合わせた方が、見栄えが良いだけでなく分かりやすくなるかと思います。
アイデア次第では他の使い方もできると思いますので、いろいろと試してみてはいかがでしょうか。