一つのWordpressで複数のヘッダーを使い分けたい時のやり方をメモ。
今回このウェブサイトの例では、英語のページと日本語のページをみたときに、英語のカテゴリーメニューと、日本語のカテゴリーメニューで分けて表示できるようにする。
下記は、英語ページとして利用しているhttp://snownotes.her.jp/のページのメニュー。
下記は日本語ページとして利用しているhttp://snownotes.her.jp/japanese/のメニュー。
ステップととしては下記のようになる。
- 新たなヘッダーファイルを用意する
- 「外観>メニュー」で新たなメニューを作成
- function.phpでメニューの位置を登録
- 新たなヘッダーページで、メニュー名を入れる
- 新しいヘッダーを表示したいページにあてはめる
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'); ?>
すると、分かれて表示されるようになる。