カスタムメニューウィジェットで自由度の高いメニューをつくる(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でマークアップされます。

続く。。

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

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

カスタムメニューウィジェットで自由度の高いメニューをつくる(1)」への5件のフィードバック

  1. E-go

    参考にさせていただいています。
    メニューデザインや素材配布期待していますww(ポチッ)

    返信
    1. webourgeon 投稿作成者

      E-goさん、初めまして。コメントありがとうございます。
      たいしたもの作れないかもしれないですが、がんばりますね!!

      返信
  2. creater-ndesighn

    twentytenをつかってカスタムをしています。
    わからないことがあって調べていると、いつもこちらに辿りつくので、
    説明を読んでいたら興味深い記事ばかりで。。。
    そこで、サイドのカスタムウィジェットのカスタムを同じようにやらせていただいたろころ、
    primaryとfooterがかわり、secondaryがかわりません。

    primaryとsecondaryをカスタムして、footerは普通のリストだけの表示にしたいのですが、
    どのようにしたらいいのでしょうか?

    基本中の基本なことかもしれないのですが、
    さっぱりです、、、
    よろしくおねがいします。

    返信
    1. webourgeon 投稿作成者

      creater-ndesighn さん

      ウィジェットですが、primaryは#primary、secondaryは#secondary footerは#footer-widget-areaというidが付いています。
      これで区別していけば、それぞれに反映されていくと思います。
      全てにwidget-areaというクラス名がついていますので、widget-areaという指定のみですと、うまくいかないと思います。

      うまくidとクラス名を組み合わせて指定してみてください。

      うまくいかないようでしたら、またコメントくださいね。

      返信

コメントをどうぞ♪