Luxeritasのモバイル用ナビをカスタマイズ　簡単にアイコンやリンクを変更する

2017年11月16日2018年5月23日Luxeritas

Luxeritas 3.x への対応版はあらためて書きます。すでにこのページの方法でカスタマイズされている方は↓で対応できます。

WordPress用テーマLuxeritas（ルクセリタス）のモバイル用メニュー（豪華版）のアイコンとキャプションを変更して、ついでにリンク先も好きにする方法です。

navi.phpを書き換えるとアップデートなどで影響を受ける「可能性」があるためjQueryを使っています。

変更するのはレスポンシブで768px未満になった時に上に表示されるモバイルメニューの種類（豪華バージョン）です。外観のヘッダーナビで選択できる↓コレ（色はカスタマイザーで変えてます）

モバイル用グローバルナビ、ヘッダーナビとも言うのかな。

ほんの数行のjQueryを子テーマのヘッダーかフッターに追加するだけと、とても簡単に変更することができです。

まずはやることの説明から

豪華版モバイルメニューの変更はjQueryで行います。jQueryはWordpressには最初から入っていてLuxeritasのカスタマイザーから変更していない限り何もしなくても使えるため、ルクセリタスの子テーマ編集のフッターかヘッドタグのところに追加します。

キャッシュの関係かプラグインが原因か分からないのですが、Luxeritas2.4.4ではjavascriptに入れてもフッターに入れても反映されないのでうちではヘッドタグに入れています。

やることは単純で、gnaviのul内にあるリスト要素LIの “>>" class名mob-prev や “<<" のmob-next を書き換える。そしてテキストを変更するだけです。非表示にしたりクラス名を書き換えているだけなので、失敗しても表示が崩れる程度でサイト自体に影響は出ないはず。

実際に変更してみる

サンプルとして次の投稿・前の投稿に移動する"<<" と “>>" を変更してみます。

ここでは前のポストに移動する “<<" を消して、次のポストに移動する “>>" をホームページへの移動用に書き換えます。

<script>
jQuery(function($){
/*　　前に戻る << を非表示にする　　*/
$('#gnavi ul.mobile-nav li.mob-prev').css('display','none');
/*　　次に進む >> を変更　　*/
$('#gnavi ul.mobile-nav li.mob-next').removeClass("mob-next").addClass("mob-home").css({'cursor':'pointer','opacity':'1'});
$('#gnavi ul.mobile-nav li.mob-home i').text('').addClass('fa fa-home').css('font-size','160%');
$('#gnavi ul.mobile-nav li.mob-home p').text('Home');
/*　　クリックした時の処理　　*/
$('.mob-home').on('click', function() {
window.location.href = 'https://yaruzou.net';
});
});</script>

コピペ・変更時の注意

jQueryは $(function(){ の形で書き始めることが多いですが、Wordpressでは競合の問題から使えません。回避法として jQuery(function($){});という形にしています。

やってること

すべて #gnavi ul.mobile-nav の中にあるLIの操作をしています。jQueryでは$('#gnavi’)のように操作したい対象を書いて、その後ろに"."ドットでしたいこと（操作：メソッド）を追加していくと、そのオブジェクトに数珠つなぎに操作を行えます。
>>のLI要素を消す
<<のLI要素のクラス名を削除＆追加＆ポインターの禁止を解除＆透明度をなしにする＆テキスト（アイコンの書き換え）
そのLIのに対してURL遷移をさせるクリックイベントを設定

詳しい解説

$('#gnavi ul.mobile-nav li.mob-prev').css('display','none');

mob-prevというクラスのLIをCSSのdisplayプロパティで非表示にしています。"display" はinline-blockやinlineによく使われていますが、noneにすることで消してしまうこともできます。

visibility:hiddenではブロックが残ってしまうのに対し、display:noneなら要素がなかったことにされます。

$('#gnavi ul.mobile-nav li.mob-next').removeClass("mob-next").addClass("mob-home").css({'cursor':'pointer','opacity':'1'});

ここではやっていることが多いですが、いずれも>>のボタンを表示しているLIへの操作です。

Luxeritasではクラス名"mob-next"でアクセスしているので、クラス名自体を"mob-home"に書き換えてこちらで操作できるようにします。その上でポインターを普通のポインターに指定、透過度を1にして色付きにしています。

$('#gnavi ul.mobile-nav li.mob-home i').text('').addClass('fa fa-home').css('font-size','160%');

$('#gnavi ul.mobile-nav li.mob-home p').text('Home');

LI要素にはとが入っていて、でアイコン（代わりのテキスト）、にはラベル用テキストがが書かれています。"mob-home"のi要素にfontawesomeを適用しています。

fontawesomeはクラスで設定するので、何もないi要素にaddClassでfontawesomeのアイコンを挿入しています。そして内のテキストを変更。

Font Awesomeの使い方はこちら Font Awesomeの使い方

実はアイコンピッカー作ってましたが（こんなの）、丁寧に作ってたのをアップする前にどこかにやってしまって放置してたりしてます。

$('.mob-home').on('click', function() {
 window.location.href = 'https://yaruzou.net';
 });

最後のこれは、mob-homeクラスのLIがクリック／タップされた時の遷移先を指定しています。

カスタマイズする具体的な方法

少しややこしかったかもしれないので、具体的にどういじればいいかmob-next >> ボタンを例にします。

<script>

jQuery(function($){

/*　　次に進む >> を変更　　*/

$('#gnavi ul.mobile-nav li.mob-next').removeClass("mob-next").addClass("mob-home").css({'cursor':'pointer','opacity':'1'});

$('#gnavi ul.mobile-nav li.mob-home i').text('').addClass('fa fa-home').css('font-size','160%');

$('#gnavi ul.mobile-nav li.mob-home p').text('Home');

/*　　クリックした時の処理　　*/

$('.mob-home').on('click', function() {

window.location.href = 'https://yaruzou.net';

});

});</script>

li.mob-nextの部分

mob-nextはルクセリタスのスクリプトで管理されています。そのためあなたがmob-nextの動きを制御したければ、class名を書き換えてしまうのが早いです。

この例ではmob-nextをmob-homeにしています。mob-homeを好きなものに書き換えてください。ただし、それ以降のクラスはあなたが書き換えたクラス名に変更することは忘れないでください。

li.mob-home iのところ

fontawesomeのクラスをi要素に加えて、アイコンとして表示させています。font-awesomeは i 要素や span 要素のクラスとして設定するだけで使えます。別のアイコンが使いたい時は 'fa fa-home’のうち、あたまの 'fa’ はそのままにして、fa-homeの部分だけをフォント名に変えます。

li.mob-home p

.text('Home’)の’Home’の部分を書き換えればOK。好きなテキストを表示させられます。

window.location.href = 'https://yaruzou.net’;

クリックした時の飛ぶ先URL（遷移先）です。普通のURLです。

目的別サンプル

fontawesomeで探して、fa-なんちゃらを入れば好きなフォントアイコンが使えます。サイズはCSSのプロパティで変更しています。

お店のサイトでアクセスマップや営業時間を表示させたい

$('#gnavi ul.mobile-nav li.mob-prev').removeClass("mob-prev").addClass("mob-home").css({'cursor':'pointer','opacity':'1'});
$('#gnavi ul.mobile-nav li.mob-home i').text('').addClass('fa fa-home').css('font-size','160%');
$('#gnavi ul.mobile-nav li.mob-home p').text('Home');
$('.mob-home').on('click', function() {
window.location.href = 'https://...../';
});
$('#gnavi ul.mobile-nav li.mob-next').removeClass("mob-next").addClass("mob-shop").css({'cursor':'pointer','opacity':'1'});
$('#gnavi ul.mobile-nav li.mob-shop i').text('').addClass('fa fa-map-o ').css('font-size','160%');
$('#gnavi ul.mobile-nav li.mob-shop p').text('Access');
$('.mob-access').on('click', function() {
window.location.href = 'https://..../access';
});

フリーの人のポートフォリオ、プロフィールと作品へのアイコン

$('#gnavi ul.mobile-nav li.mob-prev').removeClass("mob-prev").addClass("mob-prof").css({'cursor':'pointer','opacity':'1'});
$('#gnavi ul.mobile-nav li.mob-prof i').text('').addClass('fa fa-newspaper-o').css('font-size','160%');
$('#gnavi ul.mobile-nav li.mob-prof p').text('prof');
$('.mob-prof').on('click', function() {
window.location.href = 'https://..../about';
});
$('#gnavi ul.mobile-nav li.mob-next').removeClass("mob-works").addClass("mob-works").css({'cursor':'pointer','opacity':'1'});
$('#gnavi ul.mobile-nav li.mob-works i').text('').addClass('fa fa-photo').css('font-size','160%');
$('#gnavi ul.mobile-nav li.mob-works p').text('Works');
$('.mob-access').on('click', function() {
window.location.href = 'https://..../my-works';
});

jQueryを使って要素を足したり引いたり

jQueryを使えば要素を足したり消したりもできます(DOM Document Object Modelの操作)。しかし実行に時間がかかるので、グローバルナビの変更だけなら上に書いたようにプロパティの変更の方がいいと思います。

/*　　LI要素追加サンプル(DOM)　　*/
$('#gnavi ul.mobile-nav').append('<li><i class="fa fa-shopping-cart"></i><p>SHOP</p></li>');
/*　　N番目にLI要素を追加.eq(N)(Nは0スタート)　　*/
$('<li><i class="fa fa-shopping-cart"></i><p>SHOP</p></li>').insertAfter('#gnavi ul.mobile-nav li:eq(2)').css('font-size','160%');

描画を早くしたい

jQueryでは描画タイミングが遅くて嫌ならモバイル用メニューを書き出しているnavi.phpをコピーして子テーマとしていじる手があります。/wp-content/themes/luxeritas/ にある navi.php を書き換えて /wp-content/themes/luxech に置いてしまう。クラス名を変えてしまえばOK。

もう一つは早くはならないけれど#gnaviを{visivility:hidden;}にしておいて、書き換えた後にスクリプトで$('#gnavi’).css('visivility’,’visible’);にする方法があります。