概要
image_downsizeフィルタは、アイキャッチ画像の縮小イメージ情報を取得するために使用されるフィルタです。このフィルタは、特に以下のような機能を実装する際に役立ちます。
- アイキャッチ画像のサイズを変更する
- 投稿に関連付けられた画像のURLを取得する
- カスタム画像サイズを生成する
- 投稿サムネイルの表示を最適化する
- レスポンシブ画像対応の情報を取得する
- 特定の条件に基づいた画像の条件分岐
- プラグインによる画像処理の拡張
- テーマのカスタムビジュアル要素の実装
構文
add_filter('image_downsize', 'your_callback_function', 10, 3);
パラメータ
$downsize(boolean): 画像サイズを取得するかどうか。$id(int): 添付ファイルのID。$size(string|array): 取得する画像サイズ。
戻り値
array|null: 縮小された画像情報の配列（URL, 幅, 高さ）またはnull。
関連する関数
使用可能なバージョン
このフィルタはWordPress 3.5以降で使用可能です。
コアファイルのパス
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 |
サンプルコード
サンプル1: カスタム画像サイズの設定
このサンプルでは、カスタム画像サイズを追加し、image_downsizeフィルタを使ってそのサイズを取得します。
function my_custom_image_size( $downsize, $id, $size ) {
if ( $size === 'custom-size' ) {
return wp_get_attachment_image_src( $id, 'medium' );
}
return $downsize;
}
add_filter( 'image_downsize', 'my_custom_image_size', 10, 3 );
出典: https://developer.wordpress.org/reference/hooks/image_downsize/
サンプル2: アイキャッチ画像のURLを取得
アイキャッチ画像のURLを取得し、特定の条件に基づいてURLを変更します。
function modify_thumbnail_url( $downsize, $id, $size ) {
if ( is_single() && $size === 'thumbnail' ) {
$downsize[0] = 'https://example.com/new-thumbnail.jpg';
}
return $downsize;
}
add_filter( 'image_downsize', 'modify_thumbnail_url', 10, 3 );
出典: https://developer.wordpress.org/reference/hooks/image_downsize/
サンプル3: 画像サイズの条件分岐
利用しているテーマまたはプラグインに応じて、使用する画像サイズを条件で変更するサンプルです。
function conditional_image_downsize( $downsize, $id, $size ) {
if ( is_page_template( 'template-fullwidth.php' ) && $size === 'large' ) {
return wp_get_attachment_image_src( $id, 'full' );
}
return $downsize;
}
add_filter( 'image_downsize', 'conditional_image_downsize', 10, 3 );
出典: https://developer.wordpress.org/reference/hooks/image_downsize/
サンプル4: レスポンシブ画像を利用する
レスポンシブ画像に対応した情報を取得するためのフィルタを追加します。
function responsive_image_downsize( $downsize, $id, $size ) {
if ( isset( $_GET['responsive'] ) ) {
return wp_get_attachment_image_src( $id, 'large' );
}
return $downsize;
}
add_filter( 'image_downsize', 'responsive_image_downsize', 10, 3 );
出典: https://developer.wordpress.org/reference/hooks/image_downsize/
サンプル5: 画像の代替テキストを変更
画像の代替テキストを変更するためのフィルタを追加します。
function alter_image_alt( $downsize, $id, $size ) {
if ( $size === 'medium' ) {
$post = get_post( $id );
$alt_text = 'Custom alt text for ' . $post->post_title;
add_filter( 'wp_get_attachment_image_attributes', function( $attr ) use ( $alt_text ) {
$attr['alt'] = $alt_text;
return $attr;
});
}
return $downsize;
}
add_filter( 'image_downsize', 'alter_image_alt', 10, 3 );
出典: https://developer.wordpress.org/reference/hooks/image_downsize/