Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

メニューは管理画面で設定できるようにしよう

12,032 views

Published on

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

Published in: Technology
  • Dating direct: ♥♥♥ http://bit.ly/2u6xbL5 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

メニューは管理画面で設定できるようにしよう

  1. 1. メニューやSNSアイコンは 管理画面で設定できるように しよう WordBench東京2月勉強会 森山真祐子
  2. 2. 自己紹介 • 森山真祐子です! • 旅行が好き • WordBench 東京の雑用担当 • WordCamp Central のボランティア • 好きなスターターテーマは「_s」 • 最近、カスタムメニューのバグを発見。
  3. 3. カスタムメニューの 話をします!
  4. 4. セッションの目的 • プログラミングが苦手な Web デザイナーさん &コーダーさんにもカスタムメニューを使って もらう • WordPress テーマ内にハードコーディング されたメニューを撲滅する
  5. 5. もくじ • カスタムメニューとは • いろいろなカスタマイズ • 新機能!投稿タイプアーカイブ
  6. 6. カスタムメニューとは
  7. 7. ナビゲーションのコーディング 大変ですよね?
  8. 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. 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. 10. あと、変更も多いし
  11. 11. \(^o^)/
  12. 12. wp_nav_menu(); \そこで!/
  13. 13. 管理画面 から 設定 できるよう に なる
  14. 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. 15. でも.... 自動で生成してくれるってことは、 HTML を自由に書けないってことだよね? (๑•﹏•)
  16. 16. \そんなことないよ/
  17. 17. \コピペでいこう/ いろいろなカスタマイズ
  18. 18. いろいろなカスタマイズ 1. クラスや ID を指定しよう 2. 項目ごとに異なるアイコンをつけよう 3. 入れ子がないメニューをつくろう 4. 複数のメニューを登録しよう 5. 日英表記してみよう 6. ぜんぶカスタマイズしよう \どんどんいくぞ/
  19. 19. 1. クラスや ID を指定しよう
  20. 20. こんなときに便利 • 使いたい CSS フレームワークや、JavaScript のライブラリなど で、すでにつけたい ID やクラスが決まっている。 • clearfix を追加したい
  21. 21. <?php wp_nav_menu( array( ‘キー' => ‘バリュー’, )); ?> <?php wp_nav_menu(); ?> wp_nav_menu への設定は連想配列で渡します。 全パラメーターは Codex を参照。 設定のキホン
  22. 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. 23. 2. 項目ごとに異なるアイコンを つけよう
  24. 24. 参考: Font Awesome の使用例のページ
  25. 25. li タグにも \クラスを追加するよ/
  26. 26. あとは CSS を \ 工夫してね /
  27. 27. \ちなみに/
 自動で追加されるクラス • Codex でチェックしよう • 実際に WordPress で生成さ れたメニューの HTML を読ん でみよう 参考: メニュー項目の CSS クラス
  28. 28. 3. 入れ子がないメニューを つくろう
  29. 29. ありがちなフッター こういうメニュー、
 サブメニュー設定されたら 崩れそうですね?
  30. 30. wp_nav_menu( array( 'depth' => '1' )); <?php wp_nav_menu(); ?>
  31. 31. <?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', ) ); ?> さきほどのメニューに 追加する場合
  32. 32. 4. 複数のメニューを登録しよう
  33. 33. 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
  34. 34. <?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
  35. 35. 5. 日英表記してみよう
  36. 36. 「説明」を使います
  37. 37. 標準では出力されないので…. (;́Д`)
  38. 38. `walker_nav_menu_start_el` \というフィルターにフックするのが簡単/
  39. 39. Chocolat で \ デモします /
  40. 40. • カスタマイズしたソースの場所
 https://github.com/mayukojpn/chocolat/tree/wbtokyo- demo01
  41. 41. 6. ぜんぶカスタマイズしよう
  42. 42. Codex にこんなコードも 参考: 関数リファレンス/wp get nav menu items
  43. 43. 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
  44. 44. _s でやるなら...
  45. 45. (๑•﹏•) 今日の説明のどれでも 対応できないという方は.....
  46. 46. たぶんそのコーディング 見直したほうがいい! ※異論は懇親会でどうぞ! (;^ω^)
  47. 47. \最後に/ WordPress 4.4 から 投稿タイプアーカイブが 追加されました!
  48. 48. バグ発見…
  49. 49. バグ報告しました \テストしてくれる方募集!/
  50. 50. 修正プラグインもあるよ コアが修正されるまでの間使ってくださいね。 高橋くんとろゆにさんありがとう!
  51. 51. • Trac のチケット
 https://core.trac.wordpress.org/ticket/35324 • 修正プラグイン
 https://gist.github.com/mayukojpn/ 6ef62c39dcf48c17ed96
  52. 52. \ご清聴ありがとうございました/

×