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

概要

post_class フィルタは、WordPressの投稿やカスタム投稿タイプの CSS クラスを変更するために使用されるフックです。このフィルタを使用することで、特定の条件（人気の投稿や特定のカスタムフィールドに基づく）に応じて動的に CSS クラスを追加することができます。具体的な用途としては以下のような機能を実装する際に役立ちます：

特定のカテゴリーやタグに基づいてスタイルを変更するためのクラスを追加
投稿の評価や人気度に応じて異なるスタイルを適用
ショートコードやウィジェットでの表示のカスタマイズ
グリッドレイアウトのためにアイテムの順序を調整する
モバイルビューとデスクトップビュー専用のスタイルの作成
管理画面における投稿リストのカスタマイズ

このフィルタは、WooCommerceのバージョン3.0以降で対応しており、WordPressのバージョン4.0以降でも使用可能です。

構文

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

パラメータ

$classes (array): 既存の CSS クラスの配列
$class (string): 現在の投稿のクラス
$post_id (int): 投稿 ID

戻り値

(array): 修正された CSS クラスの配列

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

アクション	使用可能性
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( 'post_class', 'custom_post_class' );
function custom_post_class( $classes ) {
    if ( is_single() && in_category( 'news' ) ) {
        $classes[] = 'news-post';
    }
    return $classes;
}

このサンプルコードは、ニュースカテゴリーの投稿に「news-post」というカスタムクラスを追加します。

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

サンプルコード2: 人気投稿にカスタムクラスを追加

add_filter( 'post_class', 'popular_post_class' );
function popular_post_class( $classes ) {
    $views = get_post_meta( get_the_ID(), 'post_views', true );
    if ( $views > 100 ) {
        $classes[] = 'popular-post';
    }
    return $classes;
}

この例では、100ビュー以上の投稿に「popular-post」というクラスを追加します。

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

サンプルコード3: 特定のカスタムフィールドの値に基づいてクラスを追加

add_filter( 'post_class', 'featured_class' );
function featured_class( $classes ) {
    if ( get_post_meta( get_the_ID(), 'featured', true ) === 'yes' ) {
        $classes[] = 'featured-post';
    }
    return $classes;
}

このサンプルは、カスタムフィールド「featured」が「yes」の場合に「featured-post」というクラスを追加します。

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

サンプルコード4: 投稿の作成日時に基づくカスタムクラスの追加

add_filter( 'post_class', 'old_post_class' );
function old_post_class( $classes ) {
    if ( get_the_date( 'U' ) < strtotime( '-1 year' ) ) {
        $classes[] = 'old-post';
    }
    return $classes;
}

このコードは、1年以上前に作成された投稿に「old-post」というクラスを追加します。

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

サンプルコード5: 投稿の状態に基づいてクラスを追加

add_filter( 'post_class', 'draft_post_class' );
function draft_post_class( $classes ) {
    if ( get_post_status() == 'draft' ) {
        $classes[] = 'draft-post';
    }
    return $classes;
}

このサンプルでは、ドラフト状態の投稿に「draft-post」というクラスを追加しています。

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

概要

構文