アイキャッチ画像を設定する

wordpress

サイドバーや記事一覧などに記事内の画像の縮小版を使うことがありますよね。 その画像を「アイキャッチ」と言います。

WordPressでは記事に使った画像をシステム的にアイキャッチとして使いまわす機能があります。 事前に設定が必要なので、機能を使いたいのであれば最初に設定しておきましょう。

当然ですがこの機能を使わずにアイキャッチを設定することも可能です。 選択肢のひとつとして覚えておきましょう。

アイキャッチ画像の設定を記述する

アイキャッチ機能の有効化

WordPressのアイキャッチ機能を有効にするには、functions.phpに以下のコードを記述します。

functions.php

add_theme_support('post-thumbnails');

アイキャッチ画像のデフォルトサイズを指定する

サムネイルのサイズを自動調整する場合、set_post_thumbnail_sizeによって整形サイズを指定します。 サイズ指定時の3番目のパラメタにtrueを指定すれば、画像取り込み時にサイズ調整されます。(サイズ比が違う場合は余白で調整されます)

例えば以下のコードを記述すれば、WordPressに画像をアップロードした際に本来の画像とは別に60×60の画像もアップロードされます。

functions.php

set_post_thumbnail_size(60,60,true);

アイキャッチ画像サイズを複数用意する場合

同じアイキャッチでも新着記事・アーカイブ・サイドバーなどによって表示したいサイズが違う場合があります。 そんな時のためにあらかじめ任意の名前で複数のアイキャッチサイズを指定しておくことも可能です。

functions.php

add_image_size('small-thumbnail',90,90);
add_image_size('middle-thumbnail',120,120);
add_image_size('large-thumbnail',180,180);

画像サイズには以下のパラメタのいずれかを指定します。

パラメタ説明
thumbnailサムネイル
medium中サイズ
large大サイズ
fullフルサイズ

アイキャッチ指定例

/* デフォルトサイズで表示 */
<?php set_post_thumbnail_size(); ?>

/* small-thumbnailで指定した画像サイズで表示 */
<?php set_post_thumbnail_size(small-thumbnail); ?>

/* 画像のサイズを60×60で切り抜いて表示 */
<?php set_post_thumbnail_size(60,60,true); ?>

アマルウェブ HOME