アイキャッチ画像(Feature Image) : WordPress

Pocket

アイキャッチ画像(Feature Image)のメモ。

アイキャッチを利用するながれ。

1 アイキャッチをサポート(functions.php)

add_theme_support( 'post-thumbnails' ); 

2 アイキャッチ 基本サイズ指定(functions.php)

set_post_thumbnail_size( $width, $height, $crop ); // --- 1

3 (必要なら)サイズの追加指定(functions.php)

add_image_size( $name, $width, $height, $crop );
例 add_image_size( 'new-thumbnail', 200, 100 ); // --- 2

4 サムネイル表示(テンプレート)

the_post_thumbnail(); // --- 1  基本サイズ表示
// または the_post_thumbnail( 'post-thumbnail' );
the_post_thumbnail( 'new-thumbnail' ); // --- 2 new-thumbnailサイズ表示

アップロードとの関係

WordPressはメディアをアップロードするときに設定 -> メディア -> 画像サイズでで指定したサイズを自動で作成する。
アイキャッチ画像をサポートするとアップロードのとき同時にアイキャッチ画像も作成する。

the_post_thumbnailはアップロードされたすべてのサイズを取得できる

the_post_thumbnail('post-thumbnail');  // set_post_thumbnail_size
the_post_thumbnail('new-thumbnail');   // add_image_size
the_post_thumbnail('thumbnail');       // ダッシュボード [設定] > [メディア]で指定したサムネイル
the_post_thumbnail('medium');          // ダッシュボード [設定] > [メディア]で指定した中サイズ
the_post_thumbnail('large');           // ダッシュボード [設定] > [メディア]で指定した大サイズ
the_post_thumbnail('full');            // フルサイズ

post-thumbnailはアイキャッチで指定したサイズ、thumbnailはメディアの画像サイズで指定したサイズに注意。

関連記事
画像のアップロードに関するまとめ : WordPress

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。