こんにちは! るーしーです。
今回も前回に引き続き「WordPress(ワードプレス)のテーマLightning(ライトニング)の新しいモバイルナビ」についてです。
前回は従来のモバイルナビとの変更点をまとめ、新しいモバイルナビを「PC版のヘッダーメニューと同じ表示にする」ところまで紹介しています。
⇒前回の内容はこちら
今回は新しいモバイルメニューの上段にはサイト内検索を、下段にはFacebookページを配置してみたいと思います。
勿論【初心者向け】で分かり安く説明をしていきますので今回も最後までご欄ください。
従来からの変更点
１：下階層が開閉式になった
２：メニュー上下にウィジェットエリアができた
詳細は前回記事でまとめたのでそちらを参照してください。
⇒詳しくはこちら
今回は２の「メニュー上下にウィジェットエリアができた」部分を実際に試してみます。
新しい「VK Mobile Nav」を使ってみる
前回既に「PC版のヘッダーメニューと同じ表示にする」ところまで紹介していますので今回は続きです。
「メニュー上下にウィジェットエリアができた」という機能を試します。
モバイルメニュー上部にサイト内検索、下部にFacebookページを設定します。
前提
１：WordPress(ワードプレス)のテーマはLightning(ライトニング)を使用
２：プラグイン「Lightning Advanced Unit」を使用
３：「VK Mobile Nav」の設定は完了している
まだの方はこちら
⇒【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた
４：プラグイン「Jetpack by WordPress.com」を使用している
Facebookページ表示を利用する場合必要
「VK Mobile Nav」の上部「サイト内検索」設定手順
１：WordPress(ワードプレス)の管理画面から「外観」→「カスタマイズ」をクリック
２：「ウィジェット」をクリック
３：「モバイルナビ上部」をクリック
４：「ウィジェットを追加」をクリック
５：「検索」をクリック
６：「タイトル」を入力し「完了」をクリック
４：「下書きとして保存」する
１：歯車をクリック
２：「操作」を「下書きとして保存」に合わせる
３：「下書きとして保存」をクリック
５：表示をモバイルに切り替える
画面下のモバイルマークをクリック。
するとモバイルの画面表示になる。
６：メニューボタンをクリックする
７：メニュー上部に検索画面が表示されている事を確認する
問題無く検索画面が表示されています。
８：「×」をクリックして閉じる
以上でモバイルメニュー上部のサイト内検索追加は完了です。
続いてモバイルメニュー下部にFacebookページを追加します。
「VK Mobile Nav」の下部「Facebookページ」設定手順
１：WordPress(ワードプレス)の管理画面から「外観」→「カスタマイズ」をクリック
２：「ウィジェット」をクリック
３：「モバイルナビ下部」をクリック
４：表示をモバイルに切り替える
画面下のモバイルマークをクリック。
するとモバイル表示に切り替わる。
５：「ウィジェットを追加」をクリック
６：「Facebookページプラグイン」をクリック
※プラグイン「Jetpack by WordPress.com」を使用している必要があります。
７：メニューボタンをクリックしメニュー画面を表示する
メニューボタンをクリック。
するとメニューが表示される。
まだFacebookページの設定をしていないので表示がされていない状態。
８：「必要情報」を入力し「完了」をクリック
「Facebook ページ URL」さえ入力すれば画面が表示され、各項目の変更で画面がどう変わるか表示される。
好みに合わせて設定しましょう。
また、画面表示の最終チェックもしておきます。
サイト内検索、Facebookページ共に問題無く表示されていれば「完了」をクリックします。
９：「操作」を公開に合わせ「公開」ボタンをクリック
歯車ボタンを押し「公開」に合わせて「公開」ボタンをクリックし公開する。
モバイルでメニュー表示を確認する
公開後実際にモバイルでも表示を確認します。
メニューを開き確認します。
サイト内検索もFacebookページも問題なさそうです。
以上で作業完了です。
お疲れ様でした！！
まとめ
いかがでしたか？
今回はモバイルのメニュー上に「サイト内検索」、下に「Facebookページ」を設定しました。
前回と合わせればとモバイルのメニュー表示が従来よりも劇的に変わりましたね。
3PRエリアを2段使い、モバイルのメニュー表示でも綺麗にまとめたらユーザーへの訴求力はグンと高まります。
これからもおススメがあればどんどん紹介していきます！！
スポンサーリンク
