WordPressでページごとにCSSを設定する方法：投稿と固定ページ、スラッグ別カスタマイズ完全ガイド

はじめに (対象読者・この記事でわかること)

この記事は、WordPressの基本的な使い方を理解しているWebサイト運営者、Webデザイナー、WordPressカスタマイズに興味がある開発者を対象としています。

この記事を読むことで、WordPressで投稿ページと固定ページごとに異なるCSSを適用する方法、固定ページのスラッグごとに個別のCSSを設定する具体的な手法、子テーマの作成とカスタマイズ方法、実際のサイト運営で役立つ応用テクニックを習得できます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - WordPressの基本的な操作知識 - HTML/CSSの基本的な理解 - FTPクライアントやファイルマネージャーの使用経験 - テーマファイルの基本的な構造の理解

WordPressでのページごとのCSS設定の必要性

WordPressでサイトを運営する上で、ページごとに異なるデザインやスタイルを適用したいケースは多々あります。例えば、特定の固定ページだけに特別なレイアウトを適用したり、投稿ページごとに異なる見栄えをさせたりする必要がある場合です。

一般的な方法として、WordPressのカスタマイザーでサイト全体のCSSを変更することはできますが、これではすべてのページに同じスタイルが適用されてしまいます。ページごとに異なるCSSを適用するには、より高度なカスタマイズが必要になります。

特に、固定ページはスラッグ（URLの一部）ごとにデザインを変更したいというニーズは多くあります。例えば、「サービス紹介」ページと「お問い合わせ」ページで異なる背景色を使いたい、といったケースです。この記事では、そのような要件を満たすための具体的な実装方法を解説します。

具体的な実装方法

ここでは、WordPressで投稿ページと固定ページごとにCSSを設定する具体的な手順を解説します。特に、固定ページはスラッグごとにCSSを設定する方法に焦点を当てます。

ステップ1：子テーマの準備

まず、親テーマを直接編集するのではなく、子テーマを作成してカスタマイズを行います。これにより、テーマの更新時にカスタマイズが上書きされるのを防ぎます。

FTPクライアントまたはファイルマネージャーで/wp-content/themes/ディレクトリにアクセスします
親テーマと同じ名前のフォルダを作成し、その中にstyle.cssファイルを作成します
style.cssの先頭に以下のコメントを追加します：

/*
 Theme Name: 親テーマ名の子テーマ
 Template: 親テーマフォルダ名
 Version: 1.0.0
 Text Domain: 親テーマ名-child
*/

functions.phpファイルを作成し、以下のコードを追加して親テーマのCSSを読み込みます：

Php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

ステップ2：投稿ページごとのCSS設定

投稿ページごとに異なるCSSを適用するには、投稿のIDやカテゴリに基づいてCSSを読み込む方法が有効です。

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

Php

