WordPressサイトを制作、運営するうえで「固定ページと投稿記事ページで異なるCSSファイルを使いたい」、「特定の固定ページだけ違うデザインにしたい」といった場合に、複数のCSSファイルをページごとに適用させる方法を解説します。
3つの方法を紹介しますが、後のものほど知識が必要となるものの自然な方法での実装となります。
目次
専用のテンプレートファイルを作る方法
最も原始的な方法です。
メインのCSSとは別のCSSファイルを適用するページのテンプレートファイルを丸ごと作成して、そのファイルに外部CSSファイルへのリンクを記述します。
WordPressはページのIDやスラッグ（URL）を利用して個別のページのテンプレートファイルを作成できる仕組みになっているのでそれを利用します。
例えば https://denno-sekai.com/demopage/ という固定ページのテンプレートファイルを作りたい場合はpage-demopage.phpという名前のファイルを用意すると優先的に読み込まれます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="profile" href="http://gmpg.org/xfn/11"> <title>デモサイト</title> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/demopage.css"> </head> <body> <!-- 省略 --> </body> </html>
7行目が外部CSSファイルを読み込むための記述です。この例ではテーマファイル直下に置いたdemopage.cssという外部CSSファイルを読み込ませています。
この方法は外見を変えたいページの数だけファイルを作成しなくてはならないためそういったページが多数ある場合には向きませんが、他の方法と違って条件分岐処理を走らせる必要がありません。
head内で条件分岐出力させる方法
head内でこのページの場合はこのCSSファイルを、このページの場合はこのCSSファイルをといった具合に、条件分岐で異なるCSSを適用させたり追加のCSSファイルを読み込ませる方法です。
headタグはheader.phpにあるはずですので記述を追加しましょう。
<?php if(is_page( 'demopage' )) : ?> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/demopage.css"> <?php else : ?> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css"> <?php endif ?> </head>
多くのテーマではスタイルシートをfunctions.phpで管理しているため、header.phpに上記の記述をしただけでは別々のCSSを適用させるのではなく、追加のCSSを読み込ませる形になってしまうことがあります。
その場合はfunctions.phpのCSSを出力する記述をコメントアウトするか、後述のfunctions.phpでCSSを管理する方法を使いましょう。
functions.phpで条件分岐出力させる方法
前述の方法とやっていることは同じですが、こちらはfunctions.phpに記述してアクションフックで呼び出す最も自然な方法です。
function demotheme_script() {
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
if ( is_page( 'demopage' ) ) {
wp_enqueue_style( 'demo', get_template_directory_uri() . '/demopage.css' );
}
}
add_action( 'wp_enqueue_scripts', 'demotheme_script' );
まず全ページ共通のスタイルシートである style.css を読み込んだ後、固定ページの demopage のみ demopage.css を追加で呼び出しています。
CSSを追加するのではなく、ページごとに異なるCSSファイルを適用したい場合は下記のように記述しましょう。
function demotheme_script() {
if ( is_page( 'demopage' ) ) {
wp_enqueue_style( 'demo', get_template_directory_uri() . '/demopage.css' );
}
else {
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
}
}
add_action( 'wp_enqueue_scripts', 'demotheme_script' );
こちらは固定ページの demopage では demopage.css のみを呼び出し、他のページでは style.css のみを適用しています。
特定のページに外部CSSを追加したいのか、適用するCSSを完全に分けたいのかなど、目的によって使い分けましょう。
