コーポレートサイトの場合、ヘッダーやフッターなどの共通するパーツやデザインについては header.php や footer.php を使うと思いますが、特定のページだけデザインが違う場合などがあります。
例えばフッターにはお問い合わせページへのリンクボタンがあるけど、お問い合わせページのフッターにだけ無いなど（そのページだからボタンは不要という事です）
こういう場合、お問い合わせページ用に別のフッター用テンプレートを作ってもいいのですが、ファイルを増やしたくない場合は条件分岐を使うと可能です。
条件分岐で特定の固定ページに特定のclassやidを付ける方法
まず今回の記事で使うのは、if分を使った条件分岐になります。
一言で条件分岐と言っても沢山種類があるのですが、基本的な形は以下になります。
<?php if (条件) : ?>
条件に合致した時に表示する内容
<?php else: ?>
条件に合致しない時に表示する内容
<?php endif; ?>『if』というのは『もし』という意味ですね。
<?php if (条件) : ?> は『もし条件に合致した時は』という意味で、<?php else: ?> は『条件に合致しなかった場合』となります。
今回はこれを使っていきます。
ちなみに『トップページのみh1タグ、それ以外のページではpタグにする方法』については以下の記事で紹介しています。
トップページのみh1タグ、それ以外のページではpタグにする方法【WordPress】
条件を書く
まず今回の例ですが、
お問い合わせページの時のみ、headerに特定のclass名を付ける
という感じにしてみたいと思います。
まずはコードを見てみます（こちらはheader.phpを想定しています）
<header
<?php if(is_page('ページID')):?>
class="header-contact"
<?php else: ?>
class="header"
<?php endif;?>
>
ヘッダーの中身
</header>まずはこちら
<?php if(is_page('ページID')):?>
この『is_page』というのは固定ページの事を指します。
今回はお問い合わせページという固定ページなので、is_page を使います。
またページIDというのは、固定ページの編集画面で確認できます（下の画像の赤枠）
なので、今回は以下のようになります。
<header
<?php if(is_page('contact')):?>
class="header-contact"
<?php else: ?>
class="header"
<?php endif;?>
>
ヘッダーの中身
</header>
出力されるhtml
それでは先ほどのコードが実際にどう出力されるのか確認してみます。
まずはお問い合わせページ以外の場合です。
<header class="header">
ヘッダーの中身
</header>先ほどのページIDが『contact』以外の場合は <?php else: ?> 以下の内容が反映されるので、class名は『header』となります。
それではお問い合わせページの場合を見てみましょう。
<header class="header-contact">
ヘッダーの中身
</header>今回はページIDが『contact』になるので、<?php if(is_page('contact')):?>以下の内容が反映されるので、class名は『header-contact』となります。
またclass名は複数付ける事も出来ます。
例えば、お問い合わせページであってもなくても header というclass名を付けたい場合は以下になります。
<header
<?php if(is_page('contact')):?>
class="header-contact header"
<?php else: ?>
class="header"
<?php endif;?>
>
ヘッダーの中身
</header>お問い合わせページの場合の出力結果はこちら
<header class="header-contact header">
ヘッダーの中身
</header>id の場合は class を id にすればいいだけです。
また、お問い合わせページだけ特定のclass名を付けたいけど、それ以外ではclass名なしと言う場合は<?php else: ?>は省略できます。
<header
<?php if(is_page('contact')):?>
class="header-contact"
<?php endif;?>
>
ヘッダーの中身
</header>出力結果はこちら
お問い合わせページの場合
<header class="header-contact">
ヘッダーの中身
</header>お問い合わせページ以外の場合
<header>
ヘッダーの中身
</header>以上になります。
また別の条件分岐については案件で使用したら書いていきますｗ