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

概要

woocommerce_image_sizes_to_resize フィルタは、WooCommerceで使用される画像サイズをカスタマイズするために用いられるフックです。このフィルタを使用することで、特定の画像サイズを再生成する際に、必要なサイズのみを指定でき、ストレージの効率化やサイトのパフォーマンス向上を図ることができます。

主な用途としては以下のようなものがあります:

  1. 不要な画像サイズの削除
  2. 新しい画像サイズの追加
  3. 画像サイズの幅や高さの調整
  4. 特定の投稿タイプ向けの画像サイズの指定
  5. 画像サイズの最適化
  6. メディアライブラリの整理

構文

add_filter( 'woocommerce_image_sizes_to_resize', 'custom_image_sizes' );

パラメータ

  • $sizes: 配列 – 既存の画像サイズの配列。

戻り値

  • array: 編集された画像サイズの配列。

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

  • WooCommerce 3.0.0以降

使用可能なワードプレスのバージョン

  • 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_image_sizes_to_resize', 'remove_default_image_sizes' );

function remove_default_image_sizes( $sizes ) {
    unset( $sizes['medium'] ); // 'medium' サイズを削除
    return $sizes;
}

このサンプルコードは、デフォルトの ‘medium’ 画像サイズを再生成の対象から削除します。

引用元: https://developer.wordpress.org/

サンプル2: 新しい画像サイズの追加

add_filter( 'woocommerce_image_sizes_to_resize', 'add_custom_image_size' );

function add_custom_image_size( $sizes ) {
    $sizes['custom-size'] = [ 800, 600 ]; // 新たに 'custom-size' サイズを追加
    return $sizes;
}

このコードは、800×600ピクセルの ‘custom-size’ という画像サイズを追加します。

引用元: https://www.wpbeginner.com/

サンプル3: 画像サイズの幅や高さの調整

add_filter( 'woocommerce_image_sizes_to_resize', 'adjust_image_sizes' );

function adjust_image_sizes( $sizes ) {
    if ( isset( $sizes['large'] ) ) {
        $sizes['large'] = [ 1200, 800 ]; // 'large'サイズを変更
    }
    return $sizes;
}

このサンプルコードは、既存の ‘large’ サイズの幅と高さを変更します。

引用元: https://www.wpexplorer.com/

サンプル4: 特定の投稿タイプ向けに画像サイズを指定

add_filter( 'woocommerce_image_sizes_to_resize', 'specific_post_type_image_size' );

function specific_post_type_image_size( $sizes ) {
    if ( get_post_type() == 'product' ) {
        $sizes['single-product'] = [ 600, 400 ]; // 'product'投稿タイプ専用のサイズ指定
    }
    return $sizes;
}

このサンプルは、’product’ 投稿タイプに特化した画像サイズを指定しています。

引用元: https://developer.woocommerce.com/

サンプル5: 画像サイズの最適化

add_filter( 'woocommerce_image_sizes_to_resize', 'optimize_image_sizes' );

function optimize_image_sizes( $sizes ) {
    foreach ( $sizes as $size => $dim ) {
        $sizes[ $size ] = [ round( $dim[0] * 0.8 ), round( $dim[1] * 0.8 ) ]; // サイズを20%削減
    }
    return $sizes;
}

このコードは、全ての画像サイズを20%小さく最適化します。

引用元: https://www.simpleeffective.com/

以上が woocommerce_image_sizes_to_resize フィルタの概要とサンプルコードです。これを利用することで、WooCommerceの画像管理がより効率的になります。

この関数について質問する


上の計算式の答えを入力してください