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

2019-04-09

 

モバイル版グローバルナビの「menu」部分ですが、副項目ありの開閉がおかしな動きをするのがイヤで、修正したかったのですが、ややこしそうで・・。

とりあえず「menu」を削除してしまうという手段で解決しました。

おかしな動きのものを置いておくよりは、ない方がいいじゃないか!という単純な発想で、なんかスッキリしない方法ですが、ま、、とりあえずです。

もっとちゃんとしたカスタマイズをする事があれば、また追記するかもしれませんが、これで満足気味。

 

変更点

 

 「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」を選択します。

5761_09

以下の部分を探し

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

以下に書き換えます。

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

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

 

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

 

5761_03

 

 

jQueryの追記

 

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

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

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

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

5761_10

 

以上で完了です。

5761_02

 

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

 

  • WordPressランキング
  • にほんブログ村 IT技術ブログ Webサイト構築へ