WordPressでページによってメニューを出し分ける


  1. Staff Blog
  2. WordPress
  3. WordPressでページによってメニューを出し分ける

例えばランディングページや採用情報ではヘッダーのグローバルメニューを通常の項目と別の内容を表示したい場合があるかもしれません。

ページによってメニューの内容を差し替えるとユーザーが混乱するので今までやろうと思った事はないのですが、LPなどではたしかに変更したい場合も確かにありえるので考えてみましたが、子テーマの functions.php に以下のように書けば実現できます。

// 下階層用のメニューを追加
add_action(
	'after_setup_theme',
	function() {
		// 採用情報用のナビゲーションを登録
		register_nav_menus( array( 'global-nav-recruit' => 'Header Navigation Recruit' ) );
		// ランディングページ用のナビゲーションを登録
		register_nav_menus( array( 'global-nav-lp-001' => 'Header Navigation LP-001' ) );
	}
);

// 下階層用のメニューの差し替え処理
add_filter(
	'wp_nav_menu_args',
	function( $args ) {

		// 差し替え対象のメニューの位置を指定
		// Lightning G3 のヘッダーナビゲーションの場合 gloval-nav
		if ( 'global-nav' === $args['theme_location'] ) {

			// 固定ページの場合
			if ( is_page() ) {

				/**********************************
				 * 先祖階層の情報を取得
				 */

				global $post;
				// 表示中のページの先祖階層情報を取得
				$ancestors = get_post_ancestors( $post->ID );
				// 先祖階層を取得しやすいように配列の中身を逆順にする
				$reversed_ancestors = array_reverse( $ancestors );

				$ancestor_page_name = '';
				// 先祖階層が存在する場合
				if ( ! empty( $reversed_ancestors[0] ) ) {
					// 先祖階層の投稿情報を取得
					$ancestor_post = get_post( $reversed_ancestors[0] );
					// メニューを差し替える先祖階層の固定ページの post_name(スラッグ)を指定
					if ( 'recruit' === $ancestor_post->post_name ) {
						$ancestor_page_name = 'recruit';
					}
				}

				/**********************************
				 * メニューの指定の差し替え
				 */

				 // 表示中の固定ページが採用情報階層の場合
				if ( is_page( 'recruit' ) || 'recruit' === $ancestor_page_name ) {
					// 差し替えるメニュー対象を指定
					$args['theme_location'] = 'global-nav-recruit';

				// 表示中の固定ページのスラッグが lp-001 の場合
				} elseif ( is_page( 'lp-001' ) ) {
					// 差し替えるメニュー対象を指定
					$args['theme_location'] = 'global-nav-lp-001';
				}
			}
		}
		return $args;
	}
);

先祖階層の取得方法はもう少しスマートな方法があるような気もしますので、ご指摘は @kurudrive でお待ちしております。

フルサイト編集のテーマだとこのあたりもノーコードでカスタマイズできるようになるので、そちらの準備もがんばります。

この記事を書いた人

石川栄和代表取締役
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー(LT)
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
VK FullSite Installer のロゴ

これまでにないスピード
自分好みの WordPress サイトが立ち上がる

選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。

爆速!!1分デモサイトと同じ
ホームページができる

VK FullSite Installer のロゴ

選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。

フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。


このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP