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

概要

woocommerce_gallery_full_sizeフィルタは、WooCommerceの商品ギャラリーで表示されるフルサイズの画像のサイズを調整するために使用されます。このフィルタは、特に以下のような機能を実装する際に役立ちます。

商品ページのカスタムデザイン
モバイルデバイスへの最適化
特定の商品カテゴリに応じた画像サイズの変更
ダウンロード速度の最適化
SEOの改善
ユーザーエクスペリエンスの向上

構文

apply_filters( 'woocommerce_gallery_full_size', string $size, WC_Product $product );

パラメータ

$size (string): フルサイズ画像のサイズ
$product (WC_Product): 現在の商品オブジェクト

戻り値

フィルタ処理されたフルサイズ画像のサイズ

使用可能なバージョン

WooCommerce: 3.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: 商品のフルサイズ画像をカスタムサイズに変更

このサンプルでは、商品ギャラリーのフルサイズ画像を”large”に変更しています。

add_filter( 'woocommerce_gallery_full_size', 'custom_gallery_full_size', 10, 2 );

function custom_gallery_full_size( $size, $product ) {
    return 'large';
}

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

サンプルコード2: 特定の商品のフルサイズ画像を設定

特定の商品のIDが123の場合、その商品に対してフルサイズ画像の設定を変更します。

add_filter( 'woocommerce_gallery_full_size', 'custom_product_gallery_full_size', 10, 2 );

function custom_product_gallery_full_size( $size, $product ) {
    if ( $product->get_id() === 123 ) {
        return 'medium';
    }
    return $size;
}

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

サンプルコード3: カテゴリーに基づいてフルサイズ画像のサイズを変更

特定の商品のカテゴリーによってフルサイズ画像のサイズを変更します。

add_filter( 'woocommerce_gallery_full_size', 'category_based_gallery_full_size', 10, 2 );

function category_based_gallery_full_size( $size, $product ) {
    if ( has_term( 'special-category', 'product_cat', $product->get_id() ) ) {
        return 'full';
    }
    return $size;
}

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

サンプルコード4: フルサイズ画像のサイズをデフォルトに戻す

製品が特定の条件を満たす場合に、デフォルトのフルサイズ画像に戻します。

add_filter( 'woocommerce_gallery_full_size', 'reset_to_default_full_size', 10, 2 );

function reset_to_default_full_size( $size, $product ) {
    if ( $product->is_in_stock() ) {
        return 'shop_single';
    }
    return $size;
}

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

サンプルコード5: フルサイズの画像を指定した幅の高さにリサイズ

フルサイズの画像を特定の幅でリサイズします。

add_filter( 'woocommerce_gallery_full_size', 'resize_full_size_image', 10, 2 );

function resize_full_size_image( $size, $product ) {
    return array( 'width' => 800, 'height' => 600, 'crop' => true );
}

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

概要

構文