Categories: WordPress

WordPressで条件によって見せ方を変える(条件分岐)

サイト内のページによって見え方を変えたい場合、CSSだけで対応できる場合

CSSで対応する方法

殆どのテーマでは、body_class()関数がbobyタグのところに仕込まれてます。

 >

このおかげで、ページを識別できるようになっています。
たとえば、ログイン中に表示された投稿ページの場合、こんな感じにclassがついてきます。

 

そこで、投稿ページ(single-post)のときだけ、P要素の文字サイズを変えたいときは、

.single-post p{
	font-size:110%;
}

とすればOKです。

また、IDを直接指定すれば、任意のページだけを変えることもできます。

.postid-1049 p{
	font-size:110%;
}

ちなみに、singular は、固定ページか投稿の個別ページの時につきます。

くわしくはこちら
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/body_class

テンプレートで分ける方法

テンプレートファイルを作成して、任意のページに対してデザインを変えることができます。

たとえば、固定ページのテンプレートを作成するには、今使っているテーマのpage.phpをコピーして、page-test.phpなどのように、独自のファイル名をつけて保存します。

そして、そのファイルの先頭に、以下を追加します。

これで、このファイルはテンプレートファイルとして機能します。
ためしに、固定ページを作成すると、テンプレートで「テスト用」が選べるようになっていますので、任意の固定ページでデザインをかることができるわけです。

ちなみに、page-test.phptというファイル名をつけた場合、slugがtestという固定ページの場合、自動的にこのテンプレートファイルが適用されることになります。
また、page-561.phpのようにIDを使ってファイル名をつけることで、IDで決め打ちすることもできます。

投稿の個別ページの場合は、slugや、IDでは使い分けできません。ブログですからね。
ただし、single-test.php とすると、カスタム投稿名がtestのカスタム投稿の時に有効になりますので、カスタム投稿別にテンプレートを変えることができます。

他にも、category-123.php とすれば、カテゴリーIDが123のカテゴリーページで使われるテンプレートになりますし、tag-test.phpとすれば、slugがtestのtagページのテンプレートとして有効になります。

くわしくは、こちら
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

条件分岐で分ける方法

テンプレート内のコードで分岐する方法です。
たとえば、

if (is_page('test'){
    echo '
  

' . get_the_title() . '

'; }else{ echo '

' . get_the_title() . '

'; }

とすれば、slugがtestの固定ページのときだけ、タイトルのタグをH2にする、といったことができます。

また、固定ページのテンプレートに連動して、例えばheader.phpの内容を変えたい場合は、

if (is_page_template( 'page-test.php' ){
    echo '

' . wp_title('') . '

'; }else{ echo '

' . wp_title('') . '

'; }

のようにすれば、テンプレートファイル別で切り替えることができます。

他にも、

is_page(‘test’) とすれば、slugがtestの固定ページのとき、
is_page(‘123‘) とすれば、IDが123の固定ページのとき、
is_page(array(123,133,143)) とすれば、IDが123か、133か、143の固定ページのとき、

同様に、
is_single(‘123’) 
のようにすれば、投稿の個別ページでの分岐に使えます。

分岐でよく使うけど、ややこしいのが、is_single() と is_singular() のちがい。

is_single() は投稿の個別ページのときに真になりますが、
is_singular() は、固定ページや、投稿の個別ページの時に真になります。

くわしくはこちら
https://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0

nakaike