$30 off During Our Annual Pro Sale. View Details »

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

Toshihiro Kanai
September 14, 2018

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

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

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

Toshihiro Kanai

September 14, 2018
Tweet

More Decks by Toshihiro Kanai

Other Decks in Programming

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