カスタムメニューウィジェットで自由度の高いメニューをつくる(1）

WordPressをCMS的に使いたいと思ったとき、メニューについて悩む事も多いのではないでしょうか。デフォルトの状態ですと、サイドバーに表示できるのは、カテゴリー一覧や、ページ一覧などで、表示の順番や、表示したいものが簡単に設定できません。見た目もどうしてもブログっぽくなってしまいますよね。

でも、カスタムメニューウィジェットを使えば、Twenty Tenのデフォルト機能だけでも、結構自由度の高いメニューを作れちゃうんですよ。

カスタムメニューをつくる

カスタムメニューを作ります。HOMEへのリンクや、カテゴリー、ページなどを必要に応じて並べます。順番や階層も思い通りに作れますので、サイドメニューとして表示したいものをじっくり選んで並べるとよいと思います。

今回は「side-menu1」と名前をつけました。

カスタムメニューの使い方については、こちら、「カスタムメニューの使い方」という記事で詳しく書いていますので、まだ使った事がない方は、あわせて読んでみて下さいね。

カスタムメニューをウィジェットに追加する

作ったカスタムメニューをウィジェットに追加します。

カスタムメニューのウィジェットをウィジェットエリア1にドラッグし、設定します。

先ほど設定した、メニューの名前、「side-menu1」を選びます。タイトルを「メニュー1」とつけました。

Twenty Tenで見てみよう

保存したメニューをTwenty Tenのデフォルトの状態でみてみましょう。

今回は「ブログっぽくないメニュー（？）」という趣旨なので、メニューの位置だけ左に持ってきました。メニューを左に置くだけでも少し、普通のホームページっぽくなりますね。

サイドバーを左にするやり方は「Twenty Tenのレイアウトを変える(3)〜サイドバーを左にする」に書いてありますので、よかったら参考にして下さい。

カスタムメニューのスタイル

では、このメニューにどんなidやクラス名が当てられているのか、見てみましょう。結構ややこしいけど、がんばっていきましょう！

じゃん！

どうでしょう。分かりやすく書いてみたつもりなのですが。。ちょっといやになるごちゃごちゃ感ですね。

では解説していきます。

大きな囲み

このメニューもウィジェットですから、ウィジェットエリアのリストの一つとして出されます。前にみた通り、「widget-container」というクラス名がついていますね。その他に「widget_nav_menu」というクラス名がカスタムメニューウィジェットを表します。

メニュータイトル

ウィジェットを設定するときにつけたメニューのタイトルは、他のウィジェットのタイトルと同じく、「widget-title」というクラス名がつきます。

メニュー本体の囲み

メニュー本体はdivで囲まれます。カスタムメニューを作るときにつけた名前が入ったクラス名がつきます。この場合、「menu-side-menu1-container」ですね。「side-menu1」がメニューの名前です。

メニューリスト　ul

メニューはリストでマークアップされます。その一番外側のulにはメニューの名前をふくんだid「menu-side-menu1」と、「menu」というクラス名がつきます。

ここまでが、図で緑で囲った部分です。

メニュータイトル

カスタムメニューウィジェットのタイトルも、他のウィジェットと同じように「widget-title」というクラス名がつきます。

メニューアイテム

メニューのアイテム一つ一つに、「menu-item」というクラス名がつきます。また、このアイテムに通し番号をつけた、「menu-item-xx」というような、番号付きのidとクラス名も付加されます。

カスタムリンク

このメニューの「HOME」へのリンクは「カスタムリンク」という機能を使って作ったものなので「menu-item-type-custom」というクラス名がつきます。

カテゴリー

カテゴリー一覧のリンクには「menu-item-type-taxonomy」というクラス名がつきます。「taxonomy」は分類ですね。カスタムタクソノミーという機能が使えるようになったので、この言葉を聞いた事がある方も多いかもしれませんね。

ページ

ページ一覧のリンクには「menu-item-type-post_type」というクラス名がつきます。

階層

子カテゴリーや子ページなどで階層をつけている場合、「ul class=”sub-menu”」というように、子の階層が「sub-menu」というクラス名のついたulでマークアップされます。

続く。。

はあはあ。思ったより長くなってしまったので、とりあえずここまでに。

次回で、この記事の内容をもとに、実際にいくつかのメニューのデザインをつくって見ようと思います。素材も配っちゃおうかな。