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

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

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

Transcript

1. View Slide

2. ςʔϚϨϏϡʔͷݱ৔͔Βݟ
   ͨɺ཈͓͑ͯ͘΂͖ςʔϚ੍࡞
   ͷηΦϦʔͱجૅ஌ࣝ
   8PSE$BNQ5PLZPۚҪढ़ߒ
   

   View Slide

3. ࣗݾ঺հ
   

   View Slide

4. ۚҪढ़ߒ NJSVDPO
   
   • ϑϦʔϥϯεͷ Web ΤϯδχΞ
   • ࠷ۙ͸ Vue.js ͳͲͷϑϩϯτΤϯυ͕ϝΠ
   ϯ
   • WordPress Core Contributor
   • WordPress ςʔϚ Coldbox ։ൃऀ
   • WordPress ςʔϚϨϏϡʔνʔϜϞσϨʔ
   λ
   • Twitter: @mirucons / Facebook & GitHub
   etc.: mirucon
   • https://www.mirucon.com/
   

   View Slide

5. ςʔϚͷجૅ
   

   View Slide

6. ςʔϚͱ͸
   

   View Slide

7. ςʔϚͱ͸
   ΢ΣϒαΠτશମͷݟͨ໨͔ΒϨΠΞ΢τɺߏ੒ɺػೳ·Ͱ༷ʑͳ৔ॴʹӨڹΛ
   ٴ΅͢ɺ8PSE1SFTTαΠτͷʮΩϞʯ
   

   View Slide

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
   

   View Slide

9. ςʔϚͰ͸ԿΛ͢Δ΂͖
   

   View Slide

10. ςʔϚͰ͸ԿΛ͢Δ΂͖
    • ςʔϚ͸݁ہϓϥάΠϯͱಉͨͩ͡ͷ PHP ϑΝΠϧͳͷͰɺ΍
    Ζ͏ͱࢥ͑͹ԿͩͬͯͰ͖Δ
    • ͨͩ͠ςʔϚ͸ϓϥάΠϯͱҧͬͯ1͔ͭ͠༗ޮԽͰ͖ͳ͍
    • ͦͷͨΊ WordPress.org ͷςʔϚσΟϨΫτϦͷཁٻࣄ߲Ͱ͸
    ʮςʔϚ͸جຊతʹݟͨ໨Λ࢘Δ͜ͱͷΈ͢΂͖ʯͭ·Γɺ
    => ݟͨ໨ʹ௚઀ؔ܎ͳ͍ػೳΛςʔϚʹೖΕΔ΂͖Ͱ͸ͳ͍
    

    View Slide

11. ςʔϚͰ͸ԿΛ͢Δ΂͖
    • ͨͩ͜͠Ε͸ WordPress.org ͷςʔϚσΟϨΫτϦͷ࿩Ͱ͋Γɺଞͷςʔ
    Ϛ഑෍αΠτ౳Ͱ͸ҧͬͨΓ͢Δ
    • ݁ہ͸ݸʑͷػೳΛϓϥάΠϯԽ͢ΔͷͱɺςʔϚͰҰݩԽͯ͢͠΂ͯΛ
    ؅ཧ͢Δͷ͸ศར͞ͱͷτϨʔυΦϑ
    • ·ͨडୗ։ൃͳͲͰ͸ػೳࣗମʹ൚༻ੑ͕ͳ͍৔߹ɾͳΜΒ͔ͷࣄ৘ʹ
    ΑͬͯϓϥάΠϯΛ࢖͍ʹ͍͘৔߹ͳͲ΋͋Δ
    => ࣗ෼ͷ੍࡞͍ͯ͠Δ໨తɾެ։ൣғͳͲΛߟ͑ͯɺద੾ͳͱ͜ΖΛߟ͑
    Α͏
    

    View Slide

12. ϥΠηϯεʹ͍ͭͯ
    

    View Slide

13. 8PSE1SFTT͸Φʔϓϯιʔε
    • WordPress ͸ຊମ͕Φʔϓϯιʔε
    • GPL ϥΠηϯεΛ࢖༻͍ͯ͠Δ
    • WordPress ͸ࢥ૝ͱͯ͠ʮύϒϦογϯάͷຽओԽ
    (Democratize publishing)ʯΛܝ͍͛ͯΔ
    • ΦʔϓϯιʔεͳͷͰ WordPress ͷ։ൃɾσΟεΧογϣϯɾ
    ຋༁ͳͲʹ͸୭Ͱ΋ߩݙͰ͖Δ
    

    View Slide

