こんにちは! るーしーです。
今回も引き続き「WordPress(ワードプレス)のテーマLightning(ライトニング)の新しいモバイルナビ」についてです。
まとめという事で「最適なモバイルメニュー」を考えました。
ここで言う最適とは「モバイルメニューの中だけでコンテンツを網羅できるか」と私は考えます。
3回連続でモバイルのナビについて触れる事になりますが今回で完結です。
最後までどうぞお付き合いくださいますようお願いします。
【参考】
⇒第一回：【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた
⇒第二回：【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた-その2
最適なモバイルメニュー表示とは
最適の定義は考え方次第で変わると思います。
冒頭でも触れましたが今回は
「モバイルメニューの中だけでコンテンツを網羅できている」
という事を最適と定義します。
「いや、それ最適じゃないし」
という突っ込みはご容赦ください。
モバイルメニューでコンテンツを網羅する方法
ここが一番重要だと思います。
理想は
「ワンクリックで行きたいページに行ける事」
ですがそんなコテコテにメニューを盛りまくったら狭い上に操作しづらいモバイルのメニューは破綻してしまいます。
そこで試行錯誤した結果、
ヘッダーメニューとカテゴリーの二つを表示させる事で最も「最適」に近い状態になると判断しました。
実際PCサイトでもヘッダーメニューで固定ページを配置し、サイドバーでカテゴリーを表示する事は多いと思います。
こんな感じですね。
これをモバイルでもやります。
「え？メニューじゃなくてむしろTOPページで表示したいページがあるんだけど」
というあなた！！
3PRエリアでTOPページに表示させる事ができます。
そのため今回はモバイルメニューで3PRエリアは表示する必要がないと考えます。
⇒3PRエリアについて詳しくはこちら
最適なモバイルメニュー構成
構成はこうです。
1:モバイルナビ上部
・サイト内検索
2：メインメニュー
・PCサイトヘッダーメニューと同じ
3:モバイルナビ下部
・カテゴリー
・SNS(FacebookかTwitter)
という感じですね。
PCサイトのヘッダーメニューとサイドバーのカテゴリーに、操作性を考えサイト内検索を追加。
更にSNSへの導線も用意する。
まとめるとこのような感じです。
・サイト内検索
・メインメニュー
・カテゴリー
・SNS(FacebookかTwitter)
次からは実際にモバイルメニュの設定手順を紹介していきます。
モバイルメニュー設定
SNSは今回Twitterを設定します。
前提
１：WordPress(ワードプレス)のテーマはLightning(ライトニング)を使用
２：プラグイン「Lightning Advanced Unit」を使用
３：「VK Mobile Nav」の設定は完了している
まだの方はこちら
⇒【ワードプレス×ライトニング】「VK Mobile Nav」を使用してみた
４：プラグイン「Jetpack by WordPress.com」を使用している
Twitterページ表示を利用する場合必要
設定手順
・サイト内検索
・メインメニュー
・カテゴリーとTwitter
設定作業がほとんど同じなので同時に説明します。
１：WordPress(ワードプレス)の管理画面から「外観」→「カスタマイズ」をクリック
２：「ウィジェット」をクリック
３：「モバイルナビ下部」をクリック
４：表示をモバイルに切り替える
画面下のモバイルマークをクリック。
するとモバイル表示に切り替わる。
５：メニューボタンをクリックしメニュー画面を表示する
メニューボタンをクリック。
するとメニューが表示される。
６：「ウィジェットを追加」をクリック
７：「カテゴリー」をクリック
するとカテゴリーがメニューに表示され各種設定が出来る。
・タイトル：「カテゴリー」などわかりやすいタイトルがいいだろう。
・投稿数を表示：チェックを入れる
ここはお好みで良いと思います。
変更点はリアルタイムで反映されるので操作しながら決めてもいいでしょう。
画面右のモバイルメニューに設定した通りカテゴリーが表示されていますね。
８：「完了」をクリック
９：「ウィジェットを追加」をクリック
１０：「Twitterタイムライン」をクリック
するとTwitterタイムラインがメニューに表示され各種設定が出来る。
Twitterユーザー名さえ入力すれば設定操作はリアルタイムで反映されるのでお好みで設定しましょう。
画面右のモバイルメニューに設定した通りTwitterタイムラインが表示されていますね。
１１：「完了」をクリック
１２：「公開」をクリック
クリック前に画面右で表示を最終確認しましょう。
また、公開後は実際にモバイルで画面表示がしっかりできているか最終確認をする事を忘れずに。
以上で設定作業は終了です。
お疲れ様でした！！
おまけ
ここまでの作業で、モバイルの画面とメニューが実際にどう表示されるか私のサイトのキャプチャを紹介します。
モバイルTOP画面
3PRエリア×2を使いヘッダーメニューの子階層記事もTOPページに表示。
モバイルメニュー画面
最適なモバイルメニュー構成を実現
１：サイト内検索
２：メインメニュー(ヘッダーメニュー)
３：カテゴリー
４：SNS(FacebookかTwitter)
まとめ
いかがでしたか？
今回のモバイルメニューの改修で、ライトニングのモバイル表示の自由度がかなり高くなったと思います。
モバイルのTOPページに出したい項目は3PRエリアを使う。
⇒詳しくはこちら
そしてモバイルメニューはPCサイトのヘッダーメニューとカテゴリーを網羅する。
※プラスサイト内検索とSNSを今回は実装しました
なんでもかんでもとやってしまうと情報過多でゴチャゴチャになってしまいますが、これ位だと「モバイルメニューの中だけでコンテンツを網羅しつつユーザビリティも高い状態を維持」できているのではないでしょうか。
これからも色々と試してどんどんお勧めを紹介していきます！！
スポンサーリンク
