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

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

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

変更点

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

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

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

ダウンロードはこちら

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

現象

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

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

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

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

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

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

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

ん～　なぜ！

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

対応方法

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

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

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

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

FTPクライアントの使い方（FFFTP）とワードプレスのファイル構成

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

ayaito.net

navi.phpの編集

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

「MENU」を削除

以下の部分を探し

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

削除します。

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

「Home」の追加

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

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

jQueryの追記

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

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

<script>
jQuery(function($){
/*　　クリックした時の処理　　*/
$('.mob-home').on('click', function() {
window.location.href = 'https://ayaito.net/';
});
});
</script>

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

以上で完了です。

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

ルクセリタスLuxeritasの約40ヵ所をカスタマイズ！高速・高機能無料テーマ

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

ayaito.net