14. (1-ϥΠηϯεͱ͸ͲΜͳϥΠηϯε͔
    • General Public License ͷ಄จࣈΛͱͬͯ "GPL" ͱݺ͹ΕΔΦʔ
    ϓϯιʔεϥΠηϯεͷҰͭ
    • ͍͔ͳΔ੍໿ͳ͠ʹແอূͰ4ͭͷࣗ༝ΛೝΊΔͷ͕جຊࢥ૝
    

    View Slide

15. ͭͷࣗ༝ͱ͸
    • ͲΜͳ໨తʹ΋࢖༻͢Δࣗ༝
    • ιʔείʔυΛݚڀ͠ɺվม͢Δࣗ༝
    • ଞͷਓʹ࠶഑෍͢Δࣗ༝
    • վมͨ͠΋ͷΛڞ༗͢Δࣗ༝
    

    View Slide

16. ࠷େͷಛ௃ίϐʔϨϑτ
    • ίϐʔϨϑτͱ͸ɺ੍࡞෺ͷվม͞Εͨ΋ͷ΍೿ੜϓϩμΫτ (derivative
    work) ʹ΋ɺ΋ͱͷ੍࡞෺ͱಉҰͷࣗ༝ΛೝΊΔ΂͖ͱ͍͏ߟ͑ํ
    • WordPress ͷ৔߹ :
    • ΋ͱͷ੍࡞෺ = WordPress
    • ೿ੜϓϩμΫτ = ςʔϚɾϓϥάΠϯͳͲ
    => ͭ·ΓɺWordPress ͕ GPL Ͱ͋ΔݶΓɺ഑෍͢Δ࡞ͬͨςʔϚɾϓϥ
    άΠϯ΋ GPL ʹ͢Δٛ຿͕ൃੜ͢Δ
    

    View Slide

17. ഑෍͠ͳ͍৔߹ʹ͍ͭͯ
    • GPL ͸഑෍͢Δ৔߹ʹͷΈదԠ͞ΕΔϥΠηϯεͰ͋Γɺ഑෍
    ͠ͳ͍৔߹ʹ͸ GPL ͰϥΠηϯε͢Δඞཁ͸ͳ͍
    • ͦΕͰ΋ WordPress Λ࢖͍ͬͯΔͱ͍͏͜ͱ͸ GPL ੡඼Λ
    ࢖͍ͬͯΔͱ͍͏͜ͱͳͷͰɺੋඇօ͞Μʹ஌͓͍ͬͯͯ΋Β
    ͍͍ͨ
    

    View Slide

18. ςʔϚͷ࢝Ίํ
    

    View Slide

19. ελʔλʔςʔϚ
    

    View Slide

20. ελʔλʔςʔϚ
    • खؒͷ͔͔Δ࠷ॳͷઃఆ΍ɺͲΜͳςʔϚͰ΋ඞཁʹͳΔΑ͏
    ͳίʔυ͕ઃఆࡁΈͷɺ੍࡞ͷ΋ͱʹ͢ΔςʔϚ
    • ྫ͑͹ :
    • Sass ͷίϯύΠϧઃఆ
    • index.php ΍ single.php ͷϧʔϓ (౤ߘදࣔ෦෼)
    

    View Slide

21. @T VOEFSTDPSFT
    
    • Automattic ࣾ (JetPack ϓϥάΠϯͷ։
    ൃͳͲΛ͍ͯ͠Δձࣾ) ͷ։ൃ͢Δε
    λʔλʔςʔϚ
    • ͔ͳΓத਎͸γϯϓϧͳ PHP ςϯϓ
    Ϩʔτ + CSS (SCSS)
    • γϯϓϧʹ཈͍͑ͨςʔϚʹಛʹ͓͢
    ͢Ί
    

    View Slide

22. ίʔσΟϯάن໿
    

    View Slide

23. ίʔσΟϯάن໿
    • ίʔσΟϯάن໿͸ ίʔυͷॻ͖ํ ʹ͍ͭͯͷܾ·Γ͝ͱ
    • WordPress ʹ͸ WordPress Coding Standards ͱ͍͏ɺ
    WordPress ઐ༻ͷن໿͕͋Δ
    • ͜Ε͸ίʔυͷϑΥʔϚοτ͚ͩͰͳ͘ɺޙͰ৮ΕΔηΩϡϦ
    ςΟʹؔ͢Δ͜ͱ΋ؚ·ΕΔ
    

    View Slide

24. 8PSE1SFTT$PEJOH4UBOEBSET
    • ྫ͑͹ :
    if (is_single() ){
    ͷΑ͏ͳ΋ͷΛҎԼͷΑ͏ʹॻ͘΂͖ͱنఆͰ͖Δ :
    if ( is_single() ) {
    

    View Slide

25. ໾ཱͭͱ͖
    • ෳ਺ਓ։ൃ͢Δ࣌ʹɺίʔυͷॻ͖ํͷบΛͳͤ͘Δ
    • Ұਓ։ൃͰ΋ɺΞοϓσʔτͷظ͕ۭ͍ؒͯ͠·ͬͨͱ͖Ͱ΋
    ίʔυͷ࣭ΛอͯΔ
    

    View Slide

26. ηΩϡϦςΟʹ͍ͭͯ
    

    View Slide

27. ͳͥηΩϡϦςΟରࡦ͕ඞཁͳͷ͔
    

    View Slide

28. ͳͥηΩϡϦςΟରࡦ͕ඞཁͳͷ͔
    • ϓϩάϥϜʹ͸ʮಛผͳҙຯΛ࣋ͭจࣈྻʯ͕͋ͬͨΓ͢Δ
    • ·ͨ WordPress Ͱ͸ HTML Λѻ͏͜ͱ͕ଟ͘ɺHTML Λ࢖༻
    Ͱ͖Δ = JavaScript Λ࢖༻Ͱ͖Δ ͱ͍͏͜ͱͰ͋Γɺ
    JavaScript ʹ͸৭ʑͳ͜ͱ͕Ͱ͖ͯ͠·͏ͨΊɺѱ༻ͷڪΕ͕
    ͋Δ
    

    View Slide

29. ͳͥηΩϡϦςΟରࡦ͕ඞཁͳͷ͔
    ͨͱ͑͹ɺHTML ͷ͜Μͳจࣈྻ :
    < > ' " &
    ͜ΕΒΛڐՄͯ͠͠·͏ͱɺ༧ظ͠ͳ͍ͱ͜ΖͰ HTML ͕࢖ΘΕ
    ͯ͠·͏
    

    View Slide

30. ΫϩεαΠτεΫϦϓςΟϯά 944
    
    • Ϣʔβʔ͕༧ظ͠ͳ͍ಈ࡞Λ͢Δίʔυ (ಛʹ JavaScript) Λಡ
    ΈࠐΉ͜ͱ
    • JavaScript Ͱ࣮ࡍʹͰ͖ͯ͠·͏͜ͱ :
    • উखʹଞͷαΠτ (ಛʹ΢Πϧε഑෍αΠτͳͲ) ʹసૹ
    • ౤ߘ಺༰Λॻ͖׵͑
    

    View Slide

31. େ͖ͭ͘ͷηΩϡϦςΟରࡦ
    • αχλΠζ
    => σʔλΛอଘ͢Δͱ͖ʹσʔλΛແ֐Խ = ৴༻Ͱ͖ͳ͍จࣈ
    ྻΛऔΓআ͘
    • Τεέʔϓ
    => σʔλΛग़ྗ͢Δͱ͖ʹಛघจࣈྻΛม׵͠ಛघจࣈྻͱ͠
    ͯͷޮՌΛଧͪফ͢
    

    View Slide

32. αχλΠζ
    

    View Slide

33. αχλΠζͷྫ
    • wp_kses() ؔ਺
    • ڐՄ͢Δ HTML ͷΫϥεɾଐੑΛࢦఆ͠ɺڐՄ͞Εͳ͍΋ͷ
    Λ࡟আ͢Δ
    ྫ͑͹͜Μͳ HTML :
    ͜Μʹͪ͸ɺ
    
    ۚҪͰ͢ɻ
    

    View Slide

34. ී௨ʹදࣔ͢Ε͹͜͏ͳΔ
    

    View Slide

35. ී௨ʹදࣔ͢Ε͹͜͏ͳΔ
    

    View Slide

36. XQ@LTFT
    ؔ਺Λ࢖͏ͱ
    wp_kses()ؔ਺Λ࢖ͬͯλάͱclassଐੑͷΈΛڐՄ
    

    View Slide

37. XQ@LTFT
    ؔ਺Λ࢖͏ͱ
    

    View Slide

38. wp_kses()ؔ਺ͷ࢖͍ํ
    $allowed_html = [
    'span' => [
    'class' => [],
    ],
    ];
    $data = wp_kses( $data, $allowed_html );
    

    View Slide

39. ଞͷ8PSE1SFTTαχλΠζؔ਺
    • wp_kses_post()
    • wp_kses_data()
    • sanitize_email()
    • sanitize_file_name()
    • sanitize_html_class()
    • sanitize_text_field()
    

    View Slide

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',
    ]
    )
    );
    

    View Slide

41. Τεέʔϓ
    

    View Slide

42. Τεέʔϓͷྫ
    • esc_html() ؔ਺
    => ͢΂ͯͷ HTML ΛϓϨʔϯςΩετԽ͢Δ
    ྫ͑͹͜Μͳ HTML :
    ͜Μʹͪ͸ɺ
    
    ۚҪͰ͢ɻ
    

    View Slide

43. ͢Δͱ͜͏ͳΔ
    

    View Slide

44. Τεέʔϓͷಈ࡞
    • HTML ͷಛघͳจࣈྻΛɺΤεέʔϓจࣈͱݺ͹ΕΔಛघͳҙ
    ຯ͕ແޮԽ͞ΕΔจࣈྻʹஔ͖׵͑Δ
    ྫ :
    < (খͳΓ) => <
    > (େͳΓ) => >
    

    View Slide

45. ଞͷ8PSE1SFTTΤεέʔϓؔ਺
    • esc_attr()
    • esc_url()
    • esc_textarea()
    • esc_js()
    

    View Slide

46. ηΩϡϦςΟରࡦͷίπ
    

    View Slide

47. ηΩϡϦςΟରࡦͷίπ
    • ͢΂ͯΛٙ͏͜ͱ
    • αχλΠζ্ͨ͠ͰΤεέʔϓ͕ඞཁͳ͜ͱ΋͋Δ
    • WordPress Coding Standards Λ࢖͏
    

    View Slide

