• かちびと.net

    WordPressのカスタムメニューをショートコードで表示出来る様にする方法をご紹介。固定ページや記事内にカスタムメニューを実装します。

    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のカスタムメニューをショートコードで表示出来る様にする

スポンサーリンク

仕事で必要になったのでメモ。WordPressで作れるカスタムメニューをショートコードで実装出来るようにする、という方法です。やってみて思ったけど結構便利です。

カスタムメニュー、という名ですけど、メニューコンテンツ以外にも利用出来るので、ショートコードで実装する方法は覚えておいて損は無いです。

コード

以下のようなコードをfunctions.phpに含めます。

function single_page_custom_menu($atts, $content = null) {
    extract(shortcode_atts(array(
        'menu'            => '',
        'container'       => 'div',
        'container_class' => '',
        'container_id'    => '',
        'menu_class'      => 'menu',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'depth'           => 0,
        'walker'          => '',
        'theme_location'  => ''),
        $atts));

    return wp_nav_menu( array(
        'menu'            => $menu,
        'container'       => $container,
        'container_class' => $container_class,
        'container_id'    => $container_id,
        'menu_class'      => $menu_class,
        'menu_id'         => $menu_id,
        'echo'            => false,
        'fallback_cb'     => $fallback_cb,
        'before'          => $before,
        'after'           => $after,
        'link_before'     => $link_before,
        'link_after'      => $link_after,
        'depth'           => $depth,
        'walker'          => $walker,
        'theme_location'  => $theme_location));
}
add_shortcode("cmenu", "single_page_custom_menu");

上の配列はカスタムメニューのセッティング用です。

[cmenu menu="foo"]

これで、管理画面の外観→メニューで作成した「foo」という名のカスタムメニューを上記のようなショートコードで実装する事が出来ます。

[cmenu menu="foo" menu_id="bar"]

とすれば、id="bar"が付きます。

カスタムメニューの設定はCodex(テンプレートタグ/wp nav menu)をご参照ください。

冒頭にも書きましたが、カスタムメニューと言ってもメニューにしか使えない、という訳ではありません。

  1. 管理画面で管理可能
  2. ネスト可能
  3. リンク先を自由に設定
  4. 複数作成可能
  5. 詳細やclassも加えられる

といった特徴があるので、リンク集やサイトマップ(コードはカスタムメニューとショートコードを使ったサイトマップ作成を参照)も任意の内容で作成出来ます。また、固定ページの子ページや孫ページへのインデックスを作るのもいいかもしれません。

以前書いた、「カスタムメニューを使って、サブタイトル付きのナビゲーションを実装する」方法を利用して、ツールチップでリンク先の説明文を出す、などのコンテンツも作成出来るし、管理画面でツールチップ内の文章を管理出来ます。

いずれにしてもショートコードで実装する事も出来るのでカスタムメニューの利用価値は非常に高い機能と言えますね。ともあれ、地味に大変なのはクライアントさんにカスタムメニューの使い方を知って貰うことなんですけども。

via:wp_nav_menu shortcode

URL :
TRB :

Comments & Trackbacks (4)

  1. tamako

    すごく役にたちました!ありがとうございます。

    • シロ

      お役にたたら幸いですー!

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services