WordPress テーマ開発者から見たブロックテーマを利用する際のメリット/デメリット

2024/07/20（土）に開催された「WordPressでつながる！さくらとエックスのパワーアップセミナー」内で発表したスライドです。

・イベントページ
https://sakura-xserver-20240720.peatix.com/

Transcript

1. AnimaGate Imamura 8PSE1SFTT
   ςʔϚ։ൃऀ͔Βݟͨ
   ϒϩοΫςʔϚΛར༻͢Δࡍͷ
   ϝϦοτσϝϦοτ ୅ද גࣜձࣾ  ձ৔ɿ͘͞ΒΠϯλʔωοτ౦ژࢧࣾ
   '
2. ࣗݾ঺հ
3. 
   
   ࣗݾ঺հ ෋ࢁݝग़਎ ౦ژ౎ʢे৚ʣࡏॅ Ӧۀ/։ൃͱ྆ํͰ͖Δ͜ͱΛڧΈʹ ಠཱ/๏ਓԽͯ͠גࣜձࣾ AnimaGate Λઃཱʢ2016೥ʣ
4. 
   
   ओͳۀ຿ ΢Σϒ੍࡞ ΢ΣϒγεςϜ։ൃ EC αΠτߏங ࣗࣾαʔϏεӡӦ ΢Σϒ੍࡞ऀ޲͚ٕज़ߨࢣ
5. 
   
   8PSE1SFTT
   ʹؔ͢Δ׆ಈ Nishiki Pro Hakoniwa ςʔϚ։ൃ
6. 
   
   8PSE1SFTT
   ʹؔ͢Δ׆ಈ ΠϕϯτࢀՃɿWordCamp Tokyoɿొஃ Kansaiɿεϙϯαʔ
7. ʮWordPress ςʔϚ։ൃऀʯͷఆٛ
8. 
   ʮWordPress ςʔϚ։ൃऀʯͷఆٛ ͜Μͳ͜ͱ͕Ͱ͖ΔςʔϚ։ൃऀ ެࣜσΟϨΫτϦͰ഑෍͢Δ൚༻ςʔϚͷ։ൃ ϓϩδΣΫτͷཁ݅ʹԠͨ͡ςʔϚͷ։ൃ ͦΕΒͷςʔϚͷܧଓతͳӡ༻/อक͕Ͱ͖Δ
9. 
   ʮWordPress ςʔϚ։ൃऀʯͷఆٛ ެࣜσΟϨΫτϦͰແྉ഑෍த IUUQTXPSEQSFTTPSHUIFNFTIBLPOJXB URL HakoniwaʢϒϩοΫςʔϚʣ
10. 
    ʮWordPress ςʔϚ։ൃऀʯͷఆٛ Hakoniwa ެࣜαΠτ IUUQTIBLPOJXBBOJNBHBUFDPN URL ܾࡁαʔϏεͱͷ࿈ܞ ϩάΠϯϖʔδ ϥΠηϯε؅ཧ/ϓϩϑΟʔϧฤू ϒϩοΫςʔϚͰ࡞ΒΕͨձһ੍αΠτ ςʔϚઐ༻ϓϥάΠϯ Beta ൛Λແྉ഑෍ ΧελϚΠζ ϒϩοΫςʔϚͷجຊతͳ࢖͍ํΛղઆ ΧελϚΠζʹ͍ͭͯͷߟ࡯ ৘ใൃ৴
11. ϝϦοτ / σϝϦοτ Λ஌Δ͜ͱͷॏཁੑ
12. 
    
    ϝϦοτ / σϝϦοτ Λ஌Δ͜ͱͷॏཁੑ ͜͜਺೥ͷ WordPress ຊମͷΞοϓσʔτ͸ ϒϩοΫςʔϚʹؔ͢Δศརͳػೳ௥Ճ͕ଟ͍ ͦΖͦΖɺϒϩοΫςʔϚ
    ৮ͬͯΈΑ͏͔ͳɾɾɾʁ
