こんにちわ、サイト管理者のわかっち (@wakatchi_tech) です。

質問者

Lightningのモバイル固定ナビって、プログラムで動的に書き換えられないの？

WordPressのデザインテーマであるLightningは、有料版（Lightning G3 Pro Pack）を使うとモバイル固定ナビが利用できます。モバイル固定ナビは、スマホや横幅の狭いPCブラウザで画面下部に表示されます。

このモバイル固定ナビはとても便利ですが、ログインユーザごとに表示内容を変えたり、クリック時のURLを変更することができません。

この記事では、 ログインユーザなどの情報に応じて、モバイル固定ナビを動的に書き換える方法をご紹介します。

この記事は次のような方にお勧めです

  • 有料版Lightningテーマを扱うWordPressのサイト開発者
  • スマホに表示されるモバイル固定ナビを動的に変えたい人

なお、LightningはVektor社の製品です。詳細はこちらをご覧ください。

Vektor Web Solutions | 株式会社ベクトル開発のWordPressテーマ・プラグイン・ライセンス販売サイト VWS

人気国産テーマLightningのプロ機能や機能拡張プラグインVK Blocks Proなど、WordPressウェブ制作向けオールインワンライセンスの販売サイト

Vektor Web Solutions

目次

vk_mobil_fix_nav_optionsフィルタで書き換える

モバイル固定ナビは、フィルターフックvk_mobil_fix_nav_optionsの引数を書き換えることで変更できます。

add_filter(
    'vk_mobil_fix_nav_options',
    function( $options ){
      return $options ;
    }
)

引数$optionsの構造

モバイル固定ナビの引数 $options は、文字列やBooleanなどで構成される1次元のArray構造です。

渡された$optionsの値を書き換えることで、モバイル固定ナビの表示を動的に書き換えることができます。

link_icon_1やlink_url_1の数字の部分は固定ナビボタンの番号です。デフォルトは4つですが、vk_mobil_fix_nav_menu_numberフィルタを使うことで、最大5つまで固定ナビボタンを設定できます。

string(9) "ホーム" ["link_icon_1"]=> string(11) "fas fa-home" ["link_url_1"]=> string(1) "/" ["link_blank_1"]=> bool(false) ["link_text_2"]=> string(15) "マイページ" ["link_icon_2"]=> string(17) "fas fa-house-user" ["link_url_2"]=> string(7) "/mypage" ["link_blank_2"]=> bool(false) ["link_text_3"]=> string(12) "チャット" ["link_icon_3"]=> string(14) "fa fa-comments" ["link_url_3"]=> string(27) "/mypage?profiletab=messages" ["link_blank_3"]=>

以下の表は、vk_mobil_fix_nav_optionsフィルタで渡される$optionsの構造です。

よく見ると、Lightningのモバイル固定ナビ設定画面で設定できるものと全く同じです。このへんの値を開発者が書き換えられるのは、ありがたいですね。

オプションオプションの意味例
link_text_xモバイル固定ナビで表示する文字列。マイページ
link_icon_xFont Awesome アイコンフォント。
アイコンリストから選択する		fas fa-house-user
link_url_xクリックした際のURL/mypage
link_blank_xリンク先を別ウィンドウで開くかどうかfalse
event_xクリックイベントga('send)
ling_text_0リンクテキスト。
オプション'add_menu_btn'が有効の時に表示される		MENU
hiddenモバイル固定ナビを表示するかどうかtrue
widget_paddingウィジェットエリアに余白を追加するfalse
add_menu_btn最初のメニューに開閉ボタンを追加するfalse
colorモバイル固定ナビの文字色#2E6DA4
nav_bg_colorモバイル固定ナビの背景色#FFF
current_color（確認中）#16354F
$optionsの構造（xは固定ナビボタンの数値）

権限ごとにモバイル固定ナビのURLを変更する例

会員サイトでは、無料会員や有料会員ごとにモバイル固定ナビを変えたいことがよくあります。

以下は、権限（無料会員、有料会員）をもとに、4つ目の固定ナビボタンのURLを変更する例です。

ログインユーザの役割を取得した後、権限に応じてURLを変更しています。この例では、is_user_logged_in関数でログインチェックをしているため、ログインしていないと4つ目のモバイル固定ナビは表示されません。

なお、このサンプルの関数内は擬似コードですので、そのままコピーしても動作しない点にご留意ください。

add_filter(
    'vk_mobil_fix_nav_options',
    function( $options ){
        // 権限毎に表示するURLを変更する例
        // 無料会員と有料会員の表示ページは、
        // 何らかのプラグインで参照権限の設定がされているのが望ましい
        if( is_user_logged_in() ) {

            // 役割（権限の取得）の取得
            role = Role::byID( get_current_user_id() ) ; 

            $options['link_text_4'] = '検索';
            $options['link_icon_4'] = 'fas fa-magnifying-glass';
    
            if( Role::$FREE->equals($role) ) {
                $options['link_url_4'] = '/free-search/';
            } elseif ( Role::$PAID->equals($role) ){
                $options['link_url_4'] = '/paid-search';
            } else {
                // do nothing...
            }
        }
        return $options ;
    }
)

まとめ

今回は、有料版（Lightning G3 Pro Pack）で利用できるモバイル固定ナビを動的に変更する方法をご紹介しました。

Lightningで会員サイトやマッチングサイトを作っていると、会員のグレードや権限ごとにナビゲーションメニューは変えられるけど、モバイル固定ナビは変えられないの？とよく聞かれます。

Lightningのカスタマイズ方法は比較的情報が発信されているほうですが、実際のコードを見てみると、まだまだ便利なアクションフックやフィルターフックが数多くあります。

引き続き、Lightningの便利な小ネタを発信していきます。

本記事が少しでもお役に立てれば幸いです。

最後までお読みいただき、ありがとうございました！

わかっち

有料版（Lightning G3 Pro Pack）を含むVektor Passportをご紹介します。よろしければどうぞ

Vektor Passport（ライセンス期間3年）
カテゴリー
Lightning、WordPress
タグ
前の記事
WordPressに独自の管理メニューを追加する① トップメニューの追加
2023年1月26日
次の記事
Ultimate Member 2.7.0がリリースされました
2023年10月18日