Apuraのナビゲーションメニュー設定ガイド｜PCメニューとモバイル3タイプを使いこなす

タイトル：Apuraのナビゲーションメニュー設定ガイド｜PCメニューとモバイル3タイプを使いこなす

「スマホで見たときのメニューの開き方を変えたい」「ヘッダーメニューの位置を中央に寄せたい」「サブメニューや説明文付きのナビゲーションを作りたい」——サイトのナビゲーションは、訪問者が迷わず目的のページへたどり着けるかを左右する重要な部分です。Apuraテーマには、PC用のヘッダーメニューに加えて、ドロップダウン・フルスクリーン・オフキャンバスの3タイプから選べるモバイルメニューが標準で用意されています。

この記事では、メニューの登録方法から、PC・モバイルそれぞれの設定、サブメニューや説明文の表示、さらに開発者向けのフックを使った拡張までを順番に解説します。

Apuraに用意されている3つのメニュー位置

WordPressでは、テーマが「メニューを表示できる場所（メニューロケーション）」をあらかじめ登録しておき、利用者は「外観 → メニュー」で作ったメニューをその場所に割り当てて使います。Apuraでは次の3つのロケーションが用意されています。

メニュー名	表示場所	備考
Header Menu	ヘッダーの横並びナビゲーション（PC）	未設定だとPCメニューは表示されない
Mobile Menu (Optional)	モバイルメニュー内のナビゲーション	未設定ならHeader Menuが自動で使われる
Footer Menu	フッターのナビゲーション	1階層のみ（サブメニュー非対応）

ポイントは「Mobile Menu」が任意（Optional）だということです。

割り当てなければHeader Menuがそのままモバイルでも使われるため、PCとスマホで同じ構成なら設定はHeader Menuだけで完結します。一方で「スマホでは項目を絞りたい」というときだけMobile Menuを作って割り当てれば、PCとモバイルでメニュー内容を出し分けられます。

PC用ヘッダーメニューの設定

PCメニューに関する設定は、カスタマイザー（外観 → カスタマイズ）の「ヘッダー」→「メニュー」から行います。主な項目は次のとおりです。

設定項目	内容	初期値
Menu Position	メニューの寄せ位置（Start／Center／End）	-（レイアウト依存）
Enable Dropdown Icon	子メニューを持つ項目に矢印アイコンを表示	ON
Menu Link Color	リンクの通常色・ホバー色	テーマ標準色

「Menu Position」を空（-）のままにすると、ヘッダーレイアウトに応じた位置が自動的に選ばれます。たとえばロゴを上に配置するレイアウトではメニューが中央寄せ、メニューを下段に置くレイアウトでは左寄せになります。意図的に寄せ位置を固定したい場合だけ、Start／Center／Endを明示的に選びましょう。

モバイルメニューの3タイプを選ぶ

Apuraの大きな特長が、モバイルメニューの開き方を3タイプから選べることです。カスタマイザーの「ヘッダー」→「モバイル」→「Menu Type」で切り替えます。初期値はFullscreenです。

タイプ	動作	向いているサイト
Dropdown	ヘッダー直下にメニューがスライドして開く	項目数が少ないシンプルなサイト
Fullscreen	画面全体を覆うモーダルでメニューを表示	項目が多い・没入感を出したいサイト
Offcanvas	左右どちらかから引き出しのように開く	アプリ風のUIにしたいサイト

Dropdown（ドロップダウン）の設定

Dropdownを選ぶと、「Animation Duration（アニメーション時間）」が設定できます。100〜800ミリ秒の範囲で、開閉の速さを調整できます。0に設定するとアニメーションなしで即座に開閉するため、動きを抑えたいときに便利です。

Offcanvas（オフキャンバス）の設定

Offcanvasでは、メニューを引き出す方向（Opening Direction：Left／Right、初期値はLeft）と、背景を暗くするオーバーレイの有無・色を設定できます。オーバーレイを有効にすると、メニューを開いている間は背景がスクロールしないように制御され、誤操作を防げます。

Fullscreen（フルスクリーン）の設定

Fullscreenでは、画面を覆うオーバーレイの色（Overlay Color、初期値は白）を設定できます。背景色をブランドカラーに合わせたり、半透明にして下の画面をうっすら見せたりと、印象を大きく変えられます。

