正しいテーマの作り方 これができたらテーマ制作の上級者!

正しいテーマの作り方 これができたらテーマ制作の上級者!

WordCamp Kansai 2016 で使ったスライドです:D

567e1272bd038860f64c3c1c8dd5dfdb?s=128

Shinichi Nishikawa

July 10, 2016
Tweet

Transcript

  1. “ਖ਼͍͠” ςʔϚͷ࡞Γํ Shinichi Nishikawa WordCamp Kansai 2016 ͜Ε͕Ͱ͖ͨΒςʔϚ੍࡞ͷ্ڃऀ

  2. “ਖ਼͍͠”ʁ

  3. ελϯμʔυ͕͋Γɺ ཧ༝͕͋Γɺ ϝϦοτ΋͋Δɻ

  4. ࠓ೔ͷ࿩ ۩ମతʹɺίʔυΛݟͳ͕ΒɺϕετϓϥΫ ςΟεΛֶͼɺࠓޙࣗ෼ͰεΩϧΛ޲্ͯ͠ ͍͚ΔΑ͏ʹɺϦιʔε΍ͦͷௐ΂ํΛֶͿɻ

  5. Shinichi Nishikawa @shinichiN

  6. None
  7. ͜ͷ3݄·Ͱ

  8. None
  9. 3݄͔Β

  10. None
  11. None
  12. None
  13. http://ogi.osampo-radio.com/

  14. ϒϩά http://nskw-style.com

  15. ӳޠ൛ http://th-daily.shinichi.me

  16. ձࣾ http://nobil.cc

  17. Ҡॅϒϩά & Podcast http://thai.osampo-radio.com http://journey.osampo-radio.com

  18. WordPress ͱͷؔ܎

  19. WordCamp Tokyo 2012 ࣮ߦҕһ௕

  20. Bangkok WordPress Meetup ্ཱͪ͛ɻӳޠʗλΠޠάϧʔϓɺ೔ຊޠάϧʔϓ

  21. WordBench உ໦ౡ

  22. WordCamps

  23. ຊ೔ͷΰʔϧ

  24. ۩ମతʹɺίʔυΛݟͳ͕ΒɺϕετϓϥΫςΟε Λֶͼɺࠓޙࣗ෼ͰεΩϧΛ޲্͍͚ͯ͠ΔΑ͏ʹɺ Ϧιʔε΍ͦͷௐ΂ํΛֶͿɻ

  25. ࡢ೥ͷςʔϚ͸ɺ ʮςʔϚ੍࡞ͷϕετϓϥΫςΟεʯ Ͱɺͦͷ݁࿦͸ɺ

  26. 1. ݟͨ໨ʹప͢Δ 2. ͲΜͳϓϥάΠϯͱ΋ػೳ͢ΔͨΊͷ࡞๏Λ஌Δ 3. WordPress ͷػೳΛϑϧ׆༻ 4. ίϯςϯπʹ৮Βͳ͍ Ͱͨ͠ɻ

    4ͭͷϕετϓϥΫςΟε http://www.slideshare.net/NSKW/ learning-from-theme-review-requirements
  27. ͦͷଓ͖తͳҐஔ͚ͮͰ͢

  28. େ -> খ ͷॱ൪Ͱ͍͖·͢Ͷ

  29. WordPress ࣗମ͕ ਐԽ͍ͯ͘͠ͷΛ஌Δ

  30. wp_title() Λ΍ΊΔ͜ͱʹͳͬͨ

  31. ςʔϒϧɺ1ݸ૿͑ͨ

  32. wordpress.org/news ָ͕

  33. ςʔϚͷछྨ

  34. ςʔϚͷछྨ • ਌ςʔϚ • ࢠςʔϚ • ελʔλʔςʔϚ • _s •

    ϑϨʔϜϫʔΫతͳ΋ͷ • roots.io/sage ख़஌ͯ͠ɺ ໨తʹԠͯ͡ɺ ࢖͍෼͚͕Ͱ͖ΔΑ͏ʹ
  35. ͨͱ͑͹ɺɺ ʮ ϚϧναΠτͰࢧళϖʔδΛͨ͘͞Μ࡞Δʯͱ͍͏৔߹ɺ - ϕʔεʹͳΔςϯϓϨʔτ਌ςʔϚΛͰ࡞੒ - indexͷϖʔδΛࢠςʔϚɺࢧళͷϖʔδΛผͷࢠςʔϚ - ͋Δ͍͸਌αΠτ͸ಠཱͷςʔϚɺࢧళͷ਌ςʔϚΛઃஔ͠ɺ֤ࢧళ͸ඞཁʹ Ԡͯ͡ࢠςʔϚΛ࡞੒ͯࠩ͠෼ͷΈ࡞Δ

    - ػೳ͸શ෦ϓϥάΠϯʹམͱ͜͠ΜͰɺબ୒తʹ༗ޮԽ
  36. ςϯϓϨʔτ֊૚ ͱ get_template_parts()

  37. ख़஌͠Α͏ʂ

  38. get_template_parts() ศར

  39. ͨͱ͑͹ɺ

  40. URL ؔ࿈

  41. ςʔϚ΁ͷURI IUUQFYBNQMFDPNXQDPOUFOUUIFNFTNZUIFNFJNHBQOH ͱ͔ XQDPOUFOUUIFNFTNZUIFNFJNHBQOH ͱ͔ॻ͔ͳ͍ɻ ҧ͏؀ڥ΍44-Խͨ࣌͠ͱ͔ࠔΔɻ

  42. αΠτͷURL ͱ͔BCPVUͱ͔͠ͳ͍ɻ  QIQCMPHJOGP lVSMz  ͱ͔͠ͳ͍ɻ

  43. <head />

  44. underscores ͷ head ෦෼

  45. ۃ୺ʹݴ͑͹ɺ͜ΕͰ΋͍͚Δ ಈతʹ͢Δ͜ͱͰɺ ͍͍͜ͱ͕͋Δɻ

  46. ͍͍͜ͱ • ͲΜͳ؀ڥͰ΋ಈ͘ • ϓϥάΠϯͱڞଘͰ͖ΔʗίϯϑϦΫτͳ͠ • ϓϥάΠϯ΍ࢠςʔϚ͔Βग़ྗΛม͑ΒΕΔ • ʢͳΜ͔ؾ΋͕͍͍ͪؾ͕͢Δʣ

  47. <head /> Ͱ஌͓͖͍ͬͯͨ • wp_head() / wp_footer() • wp_enqueue_script /

    wp_enqueue_style • wp_register_script / wp_register_style • wp_dequeue_* / wp_deregister_* • wp_add_inline_script / wp_add_inline_style
  48. wp_head() / wp_footer() ͦΕͧΕ</head> ͷ௚લɺ</body>ͷ௚લʹ Կ͔Λग़ྗ͢Δࡍʹ࢖͏ɻ

  49. wp_head() / wp_footer() IFBE಺ʹԿ͔Λ௚઀ग़ྗ͍ͤͨ࣌͞ͳͲʹɻ

  50. wp_head() / wp_footer() ιʔεΛݟΔͱɺͨͩͷEP@BDUJPOͰ͢ɻ

  51. wp_enqueue_script / wp_enqueue_style ͷ஥ؒ Javascript, stylesheet ΛಡΈࠐΉͱ͖ʹ࢖͏ɻ ςʔϚͱϓϥάΠϯͷ྆ํ͔Β jQuery ͕ݺ͹Ε

    ͨ࣌ɺґଘ͢ΔεΫϦϓτ͕͋ΔࡍͳͲʹศརɻ
  52. wp_enqueue_script / wp_enqueue_style

  53. wp_register_script / wp_enqueue_script

  54. wp_dequeue_script / wp_dequeue_script ࢠςʔϚ΍ϓϥάΠϯ͔Βɺ ͢Ͱʹొ࿥͞Ε͍ͯΔ +BWBTDSJQU΍TUZMFTIFFUΛ আ੶͢Δ࣌ʹ࢖͏ɻ

  55. wp_add_inline_script / wp_add_inline_style

  56. ίΞʹಉࠝ͞Ε͍ͯΔεΫϦϓτ K2VFSZ΍ͦͷ஥ؒɺ6OEFSTDPSFKT #BDLCPOFKTͳͲ͸ 8PSE1SFTTʹ͸͡Ί͔Βೖ͍ͬͯͯɺϋϯυϧ໊ͷΈͷ ࢦఆFORVFVFͰಡΈࠐ·ΕΔɻ ͜ΕͰɺ XQJODMVEFTKTKRVFSZKRVFSZKT XQJODMVEFTKTKRVFSZKRVFSZNJHSBUFNJOKT XQJODMVEFTKTKRVFSZVJF⒎FDUNJOKT XQJODMVEFTKTKRVFSZVJF⒎FDUCMJOENJOKT

    ͷ͕ͭಡΈࠐ·ΕΔɻ IUUQTEFWFMPQFSXPSEQSFTTPSHSFGFSFODFGVODUJPOTXQ@FORVFVF@TDSJQU
  57. ηΩϡϦςΟ

  58. ςʔϚͰؾΛ͚ͭΔ͜ͱ • ςʔϚ͸ݟͨ໨ͷ͜ͱͳͷͰɺग़ྗɻʢͭ· ΓɺԿ͔Λอଘ͠ͳ͍ʣ • ͳͷͰɺόϦσʔγϣϯͱΤεέʔϓ͕ओɻ

  59. όϦσʔγϣϯ • ஋ͷݕࠪͷ͜ͱ • ૝ఆͯͨ͠ͷͱҧ͏ͷ͕དྷͯɺڍಈ͕͓͔͘͠ͳ ΔͷΛ๷͙ • ਺ࣈͳΒ਺ࣈɺจࣈྻͳΒจࣈྻɺϝΞυͳΒϝ ΞυͰ͋Δ͜ͱΛ֬ೝ͢Δɻ •

    ͦΕ༻ͷؔ਺ɺϗϫΠτϦετɺϒϥοΫϦετ ͳͲͷํ๏͕͋ΔͷͰݟͯΈ·͠ΐ͏
  60. ϗϫΠτϦετʗϒϥοΫϦετ • ϗϫΠτϦετ • OKͳ஋܈ΛϦετ͓͍ͯͯ͠ɺೖྗ஋ʢࠓ͔Β ݕࠪ͠Α͏ͱ͍ͯ͠Δର৅ʣ͕ɺ͜ͷϦετʹೖͬ ͍ͯΔ͔Ͳ͏͔Λ֬ೝ͢Δํ๏ • ϒϥοΫϦετ •

    NGͳ஋܈ΛϦετ͓͍ͯͯ͠ɺೖྗ஋͕͜Εʹ ͋ͨΔ͔Ͳ͏͔Λ֬ೝ͢Δํ๏
  61. ϗϫΠτϦετ

  62. Τεέʔϓ • esc_* ؔ਺Λ཈͑Δ • wp_kses() Λ֮͑Δ

  63. esc_*()

  64. wp_kses() • ͋Β͔͡Ίఆٛ͞Εͨ html λάͱଐੑͷΈΛ ڐՄ͠ɺͦΕҎ֎͸ফͯ͠ɺ҆શͳ html จࣈ ྻΛฦ͢ɻ •

    ϑΟϧλϦϯάͰ͖Δɻ • a λάΛؚΊ͍͚ͨͲΤεέʔϓ͍ͨ࣌͠ͳͲ ʹศར
  65. ԿΛΤεέʔϓ͢Δͷ͔ • ʮ֎͔Βདྷͨɺ৴པͰ͖ͳ͍஋͸શ෦ʯ
 
 ͨͱ͑͹ɺɺɺ • GET ΍ POST ͳͲͰૹ৴͞Ε͖ͯͨ஋

    • σʔλϕʔε͔ΒऔΓग़ͨ͠஋ • RSSϑΟʔυ΍APIܦ༝ͳͲ֎෦αʔϏε͔ΒऔΓग़͠ ͨ஋
  66. Ͳ͏Τεέʔϓ͢Δͷ͔ • ͳͥɺecho ͷதͰΤεέʔϓ͠ͳ͍ͷ͔ͱ͍ ͏ͱɺग़ྗ͞ΕΔจ຺ʹΑͬͯɺΤεέʔϓͷ ํ๏͕ҟͳͬͯ͘Δ͔Βɻ • ͳͷͰɺจ຺ʹΑͬͯطଘͷؔ਺Λ࢖͍෼͚ Δ͜ͱ͕େࣄɻ

  67. ςϯϓϨʔτλά ͱ WordPress ͷؔ਺ ͷҧ͍

  68. ͨͱ͑͹ɺ • the_content(); ͱ echo get_the_content();
 ͸ಉ͡Ͱ͸ͳ͍ɻ • echo get_permalink();

    ͱ the_permalink();
 ͸ಉ͡Ͱ͸ͳ͍
  69. the_content() ͱ͸

  70. the_content ϑΟϧλʔͱ͸ XQJODMVEFTEFGBVMUpMUFSTQIQ

  71. ςϯϓϨʔτλάͱͦͷଞͷؔ਺ • ςϯϓϨʔτλά͸ɺ͍Ζ͍ΖͱؾΛ࢖ͬͯ ͘Ε͍ͯΔͷͰɺ҆৺ͯ͠࢖͍͍ͬͯɻ
 the_ Ͱ͸͡·Δ΋ͷ • ͦ͏Ͱͳ͍΋ͷ͸ɺ஫ҙ͠ͳ͍ͱࢥΘ͵ڍಈ ʹͳΔ͔΋͠Εͳ͍ɻϑΟϧλʔΛ௨Βͳ͍ɻ ϓϥάΠϯ͔Βมߋ͕ޮ͍ͯͳ͔ͬͨΓͱ͔

    ͢Δɻ
  72. ΢ΟδΣοτɺΧελϜ౤ߘλΠϓɺΧ ελϜλΫιϊϛɺWP_*_Query ͳͲ ͷొ࿥༻ͷίʔυ͸δΣωϨʔλΛ࢖͏ɻ

  73. generatewp.com

  74. ςʔϚ੍࡞ͷ্ڃऀͱ͸ʁ

  75. 1. ݟͨ໨ʹప͢Δ 2. ͲΜͳϓϥάΠϯͱ΋ػೳ͢ΔͨΊͷ࡞๏Λ஌Δ 3. WordPress ͷػೳΛϑϧ׆༻ 4. ίϯςϯπʹ৮Βͳ͍ Ͱͨ͠ɻ

    ڈ೥ͷ 4ͭͷϕετϓϥΫςΟε http://www.slideshare.net/NSKW/ learning-from-theme-review-requirements
  76. ্ڃऀ • ݟͨ໨ʹప͢Δɻcss, Javascript ؤுΔɻ • WordPress తͳॻ͖ํΛ஌Δɻ • ηΩϡϦςΟʹؾΛ࢖͏ɻ

    • δΣωϨʔλɺεχϖοτͳͲΛ׆༻͢Δɻ • ࢠςʔϚɺελʔλʔςʔϚɺϑϨʔϜϫʔΫͳͲΛ׆༻͢Δɻ • ػೳ͸ϓϥάΠϯʹৡΔɻ PHP ͷଆ໘͔ΒݟΔͱɺ ςʔϚ੍࡞ͱͯ͠஌Βͳ͍ͱ͍͚ͳ͍͜ͱ͸ɺ ࣮͸ͦΜͳʹͳ͍ɻ
  77. ͓͠·͍

  78. Ϧιʔε • wordpress.org/news • developer.wordpress.org/themes/getting- started/ • developer.wordpress.org • ίσοΫε

    ͱ codex