WordPressでカテゴリー別に動的クラスを付与する方法

こんにちは！コーダーのためのWeb制作ブログの中の人hisaです！👋

WordPressサイトの記事一覧やアーカイブページで、カテゴリーごとに異なるスタイルを適用したいことはありませんか？🎨
今回は、PHPを使ってカテゴリー別に動的にCSSクラスを付与する方法をご紹介します。💻✨

基本的な実装方法

1. functions.phpでの実装

まず、テーマのfunctions.phpに以下のコードを追加します：

基本的な実装パターン（推奨版）

より汎用的で使いやすい関数も併せて実装しています：

function get_category_class($post_id = null) {
    if (!$post_id) {
        $post_id = get_the_ID();
    }
    
    $categories = get_the_category($post_id);
    $category_classes = array();
    
    if (!empty($categories)) {
        foreach ($categories as $category) {
            $category_classes[] = 'category-' . $category->slug;
        }
    }
    
    return implode(' ', $category_classes);
}

上記のコードでも実装は可能です。

このコードの特徴

1. 投稿ID の柔軟な取得

if (!$post_id) {
    $post_id = get_the_ID();
}

投稿IDが指定されない場合は、現在の投稿IDを自動取得します。

2. 複数カテゴリーへの対応

phpforeach ($categories as $category) {
    $category_classes[] = 'category-' . $category->slug;
}

一つの記事が複数のカテゴリーに属している場合、すべてのカテゴリークラスを生成します。

3. 安全な配列処理

if (!empty($categories)) {
    // カテゴリーが存在する場合のみ処理
}

カテゴリーが設定されていない記事でもエラーが発生しないよう配慮しています。

実際のコード解説

当サイトでは、以下のような関数をfunctions.phpに実装しています：

/**
 * カテゴリー名をクラス名に変換する関数
 * @param string $category_name カテゴリー名
 * @param string $prefix クラス名のプレフィックス（デフォルトはcategory-label-）
 * @return string 生成されたクラス名
 */
function get_category_class($category_name, $prefix = 'category-label-')
{
    // カテゴリー名からカテゴリーオブジェクトを検索
    $category = get_term_by('name', $category_name, 'category');

    if ($category && !is_wp_error($category)) {
        // カテゴリースラグを使用（既に英数字+ハイフンの形式になっている）
        return $prefix . $category->slug;
    } else {
        // カテゴリーが見つからない場合は、従来の方法でフォールバック
        $class = strtolower(str_replace(' ', '-', $category_name));
        $class = str_replace('/', '-', $class);
        // 日本語などの文字をURLセーフな形式に変換
        $class = sanitize_title($class);
        return $prefix . $class;
    }
}

1.堅牢なエラーハンドリング

if ($category && !is_wp_error($category)) {
    // カテゴリーが存在する場合の処理
} else {
    // フォールバック処理
}

カテゴリーが見つからない場合や、何らかのエラーが発生した場合のフォールバック処理を実装しています。これにより、本番環境でのエラーを防げます。

2.日本語カテゴリー名への対応

// 日本語などの文字をURLセーフな形式に変換
$class = sanitize_title($class);

日本語のカテゴリー名でも適切にクラス名に変換できるよう、WordPress標準のsanitize_title()関数を使用しています。

3. カスタマイズ可能なプレフィックス

function get_category_class($category_name, $prefix = 'category-label-')

クラス名のプレフィックスを変更可能にすることで、サイトのCSSルールに合わせて柔軟に対応できます。

2. テンプレートファイルでの使用方法

記事一覧での使用例

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article class="post-item <?php echo get_category_class(); ?>">
    <div class="post-header">
        <h2 class="post-title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h2>
        <div class="post-meta">
            <time><?php echo get_the_date(); ?></time>
        </div>
    </div>
    <div class="post-content">
        <?php the_excerpt(); ?>
    </div>
</article>
<?php endwhile; endif; ?>

実際のCSS実装例

当サイトで使用している、カテゴリー別スタイリングの例をご紹介します：

    &-html-css {
        background-color: #e96228;
    }

    &-javascript {
        background-color: #efd81d;
    }

    &-wordpress {
        background-color: #1a6f93;
    }

    &-frontend-development {
        background-color: #27ae60;
    }

以下の画像のようにカテゴリー事に色分け出来るように動的にクラスをつけ、そのクラスにスタイルを当てています。

まとめ💡

カテゴリー別の動的クラス付与により、WordPressサイトの記事表示をより柔軟にカスタマイズできます。当サイトでの実装経験を基に、以下のポイントが重要です：

• エラーハンドリング – 本番環境での安定性確保
• 柔軟性 – 複数カテゴリーや日本語対応
• 保守性 – 分かりやすいコード構造
• パフォーマンス – 必要に応じたキャッシュ実装

この方法を使うことで、カテゴリーごとに統一感のあるデザインを実現し、ユーザビリティの向上につながります。ぜひ、あなたのWordPressサイトでも試してみてください！

コードが長く書かれている理由

最後に、なぜコードを長く書いているかについて補足します：

1. 可読性 – 後から見ても理解しやすい
2. 保守性 – 修正や機能追加が容易
3. デバッグ性 – 問題の特定がしやすい
4. 安全性 – エラーの予防と適切なハンドリング
5. チーム開発 – 他の開発者も理解しやすい

短いコードは一見効率的に見えますが、長期的な運用を考えると、適切なコメントと構造化されたコードの方が価値が高いのです。

注意点

• 大量のカテゴリーがある場合は、パフォーマンスへの影響を考慮してください
• クラス名は英数字とハイフンのみ使用することを推奨します
• 日本語カテゴリー名の場合は、スラッグを英語で設定しておくと良いでしょう

この記事が役に立ったら、ぜひシェアしてくださいね！他にも知りたいことがあれば、コメントで教えてください😊
自分なりに分かりやすく言葉をかみ砕いて説明させて頂きます！

✉️ あなたのリクエスト教えてください！

「この記事わかりやすかった！」
「他にもこんな記事書いてほしい！」
そんな声を、ぜひXのDMで教えてください！😊📩

できるだけリクエストにお応えして、今後の記事作成に活かしていきます！

▶️ X@TumaLOVE0127もフォローしてもらえるとめちゃくちゃ嬉しいです！