モバイルメニューの中身をカスタマイズする

モバイルメニューの内部に何を表示するかは、「General Settings」の「Menu Elements」で並び替えながら設定できます。選べる要素は次の3つで、ドラッグして表示順も変更できます。

• Menu：ナビゲーションメニュー本体（初期で有効）
• Search：検索フォーム（初期で有効）
• HTML：自由なテキスト・HTML・ショートコード

「HTML」要素を追加すると、テキストエリアに入力した内容がそのままメニュー内に表示されます。通常のテキストはもちろん、バナー用のHTMLや、お問い合わせボタンを出力するショートコードなども配置できます。たとえばCTAボタンや営業時間の案内をメニュー内に常駐させたいときに役立ちます。

このほか、メニューのリンク色（Menu Link Color）や、ハンバーガーボタンの横に表示する開閉テキスト（Menu Open Text／Menu Close Text）も設定できます。「MENU」「CLOSE」といった文言を添えると、アイコンだけのときよりも操作が直感的になります。

サブメニューと説明文を活用する

Apuraのナビゲーションは、階層メニュー（サブメニュー）にもしっかり対応しています。ヘッダーメニューとモバイルメニューでは、子項目を持つメニューに開閉用のトグルボタンが自動で追加され、タップやクリックで子メニューを展開できます。これはアクセシビリティに配慮した <button aria-expanded> として出力されます。

さらに、メニュー項目に「説明（description）」を入力すると、リンクの下に小さなサブテキストとして表示されます。

説明欄は「外観 → メニュー」で各項目を展開した中にありますが、表示されていない場合は画面右上の「表示オプション」から「説明」にチェックを入れてください。

「会社案内」の下に「私たちについて」といった補足を添えると、メニューがぐっと親切になります。

開発者向け：フックでナビゲーションを拡張する

子テーマやプラグインからナビゲーションをカスタマイズしたい場合は、Apuraが提供するフィルター・アクションフックを利用します。主なフックは次のとおりです。

フック名	種類	用途
apura_before_offcanvas_nav / apura_after_offcanvas_nav	アクション	オフキャンバスメニューの前後に独自要素を出力
apura_before_fullscreen_nav / apura_after_fullscreen_nav	アクション	フルスクリーンメニューの前後に独自要素を出力
apura_has_submenu_toggle_menu_locations	フィルター	サブメニュー開閉ボタンを付けるメニュー位置を変更
apura_header_nav_toggle_aria_controls	フィルター	ハンバーガーボタンが制御する要素IDを変更

たとえばオフキャンバスメニューの下部にSNSリンクやお問い合わせボタンを追加したい場合は、apura_after_offcanvas_nav アクションを使います。子テーマの functions.php に次のように記述します。

<?php
/**
 * オフキャンバスメニューの末尾にお問い合わせボタンを追加する。
 */
add_action( 'apura_after_offcanvas_nav', 'mytheme_offcanvas_cta' );
function mytheme_offcanvas_cta() {
	$url = home_url( '/contact/' );
	?>
	<div class="offcanvas-cta">
		<a class="offcanvas-cta__button" href="<?php echo esc_url( $url ); ?>">
			<?php echo esc_html__( 'お問い合わせ', 'mytheme' ); ?>
		</a>
	</div>
	<?php
}

出力するURLは esc_url()、テキストは esc_html__() でエスケープし、翻訳可能な文字列にしている点がポイントです。WordPress Coding Standards（WPCS）に従い、外部から入力されうる値は必ずエスケープしてから出力しましょう。

サブメニューの開閉ボタンを、標準のヘッダー・モバイル以外のメニュー位置にも付けたい場合は、apura_has_submenu_toggle_menu_locations フィルターで対象ロケーションを追加できます。

<?php
/**
 * フッターメニューにもサブメニュー開閉ボタンを追加する。
 *
 * @param array $locations 対象のメニュー位置。
 * @return array
 */
add_filter( 'apura_has_submenu_toggle_menu_locations', 'mytheme_add_toggle_location' );
function mytheme_add_toggle_location( $locations ) {
	$locations[] = 'footer-menu';
	return $locations;
}

よくある質問