姫路市のホームページ制作会社、エスティー・クリエイティブです。
前回の記事ではHTMLで作成したWebサイトをWordPress化する方法を解説しました。
前回の方法だと、トップページでも下層ページ（投稿・固定ページ・アーカイブ）でも同じCSSを読み込んでしまいます。
ページ毎にCSSを分けて制作している場合、ページ毎に読み込むCSSを変えたいケースもあると思います。
そこで、今回はそのページに必要なCSSのみ読み込む方法を解説します。
読み込むCSSを変える方法
読み込むCSSを変える方法は、プラグインを使用したり、function.phpから読み込ませる方法もありますが、今回は「header.php」で条件分岐する方法を紹介したいと思います。
<head>
<?php /*?>トップページの場合<?php */?>
<?php if ( is_home() || is_front_page() ) : ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/top.css">
<?php endif; ?>
<?php /*?>固定ページの場合<?php */?>
<?php if ( is_page() ): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/page.css">
<?php endif; ?>
<?php /*?>投稿ページの場合<?php */?>
<?php if ( is_single() ): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/single.css">
<?php endif; ?>
</head>「if」という意味の分からないコードが出てきましたが、PHPやプログラム言語では頻出する「条件分岐」という命令です。
まずは、これをマスターしないとWordPressで管理しやすいWebサイトを作れません。
もし(if)トップページなら？
もし(if)固定ページなら？
もし(if)投稿ページなら？
と分岐して読み込むCSSを変えています。
ひとまずは、上記コードをコピペして試してみましょう。
「/css/top.css」
「/css/page.css」
「/css/single.css」
↑CSSまでのパスやCSSの名前は自分の制作したものに合わせて、書き換えてください。
固定ページ毎に読み込むCSSを変える方法
上記の方法では、全ての固定ページで同じCSSを読み込んでいます。
HTMLで作成した時に、ページ毎にCSSを分けて作成している場合も多いと思います。
例：https://hogehoge.com/about/(about.css)
<?php /*?>固定ページの場合<?php */?>
<?php if ( is_page('about') ): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/about.css">
<?php endif; ?>
<?php if ( is_page('company') ): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/company.css">
<?php endif; ?>
<?php if ( is_page('contact') ): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/contact.css">
<?php endif; ?>
「is_page(‘about’)」で固定ページのスラッグが「about」ならという条件を指定しています。
このようにページ毎に条件を設定する方法でも読み分けを実現できますが、ページが増える度に記述を増やす必要があるので面倒です。
そこで、このような場合は固定ページのスラッグを取得して読み込むCSSを設定します。
<?php /*?>固定ページの場合<?php */?>
<?php if ( is_page() ): ?>
<?php /*?>get_pageを利用して情報を得る<?php */?>
<?php $page = get_page(get_the_ID()); ?>
<?php /*?>プロパティからスラッグ名を取得する<?php */?>
<?php $slug = $page->post_name; ?>
<?php /*?>スラッグ名を出力する<?php */?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/<?php echo $slug; ?>.css">
<?php endif; ?>ページ毎にスラッグを取得して出力することで、ページが増えても記述を追加する必要が無くなります。
例：スラッグが「about」の場合、「テーマファイルまでのパス/css/about.css」が読み込まれる
上手くいかない場合･･･
ブラウザの「ソースを表示する」や「要素を検証」で実際にどのようなパスが出力されているのかを確認してください。
そもそも、タグが出力されていない場合は「条件分岐」の記述に誤りがあり、出力されているのに読み込まれていない場合は「パス」か「ファイルの置き場所」に誤りがあります。
まとめ
<head>
<?php /*?>トップページの場合<?php */?>
<?php if ( is_home() || is_front_page() ) : ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/top.css">
<?php endif; ?>
<?php /*?>固定ページの場合<?php */?>
<?php if ( is_page() ): ?>
<?php /*?>get_pageを利用して情報を得る<?php */?>
<?php $page = get_page(get_the_ID()); ?>
<?php /*?>プロパティからスラッグ名を取得する<?php */?>
<?php $slug = $page->post_name; ?>
<?php /*?>スラッグ名を出力する<?php */?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/<?php echo $slug; ?>.css">
<?php endif; ?>
<?php /*?>投稿ページの場合<?php */?>
<?php if ( is_single() ): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/single.css">
<?php endif; ?>
</head>トップページから各固定ページ、投稿ページで読み込むCSSを変えるコードをまとめました。
今回は「header.php」に条件分岐を追加し、下層ページ毎に読み込むCSSを変える方法を解説しました。
まずは、コピペで試して少しずつ理解してください！
「条件分岐」がマスター出来れば、WordPressを便利に使いこなせる幅がかなり広がります。
これからも初心者の方にも分かりやすく、有益な情報をお届けしていきますので、ぜひチェックしてください！
