テーマレビューの現場から見た、抑えておくべきテーマ制作のセオリーと基礎知識

WordCamp Tokyo 2018 に登壇した際の資料です。

詳細は https://2018.tokyo.wordcamp.org/session/gh-2b/ をご覧ください。

Transcript

2. ςʔϚϨϏϡʔͷݱ৔͔Βݟ ͨɺ཈͓͑ͯ͘΂͖ςʔϚ੍࡞ ͷηΦϦʔͱجૅ஌ࣝ 8PSE$BNQ
   5PLZP
   
   
   ۚҪढ़ߒ
3. ࣗݾ঺հ
4. ۚҪढ़ߒ
   NJSVDPO • ϑϦʔϥϯεͷ Web ΤϯδχΞ • ࠷ۙ͸ Vue.js ͳͲͷϑϩϯτΤϯυ͕ϝΠ ϯ • WordPress Core Contributor • WordPress ςʔϚ Coldbox ։ൃऀ • WordPress ςʔϚϨϏϡʔνʔϜϞσϨʔ λ • Twitter: @mirucons / Facebook & GitHub etc.: mirucon • https://www.mirucon.com/
5. ςʔϚͷجૅ
6. ςʔϚͱ͸
7. ςʔϚͱ͸ ΢ΣϒαΠτશମͷݟͨ໨͔ΒϨΠΞ΢τɺߏ੒ɺػೳ·Ͱ༷ʑͳ৔ॴʹӨڹΛ ٴ΅͢ɺ8PSE1SFTT
   αΠτͷʮΩϞʯ
8. σΟϨΫτϦߏ੒ • ྫ͑͹͜Μͳײ͡ : my-theme/ L inc/ L customizer.php L related-posts.php L footer.php L functions.php L header.php L index.php L readme.txt L screenshot.png L single.php L style.css
9. ςʔϚͰ͸ԿΛ͢Δ΂͖
   
10. ςʔϚͰ͸ԿΛ͢Δ΂͖
    • ςʔϚ͸݁ہϓϥάΠϯͱಉͨͩ͡ͷ PHP ϑΝΠϧͳͷͰɺ΍ Ζ͏ͱࢥ͑͹ԿͩͬͯͰ͖Δ • ͨͩ͠ςʔϚ͸ϓϥάΠϯͱҧͬͯ1͔ͭ͠༗ޮԽͰ͖ͳ͍ • ͦͷͨΊ WordPress.org ͷςʔϚσΟϨΫτϦͷཁٻࣄ߲Ͱ͸ ʮςʔϚ͸جຊతʹݟͨ໨Λ࢘Δ͜ͱͷΈ͢΂͖ʯͭ·Γɺ => ݟͨ໨ʹ௚઀ؔ܎ͳ͍ػೳΛςʔϚʹೖΕΔ΂͖Ͱ͸ͳ͍
11. ςʔϚͰ͸ԿΛ͢Δ΂͖
    • ͨͩ͜͠Ε͸ WordPress.org ͷςʔϚσΟϨΫτϦͷ࿩Ͱ͋Γɺଞͷςʔ Ϛ഑෍αΠτ౳Ͱ͸ҧͬͨΓ͢Δ • ݁ہ͸ݸʑͷػೳΛϓϥάΠϯԽ͢ΔͷͱɺςʔϚͰҰݩԽͯ͢͠΂ͯΛ ؅ཧ͢Δͷ͸ศར͞ͱͷτϨʔυΦϑ • ·ͨडୗ։ൃͳͲͰ͸ػೳࣗମʹ൚༻ੑ͕ͳ͍৔߹ɾͳΜΒ͔ͷࣄ৘ʹ ΑͬͯϓϥάΠϯΛ࢖͍ʹ͍͘৔߹ͳͲ΋͋Δ => ࣗ෼ͷ੍࡞͍ͯ͠Δ໨తɾެ։ൣғͳͲΛߟ͑ͯɺద੾ͳͱ͜ΖΛߟ͑ Α͏
12. ϥΠηϯεʹ͍ͭͯ
13. 8PSE1SFTT
    ͸Φʔϓϯιʔε • WordPress ͸ຊମ͕Φʔϓϯιʔε • GPL ϥΠηϯεΛ࢖༻͍ͯ͠Δ • WordPress ͸ࢥ૝ͱͯ͠ʮύϒϦογϯάͷຽओԽ (Democratize publishing)ʯΛܝ͍͛ͯΔ • ΦʔϓϯιʔεͳͷͰ WordPress ͷ։ൃɾσΟεΧογϣϯɾ ຋༁ͳͲʹ͸୭Ͱ΋ߩݙͰ͖Δ
