post_class() で追加される不要なクラスを削除して HTML を軽量化する方法

WordPress の post_class() は、投稿ごとに様々なクラスを自動で追加します。

これにより、CSS でのスタイリングがしやすくなりますが、不要なクラスが多すぎると HTML の肥大化を招き、サイトの表示速度に影響を与えることがあります。

本記事では、post_class() によって追加される不要なクラスを削除し、HTML を軽量化する方法を紹介します。

解説

post_class() によって自動で追加されるクラスには、投稿 ID、カテゴリー、タグ、カスタム投稿タイプなど様々な情報が含まれます。

しかし、すべてのクラスが必要とは限りません。例えば、CSS で不要なクラスがある場合や、特定のデザイン変更を適用する際に邪魔になることがあります。

WordPress では post_class フィルターフックを使用することで、出力されるクラスをカスタマイズできます。このフィルターを活用して、不要なクラスを削除し、HTML を軽量化する手順を解説します。

カスタマイズ例

以下のコードを functions.php に追加すると、不要なクラスを削除できます。

function remove_unwanted_post_classes($classes) {
    // 削除したいクラスを指定
    $unwanted_classes = array(
        'post',  // `post` クラスを削除
        'type-post',  // `type-post` クラスを削除
        'status-publish',  // 公開状態のクラスを削除
        'format-standard'  // 標準フォーマットクラスを削除
    );
    
    return array_diff($classes, $unwanted_classes);
}
add_filter('post_class', 'remove_unwanted_post_classes');

ソースの解説

1. remove_unwanted_post_classes() 関数を作成。
2. $unwanted_classes 配列に削除したいクラスを定義。
3. array_diff() を使い、post_class から指定したクラスを削除。
4. add_filter() で post_class にフックし、不要なクラスを取り除く。

難易度：

• functions.php を編集できる中級者向けのカスタマイズ。
• post_class フィルターの仕組みを理解する必要がある。
• フックを使ったクラス操作に慣れていないと、影響範囲を誤る可能性がある。

ポイント

• post_class にフックして不要なクラスを削除。
• array_diff() を使い、特定のクラスのみを取り除く。
• 必要なクラスまで削除しないように注意する。
• functions.php を編集する際は、バックアップを取る。

Q&A

function remove_all_post_classes($classes) {
    return array();
}
add_filter('post_class', 'remove_all_post_classes');

function remove_classes_for_custom_post_type($classes) {
    if (get_post_type() === 'custom_post_type') {
        return array_diff($classes, array('custom-class'));
    }
    return $classes;
}
add_filter('post_class', 'remove_classes_for_custom_post_type');

function modify_post_classes($classes) {
    $classes = array_diff($classes, array('unwanted-class'));
    array_push($classes, 'new-class');
    return $classes;
}
add_filter('post_class', 'modify_post_classes');

まとめ

post_class() によって追加されるクラスを整理することで、HTML を軽量化し、不要なスタイル適用を防ぐことができます。

フィルターフック post_class を活用すれば、不要なクラスの削除や、新しいクラスの追加が柔軟に行えます。

このカスタマイズを活用し、よりシンプルでパフォーマンスの良い HTML 構造を作成しましょう。