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

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

Transcript

1. “ਖ਼͍͠” ςʔϚͷ࡞Γํ Shinichi Nishikawa WordCamp Kansai 2016 ͜Ε͕Ͱ͖ͨΒςʔϚ੍࡞ͷ্ڃऀ
2. “ਖ਼͍͠”ʁ
3. ελϯμʔυ͕͋Γɺ ཧ༝͕͋Γɺ ϝϦοτ΋͋Δɻ
4. ࠓ೔ͷ࿩ ۩ମతʹɺίʔυΛݟͳ͕ΒɺϕετϓϥΫ ςΟεΛֶͼɺࠓޙࣗ෼ͰεΩϧΛ޲্ͯ͠ ͍͚ΔΑ͏ʹɺϦιʔε΍ͦͷௐ΂ํΛֶͿɻ
5. Shinichi Nishikawa @shinichiN
7. ͜ͷ3݄·Ͱ
9. 3݄͔Β
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
    ͱ͔͠ͳ͍ɻ
     QIQ
    CMPHJOGP
    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