14. (1-
    ϥΠηϯεͱ͸ͲΜͳϥΠηϯε͔ • General Public License ͷ಄จࣈΛͱͬͯ "GPL" ͱݺ͹ΕΔΦʔ ϓϯιʔεϥΠηϯεͷҰͭ • ͍͔ͳΔ੍໿ͳ͠ʹແอূͰ4ͭͷࣗ༝ΛೝΊΔͷ͕جຊࢥ૝
15. ͭͷࣗ༝ͱ͸
    • ͲΜͳ໨తʹ΋࢖༻͢Δࣗ༝ • ιʔείʔυΛݚڀ͠ɺվม͢Δࣗ༝ • ଞͷਓʹ࠶഑෍͢Δࣗ༝ • վมͨ͠΋ͷΛڞ༗͢Δࣗ༝
16. ࠷େͷಛ௃ίϐʔϨϑτ • ίϐʔϨϑτͱ͸ɺ੍࡞෺ͷվม͞Εͨ΋ͷ΍೿ੜϓϩμΫτ (derivative work) ʹ΋ɺ΋ͱͷ੍࡞෺ͱಉҰͷࣗ༝ΛೝΊΔ΂͖ͱ͍͏ߟ͑ํ • WordPress ͷ৔߹ : • ΋ͱͷ੍࡞෺ = WordPress • ೿ੜϓϩμΫτ = ςʔϚɾϓϥάΠϯͳͲ => ͭ·ΓɺWordPress ͕ GPL Ͱ͋ΔݶΓɺ഑෍͢Δ࡞ͬͨςʔϚɾϓϥ άΠϯ΋ GPL ʹ͢Δٛ຿͕ൃੜ͢Δ
17. ഑෍͠ͳ͍৔߹ʹ͍ͭͯ • GPL ͸഑෍͢Δ৔߹ʹͷΈదԠ͞ΕΔϥΠηϯεͰ͋Γɺ഑෍ ͠ͳ͍৔߹ʹ͸ GPL ͰϥΠηϯε͢Δඞཁ͸ͳ͍ • ͦΕͰ΋ WordPress Λ࢖͍ͬͯΔͱ͍͏͜ͱ͸ GPL ੡඼Λ ࢖͍ͬͯΔͱ͍͏͜ͱͳͷͰɺੋඇօ͞Μʹ஌͓͍ͬͯͯ΋Β ͍͍ͨ
18. ςʔϚͷ࢝Ίํ
19. ελʔλʔςʔϚ
20. ελʔλʔςʔϚ • खؒͷ͔͔Δ࠷ॳͷઃఆ΍ɺͲΜͳςʔϚͰ΋ඞཁʹͳΔΑ͏ ͳίʔυ͕ઃఆࡁΈͷɺ੍࡞ͷ΋ͱʹ͢ΔςʔϚ • ྫ͑͹ : • Sass ͷίϯύΠϧઃఆ • index.php ΍ single.php ͷϧʔϓ (౤ߘදࣔ෦෼)
21. @T
    VOEFSTDPSFT • Automattic ࣾ (JetPack ϓϥάΠϯͷ։ ൃͳͲΛ͍ͯ͠Δձࣾ) ͷ։ൃ͢Δε λʔλʔςʔϚ • ͔ͳΓத਎͸γϯϓϧͳ PHP ςϯϓ Ϩʔτ + CSS (SCSS) • γϯϓϧʹ཈͍͑ͨςʔϚʹಛʹ͓͢ ͢Ί
22. ίʔσΟϯάن໿
23. ίʔσΟϯάن໿ • ίʔσΟϯάن໿͸ ίʔυͷॻ͖ํ ʹ͍ͭͯͷܾ·Γ͝ͱ • WordPress ʹ͸ WordPress Coding Standards ͱ͍͏ɺ WordPress ઐ༻ͷن໿͕͋Δ • ͜Ε͸ίʔυͷϑΥʔϚοτ͚ͩͰͳ͘ɺޙͰ৮ΕΔηΩϡϦ ςΟʹؔ͢Δ͜ͱ΋ؚ·ΕΔ
24. 8PSE1SFTT
    $PEJOH
    4UBOEBSET • ྫ͑͹ : if (is_single() ){ ͷΑ͏ͳ΋ͷΛҎԼͷΑ͏ʹॻ͘΂͖ͱنఆͰ͖Δ : if ( is_single() ) {
25. ໾ཱͭͱ͖ • ෳ਺ਓ։ൃ͢Δ࣌ʹɺίʔυͷॻ͖ํͷบΛͳͤ͘Δ • Ұਓ։ൃͰ΋ɺΞοϓσʔτͷظ͕ۭ͍ؒͯ͠·ͬͨͱ͖Ͱ΋ ίʔυͷ࣭ΛอͯΔ
26. ηΩϡϦςΟʹ͍ͭͯ
27. ͳͥηΩϡϦςΟରࡦ͕ඞཁͳͷ͔
28. ͳͥηΩϡϦςΟରࡦ͕ඞཁͳͷ͔ • ϓϩάϥϜʹ͸ʮಛผͳҙຯΛ࣋ͭจࣈྻʯ͕͋ͬͨΓ͢Δ • ·ͨ WordPress Ͱ͸ HTML Λѻ͏͜ͱ͕ଟ͘ɺHTML Λ࢖༻ Ͱ͖Δ = JavaScript Λ࢖༻Ͱ͖Δ ͱ͍͏͜ͱͰ͋Γɺ JavaScript ʹ͸৭ʑͳ͜ͱ͕Ͱ͖ͯ͠·͏ͨΊɺѱ༻ͷڪΕ͕ ͋Δ
29. ͳͥηΩϡϦςΟରࡦ͕ඞཁͳͷ͔ ͨͱ͑͹ɺHTML ͷ͜Μͳจࣈྻ : < > ' " & ͜ΕΒΛڐՄͯ͠͠·͏ͱɺ༧ظ͠ͳ͍ͱ͜ΖͰ HTML ͕࢖ΘΕ ͯ͠·͏
30. ΫϩεαΠτεΫϦϓςΟϯά
    944 • Ϣʔβʔ͕༧ظ͠ͳ͍ಈ࡞Λ͢Δίʔυ (ಛʹ JavaScript) Λಡ ΈࠐΉ͜ͱ • JavaScript Ͱ࣮ࡍʹͰ͖ͯ͠·͏͜ͱ : • উखʹଞͷαΠτ (ಛʹ΢Πϧε഑෍αΠτͳͲ) ʹసૹ • ౤ߘ಺༰Λॻ͖׵͑
31. େ͖ͭ͘ͷηΩϡϦςΟରࡦ • αχλΠζ => σʔλΛอଘ͢Δͱ͖ʹσʔλΛແ֐Խ = ৴༻Ͱ͖ͳ͍จࣈ ྻΛऔΓআ͘ • Τεέʔϓ => σʔλΛग़ྗ͢Δͱ͖ʹಛघจࣈྻΛม׵͠ಛघจࣈྻͱ͠ ͯͷޮՌΛଧͪফ͢
32. αχλΠζ
33. αχλΠζͷྫ • wp_kses() ؔ਺ • ڐՄ͢Δ HTML ͷΫϥεɾଐੑΛࢦఆ͠ɺڐՄ͞Εͳ͍΋ͷ Λ࡟আ͢Δ ྫ͑͹͜Μͳ HTML : ͜Μʹͪ͸ɺ<br/> <span class="my-class" style="color: red">ۚҪ</span>Ͱ͢ɻ
34. ී௨ʹදࣔ͢Ε͹͜͏ͳΔ
    
35. ී௨ʹදࣔ͢Ε͹͜͏ͳΔ
    
36. XQ@LTFT
    ؔ਺Λ࢖͏ͱ wp_kses()
    ؔ਺
    Λ࢖ͬͯ
    <span>
    λάͱ
    class
    ଐੑͷΈΛڐՄ
37. XQ@LTFT
    ؔ਺Λ࢖͏ͱ
    
38. wp_kses()
    ؔ਺ͷ࢖͍ํ $allowed_html = [ 'span' => [ 'class' => [], ], ]; $data = wp_kses( $data, $allowed_html );
39. ଞͷ
    8PSE1SFTT
    αχλΠζؔ਺ • wp_kses_post() • wp_kses_data() • sanitize_email() • sanitize_file_name() • sanitize_html_class() • sanitize_text_field()
40. ςʔϚΧελϚΠβʔͱαχλΠζ $wp_customize->add_setting( 'credit_text', [ 'default' => '©2018 ͜ͷαΠτͷӡӦऀ', 'sanitize_callback' => 'wp_kses_post', ] ); $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'credit_text', [ 'label' => __( 'ΫϨδοτΛฤू', 'text-domain' ), 'section' => 'footer', 'type' => 'textarea', ] ) );
41. Τεέʔϓ
42. Τεέʔϓͷྫ • esc_html() ؔ਺ => ͢΂ͯͷ HTML ΛϓϨʔϯςΩετԽ͢Δ ྫ͑͹͜Μͳ HTML : ͜Μʹͪ͸ɺ<br/> <span class="my-class" style="color: red">ۚҪ</span>Ͱ͢ɻ
43. ͢Δͱ͜͏ͳΔ
    
44. Τεέʔϓͷಈ࡞ • HTML ͷಛघͳจࣈྻΛɺΤεέʔϓจࣈͱݺ͹ΕΔಛघͳҙ ຯ͕ແޮԽ͞ΕΔจࣈྻʹஔ͖׵͑Δ ྫ : < (খͳΓ) => &lt; > (େͳΓ) => &gt;
45. ଞͷ
    8PSE1SFTT
    Τεέʔϓؔ਺ • esc_attr() • esc_url() • esc_textarea() • esc_js()
46. ηΩϡϦςΟରࡦͷίπ
47. ηΩϡϦςΟରࡦͷίπ • ͢΂ͯΛٙ͏͜ͱ • αχλΠζ্ͨ͠ͰΤεέʔϓ͕ඞཁͳ͜ͱ΋͋Δ • WordPress Coding Standards Λ࢖͏
48. ηΩϡϦςΟରࡦͷίπ
    
    8PSE1SFTT
    $PEJOH
    4UBOEBSET
49. ϝϯςφϯεΛ͠΍͘͢͢Δʹ͸
50. ʮ8PSE1SFTT
    ͷॻ͖ํʯΛ֮͑Δ • WordPress ʹ͸ૉͷ PHP ͱ͸ҧ͏ʮWordPress తͳॻ͖ํʯ ͕͋Δ • ྫ͑͹͜ͷΑ͏ͳؔ਺ͳͲ : • get_template_part() • wp_enqueue_script(), wp_enqueue_style()
51. υΩϡϝϯτΛॻ͘ • Ϋϥεɾؔ਺ʹ͸ۃྗυΩϡϝϯτΛॻ͘ • WordPress Coding Standards Λ࢖͏ͱίϝϯτ͕ൈ͚͍ͯΔ ͱڭ͑ͯ͘ΕΔ • υΩϡϝϯτͷॻ͖ํͱͯ͠ phpdoc ίϝϯτ ͱ͍͏෺͕͋Δ
52. QIQEPD
    ίϝϯτͷॻ͖ํ /** * ࢦఆ͞Εͨ਺ͷؔ࿈هࣄΛฦ͢. * * @param int $max_posts දࣔ͢Δ࠷େهࣄ਺. * @since 1.0.0 **/ function theme_get_related_posts( $max_posts ) { ...
53. ςʔϚΛνΣοΫͰ͖ΔπʔϧɾϓϥάΠϯΛ࢖ ͏ • ςʔϚϢχοτςετ • Theme Check | WordPress.org • WPTRT/theme-sniffer: Theme Sniffer plugin using sniffs. • Debug Bar | WordPress.org
54. 8PSE1SFTTPSH
    ςʔϚσΟϨΫ τϦܝࡌʹ͋ͨͬͯ
55. ཁٻࣄ߲ • WordPress.org ςʔϚσΟϨΫτϦʹ͸ ཁٻࣄ߲ (Requirements) ͱ͍͏ɺܝࡌͷͨΊʹԊΘͳ͍ͱ͍͚ͳ͍ϧʔ ϧ͕͋Δ • ཁٻࣄ߲ͷৄࡉ͸ɺRequired – Theme Review Team — WordPress Λࢀর • ೔ຊޠ༁΋͋Γ·͢ : https://github.com/mirucon/required-ja
56. ςʔϚϨϏϡʔνʔϜ͸୭Ͱ΋ࢀՃͰ͖Δ • ΍Δؾ͕͋ΔਓͳΒ୭Ͱ΋׻ܴ • ਓͷςʔϚΛݟΔ͜ͱͰࣗ෼ͷςʔϚ੍࡞ʹͱͯ΋໾ʹཱͭ • ࠷ऴతʹঝೝͰ͖Δݖݶ͸ݶΒΕͨਓʹ͔͠༩͑ΒΕͯͳ͍ͷ Ͱɺ҆৺ͯ͠ྑ͍
57. ·ͱΊ • ςʔϚ੍࡞ʹ͸ɺελʔλʔςʔϚɺWordPress Coding Standards ͳͲศརͳπʔϧ͕ଟ͍ • GPL ϥΠηϯε͸ࣗ༝ΛೝΊΔɺར༻ऀʹ΋։ൃऀʹ΋༏͍͠ ϥΠηϯε • ηΩϡϦςΟ໰୊ʹ͸ओʹʮαχλΠζʯͱʮΤεέʔϓʯͰ ରࡦ͢Δ
58. ͋Γ͕ͱ͏͍͟͝·ͨ͠ 5XJUUFS
    !NJSVDPOT IUUQTXXXNJSVDPODPN