function add_post_specific_css() {
    // 現在の投稿情報を取得
    if ( is_single() ) {
        $post_id = get_the_ID();
        $post_slug = get_post_field( 'post_name', $post_id );

        // 投稿ごとのCSSファイルを読み込む
        wp_enqueue_style( 'post-specific-css', get_stylesheet_directory_uri() . '/css/post-' . $post_slug . '.css', array(), '1.0.0' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_post_specific_css' );

/wp-content/themes/子テーマ名/css/ディレクトリを作成します
各投稿用のCSSファイルを投稿スラッグと同じ名前で作成します（例：post-mypost.css）
各CSSファイルに投稿ごとのスタイルを記述します

ステップ3：固定ページごとのCSS設定

固定ページごとに異なるCSSを適用するには、固定ページのスラッグを利用します。

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

Php

function add_page_specific_css() {
    // 現在のページ情報を取得
    if ( is_page() ) {
        $page_id = get_the_ID();
        $page_slug = get_post_field( 'post_name', $page_id );

        // ページごとのCSSファイルを読み込む
        wp_enqueue_style( 'page-specific-css', get_stylesheet_directory_uri() . '/css/page-' . $page_slug . '.css', array(), '1.0.0' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_page_specific_css' );

/wp-content/themes/子テーマ名/css/ディレクトリに各固定ページ用のCSSファイルをページスラッグと同じ名前で作成します（例：page-about.css）
各CSSファイルにページごとのスタイルを記述します

ステップ4：条件分岐タグを活用した高度なCSS設定

さらに高度なカスタマイズとして、条件分岐タグを組み合わせて特定の条件下でのみCSSを読み込む方法を紹介します。

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

Php

function add_conditional_css() {
    // 複数の条件を組み合わせたCSS読み込み
    if ( is_page() && is_page_template( 'template-custom.php' ) ) {
        // 特定のテンプレートを使用している固定ページに適用
        wp_enqueue_style( 'template-specific-css', get_stylesheet_directory_uri() . '/css/template-custom.css', array(), '1.0.0' );
    }

    if ( is_category( 'news' ) ) {
        // 特定のカテゴリの投稿ページに適用
        wp_enqueue_style( 'category-specific-css', get_stylesheet_directory_uri() . '/css/category-news.css', array(), '1.0.0' );
    }

    if ( is_singular() && has_term( 'special', 'post_tag' ) ) {
        // 特定のタグが付けられている投稿に適用
        wp_enqueue_style( 'tag-specific-css', get_stylesheet_directory_uri() . '/css/tag-special.css', array(), '1.0.0' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_conditional_css' );

必要に応じてCSSファイルを作成し、スタイルを記述します

ステップ5：カスタムフィールドを利用したCSS設定

カスタムフィールドを利用して、ページごとに自由にCSSクラスを追加する方法もあります。

固定ページの編集画面でカスタムフィールドを追加し、CSSクラスを保存します（フィールド名：css_class、値：custom-class）
子テーマのfunctions.phpに以下のコードを追加します：

Php

function add_custom_field_css() {
    if ( is_page() ) {
        $page_id = get_the_ID();
        $css_class = get_post_meta( $page_id, 'css_class', true );

        if ( ! empty( $css_class ) ) {
            // ページのbodyタグにCSSクラスを追加
            add_filter( 'body_class', function( $classes ) use ( $css_class ) {
                $classes[] = $css_class;
                return $classes;
            });

            // カスタムCSSファイルを読み込む
            wp_enqueue_style( 'custom-field-css', get_stylesheet_directory_uri() . '/css/custom.css', array(), '1.0.0' );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'add_custom_field_css' );

/wp-content/themes/子テーマ名/css/custom.cssにカスタムフィールドで指定したクラスに対するスタイルを記述します：

Css

.custom-class {
    /* ここにカスタムスタイルを記述 */
}

ハマった点やエラー解決

この方法を実装する際に、多くの人が直面する問題とその解決策を以下に紹介します。

問題1：CSSファイルが読み込まれない

症状：作成したCSSファイルがサイトに反映されない

原因： - ファイルパスが間違っている - ファイルパーミッションが正しく設定されていない - キャッシュが原因で変更が反映されていない

解決策： 1. ファイルパスが正しいか確認します。get_stylesheet_directory_uri()は子テーマのパスを返すことを確認します 2. FTPクライアントでファイルパーミッションを確認し、644（読み取り/書き込み）に設定します 3. ブラウザのキャッシュをクリアし、WordPressのキャッシュプラグインが有効な場合は一時的に無効にします

問題2：特定のページでCSSが適用されない

症状：特定のページでだけCSSが適用されない

原因： - 条件分岐タグの使い方が間違っている - ページのスラッグが変更されている - ページテンプレートの影響

解決策： 1. is_page()関数の引数にページのID、タイトル、スラッグを正しく指定しているか確認します 2. 現在のページのスラッグを確認するために、echo get_post_field( 'post_name', get_the_ID() );を一時的に追加して確認します 3. ページテンプレートを使用している場合は、is_page_template()関数でテンプレートの有無を確認します

問題3：CSSの優先順位が低い

症状：他のCSSより優先度が低く、スタイルが適用されない

原因： - CSSセレクタの優先順位が低い - 読み込み順序の問題

解決策： 1. CSSセレクタに具体的なクラス名やIDを追加して優先順位を高くします（例：.page-about .custom-class） 2. !importantを慎重に使用します（最終手段として） 3. CSSファイルの読み込み順序を確認し、必要に応じて依存関係を設定します

まとめ

本記事では、WordPressで投稿ページと固定ページごとにCSSを設定する方法を解説しました。特に、固定ページはスラッグごとにCSSを設定する具体的な手法として、子テーマの作成、条件分岐タグの活用、カスタムフィールドの利用方法を紹介しました。

これらの技術を活用することで、各ページに最適化されたデザインを簡単に適用できます。サイト全体の統一感を保ちつつ、特定のページだけに特別なデザインを施すことが可能になります。

今後は、これらの技術をさらに発展させた、動的なCSSの生成方法や、プラグインを利用した簡単な設定方法についても記事にする予定です。

WordPressでページごとにCSSを設定する方法：投稿と固定ページ、スラッグ別カスタマイズ完全ガイド💻