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

概要

woocommerce_resize_imagesフィルタは、WooCommerceにおける画像サイズの調整を行う際に使用される非常に有用なフックです。このフィルタを通じて、商品画像、サムネイル、ギャラリー画像などのサイズをカスタマイズすることができます。一般的に、このフィルタは以下のような機能を実装する際に役立ちます。

商品画像のカスタムサイズの設定
メディアライブラリ内のサムネイルサイズの調整
ギャラリー画像の表示サイズの変更
商品詳細ページのレイアウトに合わせた画像サイズの最適化
ストアの外観に合わせた柔軟なデザインの実現
モバイルデバイス向けの画像サイズの特別設定

構文

add_filter( 'woocommerce_resize_images', 'function_name' );

パラメータ

$image_sizes (配列): サイズ画像の設定が含まれる配列
$product (オブジェクト): WooCommerceの商品オブジェクト

戻り値

修正後の画像サイズ配列

使用可能なプラグインバージョン

WooCommerce: バージョン 2.1 以降
WordPress: バージョン 4.0 以降

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

アクション	使用可能性
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: 商品画像サイズのカスタム設定

add_filter( 'woocommerce_resize_images', 'custom_product_image_size' );

function custom_product_image_size( $image_sizes ) {
    $image_sizes['custom_size'] = array(
        'width'  => 600,
        'height' => 600,
        'crop'   => true
    );
    return $image_sizes;
}

このサンプルコードは、WooCommerceの商品画像に600×600ピクセルのカスタムサイズを追加します。

サンプル2: サムネイル画像サイズの調整

add_filter( 'woocommerce_resize_images', 'adjust_thumbnail_size' );

function adjust_thumbnail_size( $image_sizes ) {
    $image_sizes['thumbnail'] = array(
        'width'  => 150,
        'height' => 150,
        'crop'   => true
    );
    return $image_sizes;
}

このコードは、WooCommerceのサムネイル画像サイズを150×150ピクセルに調整します。

サンプル3: ギャラリー画像のカスタムサイズ

add_filter( 'woocommerce_resize_images', 'custom_gallery_image_size' );

function custom_gallery_image_size( $image_sizes ) {
    $image_sizes['gallery-thumbnail'] = array(
        'width'  => 300,
        'height' => 300,
        'crop'   => false
    );
    return $image_sizes;
}

このサンプルは、商品ギャラリーの画像サイズを300×300ピクセルに設定します。

サンプル4: メディアライブラリ用のカスタムサイズを追加

add_filter( 'woocommerce_resize_images', 'add_media_library_custom_size' );

function add_media_library_custom_size( $image_sizes ) {
    $image_sizes['media_library_size'] = array(
        'width'  => 800,
        'height' => 800,
        'crop'   => true
    );
    return $image_sizes;
}

このコードは、メディアライブラリ向けに800×800ピクセルのカスタム画像サイズを追加します。

サンプル5: モバイルデバイス用特別サイズ設定

add_filter( 'woocommerce_resize_images', 'mobile_device_image_size' );

function mobile_device_image_size( $image_sizes ) {
    if ( wp_is_mobile() ) {
        $image_sizes['mobile_size'] = array(
            'width'  => 400,
            'height' => 400,
            'crop'   => true
        );
    }
    return $image_sizes;
}

このサンプルは、モバイルデバイスで利用するための400×400ピクセルの画像サイズを設定します。

各サンプルコードはいずれも著作権フリーのものです。

概要

構文