ワードプレスのpost_classフィルタの使用方法・解説

概要

post_classフィルタは、投稿情報のクラス属性を表示するために利用されます。このフィルタを使用すると、WordPressの各投稿に表示されるクラスをカスタマイズできます。post_classは、テーマが投稿を表示する際に投稿に関連する情報をHTMLクラスとして埋め込むために使用され、さまざまな機能を実装する際によく使われます。以下は、post_classフィルタがよく使用される機能の例です。

  1. 投稿のカスタムクラスの追加
  2. 投稿の種類に基づくスタイルの適用
  3. 投稿の状態によるクラスの付与(例:公開、下書き)
  4. 特定の投稿形式に合わせたスタイル調整
  5. タグやカテゴリアサインメントに基づく動的なクラス生成
  6. ユーザーによる投稿のカスタムスタイリング
  7. 記事の保存日や更新日によるスタイル変更
  8. スマートフォン表示用の特定クラスの追加

構文

$post_classes = apply_filters( 'post_class', $classes, $class, $post_id );

パラメータ

  • $classes: 投稿にデフォルトで割り当てられるクラスの配列。
  • $class: 追加するクラス。
  • $post_id: 対象の投稿のID。

戻り値

  • 投稿に適用されたすべてのクラスを含む配列。

関連する関数

post_class

使用可能なバージョン

post_classフィルタは、WordPress 2.0.0から利用可能です。

コアファイルのパス

wp-includes/class-wp-post.php

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

アクション 使用例
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: カスタムクラスの追加

このコードは、すべての投稿に「custom-class」を追加します。

add_filter( 'post_class', 'add_custom_class' );
function add_custom_class( $classes ) {
    $classes[] = 'custom-class';
    return $classes;
}

引用元: https://developer.wordpress.org/reference/hooks/post_class/

サンプル2: 投稿タイプに基づくクラスの追加

このコードは、投稿タイプが「movie」である場合に特別なクラスを追加します。

add_filter( 'post_class', 'add_custom_post_type_class' );
function add_custom_post_type_class( $classes ) {
    if ( get_post_type() == 'movie' ) {
        $classes[] = 'post-type-movie';
    }
    return $classes;
}

引用元: https://developer.wordpress.org/reference/hooks/post_class/

サンプル3: 投稿の公開状態に基づくスタイル

このサンプルは、投稿が下書き状態の場合に「draft」クラスを追加します。

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

引用元: https://developer.wordpress.org/reference/hooks/post_class/

サンプル4: 特定のカテゴリに基づくクラスの追加

このコードは、投稿が特定のカテゴリに属している場合にクラスを追加します。

add_filter( 'post_class', 'add_category_class' );
function add_category_class( $classes ) {
    if ( has_category( 'special' ) ) {
        $classes[] = 'special-category';
    }
    return $classes;
}

引用元: https://developer.wordpress.org/reference/hooks/post_class/

サンプル5: 投稿の更新日によるスタイル変更

このコードは、投稿が最近更新された場合に「recent-update」クラスを追加します。

add_filter( 'post_class', 'add_recent_update_class' );
function add_recent_update_class( $classes ) {
    if ( ( time() - strtotime( get_the_modified_date() ) ) < 604800 ) { // 1週間内
        $classes[] = 'recent-update';
    }
    return $classes;
}

引用元: https://developer.wordpress.org/reference/hooks/post_class/

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


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