XeoryBaseのスマホ用メニューボタンを削除し使い勝手の良いボタンへ変更する

ワードプレステーマXeoryBaseを使用されている方で、スマートフォンにデフォルトで表示されているメニューボタンを消して(削除して)他のボタンへ変更したいと思っている方も多いと思います。

 

下は、デフォルトの状態でスマホを見た時のものですが、右上にある赤枠内のメニューボタンの位置や機能などをカスタマイズしたいと思っていろいろ調べてみましたが、欲しい情報がほとんどありませんでした。

スマホ画面1

 

また、デフォルトの状態ではスマホでサイトを開いた時点で、既にメニューが開いて表示されています。

 

今回は、このメニューボタンのカスタマイズが出来そうにないので、この機能を削除した上でResponsive Menuというおすすめのプラグインを導入し、設定する手順を紹介したいと思います。

 

デフォルトで閉じる設定へ変更する

もともと表示されているメニューボタンをいきなり削除してしまうと、下の方に表示されている開いた状態のメニューがそのまま残ってしまうようなので、まずはこのメニュー表示がデフォルトで閉じている状態へ設定変更を行います。

 

WordPress の管理画面にログインしたら左メニューから「外観」→「テーマの編集」をクリックします。

 

以下の画面が開いたら、右側のメニューから「テーマフッター(footer.php)」をクリックします。

メニューボタンの削除1

 

テーマフッター」が開いたら少し下の方へスクロールすると、以下のように「// スマホトグルメニュー」という所がありますので、赤枠内の記述を全て削除し、以下の記述をその位置へ貼り付けます。

$(‘#gnav’).removeClass(‘active’);

メニューボタンの削除2

 

以下のように変更出来たら一番下にある「ファイルを更新」ボタンをクリックします。

注)今回の記述をコピペで貼り付けると「」が全角で入ってしまう場合があるので、必ず半角になっていることを確認してください。

メニューボタンの削除3

 

設定が終わったらスマホ画面を更新してみて下さい。以下のように赤枠内に表示されていたメニューが表示されていなければOKです。

スマホ画面2

 

XeoryBaseの標準スマホメニューボタンを削除する

次に、メニューボタンそのものを表示させないように設定します。

 

まず先ほどのテーマの編集画面から今度は「テーマヘッダー(header.php)」をクリックして開きます。

 

以下の画面が開いたら、赤枠内の記述を全て削除します。

*不具合が発生した時のために必ずバックアップを取り、自己責任で行ってください。

メニューボタンの削除4

 

削除したら、「ファイルを更新」ボタンをクリックします。

メニューボタンの削除5

 

スマホの画面を更新して赤枠内のメニューボタンが消えていれば成功です。

スマホ画面3

 

Responsive Menuの導入と設定

次におすすめのスマホメニューResponsive Menuを導入し設定していきましょう。

 

プラグインのインストール

管理画面の左メニューから「プラグイン」→「新規追加」をクリックします。

 

キーワード検索窓に「Responsive Menu」と入力し、表示されたら「今すぐインストール」をクリックします。

新メニュー導入1

 

インストールが終わったら「有効化」ボタンをクリックします。

新メニュー導入2

 

Responsive Menuの設定

この状態でスマホ画面を更新すると、既に新しいメニューボタンが表示されていますが、まずは基本的な設定を行っておきましょう。

 

Initial Setup

管理画面の左メニューの中に「Responsive Menu」が表示されていますので、そこをクリックしResponsive Menuの設定画面を開きます。

 

まずは最上部に表示されている設定メニューの中の「Initial Setup」で、

Breakpoint:Menuボタンの表示を開始する画面サイズ

Menu to Use:表示させたいメニュー(カテゴリーメニューなど)

を設定後青色の「Update Options」ボタンをクリックします。

新メニュー導入3

 

Container

ここでは表示されるメニューのデザイン的なものが設定出来ます。

メニューに検索窓を表示しない場合は「Search」を「OFF」にします。

Width:表示されるメニューの横幅を%で設定します。

その他、フォントサイズや背景色なども設定出来ますので、用途に合わせて設定してください。

新メニュー導入4

 

上記以外にもメニューボタンのサイズや線の太さなど様々な設定が出来るようになっていますので、用途に合わせて設定してみて下さい。

 

ここまででスマホ画面を更新しメニューを開いてみると、以下のようになりました。XeoryBaseに標準で付属しているものと比べてかなり見栄えが良くなったと思います。

*但し、赤丸の位置でタイトル文字とメニューボタンが重なって、タイトル文字が一部隠れてしまっています!

スマホ画面4

 

ボタンと文字が重なった部分にスキマを作る

管理画面の左メニューから「外観」→「カスタマイズ」をクリックします。

以下の画面が表示されたら、左サイドのメニューから「追加CSS」をクリックします。

新メニュー導入5

 

以下の画面で、左サイドにあるCSS記述エリアを一番下までスクロールし、以下の記述を追加してから「公開」ボタンをクリックします。

#logo{
margin-top:10px;
}

注)10pxのところは、開けたいスキマの大きさを設定します。

新メニュー導入6

 

再度スマホ画面を更新してみましょう。

いかがでしょうか?

以下のようにスキマが出来ていれば成功です。

スマホ画面5

 

いかがだったでしょうか?

 

私以外にも同じ内容で悩んでいる方にとって、少しでも参考になれば幸いです。

 

SNSでもご購読できます。

コメントを残す

*