13. 
    
    ϝϦοτ / σϝϦοτ Λ஌Δ͜ͱͷॏཁੑ ΫϥγοΫςʔϚͱͷൺֱ ஌Γ͍ͨͷ͸ ࣮༻ੑ ͲͪΒ͕༏Ε͍ͯΔʁ Կ͕Ͱ͖Δʁ ѻ͍ํ͸Ͳ͏มΘΔʁ ੍࡞Ҋ݅Ͱ࢖͑Δʁ ։ൃޮ཰͸্͕Δʁ ϝϯςφϯεੑ͸Ͳ͏ʁ
14. 
    
    ϝϦοτ / σϝϦοτ Λ஌Δ͜ͱͷॏཁੑ ϝϦοτͱσϝϦοτΛ஌Δͱ ϒϩοΫςʔϚͷʮಘҙͳ͜ͱʯʮͦ͏Ͱͳ͍͜ͱʯ͕ݟ͑ͯ͘Δ ϓϩδΣΫτ΍ཁ݅ʹԠͯ͡ɺద੾ͳςʔϚબͼ͕͠΍͍͢ ΧελϚΠζ/ϝϯςφϯε࡞ۀʹ΋උ͑ΒΕΔ ΛͰ͖ΔݶΓݮΒ͢ ͜Μͳ͸ͣ͡Όͳ͔ͬͨʂ
15. ϒϩοΫςʔϚͬͯͳʹʁ
16. 
    
    ϒϩοΫςʔϚͬͯͳʹʁ φϏήʔγϣϯϝχϡʔɺϔομʔɺ ίϯςϯπɺαΠτϑολʔͳͲɺ αΠτͷ͋ΒΏΔύʔπʹϒϩοΫΛ࢖༻͢ΔςʔϚ WordPress.org ΑΓҾ༻ ϒϩοΫςʔϚͱ͸ʁ
17. 
    
    ϒϩοΫςʔϚͬͯͳʹʁ αΠτͷ͢΂ͯͷύʔπΛฤूɺΧελϚΠζͰ͖Δ WordPress ౥ࡌͷ࠷৽ػೳʹ߹Θͤͯ࡞ΒΕ͍ͯ·͢ɻ ςʔϚΛมߋ͢Δ͜ͱͳ͘ɺ มߋ͍ͨ͠ύʔπͷΈΛࠩ͠ସ͑ΒΕ·͢ɻ WordPress.org ΑΓҾ༻ ϒϩοΫςʔϚͱ͸ʁ
18. 3 ͭͷϝϦοτ
19. ϝϦοτ 01 ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ
20. 
    
    
    ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ αΠτͷ͋ΒΏΔύʔπΛϒϩοΫͰ؅ཧͰ͖Δ FSEʢFull Site EditingʣɿϑϧαΠτฤू
21. 
    
    
    ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ϔομʔ / ϑολʔΛϒϩοΫͰ؅ཧʢҰྫʣ ϩΰը૾ φϏήʔγϣϯ ίϯςϯπͱͷִؒ ΧϥϜ਺ ύλʔϯΛద༻͢Δ͜ͱ΋ʂ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ
22. 
    
    
    ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ݕࡧ݁Ռϖʔδ / 404 ϖʔδΛϒϩοΫͰ؅ཧʢҰྫʣ ߜΓࠐΈݕࡧ ࠷৽ͷ౤ߘ ϖʔδ཭୤Λ๷͙Α͏ͳ ಋઢ࡞Γ͕Ͱ͖Δʂ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ
23. 
    
    
    ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ʮΫΤϦʔϧʔϓʯϒϩοΫͰ ࣗ༝ʹΧελϚΠζ͠Α͏ʂ ΧςΰϦʔ / λάͳͲͷΞʔΧΠϒϖʔδΛϒϩοΫͰ؅ཧʢҰྫʣ λΠτϧ ൈਮ ެ։೔ ஶऀ໊ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ
24. 
    
    
    ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ʮΫΤϦʔϧʔϓʯϒϩοΫʹΧελϜϒϩοΫΛ௥Ճ ʮ͓ؾʹೖΓϘλϯʯϒϩοΫ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ
25. 
    
    
    ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ʮ͓ؾʹೖΓϘλϯʯϒϩοΫ IUUQTIBLPOJXBBOJNBHBUFDPNNBOVBMCMPDLT GBWPSJUFCVUUPO URL ࢀߟɿInteractivity API IUUQTNBLFXPSEQSFTTPSHDPSF JOUFSBDUJWJUZBQJEFWOPUF URL
26. 
    
    
    ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ʮΫΤϦʔϧʔϓʯϒϩοΫΛ֦ு͢Δͱ͞Βʹศརʹʂ ʮؔ࿈౤ߘʯϒϩοΫ IUUQTIBLPOJXBBOJNBHBUFDPNNBOVBMCMPDLT SFMBUFEQPTUT URL ࢀߟɿExtending the Query Loop block IUUQTEFWFMPQFSXPSEQSFTTPSHCMPDLFEJUPSIPXUP HVJEFTCMPDLUVUPSJBMFYUFOEJOHUIFRVFSZMPPQCMPDL URL
27. ϝϦοτ 02 αΠτશମͷઃఆΛҰݩ؅ཧ
28. 
    
    
    αΠτશମͷઃఆΛҰݩ؅ཧ αΠτશମͷઃఆʢάϩʔόϧελΠϧʣΛҰݩ؅ཧ theme.json
29. 
    
    
    αΠτશମͷઃఆΛҰݩ؅ཧ ϓϩάϥϛϯά͕ඞཁʹͳΓ͕ͪ PHP ΍ JavaScript ͷ஌͕ࣝඞཁ ։ൃऀతʹ͸݁ߏͳखؒ ϑΥϯτͷαΠζΛେ͖͘͢Δػೳ͕ཉ͍͠ʂ ը૾ʹυϩοϓγϟυ΢Λ͚ͭΔػೳ͕ཉ͍͠ʂ ೉͍͠ίʔυΛॻ͔ͳͯ͘΋ ϓϩάϥϛϯά͕Ͱ͖ͳͯ͘΋ theme.json Ͱػೳ௥ՃͰ͖Δ ଞͷϓϩδΣΫτͰ΋࠶ར༻͠΍͍͢ ※ theme.json ͕ೖ͍ͬͯͳ͍৔߹ ΫϥγοΫςʔϚ ϒϩοΫςʔϚ
30. 
    
    
    αΠτશମͷઃఆΛҰݩ؅ཧ theme.json ͷجຊతͳॻ͖ํ IUUQTKBXPSEQSFTTPSHUFBNIBOECPPLCMPDLFEJUPS IPXUPHVJEFTDVSBUJOHUIFFEJUPSFYQFSJFODFUIFNFKTPO URL
31. 
    
    
    αΠτશମͷઃఆΛҰݩ؅ཧ theme.json ͸্ॻ͖Ͱ͖Δ IUUQTEFWFMPQFSXPSEQSFTTPSHSFGFSFODFIPPLT CMPDL@FEJUPS@TFUUJOHT@BMM URL ϓϥάΠϯͰ΍ΔͳΒ block_editor_settings_all ࢠςʔϚͰ΍ΔͳΒ theme.json ΛೖΕͯ༗ޮԽ͢Δ
32. ϝϦοτ 03 ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ
33. 
    
    
    ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ ύλʔϯͱ͸ʁ ෳ਺ͷϒϩοΫΛ૊Έ߹Θͤͯ࡞ΒΕͨ ਽ܕʢ͓खຊʣίϯςϯπ
34. 
    
    
    ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ ύλʔϯͷΤΫεϙʔτ/ΠϯϙʔτʢҰྫʣ τοϓϖʔδΛؙ͝ͱύλʔϯԽ demo01.json ΤΫεϙʔτ ෳ਺ͷϒϩοΫͰ࡞ΒΕͨ json ϑΝΠϧΛΠϯϙʔτ ϚΠύλʔϯͱͯ͠ར༻Մೳ
35. 
    
    
    ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ ύλʔϯͷ࢖͍ํʢҰྫʣ ύλʔϯ͔Β௥Ճͨ͠ϒϩοΫ͸ฤूՄೳ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ
36. 
    
    
    ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ θϩ͔ΒίϯςϯπΛ࡞Βͳͯ͘΋͍͍ ίʔυΛॻ͔ͳͯ͘΋ίϯςϯπ͕࡞ΕΔ ύλʔϯ͔ΒσβΠϯ΍ίϯςϯπ࡞Γͷ ΠϯεϐϨʔγϣϯ͕ಘΒΕΔʢύλʔϯͨ͘͞Μ࡞Γ͍ͨʣ ύλʔϯΛݩʹͯ͠৽͍͠ύλʔϯΛ࡞੒Ͱ͖Δ ͞ΒʹଞͷαΠτ΁ΤΫεϙʔτ΋ɻ࠶ར༻ੑ
37. 3 ͭͷσϝϦοτ
38. σϝϦοτ 01 ϒϩοΫςʔϚ༻ͷֶशίετ͕͔͔Δ
39. ΫϥγοΫςʔϚ։ൃͰ஝͑ͨεΩϧ͕࢖͑ͳ͍͜ͱ͕͋Δ ಉ͡Α͏ͳ͜ͱΛͨͯ͘͠΋ɺϒϩοΫςʔϚ༻ͷॻ͖ํΛ ֮͑ͳ͍ͱ͍͚ͳ͍
    
    
    ϒϩοΫςʔϚ༻ͷֶशίετ͕͔͔Δ
40. ϒϩοΫʹରͯ͠Կ͔Λ͢Δ render_block ग़ྗλάͷ্ॻ͖ WP_html_tag_processor
    
    
    ϒϩοΫςʔϚ༻ͷֶशίετ͕͔͔Δ IUUQTEFWFMPQFSXPSEQSFTTPSHSFGFSFODFIPPLTSFOEFS@CMPDL
    IUUQTEFWFMPQFSXPSEQSFTTPSHSFGFSFODFIPPLTSFOEFS@CMPDL@UIJTOBNF URL IUUQTEFWFMPQFSXPSEQSFTTPSHSFGFSFODFDMBTTFT XQ@IUNM@UBH@QSPDFTTPS URL ΧελϜϑΟʔϧυͱͷ࿈ܞ Block Bindings API IUUQTEFWFMPQFSXPSEQSFTTPSHOFXTJOUSPEVDJOH CMPDLCJOEJOHTQBSUDPOOFDUJOHDVTUPN fi FMET URL
41. σϝϦοτ 02 ࠷৽৘ใΛ௥͍ଓ͚Δඞཁ͕͋Δ
42. ެࣜαΠτ͕࠷৽ͷ৘ใʹߋ৽͞Ε͍ͯͳ͍͜ͱ͕͋Δ ߪೖٕͨ͠ज़ຊ͕࠷৽ͷ WordPress ʹରԠ͍ͯ͠ͳ͍ ※ؤுͬͯߋ৽ͯ͘͠Ε͍ͯΔͷ͸΋ͪΖΜཧղ͍ͯ͠Δ
    
    
    ࠷৽৘ใΛ௥͍ଓ͚Δඞཁ͕͋Δ ৘ใͷมԽεϐʔυʹ͍͍ͭͯͨ͘Ίͷ౒ྗ͸͋Δఔ౓࢓ํ͕ͳ͍
43. σϝϦοτ 03 ࣮ݧతͳػೳͷ೺Ѳ
44. ͍ͣΕ࢖͑ͳ͘ͳΔʁࠩ͠ସ͕͑ඞཁʁ
    
    
    ࣮ݧతͳػೳͷ೺Ѳ experimentalʢ࣮ݧతͳʣػೳ
45. __experimentalExposeControlsToChildren
    
    
    ࣮ݧతͳػೳͷ೺Ѳ __experimentalLayout __experimentalDefaultControls Ұྫ
46. σϝϦοτʹର͢ΔΞΫγϣϯ ϒϩοΫςʔϚΛѻ͏ษڧձʹࢀՃ͢Δ ಉ͡໨తͷ஥ؒΛ࡞ͬͯ৘ใަ׵͢Δ ಈըͰษڧ͢ΔʢLearn WordPressʣ ϒϩάߪಡ͢ΔʢMake WordPressʣ GitHub ϦϙδτϦͷίʔυΛಡΉ
47. Learn WordPress IUUQTMFBSOXPSEQSFTTPSH URL Make WordPressʢcoreʣ IUUQTNBLFXPSEQSFTTPSHDPSF URL Twenty Twenty-Five IUUQTHJUIVCDPN8PSE1SFTTUXFOUZUXFOUZ fi WF URL
48. ޷͖উखʹ৮ΕΔ։ൃ؀ڥΛ࣋ͱ͏ʂ ͍ͭͰʹ΋͏ҰͭΞΫγϣϯ
49. Studio by WordPress.com IUUQTEFWFMPQFSXPSEQSFTTDPNTUVEJP URL Πϯετʔϧ͢Δͱ ϩʔΧϧ؀ڥͷߏங͕ ؆୯ʹͰ͖Δ
50. WordPress Playground IUUQTQMBZHSPVOEXPSEQSFTTOFU URL ϩʔΧϧ؀ڥΛ࡞Βͳͯ͘΋ ϒϩοΫςʔϚͷػೳΛࢼͤΔ WordPress ຊମ΍ PHP ͷ όʔδϣϯࢦఆͯ͠ىಈ΋Ͱ͖Δ ౰೔ಈըͰ঺հ͠·ͨ͠ʂ
51. ·ͱΊ
52. ৽͍ٕ͠ज़ͷशಘίετ͕͔͔Δ ࣮ݧతͳػೳͷ೺Ѳ ࠷৽৘ใΛ௥͍ଓ͚Δඞཁ͕͋Δ ςʔϚͷ༷ʑͳઃఆΛҰݩ؅ཧ ύλʔϯͰίϯςϯπ࡞੒Λޮ཰Խʂ ϑϧαΠτฤूͷԸܙ͕Ͱ͔͍ʂ ϝϦοτ σϝϦοτ 01 02 03 01 02 03
53. ʮίετ͸౤ࢿʯͩͱߟ͑ɺϓϩδΣΫτͷཁ݅ʹԠͯ͡ ঃʑʹϒϩοΫςʔϚΛ࠾༻͍ͯ͜͠͏ ͍ͣΕ͸ϒϩοΫςʔϚओྲྀͷ࣌୅͕དྷΔʢͨͿΜʣ ૢ࡞ͷ׳Ε΍৽͍ٕ͠ज़ͷशಘίετ͸ඞཁ ΋ͪΖΜΫϥγοΫςʔϚͷར༻΋
54. ͓·͚
55. ͜ͷ୊ࡐҎ֎ʹ΋ 2 ͭީิ͕͋Γ·ͨ͠ WordPress ςʔϚൢചͷܦݧ͔Βಋ͘ɺ ϒϩοΫςʔϚͷޮՌతͳ഑෍ͱൢചํ๏ ϒϩοΫςʔϚͰձһ੍αΠτͬͯͲ͏࡞Ε͹͍͍ʁ ࢼߦࡨޡͷཪଆڭ͑·͢ 01 02
56. ڵຯ͋Γ·͔͢ʁ
57. ࣭໰΍ϒϩοΫςʔϚʹڵຯͷ͋Δํ͸ ަྲྀձͰͥͻ͓࿩͠͠·͠ΐ͏ʂ
58. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