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

概要

woocommerce_single_product_image_gallery_classes は、WooCommerceの製品ページにおける画像ギャラリーのクラスをカスタマイズするためのフィルターフックです。このフィルターを使用することで、製品の画像ギャラリーに指定するクラスを変更することができ、スタイルやレイアウトを調整するのに役立ちます。

よく使われる機能

ギャラリー画像のスタイルを調整するためのカスタムクラス追加
レスポンシブデザインのためのクラス変更
特定の製品タイプに対するカスタマイズ
プラグインやテーマに応じた特別なCSSを適用するためのクラス追加
ユーザビリティ向上のためのアニメーションクラス追加
セクション内の異なるオーバーレイ効果の適用

構文

add_filter('woocommerce_single_product_image_gallery_classes', 'custom_gallery_classes', 10, 2);

パラメータ

$classes (array) : 現在のギャラリークラスの配列。
$product (WC_Product) : 現在表示中の製品オブジェクト。

戻り値

(array) : カスタマイズされたギャラリークラスの配列。

対応バージョン

WooCommerce : 2.5以上
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_single_product_image_gallery_classes', 'add_custom_gallery_class');
function add_custom_gallery_class($classes) {
    $classes[] = 'my-custom-class';
    return $classes;
}

このサンプルは、ギャラリーに my-custom-class というカスタムクラスを追加します。このクラスを使用して、CSSでスタイルを変更することができます。

サンプルコード2

add_filter('woocommerce_single_product_image_gallery_classes', 'modify_gallery_classes_based_on_product');
function modify_gallery_classes_based_on_product($classes) {
    global $product;
    if ($product->get_price() > 100) {
        $classes[] = 'expensive-product';
    }
    return $classes;
}

このサンプルは、価格が100ドルを超える製品に対して expensive-product クラスを付与します。

サンプルコード3

add_filter('woocommerce_single_product_image_gallery_classes', 'conditional_gallery_class', 10, 2);
function conditional_gallery_class($classes, $product) {
    if (has_post_thumbnail($product->get_id())) {
        $classes[] = 'has-thumbnail';
    }
    return $classes;
}

製品のサムネイルが存在する場合に has-thumbnail クラスを追加します。

サンプルコード4

add_filter('woocommerce_single_product_image_gallery_classes', 'custom_gallery_layout_class');
function custom_gallery_layout_class($classes) {
    $classes[] = 'grid-layout';
    return $classes;
}

このサンプルでは、ギャラリーに grid-layout というクラスを追加して、CSSでグリッドレイアウトを実装できるようにします。

サンプルコード5

add_filter('woocommerce_single_product_image_gallery_classes', 'add_animation_class');
function add_animation_class($classes) {
    $classes[] = 'fade-in-animation';
    return $classes;
}

このサンプルは、ギャラリー画像にアニメーション効果を持たせるための fade-in-animation クラスを追加します。

引用元URLはありませんが、WooCommerceの公式ドキュメントやWordPressのフックリファレンスなどを参照すると良いでしょう。

概要