【WordPress】条件分岐で特定の固定ページに特定のclassやidを付ける方法

特定の固定ページだけ特定のclass名やid名を付ける事って出来る？

コーポレートサイトの場合、ヘッダーやフッターなどの共通するパーツやデザインについては header.php や footer.php を使うと思いますが、特定のページだけデザインが違う場合などがあります。

例えばフッターにはお問い合わせページへのリンクボタンがあるけど、お問い合わせページのフッターにだけ無いなど（そのページだからボタンは不要という事です）

こういう場合、お問い合わせページ用に別のフッター用テンプレートを作ってもいいのですが、ファイルを増やしたくない場合は条件分岐を使うと可能です。

効率よくWordPress制作したい人はこちら

条件分岐で特定の固定ページに特定の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>

以上になります。

また別の条件分岐については案件で使用したら書いていきますｗ

WordPress案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック