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

Transcript

1. None

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