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

E4c636d90449beb56d7472ff2b6ba2b5?s=47 Toshihiro Kanai
September 14, 2018

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

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

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

E4c636d90449beb56d7472ff2b6ba2b5?s=128

Toshihiro Kanai

September 14, 2018
Tweet

Transcript

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

  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$PEJOH4UBOEBSET • ྫ͑͹ : 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