一つのWordPressで複数のヘッダーを使い分ける

一つのWordpressで複数のヘッダーを使い分けたい時のやり方をメモ。

「Conditional Menus」というプラグインを使って複数ヘッダーを用意する方法と、プラグインを使わず、新しくheader.phpを用意して作成していく方法と、二つ解説していく。

プラグインを使って複数ヘッダーを追加する場合

「Conditional Menus」というプラグインによって、複数ヘッダーを追加することができる。

プラグインに追加し、有効にする。

「外観＞メニュー」に移動し、「メニューを編集」タブの横にある「位置を管理」を押すと下記のような管理画面に映る。

ここで用意したもう一つのメニューを選択し、「＋Condition」を押すと、どこのページでもう一つのメニューを表示させたいかを設定することができる。

別メニューを用意するやり方は、「外観＞メニュー」の「メニューを編集」タブで、「新しいメニューを作成しましょう」というリンクから作成できる。

固定ページ毎に設定することもできるし、あるカテゴリーだけメニュー２を表示させる、ということもできる。

以上がプラグインを使った複数ヘッダーメニューを表示させる方法となる。

次はプラグインなしの方法を解説する。

プラグインなしで複数ヘッダーを追加する場合

ステップととしては下記のようになる。

1. 新たなヘッダーファイルを用意する
2. 「外観＞メニュー」で新たなメニューを作成
3. function.phpでメニューの位置を登録
4. 新たなヘッダーページで、メニュー名を入れる
5. 新しいヘッダーを表示したいページにあてはめる

1.新たなヘッダーファイルを用意

ヘッダーの数の分だけ固定ページ用のテンプレートを用意。名前は"header-〇〇"という形で好きな名前を入れて良い。

今回は日本語メニューの準備のため、header-jpという名前で新しいヘッダーファイルを用意。

2.「外観＞メニュー」で新たなメニューを作成

自分の好きなもう一つのメニューを作る。

3. function.phpでメニューの位置を登録

下記のコードをfunction.phpに入れる。ステップ2で作成したメニュー名をfunction.phpに加える。

//メニューの位置を登録
register_nav_menus ( array (
        'gnav' => 'グローバルメニュー',
        'jp-menu' => '日本語メニュー',
));

すると下記のような部分ができるので、ここで自分が新しく作ったメニューの位置を選ぶ。デフォルトで設定したいメニューはナビゲーションに設定する。

4.　新たなヘッダーページで、メニュー名を入れる

ナビゲーションメニューを表示するためには下記のコードを入れる必要がある。

wp_nav_menの部分で、自分が決めたメニュー名を加える。今回の例なら、header-jp.phpのファイルの中で、"jp-menu"を〇〇の中に加えた。

//ナビゲーションメニューを表示
<?php 
  wp_nav_menu( array( 
    'theme_location' => 'jp-menu' 
  ) ); 
?>

5. 新しいヘッダーを表示したいページにあてはめる

最後に、新しいヘッダーを表示させたいページのget_headerの（）の中に、header-〇〇.phpでつけた〇〇の部分を入れる。今回の例ならheader-jp.phpのjpを当てはめる。

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

すると、分かれて表示されるようになる。

<php get_header() ;?>とは

<php get_header() ;?>は「インクルードタグ」と呼ばれるもので、header.phpのヘッダーコードを別ファイルで呼び出す際に、使うタグ。

フッターも同じように<php get_footer() ;?>を使って呼び出すことができる。

これらのタグはwordpressで自作テーマを作成するときに必ず使うので、覚えておくと良い。

インクルードタグの説明含む、自作テーマの作成については、下記にまとめた。

以上がプラグインを使わない方法になる。

ヘッダーについてあれこれ

ヘッダーについてこちらも参考になるかも。

下記に、HTMLとCSS、Javascriptを使ったwebサイトの作り方についてまとめた。

ワードプレスの使い方については、下記にまとめた。