こんにちは、コンスキです。
前回、アーカイブを残さないページについては、WordPress化することができましたが、CSSファイルが正しく読み込まれていない状態でした。
また、メインビジュアルも全て同じ画像になってしまっています。
原因は、TOPページを読み込んだ場合と、それ以外のページを読み込んだ場合のどちらの場合であっても、同じ「header.php」を読み込んでいるからです。
そこで今日は、WordPressの条件分岐タグというものを使って、ページごとに読み込むファイルを変える作業をします。
ページごとに個別のCSSを設定する
条件分岐するものとしては、画像ファイルとCSSファイルなどがありますが、まずはページによって読み込むCSSファイルを変えられるようにします。
header.phpを確認する
ちょっとheader.phpのheadにあるCSSファイルを読み込んでいる部分を覗いてみます。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/destyle.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/top.css">2つのCSSファイルを読み込んでいることがわかります。
上の方で「リセットCSS」を読み込み、下の方でTOPページ用のCSSファイルを読み込んでいます。
ちなみに「top.css」はTOPページ以外にも、全ページに共通して必要なスタイルを含んでいるCSSファイルです。
TOPページじゃ無くてもこれと同じ「header.php」全て読み込むということは、他のページを表示した時でも、この2つのCSSファイルしか読み込まれないということになります。
ということで、「このページはこのCSSファイルを読み込む」という感じで条件分岐をしていきます。
分岐のやり方を考える
条件分岐のためのスクリプトを書く前に、どんな感じで条件分岐するのかを整理しておきます。
まず、分岐の時には条件が必要ですよね。
「読み込んだページが◯◯だったら✖️✖️をスクリプトに出力する。」という感じで、下線が引かれている部分が分岐する際の条件になります。
条件にできるものとしては次のようなものがあります。
- 読み込むテンプレートファイルの種類 例. 読み込むファイルが「front-page.php」だったら・・・、「archive.php」だったら・・・
- 読み込む投稿ページや固定ページのID 例. 読み込む 投稿ページのIDが「12」だったら・・・
- 読み込む固定ページや投稿ページのスラッグ 例. 読み込む固定ページのスラッグが「about」だったら
これ以外にもまだまだ条件にできるものはたくさんあります。
気になったらWordPressの公式ページを見てみてください。
条件分岐のためのスクリプトを書く
条件分岐をするためには、WordPressの「条件分岐タグ」と呼ばれるものを使います。
先ほど考えた条件の中だと3を使った条件分岐タグが使いやすそうです。
前回固定ページを作ったときに、全てにスラッグと呼ばれるものをつけたからです。
https://konsuki.com/irokuhu/about/ ←太文字になってる部分がスラッグ
条件分岐タグは次のようにして使えます。
<?php if( 条件1 ): ?>
<!-- ここに条件1だった時に出力するスクリプトを書く -->
<?php elseif ( 条件2 ): ?>
<!-- ここに条件1じゃなかった時に出力するスクリプトを書く -->
<?php else: ?>
<!-- ここに条件1でも条件2でもなかった時に出力するスクリプトを書く -->
<?php endif; ?>今回使う条件分岐タグは「is_page( ‘スラッグ’ )」という条件分岐タグです。
例えば、「is_page(‘about’)」と書いた場合、「about」というスラッグを設定したページを表示した時に「true」を返します。
「about」以外のスラッグが設定されているページが表示された場合は反対に「false」を返します。
ということで、「header.php」の先ほどの部分を次のスクリプトに置き換えます。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/destyle.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/top.css">
<?php if(is_page('about')): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/about.css">
<?php if(is_page('daytime')): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/daytime.css">
<?php if(is_page('calendar')): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/calendar.css">
<?php if(is_page('contact')): ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/contact.css">
<?php else: ?>
<!-- 何も出力しない -->
<?php endif; ?>ページごとに読み込まれるCSSファイルをかえることができるようになりました。
動作の確認をする
GoogleDevTools（検証機能）を使って、読みこまれるCSSがページによって本当に変わるのか確かめてみます。
ちゃんと変わっていることが確認できました。
ページごとに個別のメインビジュアルを設定する
次はページによってメインビジュアルが変わるようにしていきます。
現状を確認する
header.phpのうちメインビジュアルの部分を確認してみると次のようになっています。
<div id="mv_container">
<img src="<?php echo get_template_directory_uri(); ?>/img/top_mv.jpg">
</div>トップページ用のメインビジュアルだけを読み込んでいることがわかります。
これでは、どのページを開いても次のようにトップページのメインビジュアルが表示されてしまいます。
条件分岐のためのスクリプトを書く
CSSファイルを分岐した時と同じようにテンプレートタグを使って書きます。
<div id="mv_container">
<?php if(is_front_page()): ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/top_mv.jpg">
<?php elseif(is_page('about')): ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/about_mv.jpg">
<?php elseif(is_page('daytime')): ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/daytime_mv.jpg">
<?php elseif(is_page('calendar')): ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/calendar_mv.jpg">
<?php elseif(is_page('contact')): ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/contact_mv.jpg">
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/lunch_mv.jpg">
<?php endif; ?>
</div>2行目にはCSSファイルの条件分岐では使わなかった「is_front_page()」という条件分岐タグを使いました。
この条件タグは、「front_page.php」（トップページ）を表示する場合は「true」を返し、それ以外であれば「false」を返します。
これで、ページごとにメインビジュアルの画像が切り替わるようになりました。
最後に
これで、CSSとメインビジュアルが変わるようになりました。
HTMLを表示していた時とほとんど同じようにページが表示されるようになったと思います。
次回は「archive.php」を編集して投稿機能を使って給食の献立を投稿できるようにしたいと思います。
コメント