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、初期値は白）を設定できます。背景色をブランドカラーに合わせたり、半透明にして下の画面をうっすら見せたりと、印象を大きく変えられます。

Apura 1.4.0以降、この色設定はFullscreen専用ではなくなりました。

「Overlay Color」は「Menu Background Color（メニュー背景色）」という名前に変わり、General Settings（共通設定）へ移動しています。

Dropdown・Fullscreen・Offcanvasのどのタイプを選んでいても同じ設定が効くようになったため、途中でメニュータイプを切り替えても配色を作り直す必要がありません。初期値は白（#ffffff）のままで、これまでに保存した色もそのまま引き継がれます。

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

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

Apura 1.4.0では、General Settingsにモバイルメニューの配色をまとめる3つの項目が揃いました。背景・文字・リンクを個別に指定できるため、ダークカラーのメニューなども設定画面だけで仕上げられます。

設定項目	適用先	初期値
Menu Background Color	モバイルメニューの背景（Dropdown / Fullscreen / Offcanvas 共通）	#ffffff
Menu Text Color	メニュー内の見出し・テキスト、および閉じるボタン	var(--ap-color-text)
Menu Link Color	メニュー項目のリンク文字色	var(--ap-color-text)

とくに便利なのが、FullscreenとOffcanvasの「閉じる」ボタンの色が Menu Text Color に自動で追従する点です。

以前は背景を濃い色にすると閉じるボタンが見えにくくなることがありましたが、1.4.0以降は文字色を明るくすれば閉じるボタンも一緒に明るくなります。

たとえば Menu Background Color を #111827、Menu Text Color と Menu Link Color を #f9fafb にすれば、それだけでダークテーマのモバイルメニューが完成します。

色の入力欄には var(--ap-color-primary) のようなCSS変数もそのまま指定できます。グローバルカラーで配色を管理している場合は、変数で指定しておくとカラーパレットを変更したときにモバイルメニューも自動的に追従します。

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

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;
}

よくある質問