Embed Size (px)
Citation preview
メニューやSNSアイコンは 管理画面で設定できるように
しよう
WordBench東京2月勉強会 森山真祐子
自己紹介•森山真祐子です！ • 旅行が好き
• WordBench 東京の雑用担当
• WordCamp Central のボランティア
• 好きなスターターテーマは「_s」
• 最近、カスタムメニューのバグを発見。
カスタムメニューの 話をします！
セッションの目的
• プログラミングが苦手な Web デザイナーさん＆コーダーさんにもカスタムメニューを使ってもらう
• WordPress テーマ内にハードコーディングされたメニューを撲滅する
もくじ
• カスタムメニューとは
• いろいろなカスタマイズ
• 新機能！投稿タイプアーカイブ
カスタムメニューとは
ナビゲーションのコーディング 大変ですよね？
<ul> <li> <a href="http://local.dev/"> いっこめ </a> </li> <li> <a href="http://local.dev/"> にこめ </a> </li> <li> <a href="http://local.dev/"> さんこめ </a> </li> <li> <a href="http://local.dev/"> よんこめ </a> </li> <li> <a href="http://local.dev/"> ごこめ </a> </li> <li> <a href="http://local.dev/"> ろっこめ </a> </li> </ul>
リストタグって 長くなるし あんまり美しく ないし
<ul> <li> <a href="http://local.dev/"> いっこめ </a> </li> <li> <a href="http://local.dev/"> にこめ </a> </li> <li> <a href="http://local.dev/"> さんこめ </a> <ul> <li> <a href="http://local.dev/"> さんこめの子いっこめ </a> </li> <li> <a href="http://local.dev/"> さんこめの子にこめ </a> </li> <li> <a href="http://local.dev/"> さんこめの子さんこめ </a> </li> </ul> </li> <li> <a href="http://local.dev/"> よんこめ </a>
<ul> <li> <a href="http://local.dev/"> よんこめの子いっこめ </a> </li> <li> <a href="http://local.dev/"> よんこめの子にこめ </a> </li> <li> <a href="http://local.dev/"> よんこめの子さんこめ </a> </li> </ul> </li> <li> <a href="http://local.dev/"> ごこめ </a> </li> <li> <a href="http://local.dev/"> ろっこめ </a> </li> </ul>
入れ子になったら もういやだ
あと、変更も多いし
＼(^o^)／
wp_nav_menu();
＼そこで!／
管理画面 から 設定
できるように なる
<ul> <li> <a href="http://local.dev/"> いっこめ </a> </li> <li> <a href="http://local.dev/"> にこめ </a> </li> <li> <a href="http://local.dev/"> さんこめ </a> <ul> <li> <a href="http://local.dev/"> さんこめの子いっこめ </a> </li> <li> <a href="http://local.dev/"> さんこめの子にこめ </a> </li> <li> <a href="http://local.dev/"> さんこめの子さんこめ </a> </li> </ul> </li> <li> <a href="http://local.dev/"> よんこめ </a>
<ul> <li> <a href="http://local.dev/"> よんこめの子いっこめ </a> </li> <li> <a href="http://local.dev/"> よんこめの子にこめ
add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'primary', __( 'Primary Menu', 'theme-slug' ) );
}
wp_nav_menu();
header.php
functions.php header.php
＼設定は簡単／
これで、管理画面での設定に基づいて リストタグを生成してくれます！
でも....
自動で生成してくれるってことは、
HTML を自由に書けないってことだよね？
(๑•﹏•)
＼そんなことないよ／
＼コピペでいこう／ いろいろなカスタマイズ
いろいろなカスタマイズ1. クラスや ID を指定しよう
2. 項目ごとに異なるアイコンをつけよう
3. 入れ子がないメニューをつくろう
4. 複数のメニューを登録しよう
5. 日英表記してみよう
6. ぜんぶカスタマイズしよう
＼どんどんいくぞ／
1. クラスや ID を指定しよう
こんなときに便利
• 使いたい CSS フレームワークや、JavaScript のライブラリなどで、すでにつけたい ID やクラスが決まっている。
• clearfix を追加したい
<?php wp_nav_menu( array( ‘キー' => ‘バリュー’,
)); ?>
<?php wp_nav_menu(); ?>
wp_nav_menu への設定は連想配列で渡します。 全パラメーターは Codex を参照。
設定のキホン
<?php wp_nav_menu( array( 'menu_class' => ‘', // ulタグのクラスを追加
'menu_id' => ‘{slug}-1’, // ulタグの id を変更
'container' => ‘div‘, // 変更すると、div タグを nav タグや無しに変更できる
'container_class' => ‘menu-{menu slug}-container‘, // div タグのクラスを変更
'container_id' => ‘', // div タグの id を追加
) ); ?>
<?php wp_nav_menu(); ?>
これで、まわりの div タグや ul タグのクラスが指定できます
クラスや id の追加
2. 項目ごとに異なるアイコンをつけよう
li タグにも ＼クラスを追加するよ／
あとは CSS を ＼ 工夫してね ／
＼ちなみに／
自動で追加されるクラス
• Codex でチェックしよう
• 実際に WordPress で生成されたメニューの HTML を読んでみよう
参考: メニュー項目の CSS クラス
3. 入れ子がないメニューを つくろう
ありがちなフッター
こういうメニュー、サブメニュー設定されたら崩れそうですね？
wp_nav_menu( array( 'depth' => '1' ));
<?php wp_nav_menu(); ?>
<?php wp_nav_menu( array( 'menu_class' => ‘menu', // ulタグのクラスを追加
'menu_id' => ‘{slug}-1’, // ulタグの id を変更
'container' => ‘div‘, // 変更すると、div タグを nav タグや無しに変更できる
'container_class' => ‘menu-{menu slug}-container‘, // div タグのクラスを変更
'container_id' => ‘', // div タグの id を追加
'depth' => ‘1', ) ); ?>
さきほどのメニューに 追加する場合
4. 複数のメニューを登録しよう
add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'theme-slug' ),
'secondary' => __( 'Secondary Menu', 'theme-slug' ),
) );
}
functions.php header.php
register_nav_menus で配列を設定
add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
register_nav_menu(
'primary', __( 'Primary Menu', 'theme-slug' )
);
}
functions.php
<?php wp_nav_menu( array( 'theme_location' => ‘primary’, ) ); ?>
header.php header.php
‘theme_location’ に明示的に指定
<?php wp_nav_menu(); ?>
header.php
<?php wp_nav_menu( array( 'theme_location' => ‘secondary’, ) ); ?>
footer.php
5. 日英表記してみよう
「説明」を使います
標準では出力されないので….
(；́Д｀)
`walker_nav_menu_start_el` ＼というフィルターにフックするのが簡単／
Chocolat で ＼ デモします ／
• カスタマイズしたソースの場所https://github.com/mayukojpn/chocolat/tree/wbtokyo-demo01
6. ぜんぶカスタマイズしよう
Codex にこんなコードも
参考: 関数リファレンス/wp get nav menu items
Walker Class という方法も
<?php wp_nav_menu( array( 'walker' => new Custom_Walker_Nav_Menu(), ) ); ?>
<?php class Custom_Walker_Nav_Menu extends Walker {
(ここにかわりの動きをかく)
} ?>
header.php
functions.php
_s でやるなら...
(๑•﹏•)
今日の説明のどれでも 対応できないという方は.....
たぶんそのコーディング 見直したほうがいい！
※異論は懇親会でどうぞ！
(；^ω^)
＼最後に／ WordPress 4.4 から
投稿タイプアーカイブが 追加されました！
バグ発見…
バグ報告しました
＼テストしてくれる方募集！／
修正プラグインもあるよ
コアが修正されるまでの間使ってくださいね。 高橋くんとろゆにさんありがとう！
• Trac のチケットhttps://core.trac.wordpress.org/ticket/35324
• 修正プラグインhttps://gist.github.com/mayukojpn/6ef62c39dcf48c17ed96
＼ご清聴ありがとうございました／
