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

概要

woocommerce_post_classフィルタは、WooCommerceの商品の投稿クラスをカスタマイズするために使用されます。これにより、商品リストやサムネイル表示の際に適用されるCSSクラスを変更することができます。このフィルタを使用することで、以下のような機能を実装することができます：

商品タイプに基づいたカスタムクラスの追加
在庫状況に応じたクラスのスタイル変更
特定のプロモーションやセールに関連したクラスの追加
カスタム商品属性に基づいたスタイル調整
商品のリスト表示におけるカスタムレイアウトの実装
商品カテゴリ別のスタイル適用

構文

add_filter( 'post_class', 'custom_post_class', 10, 3 );

function custom_post_class( $classes, $class, $post_id ) {
    // 追加のクラスをここに追加
    return $classes;
}

パラメータ

array $classes – 既存のCSSクラスの配列。
string $class – デフォルトのCSSクラス。
int $post_id – 投稿のID。

戻り値

array – 変更されたCSSクラスの配列。

WooCommerceのバージョン

使用可能なバージョン：WooCommerce 3.0.0以降

WordPressのバージョン

使用可能なバージョン：WordPress 4.7以降

サンプルコード

サンプル1: 商品タイプに応じてクラスを追加

add_filter( 'woocommerce_post_class', 'add_custom_product_type_class', 10, 2 );

function add_custom_product_type_class( $classes, $product ) {
    if ( $product->is_type( 'simple' ) ) {
        $classes[] = 'custom-simple-product';
    }
    return $classes;
}

このコードは、シンプル商品にカスタムクラスcustom-simple-productを追加します。

サンプル2: 在庫ステータスに応じたクラスを追加

add_filter( 'woocommerce_post_class', 'add_stock_status_class', 10, 2 );

function add_stock_status_class( $classes, $product ) {
    if ( $product->is_in_stock() ) {
        $classes[] = 'in-stock';
    } else {
        $classes[] = 'out-of-stock';
    }
    return $classes;
}

このコードは、在庫がある場合にはin-stock、在庫がない場合にはout-of-stockというクラスを追加します。

サンプル3: カテゴリーに基づいたクラスの追加

add_filter( 'woocommerce_post_class', 'add_category_class', 10, 2 );

function add_category_class( $classes, $product ) {
    $terms = get_the_terms( $product->get_id(), 'product_cat' );
    if ( $terms && ! is_wp_error( $terms ) ) {
        foreach ( $terms as $term ) {
            $classes[] = 'category-' . sanitize_html_class( $term->slug );
        }
    }
    return $classes;
}

このコードは、商品のカテゴリーに基づいて各カテゴリーに対応するクラスを追加します。

サンプル4: 特定のラベルを持つクラスを追加

add_filter( 'woocommerce_post_class', 'add_label_class', 10, 2 );

function add_label_class( $classes, $product ) {
    if ( $product->get_meta( '_custom_label', true ) ) {
        $classes[] = 'has-custom-label';
    }
    return $classes;
}

このコードは、カスタムラベルが設定されている商品にhas-custom-labelクラスを追加します。

サンプル5: 特定のタグに基づくクラスの追加

add_filter( 'woocommerce_post_class', 'add_tag_class', 10, 2 );

function add_tag_class( $classes, $product ) {
    $tags = get_the_terms( $product->get_id(), 'product_tag' );
    if ( $tags && ! is_wp_error( $tags ) ) {
        foreach ( $tags as $tag ) {
            $classes[] = 'tag-' . sanitize_html_class( $tag->slug );
        }
    }
    return $classes;
}

このコードは、商品のタグに基づいて各タグに対応するクラスを追加します。

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

アクション	使用可能性
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

概要

構文