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

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

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

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

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

3 汎用CSS

/* -----------------------------
 * 固定ページごとにCSSを切り替える
 * ----------------------------- */

/* contact.css（固定ページ「contact」用） */
body.page-contact {
    background-color: #f0f8ff; /* 背景色を淡い水色に設定 */
}
.page-contact h1 {
    color: #0066cc;            /* ページタイトルの文字色を青に設定 */
}

/* about.css（固定ページ「about」用） */
body.page-about {
    background-color: #fff0f5; /* 背景色を淡いピンクに設定 */
}
.page-about h1 {
    color: #cc0066;            /* ページタイトルの文字色をピンク系に設定 */
}

/* custom-page.css（その他の固定ページ用） */
body.page {
    background-color: #f9f9f9; /* その他の固定ページは背景を薄いグレーに設定 */
}

4 functions.php でスラッグ別にJavaScriptの切替例（複数ファイルの例）

固定ページのスラッグを使えば、CSSだけでなく、JavaScript もページごとに切り替えて読み込むことが可能です。
ここでは functions.php を使った実装例をご紹介します。

//-------------------------------------------
// 固定ページごとにスラッグでJSを切り替える
//-------------------------------------------
function custom_js_by_page_slug() {
    if (is_page('contact')) { // スラッグが contact の固定ページ
        wp_enqueue_script(
            'contact-js',
            get_stylesheet_directory_uri() . '/js/contact.js',
            array('jquery'), // jQuery依存の場合
            null,
            true // フッターで読み込む
        );
    } elseif (is_page('about')) { // スラッグが about の固定ページ
        wp_enqueue_script(
            'about-js',
            get_stylesheet_directory_uri() . '/js/about.js',
            array(),
            null,
            true
        );
    } else { // その他の固定ページ
        wp_enqueue_script(
            'default-page-js',
            get_stylesheet_directory_uri() . '/js/custom-page.js',
            array(),
            null,
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'custom_js_by_page_slug');
  

5 functions.php でスラッグ別にJavaScriptの切替例（１ファイルの例）

//-------------------------------------------
// スラッグ別にJavaScriptを切り替える
//-------------------------------------------
function custom_js_by_page_slug() {
    if (is_page('contact')) { // スラッグが contact の固定ページ
        wp_enqueue_script(
            'contact-js',
            get_stylesheet_directory_uri() . '/js/contact.js',
            array('jquery'), // jQuery依存の場合
            null,
            true // フッターで読み込む
        );
    }
}
add_action('wp_enqueue_scripts', 'custom_js_by_page_slug');
  

6 JSファイル例

6.1 contact.js

ファイル名：contact.js
保存先：wp-content/themes/child-theme/js/contact.js

//-------------------------------------------
// contact.js
//-------------------------------------------
jQuery(document).ready(function($) {
    alert("お問い合わせページが読み込まれました！");
});
  

6.2 about.js

ファイル名：about.js
保存先：wp-content/themes/child-theme/js/about.js

//-------------------------------------------
// about.js
//-------------------------------------------
document.addEventListener("DOMContentLoaded", function() {
    console.log("Aboutページ専用のJSが動作しています");
});
  

6.3 custom-page.js

ファイル名：custom-page.js
保存先：wp-content/themes/child-theme/js/custom-page.js

//-------------------------------------------
// custom-page.js
//-------------------------------------------
document.addEventListener("DOMContentLoaded", function() {
    console.log("その他の固定ページ用の共通スクリプト");
});
  

6.4 ディレクトリ構造

7 まとめ

スラッグを使うことで、固定ページごとに簡単にCSSを切り替えられます。子テーマの /css/ フォルダにファイルを置き、functions.php に条件分岐で読み込むのが基本的な方法です。
　　
また、固定ページごとにスラッグを判定して、CSSと同様にJSファイルも切り替えられます。
functions.php に条件分岐を書き、子テーマの /js/ フォルダにスクリプトを配置するのが基本です。