【WordPress】固定ページのデザインを変える場合の4つの方法
2018.05.30
wordpressでwebサイトを制作する時に固定ページ毎にデザインを変える場合が多々出てきます。
デザインを変えると言っても他ページとは全く別レイアウトなのか、CSSでデザインを調整するレベルなのか。
今回は状況に応じた固定ページのデザインを変える方法について、4つの方法を紹介していきます。
その1.テンプレート階層を利用する
テンプレート階層はこんなケースにおすすめ
レイアウトから見出しデザインまで、完全に独自のデザインにする必要があるページはwordpressのテンプレート階層を利用する方法が適しています。
テンプレート階層とは、テンプレートファイルを出力する時の優先順位の事で、階層のルールに従って表示されるテンプレートが決まります。
テンプレート階層の概観図はWordPress Codexのページで確認できます。
テンプレート階層を利用する方法
固定ページは通常page.phpで作成しますが、pageの後に、ID番号やスラッグ名をつけるとテンプレート階層のルールでそちらのファイルが優先されます。
例えば「会社情報」「アクセス」「お問い合わせ」のうち、「会社情報」ページだけ独自のテンプレートを適応させたい場合は
page-company.phpのファイルを作成し、
管理画面の会社情報の編集ページのスラッグ部分に「company」と入れると優先的にpage-company.phpが読み込まれるという仕組みです。
その2.カスタムテンプレートを作成する
カスタムテンプレートはこんなケースにおすすめ
その1で紹介したテンプレート階層は1ページ1デザインといった時に適していますが、
サイト内にいくつかのレイアウトパターンがあり、
1レイアウトに対し複数ページが該当する場合は、
カスタムテンプレートで管理画面からテンプレートを選択出来るようにすると便利です。
カスタムテンプレートの作成方法
まず、page-[テンプレート名].phpのファイルを作成します。
この時、テンプレート名はわかりやすく、
またテンプレート階層で作成する場合と被らないような名前をつけましょう。
次にソースの1番上に下記を記述してください。
<?php
/*
Template Name: テンプレート名
*/
?>
これで管理画面の編集ページ、テンプレートのプルダウンメニューにTemplate Nameに指定したテンプレート名が表示され、選択出来るようになります。
例えば、page-1column.phpをファイル名とし、Template Nameの所を1カラム用テンプレートとすると、編集ページの右側ページ属性のところに、テンプレートのプルダウンが出てくるので、1カラム用テンプレートを選択すればpage-1column.phpが適応されます。
その3.is_page()の条件分岐タグを使う
条件分岐タグはこんなケースにおすすめ
基本は共通のデザインだけど「この部分だけ」といった”一部分”に対して、デザインや機能を追加したり消したりしたい場合条件分岐を使うのが便利です。
is_page()を使った条件分岐の方法
固定ページかどうかというの条件分岐にはis_page()の関数を使います。
<?php if ( is_page(‘スラッグ名もしくはID番号’) ) : ?>
固定ページの{スラッグ名もしくはID番号}のページのみに表示
<?php else: ?>
それ以外のページで表示するものをココに
<?php endif; ?>
例えば・・・
・会社情報ページとアクセス情報ページにはAのヘッダー画像を表示
・お問い合わせページにはBのヘッダー画像を表示。
・それ以外のページはヘッダー画像を表示させない。
といったケースの場合
<?php if(is_page( array( lesson, access ) ) ): ?>
<!--会社情報ページとアクセス情報に表示させたい内容-->
<img src="<?php echo get_template_directory_uri(); ?>/images/bnr.png" ; ?>
<?php elseif(is_page( 'profile' ) ): ?>
<!--お問い合わせページに表示させたい内容-->
<img src="<?php echo get_template_directory_uri(); ?>/images/news_icon.svg" ; ?>
<?php else: ?>
<!--それ以外に表示させたい内容(入れる内容がない場合は空)-->
<?php endif; ?>
▼特定の固定ページを複数指定する場合
array( lesson, access )
▼数パターンの分岐を行う場合
elseifを使う
またスラッグ名だけではなく、ページIDでの指定も可能です。
- ページIDの調べ方
- 管理画面、ページの編集画面を開き、ブラウザ上のURLを見ます。
?post=の後に続く数字がページIDです。
その4.body_class()関数でbody要素に独自のclassを付与する
body_class()関数はこんなケースにおすすめ
一見条件分岐でも良いのではと思いますが、body_class()関数を使う事で、ページ毎にclassが付与されます。
ページ毎にcssでスタイルを調整する時などに大変便利です。
body_class()関数でbody要素に独自のclassを付与する方法
body要素にbody_class()を記述するだけです。
<body <?php body_class(); ?>>
こうすると固定ページ、投稿ページ、トップページなどのそれぞれのページに応じてbodyタグにclassが付与されます。
以下は固定ページの場合に付与されるclassの例です。
このように、表示されているページのid番号を取得しclassになるので、特定のページに対してcssでデザインを調整する事が可能というわけです。
もし自動で付与されるclass以外にclass名を指定したい場合は、
<body <?php body_class('クラス名'); ?>>
このように記述すればOKです。複数ある場合は半角スペースで区切って記述してください。
また、スラッグ名を取得する事も可能です。
functions.phpに以下のコードを記述します。
add_filter( 'body_class', 'add_page_slug_class_name' );
function add_page_slug_class_name( $classes ) {
if ( is_page() ) {
$page = get_post( get_the_ID() );
$classes[] = $page->post_name;
}
return $classes;
}
こうする事で、例えばスラッグ名が「profile」のページでは、body要素にprofileというclassが付与されます。
<body class="page page-id-153 page-template-default profile">
まとめ
固定ページのデザインを変える場合の4つの方法を紹介しました。
実際制作にあたっては適宜4つの方法を織り交ぜながら、計画的に設計し開発する必要があります。
サイト構造をしっかり把握し、制作側にとっても運用していく側にもわかりやすいWEBサイトを作っていきましょう！
関連
Webサイト制作
Webサイト制作
SEO外部対策SEO対策
