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

更新日:2022年02月20日 /  投稿日:2022年02月23日

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

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

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

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

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

トップページ用ヘッダー

トップページ用ヘッダー

背景に画像を大きく配置し、その上に縦型にロゴやグローバルナビを配置したパターンです。
トップページ用のヘッダーは今回はこのパターンのものを用意し、ファイル名を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サイトを制作する際には、こうした方法を覚えておくと役に立つと思いますので、ご興味のある方は是非一度試してみてください!

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら