Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
テーマレビューの現場から見た、抑えておくべきテーマ制作のセオリーと基礎知識
Toshihiro Kanai
September 14, 2018
Programming
1
4.8k
テーマレビューの現場から見た、抑えておくべきテーマ制作のセオリーと基礎知識
WordCamp Tokyo 2018 に登壇した際の資料です。
詳細は
https://2018.tokyo.wordcamp.org/session/gh-2b/
をご覧ください。
Toshihiro Kanai
September 14, 2018
Tweet
Share
More Decks by Toshihiro Kanai
See All by Toshihiro Kanai
mirucon
0
2.3k
Other Decks in Programming
See All in Programming
akatsukinewgrad
0
220
s_uryu
0
220
muttsu_623
0
540
shigeruoda
0
490
466548
0
140
saki4869
0
190
trajchevska
2
390
aratayokoyama
0
230
azdaroth
0
140
thatjeffsmith
0
470
ufoo68
1
180
xrdnk
0
130
Featured
See All Featured
swwweet
206
6.8k
geeforr
332
29k
maltzj
500
36k
mojombo
358
62k
chrislema
231
16k
stephaniewalter
260
11k
kneath
294
39k
samanthasiow
56
6.3k
yeseniaperezcruz
302
31k
bkeepers
408
57k
keithpitt
401
20k
bermonpainter
342
26k
Transcript
None
ςʔϚϨϏϡʔͷݱ͔Βݟ ͨɺ͓͖͑ͯ͘ςʔϚ੍࡞ ͷηΦϦʔͱجૅࣝ 8PSE$BNQ5PLZPۚҪढ़ߒ
ࣗݾհ
ۚҪढ़ߒ NJSVDPO • ϑϦʔϥϯεͷ Web ΤϯδχΞ • ࠷ۙ Vue.js ͳͲͷϑϩϯτΤϯυ͕ϝΠ
ϯ • WordPress Core Contributor • WordPress ςʔϚ Coldbox ։ൃऀ • WordPress ςʔϚϨϏϡʔνʔϜϞσϨʔ λ • Twitter: @mirucons / Facebook & GitHub etc.: mirucon • https://www.mirucon.com/
ςʔϚͷجૅ
ςʔϚͱ
ςʔϚͱ ΣϒαΠτશମͷݟ͔ͨΒϨΠΞτɺߏɺػೳ·Ͱ༷ʑͳॴʹӨڹΛ ٴ΅͢ɺ8PSE1SFTTαΠτͷʮΩϞʯ
σΟϨΫτϦߏ • ྫ͑͜Μͳײ͡ : 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
ςʔϚͰԿΛ͢Δ͖
ςʔϚͰԿΛ͢Δ͖ • ςʔϚ݁ہϓϥάΠϯͱಉͨͩ͡ͷ PHP ϑΝΠϧͳͷͰɺ Ζ͏ͱࢥ͑ԿͩͬͯͰ͖Δ • ͨͩ͠ςʔϚϓϥάΠϯͱҧͬͯ1͔ͭ͠༗ޮԽͰ͖ͳ͍ • ͦͷͨΊ
WordPress.org ͷςʔϚσΟϨΫτϦͷཁٻࣄ߲Ͱ ʮςʔϚجຊతʹݟͨΛ࢘Δ͜ͱͷΈ͖͢ʯͭ·Γɺ => ݟͨʹؔͳ͍ػೳΛςʔϚʹೖΕΔ͖Ͱͳ͍
ςʔϚͰԿΛ͢Δ͖ • ͨͩ͜͠Ε WordPress.org ͷςʔϚσΟϨΫτϦͷͰ͋Γɺଞͷςʔ ϚαΠτͰҧͬͨΓ͢Δ • ݁ہݸʑͷػೳΛϓϥάΠϯԽ͢ΔͷͱɺςʔϚͰҰݩԽͯͯ͢͠Λ ཧ͢Δͷศར͞ͱͷτϨʔυΦϑ •
·ͨडୗ։ൃͳͲͰػೳࣗମʹ൚༻ੑ͕ͳ͍߹ɾͳΜΒ͔ͷࣄʹ ΑͬͯϓϥάΠϯΛ͍ʹ͍͘߹ͳͲ͋Δ => ࣗͷ੍࡞͍ͯ͠Δతɾެ։ൣғͳͲΛߟ͑ͯɺదͳͱ͜ΖΛߟ͑ Α͏
ϥΠηϯεʹ͍ͭͯ
8PSE1SFTTΦʔϓϯιʔε • WordPress ຊମ͕Φʔϓϯιʔε • GPL ϥΠηϯεΛ༻͍ͯ͠Δ • WordPress ࢥͱͯ͠ʮύϒϦογϯάͷຽओԽ
(Democratize publishing)ʯΛܝ͍͛ͯΔ • ΦʔϓϯιʔεͳͷͰ WordPress ͷ։ൃɾσΟεΧογϣϯɾ ༁ͳͲʹ୭ͰߩݙͰ͖Δ
(1-ϥΠηϯεͱͲΜͳϥΠηϯε͔ • General Public License ͷ಄จࣈΛͱͬͯ "GPL" ͱݺΕΔΦʔ ϓϯιʔεϥΠηϯεͷҰͭ •
͍͔ͳΔ੍ͳ͠ʹແอূͰ4ͭͷࣗ༝ΛೝΊΔͷ͕جຊࢥ
ͭͷࣗ༝ͱ • ͲΜͳతʹ༻͢Δࣗ༝ • ιʔείʔυΛݚڀ͠ɺվม͢Δࣗ༝ • ଞͷਓʹ࠶͢Δࣗ༝ • վมͨ͠ͷΛڞ༗͢Δࣗ༝
࠷େͷಛίϐʔϨϑτ • ίϐʔϨϑτͱɺ੍࡞ͷվม͞ΕͨͷੜϓϩμΫτ (derivative work) ʹɺͱͷ੍࡞ͱಉҰͷࣗ༝ΛೝΊΔ͖ͱ͍͏ߟ͑ํ • WordPress ͷ߹ :
• ͱͷ੍࡞ = WordPress • ੜϓϩμΫτ = ςʔϚɾϓϥάΠϯͳͲ => ͭ·ΓɺWordPress ͕ GPL Ͱ͋ΔݶΓɺ͢Δ࡞ͬͨςʔϚɾϓϥ άΠϯ GPL ʹ͢Δ͕ٛൃੜ͢Δ
͠ͳ͍߹ʹ͍ͭͯ • GPL ͢Δ߹ʹͷΈదԠ͞ΕΔϥΠηϯεͰ͋Γɺ ͠ͳ͍߹ʹ GPL ͰϥΠηϯε͢Δඞཁͳ͍ • ͦΕͰ WordPress
Λ͍ͬͯΔͱ͍͏͜ͱ GPL Λ ͍ͬͯΔͱ͍͏͜ͱͳͷͰɺੋඇօ͞Μʹ͓͍ͬͯͯΒ ͍͍ͨ
ςʔϚͷ࢝Ίํ
ελʔλʔςʔϚ
ελʔλʔςʔϚ • खؒͷ͔͔Δ࠷ॳͷઃఆɺͲΜͳςʔϚͰඞཁʹͳΔΑ͏ ͳίʔυ͕ઃఆࡁΈͷɺ੍࡞ͷͱʹ͢ΔςʔϚ • ྫ͑ : • Sass ͷίϯύΠϧઃఆ
• index.php single.php ͷϧʔϓ (ߘදࣔ෦)
@T VOEFSTDPSFT • Automattic ࣾ (JetPack ϓϥάΠϯͷ։ ൃͳͲΛ͍ͯ͠Δձࣾ) ͷ։ൃ͢Δε λʔλʔςʔϚ
• ͔ͳΓதγϯϓϧͳ PHP ςϯϓ Ϩʔτ + CSS (SCSS) • γϯϓϧʹ͍͑ͨςʔϚʹಛʹ͓͢ ͢Ί
ίʔσΟϯάن
ίʔσΟϯάن • ίʔσΟϯάن ίʔυͷॻ͖ํ ʹ͍ͭͯͷܾ·Γ͝ͱ • WordPress ʹ WordPress Coding
Standards ͱ͍͏ɺ WordPress ઐ༻ͷن͕͋Δ • ͜ΕίʔυͷϑΥʔϚοτ͚ͩͰͳ͘ɺޙͰ৮ΕΔηΩϡϦ ςΟʹؔ͢Δ͜ͱؚ·ΕΔ
8PSE1SFTT$PEJOH4UBOEBSET • ྫ͑ : if (is_single() ){ ͷΑ͏ͳͷΛҎԼͷΑ͏ʹॻ͖͘ͱنఆͰ͖Δ : if
( is_single() ) {
ཱͭͱ͖ • ෳਓ։ൃ͢Δ࣌ʹɺίʔυͷॻ͖ํͷบΛͳͤ͘Δ • Ұਓ։ൃͰɺΞοϓσʔτͷظ͕ۭ͍ؒͯ͠·ͬͨͱ͖Ͱ ίʔυͷ࣭ΛอͯΔ
ηΩϡϦςΟʹ͍ͭͯ
ͳͥηΩϡϦςΟରࡦ͕ඞཁͳͷ͔
ͳͥηΩϡϦςΟରࡦ͕ඞཁͳͷ͔ • ϓϩάϥϜʹʮಛผͳҙຯΛ࣋ͭจࣈྻʯ͕͋ͬͨΓ͢Δ • ·ͨ WordPress Ͱ HTML Λѻ͏͜ͱ͕ଟ͘ɺHTML Λ༻
Ͱ͖Δ = JavaScript Λ༻Ͱ͖Δ ͱ͍͏͜ͱͰ͋Γɺ JavaScript ʹ৭ʑͳ͜ͱ͕Ͱ͖ͯ͠·͏ͨΊɺѱ༻ͷڪΕ͕ ͋Δ
ͳͥηΩϡϦςΟରࡦ͕ඞཁͳͷ͔ ͨͱ͑ɺHTML ͷ͜Μͳจࣈྻ : < > ' " & ͜ΕΒΛڐՄͯ͠͠·͏ͱɺ༧ظ͠ͳ͍ͱ͜ΖͰ
HTML ͕ΘΕ ͯ͠·͏
ΫϩεαΠτεΫϦϓςΟϯά 944 • Ϣʔβʔ͕༧ظ͠ͳ͍ಈ࡞Λ͢Δίʔυ (ಛʹ JavaScript) Λಡ ΈࠐΉ͜ͱ • JavaScript
Ͱ࣮ࡍʹͰ͖ͯ͠·͏͜ͱ : • উखʹଞͷαΠτ (ಛʹΠϧεαΠτͳͲ) ʹసૹ • ߘ༰Λॻ͖͑
େ͖ͭ͘ͷηΩϡϦςΟରࡦ • αχλΠζ => σʔλΛอଘ͢Δͱ͖ʹσʔλΛແԽ = ৴༻Ͱ͖ͳ͍จࣈ ྻΛऔΓআ͘ • Τεέʔϓ
=> σʔλΛग़ྗ͢Δͱ͖ʹಛघจࣈྻΛม͠ಛघจࣈྻͱ͠ ͯͷޮՌΛଧͪফ͢
αχλΠζ
αχλΠζͷྫ • wp_kses() ؔ • ڐՄ͢Δ HTML ͷΫϥεɾଐੑΛࢦఆ͠ɺڐՄ͞Εͳ͍ͷ Λআ͢Δ ྫ͑͜Μͳ
HTML : ͜Μʹͪɺ<br/> <span class="my-class" style="color: red">ۚҪ</span>Ͱ͢ɻ
ී௨ʹදࣔ͢Ε͜͏ͳΔ
ී௨ʹදࣔ͢Ε͜͏ͳΔ
XQ@LTFT ؔΛ͏ͱ wp_kses()ؔΛͬͯ<span>λάͱclassଐੑͷΈΛڐՄ
XQ@LTFT ؔΛ͏ͱ
wp_kses()ؔͷ͍ํ $allowed_html = [ 'span' => [ 'class' => [],
], ]; $data = wp_kses( $data, $allowed_html );
ଞͷ8PSE1SFTTαχλΠζؔ • wp_kses_post() • wp_kses_data() • sanitize_email() • sanitize_file_name() •
sanitize_html_class() • sanitize_text_field()
ςʔϚΧελϚΠβʔͱαχλΠζ $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', ] ) );
Τεέʔϓ
Τεέʔϓͷྫ • esc_html() ؔ => ͯ͢ͷ HTML ΛϓϨʔϯςΩετԽ͢Δ ྫ͑͜Μͳ HTML
: ͜Μʹͪɺ<br/> <span class="my-class" style="color: red">ۚҪ</span>Ͱ͢ɻ
͢Δͱ͜͏ͳΔ
Τεέʔϓͷಈ࡞ • HTML ͷಛघͳจࣈྻΛɺΤεέʔϓจࣈͱݺΕΔಛघͳҙ ຯ͕ແޮԽ͞ΕΔจࣈྻʹஔ͖͑Δ ྫ : < (খͳΓ) =>
< > (େͳΓ) => >
ଞͷ8PSE1SFTTΤεέʔϓؔ • esc_attr() • esc_url() • esc_textarea() • esc_js()
ηΩϡϦςΟରࡦͷίπ
ηΩϡϦςΟରࡦͷίπ • ͯ͢Λٙ͏͜ͱ • αχλΠζ্ͨ͠ͰΤεέʔϓ͕ඞཁͳ͜ͱ͋Δ • WordPress Coding Standards Λ͏
ηΩϡϦςΟରࡦͷίπ8PSE1SFTT$PEJOH 4UBOEBSET
ϝϯςφϯεΛ͘͢͢͠Δʹ
ʮ8PSE1SFTTͷॻ͖ํʯΛ֮͑Δ • WordPress ʹૉͷ PHP ͱҧ͏ʮWordPress తͳॻ͖ํʯ ͕͋Δ • ྫ͑͜ͷΑ͏ͳؔͳͲ
: • get_template_part() • wp_enqueue_script(), wp_enqueue_style()
υΩϡϝϯτΛॻ͘ • ΫϥεɾؔʹۃྗυΩϡϝϯτΛॻ͘ • WordPress Coding Standards Λ͏ͱίϝϯτ͕ൈ͚͍ͯΔ ͱڭ͑ͯ͘ΕΔ •
υΩϡϝϯτͷॻ͖ํͱͯ͠ phpdoc ίϝϯτ ͱ͍͏͕͋Δ
QIQEPDίϝϯτͷॻ͖ํ /** * ࢦఆ͞Εͨͷؔ࿈هࣄΛฦ͢. * * @param int $max_posts දࣔ͢Δ࠷େهࣄ.
* @since 1.0.0 **/ function theme_get_related_posts( $max_posts ) { ...
ςʔϚΛνΣοΫͰ͖ΔπʔϧɾϓϥάΠϯΛ ͏ • ςʔϚϢχοτςετ • Theme Check | WordPress.org •
WPTRT/theme-sniffer: Theme Sniffer plugin using sniffs. • Debug Bar | WordPress.org
8PSE1SFTTPSHςʔϚσΟϨΫ τϦܝࡌʹ͋ͨͬͯ
ཁٻࣄ߲ • WordPress.org ςʔϚσΟϨΫτϦʹ ཁٻࣄ߲ (Requirements) ͱ͍͏ɺܝࡌͷͨΊʹԊΘͳ͍ͱ͍͚ͳ͍ϧʔ ϧ͕͋Δ • ཁٻࣄ߲ͷৄࡉɺRequired
– Theme Review Team — WordPress Λࢀর • ຊޠ༁͋Γ·͢ : https://github.com/mirucon/required-ja
ςʔϚϨϏϡʔνʔϜ୭ͰࢀՃͰ͖Δ • Δؾ͕͋ΔਓͳΒ୭Ͱܴ • ਓͷςʔϚΛݟΔ͜ͱͰࣗͷςʔϚ੍࡞ʹͱͯʹཱͭ • ࠷ऴతʹঝೝͰ͖ΔݖݶݶΒΕͨਓʹ͔͠༩͑ΒΕͯͳ͍ͷ Ͱɺ҆৺ͯ͠ྑ͍
·ͱΊ • ςʔϚ੍࡞ʹɺελʔλʔςʔϚɺWordPress Coding Standards ͳͲศརͳπʔϧ͕ଟ͍ • GPL ϥΠηϯεࣗ༝ΛೝΊΔɺར༻ऀʹ։ൃऀʹ༏͍͠ ϥΠηϯε
• ηΩϡϦςΟʹओʹʮαχλΠζʯͱʮΤεέʔϓʯͰ ରࡦ͢Δ
͋Γ͕ͱ͏͍͟͝·ͨ͠ 5XJUUFS!NJSVDPOT IUUQTXXXNJSVDPODPN