VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

ヘッダー、フッターにナビゲーションメニューを追加

ヘッダー、フッターにナビゲーションメニューを追加する手順の例を示します。

1)functions.phpにregister_my_menus()関数を追加
 
設定例)

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => 'Header Menu',
      'footer-menu' => 'Footer Menu'
    )
  );
}
add_action( 'init', 'register_my_menus' );

 
2)管理画面にメニューが追加できるようになっているか確認
 
「外観」→「メニュー」でメニュー画面を開く
 
左上の”メニューの場所”の部分に’Header Menu’と’Footer Menu’が表示され、メニューを設定できるようになります。
 
3)header.phpにナビゲーションメニューを追加
 
以下、ヘッダーにメニューを追加する例を示します。
 
設定例)
header.phpファイル内の適切な場所に下記コードを追加します。
 
<nav class=”main-navigation”>
<?php wp_nav_menu( array( ‘theme_location’ => ‘header-menu’ ) ); ?>
</nav>
 
4)ナビゲーションメニューのスタイル設定追加
 
スタイルシートの設定方法はあまり詳しくないので、下記サイトの設定を流用しました。
CSSでドロップダウンメニュー
 
①上記サイトの一番下のコードをコピーし、”#menu-sample”を”.main-navigation”に置換します。
 
②スタイルシート (style.css)に上記コードをコピー。
 
③上記参考サイトにならって、header.phpにIE7対応のコードをコピー。
 
5)管理画面でメニューを作成
 
以下、ヘッダーにメニューを追加する例を示します。
 
「外観」→「メニュー」でメニュー画面を開く
 
①画面中央のメニュー編集画面で”+”ボタン(メニューを追加ボタン)を押下します。
 
②”メニューの名前”に入力
 
③固定ページやカテゴリーなどをメニューに追加
 
④各メニュー項目をドラッグアンドドロップして、メニューの表示順番や階層(メニュー項目を右にずらして配置するとサブメニューになります)を設定します。
 
⑤”メニューを保存”をクリック。
 
⑥左上の”テーマの場所”で上記で作成したメニューを指定します。
 
ここでは、”Header-Menu”欄に②で指定したメニュー名を指定し、保存します。
 
 
上記方法でヘッダーにナビゲーションメニューを表示できるようになりました。

モバイルバージョンを終了