WordPressテーマの作り方 » アイキャッチ画像を表示する

1. アイキャッチ画像とは

アイキャッチ画像とは、サムネイル、サムネ画像のことです。

典型的な使い方は、複数の記事のリスト表示するページで、その記事の内容をイメージしやすい画像をアイキャッチ画像として表示します。WordPressの場合は、１つの投稿記事について、１つのアイキャッチ画像を指定できます。

このサイトのトップページでも利用しています。

wordpress_hitsuji_frontpage

2. 今回作成するもの

トップページに表示する抜粋記事一覧に、アイキャッチ画像を一緒に表示します。もし、アイキャッチ画像が指定されていない場合は、代わりの画像を表示します。画像サイズは160x120pxです。

編集後のページは、次のようになります。

frontpage_finished

3. テーマをカスタマイズする

3-1 代替画像を用意する

アイキャッチ画像が未指定の場合の代替画像を用意します。画像は表示サイズに合わせるようにします。

no_image

画像を作成したら、テーマフォルダ下の画像を入れるフォルダに入れておきます。

3-2 functions.phpを編集する

functions.phpを編集して、アイキャッチ画像の機能を有効化します。また、その画像サイズを指定します。

functions.php（この２行を追記）

add_theme_support('post-thumbnails');
set_post_thumbnail_size(160, 120, true);

add_theme_support()関数は、引数で指定した機能を有効にする関数です。アイキャッチ画像を有効にするには、引数に’post-thumbnails’を指定します。

set_post_thumbnail_size()は、アイキャッチ画像のサイズを指定します。デフォルトでは150x150pxです。ここでは表示したい画像サイズに合わせて横160px、縦120pxの順に指定します。３番目の引数では、画像の縦横比が合わない画像を指定した場合に画像を自動的に切り取るかどうかを指定できます。今回の例では、常に160x120pxになるようにtrueを指定します。

3-3 content.phpを編集する

アイキャッチ画像をHTML出力するコードを挿入します。

content.php

 <article class="post">
    <header>
        <h1 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
        <p class="post-meta"><?php the_date(); ?></p>
    </header>
<!-- ここから -->
    <figure class="thumbnail">
        <?php 
        if(is_home()) {
            if(has_post_thumbnail()) {
                the_post_thumbnail();
            } else {
                echo '<img src="'.get_template_directory_uri().'/img/no_image.png" width="160" height="120"/>';
            }
        } ?>
    </figure>
<!-- ここまで -->
    <div class="post-content">
        <?php 
            if(is_home()) {
                the_excerpt();
            } else {
                the_content();
            }
        ?>
    </div>
</article>

コードの説明です。

if(is_home()) {
// フロントページの場合の処理（画像を表示する）
}

フロントページを表示した場合のみ画像を表示する処理を行います。カッコ内の処理は、

if(has_post_thumbnail()) {
    the_post_thumbnail();
} else {
    echo '<img src="'.get_template_directory_uri().'/img/no_image.png" width="160" height="120"/>';
}

１行目のhas_post_thumbnail()は、処理中の投稿にアイキャッチ画像が指定されている場合はtrue、未指定の場合はfalseを返すWordPress関数です。

アイキャッチ画像が指定されている場合は、２行目のthe_post_thumbanil()関数で、画像を出力するHTMLコードを出力します。

アイキャッチ画像が指定されていない場合は、４行目のコードで代替画像を表示するHTMLコードを出力します。get_template_directory_uri()は、テーマフォルダのルートディレクトリへのURLを返すWordPress関数です。このコードが実行すると、次のようなHTMLが出力されます。

 <img src="サイトURL/wp-content/themes/テーマフォルダ名/img/no_image.png" width="160" height="120"/ >

ここまで編集したところで、一度サイトを実行してみます。次のように表示されれば成功です。

frontpage_step1

まだどちらの投稿記事にもアイキャッチ画像を指定していないので、代替画像が表示されます。

3-4 アイキャッチ画像を指定する

ダッシュボード＞投稿＞投稿を編集を開き、アイキャッチ画像を指定します。

（１）画面右上の表示オプションタブを開き、（２）アイキャッチ画像にチェックを入れ、（３）新たに表示された「アイキャッチ画像を設定」のリンクを開いて、メディアライブラリから画像を指定orアップロードします。

再度サイトを実行すると、次のように表示されます。

frontpage_step2

3-5 style.cssを編集する

最後に、スタイルを指定します。ここでは、アイキャッチ画像を左よせに指定します。

style.css（追記）

article.post {
    overflow: hidden;
}
figure {
    margin: 0;
    padding: 0;
}
article.post figure.thumbnail {
    margin: 10px;
    float: left;
}

※2013.8.17修正 article.postのスタイル指定を追加

以上で、テーマのカスタマイズは終了です。

4. 動作を確認する

サイトを実行してみます。次のスクリーンショットのように、

アイキャッチ画像を指定した投稿は、その画像が表示される
アイキャッチ画像を指定していない投稿は、代替画像が表示される

となればOKです。

次の記事：
前の記事：index.phpをカスタマイズするー第１４回抜粋を表示する

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

目次