固定ページだけCSSを切り替える方法

固定ページのスラッグを使うと、特定のページだけにCSSを適用できます。ここではスラッグの確認方法とfunctions.phpでの具体例をご紹介します。

固定ページのスラッグ確認方法

• WordPress管理画面で固定ページを開く。
• 「タイトル」の下にある「パーマリンク」を確認。
• URLの最後の部分がスラッグです。例: https://example.com/contact/ の場合、スラッグは contact
• 必要に応じてスラッグは編集可能です。

functions.php でスラッグ別にCSS切替

// 固定ページごとにスラッグでCSSを切り替える
function custom_css_by_page_slug() {
    if (is_page('contact')) { // スラッグが contact の固定ページ
        wp_enqueue_style('contact-css', get_stylesheet_directory_uri() . '/css/contact.css');
    } elseif (is_page('about')) { // スラッグが about の固定ページ
        wp_enqueue_style('about-css', get_stylesheet_directory_uri() . '/css/about.css');
    } else { // その他の固定ページ
        wp_enqueue_style('default-page-css', get_stylesheet_directory_uri() . '/css/custom-page.css');
    }
}
add_action('wp_enqueue_scripts', 'custom_css_by_page_slug');

CSSファイル例

/*固定ページだけCSSを切り替える*/
/* contact.css */
body.page-contact {
    background-color: #f0f8ff;
}
.page-contact h1 {
    color: #0066cc;
}

/* about.css */
body.page-about {
    background-color: #fff0f5;
}
.page-about h1 {
    color: #cc0066;
}

/* custom-page.css （その他の固定ページ） */
body.page {
    background-color: #f9f9f9;
}

子テーマのディレクトリ構造

まとめ

スラッグを使うことで、固定ページごとに簡単にCSSを切り替えられます。子テーマの /css/ フォルダにファイルを置き、functions.php に条件分岐で読み込むのが基本的な方法です。