【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた-その2

LINEで送る
Pocket

タイトル

こんにちは! るーしーです。

今回も前回に引き続き「WordPress(ワードプレス)のテーマLightning(ライトニング)の新しいモバイルナビ」についてです。

前回は従来のモバイルナビとの変更点をまとめ、新しいモバイルナビを「PC版のヘッダーメニューと同じ表示にする」ところまで紹介しています。
前回の内容はこちら

今回は新しいモバイルメニューの上段にはサイト内検索を、下段にはFacebookページを配置してみたいと思います。

勿論【初心者向け】で分かり安く説明をしていきますので今回も最後までご欄ください。

スポンサーリンク

 

目次

従来からの変更点

変更点

1:下階層が開閉式になった

2:メニュー上下にウィジェットエリアができた

詳細は前回記事でまとめたのでそちらを参照してください。
詳しくはこちら

【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた

今回は2の「メニュー上下にウィジェットエリアができた」部分を実際に試してみます。

スポンサーリンク

新しい「VK Mobile Nav」を使ってみる

試す

前回既に「PC版のヘッダーメニューと同じ表示にする」ところまで紹介していますので今回は続きです。

メニュー上下にウィジェットエリアができた」という機能を試します。

モバイルメニュー上部にサイト内検索、下部にFacebookページを設定します。

前提

1:WordPress(ワードプレス)のテーマはLightning(ライトニング)を使用

2:プラグイン「Lightning Advanced Unit」を使用

3:「VK Mobile Nav」の設定は完了している

まだの方はこちら
【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた

【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた

4:プラグイン「Jetpack by WordPress.com」を使用している

Facebookページ表示を利用する場合必要

上部設定

1:WordPress(ワードプレス)の管理画面から「外観」→「カスタマイズ」をクリック

外観

2:「ウィジェット」をクリック

ウィジェット選択

3:「モバイルナビ上部」をクリック

モバイルナビ上部

4:「ウィジェットを追加」をクリック

ウィジェット追加

5:「検索」をクリック

検索をクリック

6:「タイトル」を入力し「完了」をクリック

完了

4:「下書きとして保存」する

1:歯車をクリック
2:「操作」を「下書きとして保存」に合わせる
3:「下書きとして保存」をクリック

下書きとして保存

5:表示をモバイルに切り替える

画面下のモバイルマークをクリック。

モバイル表示切替

するとモバイルの画面表示になる。

切替後

6:メニューボタンをクリックする

メニュークリック

7:メニュー上部に検索画面が表示されている事を確認する

検索表示

問題無く検索画面が表示されています。

8:「×」をクリックして閉じる

×で閉じる

以上でモバイルメニュー上部のサイト内検索追加は完了です。

続いてモバイルメニュー下部にFacebookページを追加します。

「VK Mobile Nav」の下部「Facebookページ」設定手順

下段

1:WordPress(ワードプレス)の管理画面から「外観」→「カスタマイズ」をクリック

外観

2:「ウィジェット」をクリック

ウィジェット選択

3:「モバイルナビ下部」をクリック

下部選択

4:表示をモバイルに切り替える

画面下のモバイルマークをクリック。

モバイル表示へ

するとモバイル表示に切り替わる。

切り替わった表示

5:「ウィジェットを追加」をクリック

ウィジェットを追加

6:「Facebookページプラグイン」をクリック

facebookページ選択
※プラグイン「Jetpack by WordPress.com」を使用している必要があります。

7:メニューボタンをクリックしメニュー画面を表示する

メニューボタンをクリック。

メニューボタンクリック

するとメニューが表示される。

メニュー表示

まだFacebookページの設定をしていないので表示がされていない状態。

8:「必要情報」を入力し「完了」をクリック

入力画面

「Facebook ページ URL」さえ入力すれば画面が表示され、各項目の変更で画面がどう変わるか表示される。

好みに合わせて設定しましょう。

また、画面表示の最終チェックもしておきます。

サイト内検索、Facebookページ共に問題無く表示されていれば「完了」をクリックします。

完了

9:「操作」を公開に合わせ「公開」ボタンをクリック

歯車ボタンを押し「公開」に合わせて「公開」ボタンをクリックし公開する。

公開

モバイルでメニュー表示を確認する

公開後実際にモバイルでも表示を確認します。

モバイル表示

メニューを開き確認します。

メニューを開いた状態

サイト内検索もFacebookページも問題なさそうです。

以上で作業完了です。

お疲れ様でした!!

まとめ

いかがでしたか?

今回はモバイルのメニュー上に「サイト内検索」、下に「Facebookページ」を設定しました。

前回と合わせればとモバイルのメニュー表示が従来よりも劇的に変わりましたね。

3PRエリアを2段使い、モバイルのメニュー表示でも綺麗にまとめたらユーザーへの訴求力はグンと高まります。

これからもおススメがあればどんどん紹介していきます!!

【関連】
【ワードプレス】ライトニングの3PRエリアを2列使うと訴求力が凄い件

【ワードプレス】ライトニングの3PRエリアを2列使うと訴求力が凄い件


【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた

【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた


【ワードプレス×ライトニング】最適なモバイルメニュー表示について考えた

【ワードプレス×ライトニング】最適なモバイルメニュー表示について考えた

るーしー

ではまた!

スポンサーリンク
LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です