相互リンク詳細へ

ルクセリタスのモバイルメニューの改造(副項目が展開されない現象)

2019-04-09カスタマイズ

モバイル版グローバルナビの「menu」部分ですが、副項目ありの開閉がおかしな動きをして、展開されないメニューが結構あった為、このままではメニューの役割が果たせていなかった事をきっかけにモバイルメニューの改造を。

とりあえず「menu」を削除してしまうという手段で解決しました。ついでに「Home」ボタンを追加しました。

 

2019//8/24追記

モバイルメニューを改造(「Menu」を削除)している場合、Ver.3.6.12~モバイルメニューが動作しなくなる。

次回のリリースで改造している当サイトのような者にも、対応を考えて下さるとの事です。

モバイルメニューの改造は、以前(Ver.3.5.9)を使っていた頃、「MENU」の副項目展開で、おかしな動きがあった為、やむなくした苦肉の策で、もちろん改造などせず、そのまま使える事がベストな訳です。

その他、Ver.3.6.12.1及び12.2でGoogle Serch Consoleでエラーが出たのですが、これもその改造が原因の可能性あり?

3.6.11に戻すとエラーは解消されるので、3.6.12~のバージョンのみ、モバイルメニュー改造(おそらく「jQuery」を追記した事)との相性が悪いようです。

更に追記
この記事に記載している通り副項目の展開がおかしな動きをしていたのですが、現在は正常に動いた為、当サイトも改造をやめ、デフォルトに戻しました。(そもそもの不具合についても当サイト独自の問題ですが、原因は不明)

どうしてもモバイルメニューの改造を行う場合は、リスクがある事をご理解の上、ご利用下さい。

 

変更点

 

 「Menu」を削除する代わりに「Home」ボタンを追加しました。

 

 

バージョンと初期デザインについて

 

当サイトで使用中のバージョンは以下です。(記事作成時)

Luxeritas Child Themeバージョン: 3.0.0
Luxeritasバージョン: 3.5.9

ダウンロードはこちら

 

 「外観」→「カスタマイズ」→「ヘッダーナビ(グローバルナビ)」

グローバルナビの設定は以下のようにしています。

5761_11

 

現象

副項目(プルダウン)のあるメニューをスマホでクリックした際に、ちゃんと展開されない状態。

 

たとえば、PCで「WordPress(主項目)」のメニューを開くと以下の通り、「インストール」~「プラグイン」まで6つのメニュー(副項目)があります。

5761_08

 

これをスマホで見ると、一番下の「プラグイン」ひとつしか表示されません。しかも展開の仕方が変。

5761_04

 

同様にPCで「WebTips」を見ると4つありますが、

5761_07

 

スマホだと一番下の「Blog」というのが1つ出るだけ。

5761_05

 

「WordPress」と「WebTips」の2つの主項目を開いてみると・・

「WordPress」は相変わらず1つですが、「WebTips」の副項目だけ4つすべて出ました。

5761_06

 

ちなみに、モバイルメニューの設定は「豪華バージョン」でも「グローバルナビのみ」でも変わらず。「一度に全開」でも「親と子を個別に開閉」でも同様の現象です。

 

ん~ なぜ!

ということで、今回のカスタマイズです。

 

公式サイトではもちろん、きちんと動作していますので、この不具合については当サイト固有の問題であることをご理解下さい。

 

対応方法

 

FTPで対象ファイルをコピー

親テーマにしかない「navi.php」を編集しますので、親テーマからダウンロードし、子テーマディレクトリに入れます。

ファイルのコピー(ダウンロード’&アップロード)はFTPで行います。

FTPについては以下をご覧ください。

 

\public_html\wp-content\themes\luxeritas 内の navi.php
\public_html\wp-content\themes\luxech へコピー

 

navi.phpの編集

コピーできたらあとはワードプレスで行います。

 「外観」→「テーマの編集」で「navi.php」を選択します。

「MENU」を削除

以下の部分を探し

<li class="mob-menu"><i class="fa fas fa-list"></i><p>Menu</p></li>

削除します。

現在の当サイトの環境では、82行目にありましたが、バージョンによって異なるかもしれません。

 

Homeボタンを追加せず、ただ「Menu」を消すだけであれば、これ以降の処理は不要です。

5761_03

 

「Home」の追加

「Home」を追加する場合は、以下に書き換えます。

<li class="mob-home"><i class="fa fas fa-home"></i><p>Home</p></li>

 

 

jQueryの追記

 

Homeボタンを追加した為、それを押された際にどうするかを記述します。

今回はHomeなので、トップページへのリンクを書きます。

 「Luxeritas」→「子テーマの編集」で「フッター」タブを選択します。
 以下のコードを追記します。
<script>
jQuery(function($){
/*  クリックした時の処理  */
$('.mob-home').on('click', function() {
window.location.href = 'https://ayaito.net/';
});
});
</script>

※アドレスは書き換えて下さい。

5761_10

 

以上で完了です。

5761_02

 

その他カスタマイズについては以下をご覧ください。