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

モバイル版グローバルナビの「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

ダウンロードはこちら

 

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

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

 

現象

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

ん~ なぜ!

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

 

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

 

対応方法

 

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

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

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

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

FTPクライアントの使い方(FFFTP)とワードプレスのファイル構成
今回は、私が何十年も変わらず使っているソフト「FFFTP」でFTPクライアントの使い方と、ワードプレスでのファイル構成を紹介します。 既にワードプレスが稼働している方向けの説明になっています。 ワードプレスをこれからインストールされる方は以...

 

public_htmlwp-contentthemesluxeritas 内の navi.php
public_htmlwp-contentthemesluxech へコピー

 

navi.phpの編集

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

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

「MENU」を削除

以下の部分を探し

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

削除します。

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

 

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

 

「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>

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

 

以上で完了です。

 

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

ルクセリタスLuxeritasの約40ヵ所をカスタマイズ!高速・高機能無料テーマ
高機能でスピード抜群の無料テーマ「ルクセリタス」を、いろいろカスタマイズしていますので、少しまとめてみます。 カスタマイズ済みの当サイトオリジナルデザインファイルは以下をご覧ください。 ルクセリタスについて 今のところテーマはこの一択と決め...

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています