WordPress アストラテーマモバイルメニューレイアウトの変更（ハンバーガーメニューvs. PC用メニュー）

WordPress アストラテーマを使用している場合は、モバイルデバイスにハンバーガーメニューが表示されます。 モバイルでもPC版と同じレイアウトのメニューを表示したい場合 Astra テーマのHeader Builderで設定が可能です。 この記事では、Astraテーマのモバイルメニューレイアウトを変更する方法について説明します。

WordPress アストラテーマHeader Builder

Astra バージョン3.0.0では、Header Footer Builder機能が追加されました。 アストラのHeader BuilderとFooter Builderを使用して、直感的にヘッダーとフッターを構成できるようになりました。

アストラヘッダービルダーを使用してモバイルヘッダーを作成する方法の詳細については、How To Create Mobile Header With Astra Header Builder?」で確認できます。

Header Builderを使用して、モバイルヘッダをPCやタブレットヘッダとは異なることがあります。 ヘッダビルダーを使用してモバイルヘッダーにハンバーガーメニューの代わりに、デスクトップに表示されるレイアウトのメニューを表示することができます。 しかし、デスクトップヘッダでは、ハンバーガーメニューを表示するためのオプションはないようです。

以前のバージョンの Astra テーマは Header> Primary Menu> MOBILE MENUでMenu Breakpoint（メニュー分岐点）の値を変更して、モバイル端末でハンバーガーメニューの代わりにPC用のメニューを表示することができます。

• Mobile Header with Astra （旧 Astra Header) [アストラのモバイルヘッダー（既存 Astra Header)]

メニュー分岐点の機能は、現在、無料版では提供されず、 有料版で同様の機能が提供されるとします（下記「アストラテーマのモバイル分岐点オプション」を参照）。

参考までに GeneratePress テーマ「モバイルメニューブレークポイント（モバイルメニューブランチポイント）の設定を調整して、PCでもモバイルメニューを有効にしたり、モバイルでPCメニューを有効にしたりすることができます（」GeneratePress テーマで WordPress ブログセッティング例（How to Customize GP）"参照）。

アストラテーマのHeader Builderを使用して、モバイルメニューのレイアウトを変更する - 携帯電話からのハンバーガーメニューの代わりにPC用のメニューを使用する

アストラテーマで ルックス>カスタマイズ> Header Builderで、デスクトップ/タブレット/モバイル用のヘッダーを設定することができます。

モバイル機器でハンバーガーメニューの代わりにPC上で表示されるメニューのレイアウトを使用したい場合Header Builder画面から下のモバイル機器のアイコンをクリックして、次のようにヘッダーを構成します。

上の図のように、 Toggle Button（トグルボタン） 要素を削除して、メインメニューを配置すると、モバイルデバイスでもPCと同じレイアウトのメニューを表示することができます。

そして メインメニュー 要素をクリックして、プロパティで「モバイルでスタック"オプションをオフにします。

モバイルでスタック オプションを有効にすると、メニューが縦にたまる形式で表示されます。 上記の画面では、このオプションを有効/無効にして、メニューがどのように表示されるユーザー定義の画面で確認することができます。

設計 タブをクリックして、メニューの背景色と文字色、内部余白、外部マージンなどのデザイン要素を設定することができます。

モバイル機器でもメニューをPCと同じレイアウトで表示する場合は、メニュー項目が多いメニューは、複数の行に渡って表示されて厄介に表示されることがあります。 モバイル機器でハンバーガーレイアウトではなく、一般的なレイアウトのメニューを表示する場合は、メニュー項目の数を最小限にすることがビューに良さそうです。

アストラテーマのモバイル分岐オプション

アストラバージョン2.4.0で、モバイルやタブレットの反応型分岐点（Responsive Breakpoint）を設定できる機能が提供されました。 How to Update Responsive Breakpoints for Tablet+Mobile in Astra? 文を参考にして、モバイル分岐やタブレット分岐点を設定することができました。 例：

// Update your custom mobile breakpoint below - like return 544;
add_filter( 'astra_mobile_breakpoint', function() {
    return 544;
});

しかし、最新バージョンのアストラテーマでは、この方法が機能していないようです。

アストラによると、バージョン3.3.0からMenu Breakpointと同様の機能を導入したが、無料版では提供されないとします。 したがって、最新のアストラテーマのメニューブレークポイント機能を使用して、モバイルメニュー分岐点を設定したい場合には、 アストラプロバージョンを使用します。

We introduced something similar with Menu Breakpoint on v3.3.0. However, it is not available for the Astra theme （無料）。

参照

• WordPress Diviテーマコンタクトフォーム（Contact Form）の条件付きロジックを使用する
• GeneratePress テーマモバイルサムネイルの位置を変更する方法
• WordPress モバイルとPCのレイアウトを別の方法で構成する方法