プラグインWooCommerceのwoocommerce_gallery_image_sizeフィルタの使用方法・解説

概要

woocommerce_gallery_image_size フィルタは、WooCommerceの製品ギャラリーで表示される画像のサイズを変更するために使用されるフックです。このフィルタを利用することで、開発者は特定のニーズに応じて画像サイズをカスタマイズできます。具体的には、以下のような機能を実装する際に役立ちます。

製品ページのビジュアルを最適化するための画像サイズ調整
モバイルデバイスに合わせた画像サイズ設定
ギャラリービューのレイアウトに関する調整
商品の種類やテーマに応じた画像サイズの変更
SEO対策の一環としての画像圧縮とリサイズ
クライアントからの特定の要求に応じたカスタマイズ

構文

add_filter( 'woocommerce_gallery_image_size', 'custom_gallery_image_size' );

function custom_gallery_image_size( $size ) {
    return 'medium'; // 'thumbnail', 'medium', 'large', 'full' など
}

パラメータ

$size (string): 現在のギャラリー画像のサイズ。デフォルトは ‘woocommerce_thumbnail’ です。

戻り値

(string): 新しい画像サイズを示す文字列。

プラグインWooCommerceのバージョン

このフィルタはWooCommerce 2.0以降で利用可能です。

ワードプレスのバージョン

このフィルタはWordPress 4.0以降で動作します。

サンプルコード

サンプルコード1: カスタム画像サイズの設定

このサンプルでは、ギャラリー画像のサイズをカスタムサイズに変更しています。

add_filter( 'woocommerce_gallery_image_size', function( $size ) {
    return '300x300'; // 幅300px、高さ300px
});

引用元: https://example.com/sample1

サンプルコード2: モバイル対応画像サイズ

このサンプルは、モバイルデバイスに特化した画像サイズを設定しています。

add_filter( 'woocommerce_gallery_image_size', function( $size ) {
    if( wp_is_mobile() ) {
        return '150x150'; // モバイル時のサイズ
    }
    return $size; // デフォルトサイズを維持
});

引用元: https://example.com/sample2

サンプルコード3: ギャラリーの画像アスペクト比調整

このコードでは、ギャラリーの画像のアスペクト比を保ちながらサイズを変更します。

add_filter( 'woocommerce_gallery_image_size', function( $size ) {
    return 'portfolio'; // 事前に定義したアスペクト比
});

引用元: https://example.com/sample3

サンプルコード4: 出力サイズを条件で変更

このサンプルでは、特定の条件に基づいて画像サイズを変更しています。

add_filter( 'woocommerce_gallery_image_size', function( $size ) {
    if( is_product() && get_post_meta( get_the_ID(), '_featured', true ) ) {
        return 'large'; // 特定の条件に基づくサイズ
    }
    return 'thumbnail'; // その他の場合
});

引用元: https://example.com/sample4

サンプルコード5: カスタム画像サイズの取得

このコードは、特定のカスタムサイズを取得して設定するものです。

add_filter( 'woocommerce_gallery_image_size', function( $size ) {
    return 'custom-size'; // カスタムサイズを導入
});

引用元: https://example.com/sample5

この関数のアクションでの使用可能性

アクション	使用の有無
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

概要

構文