Topページのみヘッダーを表示するということはできるの？
そういう時は条件分岐タグというものを使うとできるよ！
条件分岐タグとはさまざま条件を設定することでページに応じて内容を変えることができる大変便利なタグのことだよ(説明口調)
ページごとやログインの有無などで
- テキストを変える
- CSSを変える
- サイドバーを出す
などといったことができます。
今日のテーマ
- 条件分岐タグの基本がわかる
- ページごとに表示が変えられるようになる
今回の記事では使い方次第で面白い使い方ができる条件分岐タグについて解説していきます。
1.書き方
基本的には以下のように書きます。
<?php if(条件分岐タグ('パラメータ')): ?>
<!-- 条件を満たす時の処理 -->
<?php endif; ?>次からは条件分岐タグの種類を見ていきます
2.条件分岐タグの種類
2-1.ページごとに使用する分岐タグ
| 条件分岐タグ | 内容 |
|---|---|
| is_home() | メインページが表示されている場合 |
| is_front_page() | front-pageが設定されていてfront-pageの場合 |
| is_single() | 記事ページの場合 |
| is_page() | 固定ページの場合 |
| is_archive() | アーカイブページの場合 |
| is_category() | カテゴリーページの場合 |
ifの後ろの( )内に入るタグです
例）Topページの時
<?php if(is_home()): ?>
<!-- Topページの時の処理 -->
<?php endif; ?>2-2.日付ページごとの分岐タグ
| 条件分岐タグ | 内容 |
|---|---|
| is_year() | 年アーカイブ |
| is_month() | 月アーカイブ |
| is_day() | 日別アーカイブ |
| is_time() | 時分アーカイブ |
他にもたくさんあるので興味のあるかたはこちらから見てみてください(投げやり)
3.パラメータに書くもの
タグの後ろの()の中にはパラメータを書くことで記事ページや固定ページのID、タイトルやスラッグなどを記入し細かな使い分けをすることができます。
例1）特定の記事に関しての条件分岐
<?php if(is_single(id番号)): ?>
<!-- id番号が〇〇の記事ページの時の処理 -->
<?php endif; ?>例2）特定の固定ページに関しての条件分岐
<?php if(is_page('スラッグ名')): ?>
<!-- スラッグが〇〇の固定ページの時の処理 -->
<?php endif; ?>例3）複数のページに関しての条件分岐その1
複数のページを分岐をさせたいときはarray()を使ってカッコ内に記事idやスラッグを入れます。
<?php if(is_single(array(1, 12, 19))): ?>
<!-- スラッグが1, 12, 19の投稿ページの時の処理 -->
<?php endif; ?>例4）複数のページに関しての条件分岐その2
スラッグと記事idも組み合わせることもできます。
<?php if(is_page(array('スラッグ名'), id番号)): ?>
<!-- スラッグが〇〇とid番号が〇〇の固定ページの時の処理 -->
<?php endif; ?>例5）複数のページに関しての条件分岐その3
JavaScriptなどの他の言語で出てきたものと同様に細かく分岐をさせることもできます。
<?php if(条件1):?>
条件1を満たす場合
<?php elseif(条件2):?>
条件2を満たす場合
<?php else:?>
どちらの条件も満たさない場合
<?php endif;?> 書く順番に気をつけないと狙った動きにならないことがあるので注意しましょう。
例5）複数のページに関しての条件分岐その4
「かつ」、「または」というものも同様に使うことができます。
<?php if(is_home() || is_front_page()): ?>
<!-- トップページかフロントページの時の処理 -->
<?php endif; ?>最後に冒頭で話してたTopページのみヘッダーを表示する設定をやってみました
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.css">
<?php wp_head(); ?>
</head>
<body>
<div id="container">
<?php if(is_home() || is_front_page()): ?>
<header>
<h1 id="logo">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo esc_url( get_theme_file_uri() ); ?>/images/logo.png" alt="サンプル不動産">
</a>
</h1>
<div id="menubar">
<nav>
<ul>
<li><a href="list.html">売買物件</a></li>
<li><a href="list.html">賃貸物件</a></li>
<li><a href="list.html">テナント</a></li>
<li><a href="list.html">駐車場</a></li>
</ul>
</nav>
</div>
<ul class="btn">
<li><a href="<?php echo home_url(); ?>/contact/">お問い合わせ</a></li>
</ul>
</header>
<?php endif; ?>Topページだけヘッダーが表示されるようになった！
4.まとめ
条件を指定することでページごとに内容を変えることができるタグ
<?php if(条件分岐タグ('パラメータ')): ?>
<!-- 条件を満たす時の処理 -->
<?php endif; ?>条件に入るタグ
| 条件分岐タグ | 内容 |
|---|---|
| is_home() | メインページが表示されている場合 |
| is_front_page() | front-pageが設定されていてfront-pageの場合 |
| is_single() | 記事ページの場合 |
| is_page() | 固定ページの場合 |
| is_archive() | アーカイブページの場合 |
| is_category() | カテゴリーページの場合 |
細かく指定する場合
- パラメータにはID名やスラッグ名などが入る
- array()を使って配列にして、複数の条件を指定できる
- 「かつ」、「または」で指定することができる
<?php if(is_single(id番号)): ?>
<!-- id番号が〇〇の記事ページの時の処理 -->
<?php endif; ?><?php if(is_page(array('スラッグ名'), id番号)): ?>
<!-- スラッグが〇〇とid番号が〇〇の固定ページの時の処理 -->
<?php endif; ?><?php if(is_home() || is_front_page()): ?>
<!-- トップページかフロントページの時の処理 -->
<?php endif; ?>複数の条件分岐のパターン
<?php if(条件1):?>
条件1を満たす場合
<?php elseif(条件2):?>
条件2を満たす場合
<?php else:?>
どちらの条件も満たさない場合
<?php endif;?> WordPressをもっと学びたい方はこちらもオススメです！
コメント