WordPressでヘッダーを任意のヘッダーに変更する方法

WEBサイトによってはトップページのヘッダーと下層ページのヘッダーで、デザインそのものが違ったりする事もあります。

今回は、トップページと下層ページでヘッダーを分け、ページによって任意のヘッダーを読み込ませる方法をご紹介していきます！

関連記事：0から始めるWordPress自作テーマ作成【header.php作成編】

まずはヘッダーを用意します

まずは、トップページ用のヘッダーと、下層ページ用のヘッダーを用意します。
イメージとしては、以下のようなヘッダーになります。

トップページ用ヘッダー

背景に画像を大きく配置し、その上に縦型にロゴやグローバルナビを配置したパターンです。
トップページ用のヘッダーは今回はこのパターンのものを用意し、ファイル名をheader.phpとします。

下層ページ用ヘッダー

よく見かけるページ上部にロゴとグローバルナビを配置したタイプですね。
下層ページ用のヘッダーは今回はこのパターンのものを用意し、ファイル名をheader-page.phpとします。

テンプレートファイルから、ヘッダーを呼び出すコードを書く

トップページ用のヘッダーと下層ページ用のヘッダーが用意できましたら、次は、各テンプレートファイルから、それぞれのヘッダーを呼び出します。

front-page.phpもしくはhome.phpからヘッダーを呼び出す

まずはトップページを表示させるテンプレートファイルに、ヘッダーを呼び出すテンプレートタグを記述していきます。

以下のテンプレートタグをトップページを表示させるfront-page.phpもしくはhome.phpに記述します。

<?php get_header(); ?>

page.phpから下層ページ用のヘッダーを呼び出す

次に、下層ページを表示させるpage.phpに、下層ページ用のヘッダーを呼び出すテンプレートタグを記述していきます。

以下のコードをpage.phpに記述します。

<?php get_header('page'); ?>

headerの()の中に、ファイル名のハイフン( – )以降の文字「page」をget_header()の()の中に記述します。

作業はこれで終わりです！

後は実際の表示を確認して、無事トップページと下層ページでヘッダーが変わっていたら完了です。

まとめ

WordPressでヘッダーを任意のヘッダーに変更する方法についてご紹介いたしましたが、いかがだったでしょうか？

ヘッダーはサイトによって、トップページと下層ページで違ったりといったパターンがあります。

WordPressでそうしたWEBサイトを制作する際には、こうした方法を覚えておくと役に立つと思いますので、ご興味のある方は是非一度試してみてください！