トップページとサブページのカスタマイズ

前回の記事「テンプレートファイルの分割」の続きです。
トップページと各サブページをCSSやPHPの条件分岐で、ページごとの表示をカスタマイズします。

Contents

トップページのカスタマイズ

トップページのヘッダーはstyle.cssファイルでスタイルをカスタマイズ、タイトルバナーとパンくずリストをheader.phpファイルで非表示にカスタマイズします。
メインエリアはトップページ用のテンプレートファイルfront-page.phpを追加して編集します。

トップページのスタイルをstyle.cssに追加

デザインに拠りますが、このサンプルテーマの場合、<header>〜</header>のカスタマイズはstyle.cssファイルに以下の記述を追加するだけでOKです。

▼style.css

コードを表示

header.phpファイルのカスタマイズ

トップページにタイトルバナーとパンくずリストは必要ないので、is_front_page()でトップページを判別して出力を除外します。

▼header.php

 テンプレートタグ  is_front_page()

現在のページが固定ページで且つフロントページに設定されているかを判定します。
公式マニュアル

front-page.phpの追加

トップページのテンプレートファイルfront-page.phpをテーマディレクトリに追加します。
page.phpファイルを複製してfront-page.phpにリネームして、以下の内容に書き換えます。

▼front-page.php

コードを表示

「新着情報」と「ピックアップ」は後ほどプログラム化しますので、とりあえずコーディングのみしておきます。

サブページのカスタマイズ

サブページは下図のようにコンテンツエリアのタイトルバナーとサイドバーがページごとに切り替わるようにカスタマイズします。

CSSでタイトルバナーの表示切り替え

タイトルバナーの画像はバナーエリアの<h2>タグに各ページのスラッグをclass属性に設定しましたので、これをセレクタにしてCSSでバナー画像を指定します。

▼style.css

コードを表示

サイドバーの表示切り替え

サイドバーの内容はis_page()で条件分岐して、「新着情報」「企業情報」「制作実績」(および「企業情報」のサブページ)でそれぞれ次のようにメニュー表示を切り替えます。その他のページはバナーエリアのみ表示します。
「新着情報」と「制作実績」のメニューはこの後の手順でプログラム処理させますので、この時点では簡単な表示だけ記述しておきます。

▼sidebar.php

コードを表示

 テンプレートタグ  is_page($name)

現在のページが固定ページか否かを判定します。
パラメータに記事ID、タイトル、スラッグのいずれか、または配列(array(【ID】,【タイトル】,【スラッグ】))を設定することで、特定の固定ページを判別します。
公式マニュアル

以上でサイトのナビゲーション周りのコーディングとテンプレート化は概ね完了です。


【次の手順→】 固定ページのメインエリア編集
【←前の手順】 テンプレートファイルの分割

PR

DO WP 管理人