WordPressのカスタムメニュー（wp_nav_menu）を使って、サブタイトル付きのナビゲーションを実装する - かちびと.net
今さらですがWordPressのカスタムメニューについての備忘録です。 便利なのは知りつつもほとんどテンプレートにURLを直接記述したり、見栄えも画像を使ったりが多いのであまり使うことがないんですが、久しぶりに使ってみようとしたらいろいろと忘れていたので復習を兼ねて。 紹介している内容はWordPress Ver 3.5.1で試したものです。 導入方法 自作テーマ等の場合はまずカスタムメニューの機能を実装する必要があり、カスタムメニューを実装するためには下記のコードをfunctions.phpに記述します。
このタグは、ナビゲーションメニューを表示します。メニューは 管理画面 > 外観 > メニュー で作成できます。 theme_location パラメーターが与えられた時、このタグは theme_location が示す位置へ割り当てられたメニューを表示します。その位置がない、またはメニューが割り当てられていない場合は、fallback_cb パラメーターで与えられた関数を呼び出してメニューを表示します。 theme_location パラメーターが与えられなかった場合、このタグは次の規則に従います。 menu パラメーターが与えられている場合、それ（ID、スラッグ、または名前）に一致するメニュー； さもなくば、最初の空でないメニュー； さもなくば（ひとつもメニューが定義されていない場合）、fallback_cb パラメーターで与えられた関数を呼び出す（デフォルトでは wp_page_men
WordPress カスタムメニューの使い方（その2：wp_nav_menuとregister_nav_menuによるカスタマイズ）
WordPressのカスタムメニューのカスタマイズ方法について解説します。 カスタムメニューを利用すれば、サイドメニューだけでなく、ナビゲーションを任意の場所に設置することもできるようになります。本エントリーでは、フッタに次のようなナビゲーションを追加してみます。 WordPressのバージョンは3.3.1を使っています。カスタマイズにはTwentyElevenテーマを使います。また、フッタナビゲーションはヘッダナビゲーションのスタイルをそのまま流用しているので、id属性値が重複しています。予めご了承ください。 管理画面上でカスタムメニューを利用する方法は割愛していますので、「WordPress カスタムメニューの使い方（その1：基本）」を参照してください。 １．wp_nav_menuを使ってカスタムメニューを表示する フッタにナビゲーションを表示するための準備として、footer.php
WordPress3.xでメニューをカスタマイズする（wp_nav_menu の出力を変更する方法） - [[ ist ]] mac,windows,ipod パソコン周辺機器 etc...
WordPress3.xから作成できるようになったメニューのカスタマイズの覚え書きです。 とりあえず、基本は、 WordPressの管理画面の「外観」→「メニュー」でメニューを作成した後、テンプレート内のメニューを表示したい場所に、 <?php wp_nav_menu( array('menu' => 'xxx' )); ?>と記述すれば、メニューは表示できます。（xxx は、作成したメニューの名前が入ります） あとは、書き出されるソースを見ながら、style.cssにスタイルを設定していくというやり方になります。 しかし、標準で書き出されるIDやClass名又は、タグでは対応しきれなくなる場合がでてきたら、以下の方法で、書き出されるHTMLをカスタマイズしましょう。 ※万が一の場合の為に、function.phpはバックアップしてた方が良いでしょう。 ■カスタマイズの基本（下準備） 使用
![WordPress3.xでメニューをカスタマイズする（wp_nav_menu の出力を変更する方法） - [[ ist ]] mac,windows,ipod パソコン周辺機器 etc...](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a784e376126a71ba8193d51bb9d241b839ce286/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127044696377%2F17680117127044696935%2F1555524022)
WordPress3.0から実装された『カスタムメニュー』を自分で作成したテーマに組み込んでみた。標準テーマの『Twenty Ten』は対応しているので、そのコードを参考に実装。実際に対応させてみて気が付いたのは、コーポレートサイト構築に便利な機能だって事。面白い！ functions.phpに下記のソースを追加する。 <?php register_nav_menus( array( ‘primary’ => __( ‘Primary Navigation’ ), ) ); ?> 上のソースを見ると、『Primary Navigation』というのが『primary』という言葉に関連付けられているのが予測できた。このソースはWordPress3.0標準テーマのTwenty Tenのソースなんだけど、実際にTwenty Tenを有効にした状態でカスタムメニューの画面に入ると、下記の様
ナビゲーションメニューを表示する（パラメータ'echo'がtrueの場合）。パラメータ'echo'がfalseの場合は、ナビゲーションメニューの文字列（HTMLコード）を返す。
wp_nav_menu
WordPressのテーマを配布、プラグイン解説や日本語版の配布、テンプレートタグによるカスタマイズ方法を紹介、WordPressのリファレンスサイトを目指しています。 Display a navigation menu. Menus can be created from the backend: Appearance > Menus. Given a theme_location parameter, the function displays the menu assigned to that location, or nothing if no such location exists or no menu is assigned to it. If not given a theme_location parameter, the function displays the me
WordPress で現在のページもしくは子孫のページに居る時に、親や子などを CSS 色付けしたい場合はありませんか。今回はその方法についてご紹介します。 wp_list_pages() のページ一覧で色つけをしたい wp_list_pages() でページ一覧を出している状態で、現在のページの部分に色をつける方法をご紹介します。 ページ一覧の作り方 まずページ一覧は以下のように普通に作れば良いです。 色を付ける方法 この関数で作ったページ一覧で、現在のページに当たるものには .current_page_item という class が付加されます。また、現在のページの親に当たるものには .current_page_ancestor という class が付加されます。つまり、この class に対して style を設定しておけば良いわけです。 現在のページに色を付ける 例えば現在のペ
Wordpress 3.0 カスタムメニュー作成編集機能とwp_nav_menu() – Yama's Memorandum
WordPress 3.0 カスタムメニュー作成編集機能とwp_nav_menu() July 8, 2010 – 11:05 am 先月の末、Wordpressを最新版(v.3.0)に更新した。その後、この新しい版で何ができるようになったのか少しずつ試しているところ。新たに加わった機能のうち、カスタムメニュー作成・編集機能は、かなり便利と感じている。このあたりについて、試してみた範囲ではあるが、一応メモを残しておいた。 メニューの作成・編集用画面： Wordpressの管理画面で、Appearance → Menuでメニューの作成・編集用画面を開くことができる。この画面上を通じて、 メニュー（menu name）の定義 各メニューに含めるメニュー項目の追加・編集 メニュー項目の表示順序ならびに親子関係の設定・編集 を行うことができる。 下図にメニューの作成・編集用画面を示した： メニュー
やっと、off-canvas と dropdown の切り替えができるCSSだけで実装したレスポンシブナビゲーションメニューが完成した。 もちろん、全部自分だけで作れる技量もなく、世界中を旅しながら(ネットだけど)CSSテンプレート探しまわり、そのテンプレートに合う html を吐き出すようにしました。 wordpressのテーマとして作っているので、wp_nav_menu()で普通に出力しても、求めている htmlコード にはならず、困った困ったと、フックをかけて何とかしてやろうと、処理方法を探しまわったところ「カスタムウォーカー機能」という、高いレベルで htmlコード をカスタマイズ出来ることが分かりました。 使い方はくせがあるように思いますが、結果的にはそうでもなかったので、メモとして残しておきます。 まず、呼び出し方 wp_nav_menu( array( 'theme_loca
wp_nav_menu の出力をドロップダウンメニューで表示 | Web Design Leaves
wp_nav_menu 関数は、デフォルトでは以下のように ul 要素（ li 要素）を使ってメニューの各項目を出力する。 <div class="menu-XX-container"> <ul id="menu-XX" class="menu"> <li id="menu-item-YY" class="menu-item menu-item-type-ZZ menu-item-YY"> <a href="リンク先のアドレス">メニューのラベル</a></li> <li id="menu-item-YY" class="menu-item menu-item-type-ZZ menu-item-YY"> <a href="リンク先のアドレス">メニューのラベル</a></li> ・・・ <ul class="sub-menu"> <li id="menu-item-YY" class="
WordPress 3.0 から追加された wp_nav_menu のコードを追ったオレメモ。 多分「カスタムメニュー」に関係あるはず。 WordPress.com 日本語ブログ : 新カスタムメニュー機能 (など) WordPress.com Support : Menus Function Reference/wp nav menu trac : nav-menu-template.php $defaults = array( 'menu' => , 'container' => 'div', 'container_class' => , 'container_id' => , 'menu_class' => 'menu', 'menu_id' => , 'echo' => true, 'fallb
wp_nav_menu() – Function | Developer.WordPress.org
Default:array() Return void|string|false Void if 'echo' argument is true, menu output if 'echo' is false. False if there are no items or no menu was found. More Information Usage wp_nav_menu( $args ); Given a theme_location parameter, the function displays the menu assigned to that location. If no such location exists or no menu is assigned to it, the parameter fallback_cb will determine what is d
wp_nav_menu 関数はカスタムメニューを表示するための関数(テンプレートタグ)です。 メニューの前後に表示する(HTML)テキストを指定したり、メニューを覆うラッパーの要素を指定するなど、細かな制御が可能です。 しかしながら、schema.org が提唱するような、itemprop などを用いたメタデータを埋め込むための機能は用意されていません。 nav_menu_item_id などのフィルタにフックすれば、class 名や id 名を細かく制御することができますが、 いずれの方法でも、class 名や id 名以外を設定することはできません。 したがって、メニューに関する独自のデータや、あるいはメタデータを埋め込みたい場合には、 wp_nav_menu 関数が出力する HTML テキストを独自にカスタマイズする必要があります。 幸いなことに wp_nav_menu 関数は、独自
このタグは、ナビゲーションメニューを表示します。メニューは 管理画面 > 外観 > メニュー で作成できます。 theme_location パラメーターが与えられた時、このタグは theme_location が示す位置へ割り当てられたメニューを表示します。その位置がない、またはメニューが割り当てられていない場合は、fallback_cb パラメーターで与えられた関数を呼び出してメニューを表示します。 theme_location パラメーターが与えられなかった場合、このタグは次の規則に従います。 menu パラメーターが与えられている場合、それ（ID、スラッグ、または名前）に一致するメニュー； さもなくば、最初の空でないメニュー； さもなくば（ひとつもメニューが定義されていない場合）、fallback_cb パラメーターで与えられた関数を呼び出す（デフォルトでは wp_page_men
【もはやそれほど高速化しません】wp_nav_menuでウィジェットを使わずサイドバーにカスタムメニューを導入 – HCDコンサルティング（旧・中川勉社会保険労務士事務所FPウェブシュフ）のブログ
ウェブシュフではこれまでカスタムメニューの表示のためだけにウィジェット機能を使ってきました。しかし表示速度が落ちるので、試しに、ウィジェットを使わずカスタムメニューを表示する作業をやってみたときの記録です。 抹消線の理由 この記事は元々2013年2月11日に公開しました。その時点では私自身が「ウィジェットってサイトを重くするんだぜ」と信じて疑わなかったのですが、もはやそうでもないことが明らかになったので抹消しました。 それを教えてくれたのが@HissyNCさんです。 @web_shufu ウィジェットにした方が速くなるよ — Takuro Hishikawa (@HissyNC) 2013, 12月 10 @web_shufu うろおぼえですけど最近のバージョンの標準ウィジェットは高速化のためにキャッシュされてるんですよ縲怐Bプラグインのウィジェットによってはキャッシュされてないし重くなる
メニュータグ wp_nav_menu をカスタマイズして第一階層のメニューのリンクテキストをhタグで囲う | WordPressカスタマイズ事例【100ウェブ】
メニュータグ wp_nav_menu をカスタマイズして第一階層のメニューのリンクテキストをhタグで囲う WordPressのメニューを制御する「wp_nav_menu」。 グローバルメニューやサイドメニューなどで使う関数で、管理画面の「メニュー」で登録した内容をhtmlとして出力してくれます。 出力されるメニューは、 <ul id="xx" class="xx"> <li id="xx" class="xx"> <a href="/menu1/">メニュー1</a> <ul id="xx" class="xx"> <li id="xx" class="xx"> <a href="/menu1/menu1-child1/">子メニュー1</a> </li> </ul> </li> </ul> たとえば階層構造があると上のような感じになります。リンクのaタグはliで囲われているだけですが、メ
通常、ワードプレスのカスタムメニューを出力するときは wp_nav_menu を使います。 一例を挙げると次のように記述しますね。 <ul> <?php wp_nav_menu ( array('menu'=>'header-navi', 'container'=>false, 'items_wrap'=>'%3$s', 'fallback_cb'=>'') ); ?> </ul> これで出力されるHTMLは、概ね次のようになります。 <ul> <li id="menu-item-2851" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-2851
初心者です。ご指導よろしくお願い致します。 過去のトピック「wp_list_categories()が出力するliのclassにカテゴリースラッグを含める方法」を応用して wp_nav_menu()にも同じようにメニュー項目のカテゴリ（ページ）スラッグを、 liのclassに追加したいと考えています。 …が、トライしましたがphpの知識が乏しくうまくできませんでした。。。 恥ずかしいですが初心者のあてずっぽうコードです。↓ <?php function my_nav_menu( $output, $args ) { if ( preg_match_all( '/menu-item-([0-9]+[^0-9])/', $output, $matches ) ) { foreach ( $matches[0] as $key => $match ) { $menu = wp_get_nav_m
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress：カスタムメニュー（wp_nav_menu）について - NxWorld
テンプレートタグ/wp nav menu - WordPress Codex 日本語版
テーマをカスタムメニュー対応にしてみた(wp_nav_menu) « WANZ STYLE – blog -
wp_nav_menu
WordPress で wp_list_pages() 及び wp_nav_menu() で現在のページ並びに子孫のページで付加される class について
【WordPress】自由自在、Walker_Nav_Menuクラスでwp_nav_menuの出力を操る
WordPress 3.x, wp_nav_menu コードを追ってみた
wp_nav_menu カスタムメニューにメタデータを埋め込む
WordPressのカスタムメニュー（wp_nav_menu）を使って、サブタイトル付きのナビゲーションを実装する
テンプレートタグ/wp nav menu - WordPress Codex 日本語版
【WordPress】カスタムメニューの［wp_nav_menu］から不要なタグを削除する方法
wp_nav_menu()が出力するliのclassにカテゴリー(ページ)スラッグを含める方法