特定のページにだけ任意のcssファイルを読み込ませる

WordPress 6.4.3
広告WordPress・PHP を学べる本

Amazonのアソシエイトとして、WordPress functions.phpは適格販売により収入を得ています。

概要説明

このページだけ新規作成したCSSファイルを読み込みたい時に使うカスタマイズ。LPなど他のページでは使わないスタイルを特定のページだけで読み込ませることができます。

トップページにだけ home.css を読み込ませる

functions.php
/*----------------------------------------------------
 特定のページにだけ任意のcssファイルを読み込ませる
----------------------------------------------------*/
if ( !function_exists( 'add_page_style' ) ){
    function add_page_style() {
        // トップページにだけ home.css を読み込ませる
        // is_front_page() は、トップに固定ページを使っているサイトでもトップで true になる
        if ( is_front_page() ) {
            wp_enqueue_style( 'page-style-home', get_stylesheet_directory_uri() . '/css/home.css' );
        }
    }
    add_action( 'wp_enqueue_scripts', 'add_page_style' );
}

is_home() は「投稿の一覧のページ」で true になります。「表示設定 → ホームページの表示」で固定ページをトップにしているサイトでは、トップでは true にならず、投稿の一覧のページで true になります。トップページを指すときは is_front_page() を使います(違いは別の記事にまとめています)。

特定の固定ページにpage.cssを読み込ませる場合

functions.php
// 特定の固定ページ(ID 56)に page.css を読み込ませる
if ( is_page( 56 ) ) {
    wp_enqueue_style( 'page-style-page', get_stylesheet_directory_uri() . '/css/page.css' );
}

特定の記事ページに post.css を読み込ませる

functions.php
// 特定の記事ページ(ID 81)に post.css を読み込ませる
if ( is_single( 81 ) ) {
    wp_enqueue_style( 'page-style-post', get_stylesheet_directory_uri() . '/css/post.css' );
}

get_the_ID() や $post->ID で比べると、一覧のページでは先頭の記事の ID になり、関係のないページでも読み込まれることがあります。404 のページでは warning も出ます。固定ページは is_page( ID )、記事は is_single( ID ) で見分けます。

条件を組み合わせて、ページごとに CSS を読み込ませる

functions.php
/*----------------------------------------------------
 特定のページにだけ任意のcssファイルを読み込ませる
----------------------------------------------------*/
if ( !function_exists( 'add_page_style' ) ){
    function add_page_style() {
        // トップページにだけ home.css を読み込ませる
        if ( is_front_page() ) {
            wp_enqueue_style( 'page-style-home', get_stylesheet_directory_uri() . '/css/home.css' );
        }

        // 特定の固定ページ(ID 56)に page.css を読み込ませる
        if ( is_page( 56 ) ) {
            wp_enqueue_style( 'page-style-page', get_stylesheet_directory_uri() . '/css/page.css' );
        }

        // 特定の記事ページ(ID 81)に post.css を読み込ませる
        if ( is_single( 81 ) ) {
            wp_enqueue_style( 'page-style-post', get_stylesheet_directory_uri() . '/css/post.css' );
        }
    }
    add_action( 'wp_enqueue_scripts', 'add_page_style' );
}

 

WordPress Developer Resources

SiteBeacon(サイトビーコン)

サイトが止まったら、すぐに気づける。

ホームページを 5 分ごとにチェックして、止まったとき・エラーが出たとき・SSL やドメインの期限が近いときに、メールでお知らせします。2 サイトまでは、ずっと無料で使えます。

SiteBeacon を見る サイトを直す相談をする

監視で気づいたあとの直す作業も、同じ担当がお受けします。