ゆるくはじめるWordPress.

アイキャッチ画像機能を有効化する方法&使い方

thumbnail

一覧表示でも記事の内容をイメージで分かりやすく伝える事ができるアイキャッチ(サムネイル)画像。
テーマを自作した時はコードを追加して有効化しないと使う事ができません。今回はアイキャッチの有効化からテンプレートタグの使用例まで、使い方を細かくまとめてみました。記事内の投稿画像とは別枠扱いで、使い方次第で様々な表現ができるようになる便利な機能なので、ぜひ使ってみてください。

アイキャッチ機能を有効化する

機能を有効化するコード

アイキャッチ機能を利用するには下記コードをfunctions.phpに書き込みます。

functions.php

//アイキャッチ追加
add_theme_support( 'post-thumbnails' );

サムネイルのサイズを設定する

サムネイルサイズ指定

設定>メディアでサムネイルのサイズを好きに指定する事もできるので、用途に合わせてそれぞれ大きさを設定しておきます。


表示オプションを変更

投稿表示オプション

アイキャッチ機能が有効化されると、投稿画面右上の『表示オプション』内に『アイキャッチ画像』という項目が現れるので、これにチェックを入れます。


有効化完了

アイキャッチ画像ウィンドウ

そうすると投稿画面の右下あたりにアイキャッチ画像というボックスができるので、ここからアイキャッチ画像をアップロードしたり、アップロード済みの画像からアイキャッチ画像を選択できるようになります。


アイキャッチを表示させる

アイキャッチ画像を表示するテンプレートタグ

投稿画面で設定したアイキャッチ画像を表示させるためにはthe_post_thumbnail()タグを使います。また、オプションにキーワードを入れる事で、メディア設定で指定したサイズで表示させる事ができます。

the_post_thumbnail( 'thumbnail' );  // サムネイルのサイズ
the_post_thumbnail( 'medium' );  // 中サイズ
the_post_thumbnail( 'large' );  // 大サイズ
the_post_thumbnail( 'full' );   // 元の画像サイズ

さらに、下のようにすれば任意のサイズを指定する事もできます。数字の単位はpx。

the_post_thumbnail( array( 200, 200 ) );

分岐と組み合わせる

分岐と組み合わせれば、アイキャッチが設定されている時だけ画像を表示。とする事も。下記はその一例。ループ内で使用します。

<?php if( has_post_thumbnail() ): ?>
    <?php the_post_thumbnail( 'full' ); ?>
<?php endif; ?>

さらにカスタマイズ

アイキャッチ画像が無い時Noimage画像を表示

あらかじめNoimage画像を使いたい大きさで作っておきます。それをテーマフォルダ内に作ったimagesフォルダにアップロードした場合の例。

Noimageサンプル
<?php if( has_post_thumbnail() ): ?>
    <?php the_post_thumbnail( 'full' ); ?>
<?php else: ?>
    <img src="<?php echo get_template_directory_uri(); ?>/images/noimage.jpg" alt="noimage" >
<?php endif; ?>

このようにしておけば、アイキャッチ画像が指定されていない場合はNoimage画像が代わりに表示されるようになります。


アイキャッチ画像にクラスを付ける

下のようにオプションを指定すればアイキャッチ画像にクラスが付きます。

<?php the_post_thumbnail( 'medium', array( 'class' => 'classname' ) ); ?>

スポンサーリンク

公開日: