WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 で発表したスライドです。 https://wbtokyo.doorkeeper.jp/

1. メニューやSNSアイコンは
管理画面で設定できるように
しよう
WordBench東京2月勉強会
森山真祐子

2. 自己紹介
• 森山真祐子です！
• 旅行が好き
• WordBench 東京の雑用担当
• WordCamp Central のボランティア
• 好きなスターターテーマは「_s」
• 最近、カスタムメニューのバグを発見。

3. カスタムメニューの
話をします！

4. セッションの目的
• プログラミングが苦手な Web デザイナーさん
＆コーダーさんにもカスタムメニューを使って
もらう
• WordPress テーマ内にハードコーディング
されたメニューを撲滅する

5. もくじ
• カスタムメニューとは
• いろいろなカスタマイズ
• 新機能！投稿タイプアーカイブ

6. カスタムメニューとは

7. ナビゲーションのコーディング
大変ですよね？

8. <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>
リストタグって
長くなるし
あんまり美しく
ないし

9. <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>
入れ子になったら
もういやだ

10. あと、変更も多いし

11. ＼(^o^)／

12. wp_nav_menu();
＼そこで!／

13. 管理画面
から
設定
できるよう
に
なる

14. <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.phpheader.php
＼設定は簡単／
これで、管理画面での設定に基づいて
リストタグを生成してくれます！

15. でも....
自動で生成してくれるってことは、
HTML を自由に書けないってことだよね？
(๑•﹏•)

16. ＼そんなことないよ／

17. ＼コピペでいこう／
いろいろなカスタマイズ

18. いろいろなカスタマイズ
1. クラスや ID を指定しよう
2. 項目ごとに異なるアイコンをつけよう
3. 入れ子がないメニューをつくろう
4. 複数のメニューを登録しよう
5. 日英表記してみよう
6. ぜんぶカスタマイズしよう
＼どんどんいくぞ／

19. 1. クラスや ID を指定しよう

20. こんなときに便利
• 使いたい CSS フレームワークや、JavaScript のライブラリなど
で、すでにつけたい ID やクラスが決まっている。
• clearfix を追加したい

21. <?php
wp_nav_menu( array(
‘キー' => ‘バリュー’,
));
?>
<?php wp_nav_menu(); ?>
wp_nav_menu への設定は連想配列で渡します。
全パラメーターは Codex を参照。
設定のキホン

22. <?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 の追加

23. 2. 項目ごとに異なるアイコンを
つけよう

24. 参考: Font Awesome の使用例のページ

25. li タグにも
＼クラスを追加するよ／

29. あとは CSS を
＼ 工夫してね ／

30. ＼ちなみに／
自動で追加されるクラス
• Codex でチェックしよう
• 実際に WordPress で生成さ
れたメニューの HTML を読ん
でみよう
参考: メニュー項目の CSS クラス

31. 3. 入れ子がないメニューを
つくろう

32. ありがちなフッター
こういうメニュー、
サブメニュー設定されたら
崩れそうですね？

33. wp_nav_menu( array( 'depth' => '1' ));
<?php wp_nav_menu(); ?>

34. <?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',
) );
?>
さきほどのメニューに
追加する場合

35. 4. 複数のメニューを登録しよう

36. 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.phpheader.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

37. <?php
wp_nav_menu( array(
'theme_location' => ‘primary’,
) );
?>
header.phpheader.php
theme_location に明示的に指定
<?php
wp_nav_menu();
?>
header.php
<?php
wp_nav_menu( array(
'theme_location' => ‘secondary’,
) );
?>
footer.php

38. 5. 日英表記してみよう

39. 「説明」を使います

40. 標準では出力されないので….
(；́Д｀)

41. `walker_nav_menu_start_el`
＼というフィルターにフックするのが簡単／

42. Chocolat で
＼ デモします ／

44. • カスタマイズしたソースの場所
https://github.com/mayukojpn/chocolat/tree/wbtokyo-
demo01

45. 6. ぜんぶカスタマイズしよう

46. Codex にこんなコードも
参考: 関数リファレンス/wp get nav menu items

47. 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

48. _s でやるなら...

49. (๑•﹏•)
今日の説明のどれでも
対応できないという方は.....

50. たぶんそのコーディング
見直したほうがいい！
※異論は懇親会でどうぞ！
(；^ω^)

51. ＼最後に／
WordPress 4.4 から
投稿タイプアーカイブが
追加されました！

53. バグ発見…

54. バグ報告しました
＼テストしてくれる方募集！／

55. 修正プラグインもあるよ
コアが修正されるまでの間使ってくださいね。
高橋くんとろゆにさんありがとう！

56. • Trac のチケット
https://core.trac.wordpress.org/ticket/35324
• 修正プラグイン
https://gist.github.com/mayukojpn/
6ef62c39dcf48c17ed96

57. ＼ご清聴ありがとうございました／