「WordPressで特定のページだけデザインを変更したい」
「WordPressで条件分岐する方法がわからない」
こういった悩みにお答えします。
私は、2015年頃からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。
- 目次
特定のページだけデザインなどを変更する方法
前提として、WordPressの固定ページ、投稿ぺージのテキストエディタではPHPをそのまま使うことができません。
この記事では、テンプレートファイル(header.php、footer.php、sidebar.phpなど)の編集を想定した記事です。
PHPのif文を使う
WordPressはPHPでつくられたCMSなので、PHPのif文を使います。
基本的な書き方は以下の通りです。
<?php if( ●●条件 ){ ?> ●●条件のときに表示させたいHTMLタグ <?php } ?>
書き方はいくつかの種類がありますが、好きな方法でかまいません。
<?php if( ●●条件 ){ ?> ●●条件のときに表示させたいHTMLタグ <?php } ?> <?php if( ●●条件 ) : ?> ●●条件のときに表示させたいHTMLタグ <?php endif; ?> <?php if( ●●条件 ) : ?> ●●条件のときに表示させたいHTMLタグ <?php endif; ?>
ただし、後から見直したときに自分で理解できる書き方、できれば、もし別の人が見ても理解できる書き方をすることをおすすめします。
- POINT
- PHPを書くときは誰が見てもわかるような書き方をしよう!
WordPressの条件分岐方法
WordPressではページの表示にいくつかの種類(トップページ、固定ページ、投稿ページなど)があります。
これらのぺージを特定するために独自の条件分岐タグが用意されています。
例えば、トップページだけにロゴを表示させたい条件の場合は「 is_front_page() 」という条件分岐タグを使い、間にimgタグを書きます。
<?php if( is_front_page() ){ ?> <img src="logo.jpg" alt="ロゴ"> <?php } ?>
おもな条件分岐タグ
WordPressで使うことができるおもな条件分岐タグを紹介します。
トップページ is_front_page()
トップページの場合はis_home()を使うこともあります。
<?php if( is_front_page() ){ ?> トップページのときに表示させたいHTMLタグ <?php } ?>
固定ページ is_page()
固定ページすべてに適用する場合。
<?php if( is_page() ){ ?> 固定ページすべてに表示させたいHTMLタグ <?php } ?>
特定の固定ページすべてに適用する場合は「is_page()」のカッコの中に、投稿ID、投稿スラッグ、投稿タイトルのいずれかを入れます。
<?php if( is_page( "contact" ) ){ ?> 特定の固定ページのときに表示させたいHTMLタグ <?php } ?>
複数の固定ぺージを指定したい場合は以下のように書きます。
<?php if( is_page( array( "contact","confirm","complete" ) ) ){ ?> 複数の固定ページのときに表示させたいHTMLタグ <?php } ?>
個別投稿ページ is_single()
個別投稿ページすべてに適用する場合。
<?php if( is_single() ){ ?> 個別投稿ページすべてに表示させたいHTMLタグ <?php } ?>
特定の個別投稿ページすべてに適用する場合は「is_single()」のカッコの中に、投稿ID、投稿スラッグ、投稿タイトルのいずれかを入れます。
<?php if( is_single( 11 ) ){ ?> 特定の個別投稿ページのときに表示させたいHTMLタグ <?php } ?>
複数の個別投稿ぺージを指定したい場合は以下のように書きます。
<?php if( is_page( array( 11, 14, 21 ) ) ){ ?> 複数の個別投稿ページのときに表示させたいHTMLタグ <?php } ?>
アーカイブ(一覧)ページ is_archive()
アーカイブページ(カテゴリー、タグ、その他のタクソノミー項目、カスタム投稿タイプアーカイブ、作成者、日付別)すべてに適用する場合。
<?php if( is_archive() ){ ?> アーカイブページすべてに表示させたいHTMLタグ <?php } ?>
投稿タイプ一覧ページ is_post_type_archive()
投稿タイプ一覧ページすべてに適用する場合。
<?php if( is_post_type_archive() ){ ?> 投稿タイプ一覧ページすべてに表示させたいHTMLタグ <?php } ?>
特定の投稿タイプ一覧ページに適用する場合は「 is_post_type_archive() 」のカッコの中に、スラッグを入れます。
<?php if( is_post_type_archive( "news" ) ){ ?> 特定の投稿タイプ一覧ページに表示させたいHTMLタグ <?php } ?>
複数の投稿タイプ一覧ページを指定したい場合は以下のように書きます。
<?php if( is_post_type_archive( array( "news", "blog", "info" ) ) ){ ?> 複数の投稿タイプ一覧ページのときに表示させたいHTMLタグ <?php } ?>
シングルページ is_singular()
シングルページ (固定ページ、個別投稿ページ、添付ファイルページ)に適用する場合。
<?php if( is_singular() ){ ?> シングルページすべてに表示させたいHTMLタグ <?php } ?>
特定のシングルページに適用する場合は「 is_singular() 」のカッコの中に、スラッグを入れます。
<?php if( is_singular( "news" ) ){ ?> 特定のシングルページに表示させたいHTMLタグ <?php } ?>
複数のシングルページを指定したい場合は以下のように書きます。
<?php if( is_singular( array( "news", "blog", "info" ) ) ){ ?> 複数のシングルページに表示させたいHTMLタグ <?php } ?>
まとめ
WordPressで特定のページだけデザインなどを変更する方法、おもな条件分岐タグを紹介しました。
条件分岐タグは、WordPressでWeb制作案件などカスタマイズをしていくには必須です。
しっかり理解して使えるようになるとレベルアップにつながります。