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

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

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

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

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

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

Genesis Sampleのデフォルトのメニュー
デフォルトのメニュー
 カスタマイズ後のGenesis Sampleのメニュー
カスタマイズ後のメニュー

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で右クリック→検証から確認してください。