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

投稿ページでも、記事ごとにスラッグを利用して独自のCSSを切り替えることが可能です。
ここでは functions.php を使った具体例を紹介します。

1 投稿ページでスラッグを確認する方法

• WordPress管理画面で投稿を開く。
• 「タイトル」の下にある「パーマリンク」を確認。
• URLの最後の部分がスラッグです。
  例: https://example.com/hello-world/ の場合、スラッグは hello-world
• スラッグは「編集」から変更可能です。

2 functions.php で投稿スラッグごとにCSS切替

//-------------------------------------------
// 投稿ごとにスラッグ別でCSSを切り替える
//-------------------------------------------
function custom_css_by_post_slug() {
    if (is_single('hello-world')) {
        // スラッグが hello-world の投稿
        wp_enqueue_style(
            'hello-world-css',
            get_stylesheet_directory_uri() . '/css/hello-world.css'
        );
    } elseif (is_single('news-update')) {
        // スラッグが news-update の投稿
        wp_enqueue_style(
            'news-update-css',
            get_stylesheet_directory_uri() . '/css/news-update.css'
        );
    } else {
        // その他の投稿
        wp_enqueue_style(
            'default-post-css',
            get_stylesheet_directory_uri() . '/css/custom-post.css'
        );
    }
}
add_action('wp_enqueue_scripts', 'custom_css_by_post_slug');
  

3 汎用CSS

投稿IDごとにCSSを切り替えます。

3.1 hello-world.css

ファイル名：hello-world.css
保存先：wp-content/themes/child-theme/css/hello-world.css

/* -----------------------------
 * hello-world.css（投稿ID 1 用）
 * ----------------------------- */

body.postid-1 {
    background-color: #f0f8ff; /* 背景色を淡い水色に設定 */
}
.postid-1 h1 {
    color: #0066cc;            /* 記事タイトルの文字色を青に設定 */
}
  

3.2 news-update.css

ファイル名：news-update.css
保存先：wp-content/themes/child-theme/css/news-update.css

/* -----------------------------
 * news-update.css（投稿ID 2 用）
 * ----------------------------- */

body.postid-2 {
    background-color: #fff0f5; /* 背景色を淡いピンクに設定 */
}
.postid-2 h1 {
    color: #cc0066;            /* 記事タイトルの文字色をピンク系に設定 */
}
  

3.3 custom-post.css

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

/* -----------------------------
 * custom-post.css（その他投稿用）
 * ----------------------------- */

body.single-post {
    background-color: #f9f9f9; /* その他の投稿は背景を薄いグレーに設定 */
}
  

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

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

// 投稿スラッグごとにJSを読み込む
function custom_js_by_post_slug() {
    if (is_single('hello-world')) { // スラッグが hello-world の投稿
        wp_enqueue_script(
            'hello-world-js',
            get_stylesheet_directory_uri() . '/js/hello-world.js',
            array('jquery'),
            null,
            true
        );
    } elseif (is_single('news-update')) { // スラッグが news-update の投稿
        wp_enqueue_script(
            'news-update-js',
            get_stylesheet_directory_uri() . '/js/news-update.js',
            array('jquery'),
            null,
            true
        );
    } else { // それ以外の投稿用
        wp_enqueue_script(
            'custom-post-js',
            get_stylesheet_directory_uri() . '/js/custom-post.js',
            array('jquery'),
            null,
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'custom_js_by_post_slug');
  

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

// 投稿スラッグのJSを読み込む
function custom_js_by_post_slug() {
    if (is_single('hello-world')) {
        wp_enqueue_script(
            'hello-world-js',
            get_stylesheet_directory_uri() . '/js/hello-world.js',
            array('jquery'),
            null,
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'custom_js_by_post_slug');
  

5.1 ディレクトリ構造

6 まとめ

投稿ページでもスラッグを使えば、CSSやJSを記事ごとに切り替えられます。
子テーマの /css/ や /js/ にファイルを用意し、
functions.php で条件分岐して読み込むのが基本的な方法です。