48. ηΩϡϦςΟରࡦͷίπ8PSE1SFTT$PEJOH
    4UBOEBSET
    

    View Slide

49. ϝϯςφϯεΛ͠΍͘͢͢Δʹ͸
    

    View Slide

50. ʮ8PSE1SFTTͷॻ͖ํʯΛ֮͑Δ
    • WordPress ʹ͸ૉͷ PHP ͱ͸ҧ͏ʮWordPress తͳॻ͖ํʯ
    ͕͋Δ
    • ྫ͑͹͜ͷΑ͏ͳؔ਺ͳͲ :
    • get_template_part()
    • wp_enqueue_script(), wp_enqueue_style()
    

    View Slide

51. υΩϡϝϯτΛॻ͘
    • Ϋϥεɾؔ਺ʹ͸ۃྗυΩϡϝϯτΛॻ͘
    • WordPress Coding Standards Λ࢖͏ͱίϝϯτ͕ൈ͚͍ͯΔ
    ͱڭ͑ͯ͘ΕΔ
    • υΩϡϝϯτͷॻ͖ํͱͯ͠ phpdoc ίϝϯτ ͱ͍͏෺͕͋Δ
    

    View Slide

52. QIQEPDίϝϯτͷॻ͖ํ
    /**
    * ࢦఆ͞Εͨ਺ͷؔ࿈هࣄΛฦ͢.
    *
    * @param int $max_posts දࣔ͢Δ࠷େهࣄ਺.
    * @since 1.0.0
    **/
    function theme_get_related_posts( $max_posts ) {
    ...
    

    View Slide

53. ςʔϚΛνΣοΫͰ͖ΔπʔϧɾϓϥάΠϯΛ࢖
    ͏
    • ςʔϚϢχοτςετ
    • Theme Check | WordPress.org
    • WPTRT/theme-sniffer: Theme Sniffer plugin using sniffs.
    • Debug Bar | WordPress.org
    

    View Slide

54. 8PSE1SFTTPSHςʔϚσΟϨΫ
    τϦܝࡌʹ͋ͨͬͯ
    

    View Slide

55. ཁٻࣄ߲
    • WordPress.org ςʔϚσΟϨΫτϦʹ͸ ཁٻࣄ߲
    (Requirements) ͱ͍͏ɺܝࡌͷͨΊʹԊΘͳ͍ͱ͍͚ͳ͍ϧʔ
    ϧ͕͋Δ
    • ཁٻࣄ߲ͷৄࡉ͸ɺRequired – Theme Review Team —
    WordPress Λࢀর
    • ೔ຊޠ༁΋͋Γ·͢ : https://github.com/mirucon/required-ja
    

    View Slide

56. ςʔϚϨϏϡʔνʔϜ͸୭Ͱ΋ࢀՃͰ͖Δ
    • ΍Δؾ͕͋ΔਓͳΒ୭Ͱ΋׻ܴ
    • ਓͷςʔϚΛݟΔ͜ͱͰࣗ෼ͷςʔϚ੍࡞ʹͱͯ΋໾ʹཱͭ
    • ࠷ऴతʹঝೝͰ͖Δݖݶ͸ݶΒΕͨਓʹ͔͠༩͑ΒΕͯͳ͍ͷ
    Ͱɺ҆৺ͯ͠ྑ͍
    

    View Slide

57. ·ͱΊ
    • ςʔϚ੍࡞ʹ͸ɺελʔλʔςʔϚɺWordPress Coding
    Standards ͳͲศརͳπʔϧ͕ଟ͍
    • GPL ϥΠηϯε͸ࣗ༝ΛೝΊΔɺར༻ऀʹ΋։ൃऀʹ΋༏͍͠
    ϥΠηϯε
    • ηΩϡϦςΟ໰୊ʹ͸ओʹʮαχλΠζʯͱʮΤεέʔϓʯͰ
    ରࡦ͢Δ
    

    View Slide

58. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    5XJUUFS!NJSVDPOT
    IUUQTXXXNJSVDPODPN
    

    View Slide