初心者向け!WordPressのCSS ナビゲーション編

2,535 views

Published on

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

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,535
On SlideShare
0
From Embeds
0
Number of Embeds
143
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

初心者向け!WordPressのCSS ナビゲーション編

  1. 1. 初心者でも大丈夫! のCSS ナビゲーション編 2014年1月17日 第25回WordBench大阪 額賀順子
  2. 2. 自己紹介 額賀 順子 | ヌカガジュンコ フリーランスのWEBディレクター/デザイ ナー。 つまり1人で大概の事はやっちゃう人。 Twitter  @nukaga 写真を撮ってる人と思われていることが多 いかも。 WEB制作やWEBの色彩設計を生業として います。
  3. 3. 本日のアジェンダ ✤ WordPressのCSSってどうなってるの? ✤ カスタムメニューって? ✤ wp nav menuって? ✤ メニュー1つにスタイルをあてたい
  4. 4. WordPressのCSSって どうなってるの?
  5. 5. WordPressのCSSってどうなってるの? WordPressのテーマフォルダの中に Style.css
  6. 6. WordPressのCSSってどうなってるの? 遠っ! と思わな いで
  7. 7. WordPressのCSSってどうなってるの? Style.cssでは@importも 使えますが
  8. 8. WordPressのCSSってどうなってるの? 初心者と思うのならば CSSはstyle.cssひとつに まとめておいた方が無難 (子テーマ時は親テーマのCSS@importもあり。  子テーマって何?はまた今度)
  9. 9. WordPressのCSSってどうなってるの? 管理者権限で 外観→テーマ編集
  10. 10. WordPressのCSSってどうなってるの?
  11. 11. WordPressのCSSってどうなってるの? できれば管理画面からは 触らずにFTP等でアクセス する方がおすすめ
  12. 12. WordPressのCSSってどうなってるの? Jetpackプラグインを使うと
  13. 13. WordPressのCSSってどうなってるの?
  14. 14. カスタムメニューって?
  15. 15. カスタムメニューって? 外観→メニュー WordPressテーマで表示できる ナビゲーションメニュー
  16. 16. カスタムメニューって? 便利!
  17. 17. カスタムメニューって? 自分でテーマを作る時には どうやって入れたら良い の?
  18. 18. カスタムメニューって? テンプレートタグ wp nav menu を使う
  19. 19. wp nav menuって?
  20. 20. wp nav menuって?
  21. 21. wp nav menuって? Codexの見方がわからん! デザイナーあるある…
  22. 22. wp nav menuって? 基本的にはメニューを入れたい ところに <?php wp_nav_menu(); ?>
  23. 23. wp nav menuって? <?php wp_nav_menu($args); ?> $argsって何? 引数ひきすう【 argument 】 args / アーギュメント
  24. 24. wp nav menuって? <?php wp_nav_menu($args); ?> argsのところにはパラメーターが 使える
  25. 25. wp nav menuって? 使い方例
  26. 26. wp nav menuって? $theme_location (文字列) (オプション) テーマの中で使 われる位置。 ユーザーが選択できるように register_nav_menu() で登録されている必要 がある。
  27. 27. wp nav menuって? 例えば
  28. 28. wp nav menuって? Primary Menu Front Menu Social Links Menu
  29. 29. wp nav menuって? Primary Menu Front Menu Social Links Menu
  30. 30. wp nav menuって? functions.phpへ register_nav_menu('front', 'Front Menu'); ロケーション名 説明
  31. 31. wp nav menuって? <?php wp_nav_menu ( array(             'theme_location'=>'front'));     ?> ロケーション名
  32. 32. wp nav menuって? 例えば <?php wp_nav_menu ( array( 'theme_location'=>'front' 'container'=> 'nav'));     ?> ナビゲーションを囲うタグ
  33. 33. wp nav menuって? 「今いるページのメニューは色を変えたい」 wp nav menuを使うと 今いるページのメニューliタグのクラスに .current-menu-itemが自動で付与されます 便利!
  34. 34. メニュー1つにスタイルを あてたい
  35. 35. メニュー1つにスタイルをあてたい ここ! 「表示オプションにCSSクラスが!
  36. 36. メニュー1つにスタイルをあてたい 記入すると クラスが追加される 追加したクラスへのCSSを style.cssへ書けばOK! 教えてくれた@bren_bossさん @tkc49さんありがとう
  37. 37. ご清聴ありがとうございました! 良きWordPressライフを! というわけで実践へ

×