2014年1月17日WordBench大阪発表資料

1. 初心者でも大丈夫！
のCSS
ナビゲーション編
2014年1月17日
第25回WordBench大阪
額賀順子

2. 自己紹介
額賀 順子 | ヌカガジュンコ
フリーランスのWEBディレクター／デザイ
ナー。
つまり１人で大概の事はやっちゃう人。
Twitter ＠nukaga
写真を撮ってる人と思われていることが多
いかも。
WEB制作やWEBの色彩設計を生業として
います。

3. 本日のアジェンダ
✤
WordPressのCSSってどうなってるの？
✤
カスタムメニューって？
✤
wp nav menuって？
✤
メニュー1つにスタイルをあてたい

4. WordPressのCSSって
どうなってるの？

5. WordPressのCSSってどうなってるの？
WordPressのテーマフォルダの中に
Style.css

6. WordPressのCSSってどうなってるの？
遠っ！
と思わな
いで

7. WordPressのCSSってどうなってるの？
Style.cssでは@importも
使えますが

8. WordPressのCSSってどうなってるの？
初心者と思うのならば
CSSはstyle.cssひとつに
まとめておいた方が無難
（子テーマ時は親テーマのCSS@importもあり。
子テーマって何？はまた今度）

9. WordPressのCSSってどうなってるの？
管理者権限で
外観→テーマ編集

10. WordPressのCSSってどうなってるの？

11. WordPressのCSSってどうなってるの？
できれば管理画面からは
触らずにFTP等でアクセス
する方がおすすめ

12. WordPressのCSSってどうなってるの？
Jetpackプラグインを使うと

13. WordPressのCSSってどうなってるの？

14. カスタムメニューって？

15. カスタムメニューって？
外観→メニュー
WordPressテーマで表示できる
ナビゲーションメニュー

16. カスタムメニューって？
便利！

17. カスタムメニューって？
自分でテーマを作る時には
どうやって入れたら良い
の？

18. カスタムメニューって？
テンプレートタグ
wp nav menu
を使う

19. wp nav menuって？

20. wp nav menuって？

21. wp nav menuって？
Codexの見方がわからん！
デザイナーあるある…

22. wp nav menuって？
基本的にはメニューを入れたい
ところに
<?php wp_nav_menu(); ?>

23. wp nav menuって？
<?php wp_nav_menu($args); ?>
$argsって何？
引数ひきすう【 argument 】
args / アーギュメント

24. wp nav menuって？
<?php wp_nav_menu($args); ?>
argsのところにはパラメーターが
使える

25. wp nav menuって？
使い方例

26. wp nav menuって？
$theme_location
（文字列） （オプション） テーマの中で使
われる位置。
ユーザーが選択できるように
register_nav_menu() で登録されている必要
がある。

27. wp nav menuって？
例えば

28. wp nav menuって？
Primary Menu
Front Menu
Social Links Menu

29. wp nav menuって？
Primary Menu
Front Menu
Social Links Menu

30. wp nav menuって？
functions.phpへ
register_nav_menu('front', 'Front Menu');
ロケーション名
説明

31. wp nav menuって？
<?php wp_nav_menu
( array(
'theme_location'=>'front'));
?>
ロケーション名

32. wp nav menuって？
例えば
<?php wp_nav_menu
( array(
'theme_location'=>'front'
'container'=> 'nav'));
?>
ナビゲーションを囲うタグ

33. wp nav menuって？
「今いるページのメニューは色を変えたい」
wp nav menuを使うと
今いるページのメニューliタグのクラスに
.current-menu-itemが自動で付与されます
便利！

34. メニュー1つにスタイルを
あてたい

35. メニュー１つにスタイルをあてたい
ここ！
「表示オプションにCSSクラスが！

36. メニュー１つにスタイルをあてたい
記入すると
クラスが追加される
追加したクラスへのCSSを
style.cssへ書けばOK!
教えてくれた@bren_bossさん @tkc49さんありがとう

37. ご清聴ありがとうございました！
良きWordPressライフを！
というわけで実践へ