MENU
  1. Home
  2. WordPress カスタマイズ
  3. add_filter()
  4. post_class() で追加される不要なクラスを削除して HTML を軽量化する方法

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

広告
add_filter() get_post_type() post_class()

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

post_class() で追加されるクラスの一覧はどこで確認できますか？

投稿の HTML ソースを確認し、<article> タグの class 属性を調べてください。

post_class() のクラスを完全に削除する方法はありますか？

return array(); とすることで、すべてのクラスを削除できます。ただし、スタイリングが崩れる可能性があるため注意が必要です。

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

このカスタマイズを特定の投稿タイプのみに適用できますか？

get_post_type() を使うことで、特定の投稿タイプのみに適用できます。

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');

クラスを削除した後に、新しいクラスを追加することはできますか？

array_push() を使うことで、新しいクラスを追加できます。

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 構造を作成しましょう。

add_filter() get_post_type() post_class()
よかったらシェアしてね！
  • URLをコピーしました！
目次