【Genesis Framework】ナビゲーションメニューの表示位置を変更する方法

2019年8月16日

Genesis Frameworkにおいて、ナビゲーションメニューは基本的に以下の２ヶ所に設置されています。

ヘッダー：プライマリーナビゲーションメニュー
フッター：セカンダリーナビゲーションメニュー

このうちフッターに表示されているセカンダリーナビゲーションメニューをヘッダー右上に表示する方法を紹介します。

セカンダリーメニュー表示位置の変更する方法

例としてGenesis frameworkを購入するとついてくる子テーマ「Genesis Sample」を使います。デフォルトではプライマリメニュー1行しかないですが、フッターメニューの位置をヘッダー上にすることで2行にします。

1. WordPressの管理画面　→「外観」→「テーマエディター」と開く。

2. 次に編集したいgenesis子テーマを選択し、function.phpを開く。
（編集に失敗したときのためにfunction.phpは別途ダウンロードするなどしてバックアップを取っておく）

3. 以下のコードがあると思うので、

// Repositions the secondary navigation menu.
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_footer', 'genesis_do_subnav', 10 );

4. 次のコードで置き換えて、更新する。

// セカンダリーメニューの位置を変える
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before_header', 'genesis_do_subnav' );

追加CSSに以下のコードを加える。

/*　メニューを右寄せにする　*/
.nav-secondary{
	margin: .3em 2em;
	text-align:right;
}

以上で、完了です。

クラス名は.nav-secondaryとなっていますが、子テーマによって名称が異なる場合は、google chromeで右クリック→検証から確認してください。