Wordpress

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

2020-03-30

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

今回このウェブサイトの例では、英語のページと日本語のページをみたときに、英語のカテゴリーメニューと、日本語のカテゴリーメニューで分けて表示できるようにする。

下記は、英語ページとして利用しているhttp://snownotes.her.jp/のページのメニュー。

下記は日本語ページとして利用しているhttp://snownotes.her.jp/japanese/のメニュー。

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

  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'); ?>

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

-Wordpress