【Twenty Fourteen】メニューを整える&カテゴリーをメニューで表示する

Twenty Fourteen には次の 2つのクールなメニューを設置することができます。

  1. サイト上部右側のメインメニュー
  2. 左サイドバー上部のセカンドメニュー

使い方は自由ですし、固定ページ・任意のカテゴリー・タグ・任意の投稿等何でも割り当てることができます。
が、一般的には、

  • サイト上部メインメニューには、**ようこそ!**・**プロフィール**等の固定ページ
  • サイドバーのセカンドメニューにはカテゴリー

を割り当てることが多いですね。
僕もこのお作法に従うことにしました。

Twenty Fourteen では動的な超クールなメニューを作ることが出来るのですが、ずっとちゃんと作らないまま放置してしまっていました。。。
(´・ω・`)
整え前↓
twenty fourteen main menu

今、ナゼか謎の再構築機運が高まっているので、この勢いで一気に整えてしまいたいと思います!
(`・ω・´)キリッ

メインメニュー

サイト上部、僕の場合にはヘッダ画像を置いているのでその下に右詰めで配置されるのがメインメニューです。
上の写真が修正前ですが、ヒドいものです、、、

通常一番左がホームとかトップ、またはようこそになり、見てもらいたいものから順に左→右と配置されることが一般的です。
僕の場合、最初に BLOG なんてのがあるのですが、今回改めて開いて見ると、なんと、中身がありませんでした、、、
ひでぇ (´・ω・`)
他にも Welcome ! なんてのが右から二番目とか超中途半端なところにあったりして、目も当てられませんでした。

メニューの作成

もしまだメニューを作っていなければ、「外観」>「メニュー」から、メニューを作成しましょう。
既存のものがあればそれを整えましょう。
僕は右上メインメニューという分かりやすい名前を付けてメニューを作りました。

メニューを作ったら中に入れるものを配置していきます。

twenty fourteen menu

メニューに配置したいものを左側から選んで、メニューに追加ボタンを押すと、右側のメニュー構造部分に追加されていきます。

一通り追加したら順番を整えましょう。
アイテムをドラッグ&ドロップで順番を変えられるクールかつ便利な GUI です。

左サイドバー メニュー2

左サイドバーの最上部に設置されるセカンドメニューも整えます。
僕はこれをカテゴリーを表示するスペースとしました。twenty fourteen category menu

メイン、セカンド共に階層構造にすることが出来ます。
試してみたら第三階層 / 孫メニューまで出来ました。
もっと出来るのかもしれませんが、ここまでしか試しませんでした。

なお、今回メニューを再整備するまで、僕はカテゴリーを右サイドバーにウィジェットとして置いていました↓
twenty fourteen category

一応階層構造になってるっぽいことは分かるものの見た目あまりクールじゃありません、、
僕の記述の一貫性のなさもあって分かり辛かったです。
カテゴリーの量・種類が少なければ全体をいっぺんに表示できて分かりやすいかもしれません。
逆にこれだけ種類数があるならば見せ方の工夫をしたいところです。

メニューの位置

メニューを作ったら位置を決めます。
両方作ってからそれぞれの位置を決めても良いですし、一つ作ったら一つ位置を決めても OK です。

Twenty Fourteen メニューの位置

なお、Twenty Fourteen のメニュー数は本来 2つなのですが、ここ↑ではモバイル表示用のプラグイン WPtouch を入れている為、モバイル表示時のメニューも含めて 3つを扱えるようになっています。

すべて整えるとこのようになりました↓
twenty fourteen menu

美しすぃ〜♬

左サイドバーのカテゴリーメニューは第一階層のみが表示され、子階層があるメニューは右側に▶︎が表示されています。
マウスポイントすると、子メニューが展開して表示されます。

クール (・∀・)!!

カテゴリーをメニュー表示するメリット・デメリット

メリット

  • 動的ナビゲーションでクール (・∀・)!!
  • “You might also like” を削除してしまったので優先度の高い場所にクールなメニューを置いてユーザーに他のページも読んでいただき、サイト滞在時間を長くして欲しかった
  • カテゴリーの順番を好きなように配置できる

実はウィジェットでのカテゴリー表示って順番を変えられないのです。
(∴Category Order というそれ用のプラグインなどもあります)
それがメニューでは上記の通り、順番をドラッグ&ドロップで自由自在に変えられます♬

デメリット

  • モバイルや画面の小さなディスプレイ、ウィンドウで見ている場合、メインコンテンツの下に表示されてしまう。
    なお、優先順位は、

    1. メインコンテンツ
    2. コンテンツサイドバー(右サイドバー)
    3. メインサイドバー(左サイドバー)

注意点

最後に、カテゴリーをウィジェットでサイドバーに表示する場合には、カテゴリーの追加・削除等の更新も自動的に反映されて表示されます。
が、この方法ではカテゴリーに何か変更が生じた場合、都度手で / マニュアルで更新 / メインテナンスしなければなりません。

 

以上、せっかくのクールで美しいメニュー機能を今までずっとちゃんと使って来ず、もったいないことをしてしまっていました。
ちゃんと使いこなせればクールですね。

 


【バンド:流 / Ryu】NY Song 絶賛発売中♬ 試聴も出来ます。 iTunes: http://bit.ly/1b7OEiD  ブラウザで見る http://goo.gl/NIfXf4 NY Song アルバムジャケット

僕のソロも試聴・ご購入いただけます (・∀・)!! 是非、お聴き下さい! Free Trial Listening of My Tunes 😀

スクリーンショット 2013-06-08 21.54.36 1曲 ¥150 です / $ 1.29 each

各種 SNS アカウントでコメントできます