ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【WordPress】特定のページだけデザインなどを変更する方法 + おもな条件分岐タグ

【WordPress】特定のページだけデザインなどを変更する方法 + おもな条件分岐タグ

「WordPressで特定のページだけデザインを変更したい」
「WordPressで条件分岐する方法がわからない」

悩み

こういった悩みにお答えします。

目次
  1. 特定のページだけデザインなどを変更する方法
    1. PHPのif文を使う
    2. WordPressの条件分岐方法
  2. おもな条件分岐タグ
    1. トップページ is_front_page()
    2. 固定ページ is_page()
    3. 個別投稿ページ is_single()
    4. アーカイブ(一覧)ページ is_archive()
    5. 投稿タイプ一覧ページ is_post_type_archive()
    6. シングルページ is_singular()
  3. まとめ

特定のページだけデザインなどを変更する方法

前提として、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制作案件などカスタマイズをしていくには必須です。
しっかり理解して使えるようになるとレベルアップにつながります。