Lightningのモバイル固定ナビを動的に書き換える

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

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

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

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

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

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

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

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

Vektor WordPress 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のモバイル固定ナビ設定画面で設定できるものと全く同じです。このへんの値を開発者が書き換えられるのは、ありがたいですね。

権限ごとにモバイル固定ナビの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をご紹介します。よろしければどうぞ