WordPress Logo

WordPressの投稿記事では「アイキャッチ」と呼ばれるサムネイル画像を設定することができます。
テーマによってはあらかじめアイキャッチ機能が有効化されていて、何も設定しなくても使える状態になっています。
対応していない場合は手動での設定が必要です。

基本的な使い方は簡単。
以下の1行を［functions.php］に記述するだけです。

add_theme_support('post-thumbnails');

このコードを書き加えると、記事の投稿画面にアイキャッチ画像の設定項目が追加されます。

設定したアイキャッチ画像を出力するには、［single.php］や［archive.php］など、任意の場所で以下のコードを記述しておけばOK。

<?php the_post_thumbnail(); ?>

非常に簡単ですね。
しかし、このままだと出力される画像のサイズがバラバラです。
CSS で「width」と「height」を指定するのもアリですが、できればアイキャッチを登録するとき、あるいは出力するときに、好みの大きさにリサイズできたら便利です。

アイキャッチ画像を登録する段階で、最初からリサイズさせる場合は、［functions.php］側の設定コードを以下のように書き換えます。

set_post_thumbnail_size( 300, 200, true );

第１引数で横幅を、第２引数で縦幅を指定します。
第３引数では画像を指定サイズに切り抜くかどうかを指定します。切り抜きする場合はtrue、しない場合はfalseを指定し、省略した場合はfalseになります。

出力させる段階で画像をリサイズさせるには、以下のように記述します。

<?php the_post_thumbnail( array(300,200) ); ?>

この例だと横幅300px、縦幅を200pxにリサイズされます。

また、管理画面の設定項目「メディア」で設定しているサイズを利用してアイキャッチ画像を表示させる場合は、以下のように記述します。

<?php the_post_thumbnail('thumbnail'); ?> //サムネイルのサイズ
<?php the_post_thumbnail('medium'); ?> //中サイズ
<?php the_post_thumbnail('large'); ?> //大サイズ
<?php the_post_thumbnail('full'); ?> //フルサイズ

最後に、番外編として「アイキャッチ画像にクラス名を指定する方法」を紹介します。
例えば、アイキャッチ画像に「class="sample"」というクラスを指定したい場合、 the_post_thumbnailの第２引数にコードを追加して、以下のように記述します。

<?php the_post_thumbnail('thumbnail', 'class=sample'); ?>

……さて。
ここまで散々アイキャッチ画像について説明してきましたが、個人的にはこの機能、あまり好きではありません。
記事を投稿する際にわざわざ画像を登録する作業が面倒に感じてしまうんですよね。

そこで編み出したのが「アイキャッチ機能もプラグインも使わずにサムネイル画像を表示させる方法」です。

PHPプラグインの［TimThumb］を利用したこのテクニックは、設定が若干複雑になり、初心者には敷居が高いかもしれませんが、挑戦する価値はあると思います。
アイキャッチ機能の上位互換として、是非お試しください。

【WordPress】最高に便利な投稿記事のサムネイル表示方法。

オンズ