• かちびと.net

    WordPressのカスタムメニュー(wp_nav_menu)を使って、サブタイトル付きのナビゲーションを実装する方法をご紹介。説明付きのメニューを実装します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

WordPressのカスタムメニュー(wp_nav_menu)を使って、サブタイトル付きのナビゲーションを実装する

スポンサーリンク

ナビゲーションメニューに、よくリンクの
詳細を短文で含めているのを見かけます。
コーポレートサイトなんかでは定番のナビ
ゲーションですが、これをWordPressで、
テキストで実現しよう、という方法です。
カスタムメニューで管理できるようにし
ます。

カスタムメニューでナビゲーションも、その詳細文、サブタイトルみたいなのも管理できたら楽ですよね、という事で方法をご紹介します。

説明付きのナビゲーション


こんなやつ。これを、画像じゃなくて、カスタムメニューだけで管理できる様にします。

コード

まずおさらい。カスタムメニューとは以下のように、管理画面でWebサイトのグローバルメニューを作成出来るWordPressの機能です。自由にリンク先を指定したり、ドラッグで入れ子にしたりも出来ます。

この機能を使うには、利用しているテーマのfunctions.phpに下記のようなコードを含める必要があります。

add_theme_support( 'menu' );

で、メニューを作りたい場所に下記のようなコードを書けば反映されます。

<?php wp_nav_menu(); ?>

この辺は既出なので詳しくはCODEXで確認してください。

サブタイトル付きのメニューに対応させる

サブタイトル付きのメニューを使えるようにするには下記のようなコードをfunctions.phpに含めます。

add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4);

function description_in_nav_menu($item_output, $item){
	return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<br /><span>{$item->attr_title}</span><", $item_output);
}

walker_nav_menu_start_elのフックで、カスタムメニューで作成したリンクをpreg_replace()でspan付きのメニューに置換します。そのspanの中にはカスタムメニューで登録できるtitle属性を含めれば管理画面で説明文付きのナビゲーションを管理できますね。


こうやってカスタムリンクを使用して作ればOK。「ナビゲーションラベル」がメニュー名で、「タイトルの属性」が説明文とかサブタイトルとしてリンクに含まれます。


↑ サブタイトル付きのメニューができた。あとはcssでスタイルを調整するだけですね。

蛇足


応用すればrel属性とかも与えることが出来ますが、外観→メニュー→右上の表示オプションで項目を追加する事も出来るので、標準機能で出来る事は標準機能を使ってみてください。カスタマイズの方法を探すのも良いですが、標準機能もまだまだ知られていない機能があったりします。

当記事ではtitle属性を利用しましたが、それじゃクライアントさんが混乱するから表示オプションで追加できる「説明」を利用したい、とかなら

add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4);

function description_in_nav_menu($item_output, $item){
	return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<br /><span>{$item->description}</span><", $item_output);
}

$item->attr_titleを$item->descriptionにすればいいです。お好みでどうぞ。

画像で作ればいいじゃんと言われたらそれまでなんですが、それ言ってしまうと身も蓋もないのでスルーさせてください。

このコードは至ってシンプルな物で、場合によってはうまく動作しない場合もあるかもしれません。もっと細かく作れるみたいですので、2つ合わせてご参照下さい。カスタムメニューはCMS化には必須ですのでこういったTipsも覚えておくと楽できます。

add_filter(‘walker_nav_menu_start_el’, ‘description_in_nav_el’, 10, 4);
How to show the description of the menu

URL :
TRB :

Comments & Trackbacks (11)

  1. 坂田

    サブタイトルの文字を小さくするにはどうすればいいのでしょうか?

    • シロ

      本文にも「あとはcssでスタイルを調整するだけですね。」と書いてあるのですが、CSSで変更しては如何でしょうか。

  2. k_hag

    こんにちは。いつも参考にさせていただいております。

    サブタイトルの表示について、文字列の指定がない場合はspan要素ごと出力させない…というようなことは可能でしょうか?
    サブタイトルのあるものと無いものを同居させたいのですが、ただ文字列を指定しないだけだとという具合に空要素ができてしまうのを避けたいのです。

    • k_hag

      すみません。文中最後のほう、誤りがあったため訂正します。

      ただ文字列を指定しないだけだとという具合に

      ただ文字列を指定しないだけだと<span></span>という具合に

      • シロ

        気が付かずに返信遅くなってしまいました・・すみません
        空の要素があった場合はその要素を削除する、という事でしょうか?
        それならJavaScriptの方が楽そうですので宜しければJSをお使い下さい。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services