概要
set_post_thumbnail_size関数は、WordPress内でアイキャッチ画像のサイズを設定するために使用されます。アイキャッチ画像（サムネイル）は、投稿やページに関連するビジュアルコンテンツとして重要であり、この関数を利用することで、一貫したデザインが保たれたアイキャッチ画像の表示が可能となります。
この関数は以下のような機能を実装する際に役立ちます：
1. テーマデザインの統一性を持たせるため
2. 投稿やページで使うアイキャッチ画像のサイズを一括管理するため
3. 特定のデバイスや画面サイズに合わせた画像サイズを設定するため
4. 画像の読み込み速度を改善するため
5. 投稿の一覧表示のデザインを整えるため
6. ギャラリーやグリッドレイアウトでの整合性を持たせるため
7. SEO目的での最適化するため
8. レスポンシブデザインに対応するため
構文
set_post_thumbnail_size( $width, $height, $crop );
パラメータ
$width(int) — アイキャッチ画像の幅（ピクセル）$height(int) — アイキャッチ画像の高さ（ピクセル）$crop(bool|array) — 画像を切り抜くかどうか。デフォルトはfalseで、trueにすると強制的に指定したサイズにカットされる。配列で指定することにより、左右どちらを優先するかを細かく設定も可能。
戻り値
この関数は、何も返しません。
関連する関数
使用可能なバージョン
この関数はWordPressのバージョン2.9以降で使用可能です。
コアファイルのパス
wp-includes/media.php
この関数のアクションでの使用可能性
| アクション | 使用例 |
|---|---|
| mu_plugin_loaded | |
| registered_post_type | |
| plugins_loaded | |
| wp_roles_init | |
| setup_theme | |
| after_setup_theme | 〇 |
| set_current_user | |
| init | |
| register_sidebar | |
| wp_loaded | |
| send_headers | |
| parse_query | |
| pre_get_posts | |
| wp | |
| template_redirect | |
| get_header | |
| wp_head |
サンプルコード
- アイキャッチ画像のサイズを設定するサンプルコード
function my_custom_thumbnail_size() {
set_post_thumbnail_size( 150, 150, true ); // 幅150px、高さ150pxで強制的に切り抜く
}
add_action('after_setup_theme', 'my_custom_thumbnail_size');
このコードは、テーマのセットアップ時にアイキャッチ画像のサイズを150pxの正方形に設定します。
- 異なるサイズのサムネイルを設定するサンプルコード
function my_custom_image_sizes() {
set_post_thumbnail_size( 300, 200, true ); // カスタムアイキャッチサイズ。幅300px、高さ200px。
}
add_action('after_setup_theme', 'my_custom_image_sizes');
このコードは、アイキャッチ画像のサイズを幅300px、高さ200pxに設定し、指定したサイズに強制的に切り抜かれるようにします。
- デフォルトのアイキャッチ画像サイズをカスタマイズするサンプルコード
function change_default_thumbnail_size() {
set_post_thumbnail_size( 200, 200, false ); // デフォルトサイズを200pxに設定（切り抜かない）
}
add_action('after_setup_theme', 'change_default_thumbnail_size');
このコードは、アイキャッチ画像のデフォルトサイズを200pxの正方形に設定し、カットしないようにします。
- レスポンシブデザインを考慮したアイキャッチサイズ設定
function responsive_thumbnail_size() {
if ( wp_is_mobile() ) {
set_post_thumbnail_size( 100, 100, true ); // モバイル用に100px
} else {
set_post_thumbnail_size( 300, 300, true ); // デスクトップ用に300px
}
}
add_action('after_setup_theme', 'responsive_thumbnail_size');
このコードは、デバイスの種類に応じて異なるアイキャッチ画像のサイズを設定します。
- 条件付きでアイキャッチ画像サイズを設定するサンプルコード
function conditional_thumbnail_size() {
if ( is_single() ) {
set_post_thumbnail_size( 800, 600, true ); // シングル投稿に800px x 600px
} else {
set_post_thumbnail_size( 300, 200, true ); // 他のページに300px x 200px
}
}
add_action('after_setup_theme', 'conditional_thumbnail_size');
このコードは、シングル投稿ページとそれ以外のページで異なるアイキャッチ画像サイズを設定します。