コードが書ける人のためのブロックエディタのとっかかり

Tokyo WordPress Meetup 2026年5月

Transcript

1. コードが書ける人のための ブロックエディタのとっかかり Tokyo WordPress Meetup 2026೥ 5݄20೔ ઒Ҫণ඙
2. 1 自己紹介 ɹ઒Ҫণ඙ʢ͔Θ͍·͞ͻ͜ʣʢ@sakuragi_keiʣ ౦ژ౎෎தࢢࡏॅ WebσΟ ϨΫλʔ ' ͳͲ ' খࡩΠϯίͱγϩϋϥΠϯίͱࠇࣲݘͷύύ PerfumeͱΞϯφϛϥʔζ͕޷͖
3. 2 ౦ژ౎෎தࢢʹͯ Web੍࡞ɾDTP੍࡞ʢ14ظ໨ʣ https://www.cherrypieweb.com/ ϒϩά͸1997೥։ઃ ࠓ೥Ͱ28೥໨ ʂ ͪͳΈʹ WordPressͷॳ൛ϦϦʔε͸2003೥
4. 3 ࠷ॳʹ͓அΓ͓͖ͯ͠·͢
5. 4 ࠓ೔͸ ϒϩοΫΤσΟλΛ࢖͍͜ͳ͍ͯ͠Δํͷ ͓໾ʹཱͭΑ͏ͳTips͸͋Γ·ͤΜ
6. 5 ϒϩοΫΤσΟλ͕࢖͑Δํʹ͸ͪ͜ΒΛ͓εεϝ ৮ΕΔ͚ͲյΕͳ͍WordPressͷ࡞Γํ – WordCamp Kansai 2025 https://kansai.wordcamp.org/2025/session/how-to-build-a-wordpress-site-that-can-be- touched-but-wont-break/
7. 6 ɾɾɾͰ͸ɺ͋ΒͨΊͯɺ
8. 7 ͳͥ page-xxx.php ͰݻఆϖʔδΛ࡞Δͷ͔ʁ
9. 8 ౤ߘը໘Ͱ·ͱ΋ͳϨΠΞ΢τͳΜͯग़དྷΔΘ͚͕ແ͍͔Β ʢݸਓͷײ૝Ͱ͢ʣ
10. 9 WordPressͷ੍࡞ख๏͕ఆண࢝͠Ίͨ͜Ζͷ ౤ߘը໘ͷΤσΟλ͸ ʮΫϥγοΫΤσΟλʯ
12. 11 こんなのでできるわけない こんなのでできるわけない ʢݸਓͷײ૝Ͱ͢ʣ
13. 12 WYSIWYGΤσΟλ͸Web஌͕ࣝແͯ͘΋࢖͑Δ ˣ Web஌͕ࣝແ͍ਓ͕࢖͏΋ͷ ʢݸਓͷײ૝Ͱ͢ʣ
14. 13 WYSIWYGエディ タ ＝ 素人 WYSIWYGエディ タ ＝ 素人 page-xxx.php ＝ プロ page-xxx.php ＝ プロ ʢݸਓͷײ૝Ͱ͢ʣ
15. 14 ͡Ό͋ɺϒϩοΫΤσΟλ͸Ͳ͏ͳͷ͔ʁ
17. 16 ϒϩοΫΤσΟλ͸ ΫϥγοΫΤσΟλͷUI͕มΘ͚ͬͨͩͷ΋ͷ Ͱ͸ͳ͍ ˣ ίʔυ͕ॻ͚ͳ͍ਓͷͨΊͷ΋ͷͰ͸ͳ͍
18. 17 ϒϩοΫ͸ϒϥοΫϘοΫεͰ͸ͳ͍ ˣ ϒϩοΫΤσΟλ͸HTMLδΣωϨʔλʔ
19. 18 ࣮͸ɺίʔυ͕Θ͔ΔͱϒϩοΫΤσΟλ͸ָ͍͠
20. 20 ຊ೔ͷαϯϓϧϖʔδ page-xxx.php Ͱ࡞੒ͯ͠Έ·ͨ͠ɹ ΫϥγοΫΤσΟλͩͱ ඍົʹ࡞ΓͮΒ͍ͷͰɺ ֎෦ΤσΟλͰ࡞Γ͕ͪ
21. 19 ブロックエディ タで ブロックを使わずにページを作る
22. 21 ΧελϜHTMLϒϩοΫʹϕλுΓͯ͠ΈΔ
23. 22 ηΫγϣϯ͝ͱʹখ෼͚ʹͯ͠ΈΔ
24. 23 ϦετϏϡʔ͕௒ศར ɾ ϖʔδ಺ͷߏ଄͕Θ͔Γ΍͍͢ Ҡಈ΋؆୯ ෳ੡΋؆୯ ɾ λάͷೖΕࢠͷબ୒ϛε͕ແ͘ͳΔ
25. 24 ίʔυΛೖΕࢠʹ͢ΔʢάϧʔϓԽʣ ɾ άϧʔϓԽ ˺ divλάͰғΉ ɾ divҎ֎Ͱ΋ғΊΔ ʢޙͰཪٕΛ͓ڭ͑͠·͢ʣ
26. 25 HTMLをブロックにしてみる
27. 26 ΧελϜHTMLϒϩοΫΛλάϨϕϧ·Ͱখ෼͚ʹ͢Δ
28. 27 ݟग़͠ϒϩοΫɺஈམϒϩοΫ ɾ ϒϩοΫ͕ॻ͖ग़͢ίʔυ͸γϯϓϧ
29. 28 ϒϩοΫઃఆͷίʔυΛݟͯΈΔ ɾ ϓϦηο τ஋͸class ࢦఆ஋͸styleଐੑʹͳΔ
30. 29 ίʔυΤσΟλΛݟͯΈΔ ɾ ϒϩοΫ͸ίϝϯ τͰද͞Ε͍ͯΔ ɾ ϒϩοΫͷઃఆ஋͕ ίϝϯ τ಺ʹهࡌ͞Ε ίʔυʹ൓ө͞ΕΔ
31. 30 ΋͔ͯ͠͠ɺϒϩοΫΤσΟλͬͯίʔυͰฤूͰ͖ΔͷͰ͸ʁ
32. 31 ΍Ζ͏ͱࢥ͑͹ ɾ ίʔυͰϒϩοΫΛෳ੡Ͱ͖Δ ɾ ίʔυͰઃఆ஋ΛมߋͰ͖Δ ίʔυͷमਖ਼͸ϛεΛ͠΍͍͢ͷͰ ͋·Γ͓εεϝ͠·ͤΜ
33. 32 コードに注目したいブロック ΧϥϜϒϩοΫɾԣฒͼϒϩοΫ ɾ flexboxʢϝσΟΞΫΤϦͰ flex-wrap: wrap / nowrap ੾Γସ͑ʣ
34. 33 ը૾ϒϩοΫ ɾ WordPress͕ࣗಈతʹϨεϙϯγϒରԠ͍ͯ͠Δ ɾ ը૾͕Ξοϓϩʔυ͞Εͨͱ͖ʹෳ਺ͷαΠζʹࣗಈͰϦαΠζ ʢαΠζ͸ϝσΟΞઃఆʹΑΔʣ ɾ imgλάʹࣗಈͰsrcsetଐੑΛઃఆ
35. 34 ブロックパターン ɾ ίʔυΛ࢖͍·ΘͤΔ ɾ ಉظύλʔϯʗඇಉظύλʔϯ
36. 35 ඇಉظύλʔϯ ɾ ίʔυεχϖο τΈ͍ͨͳ΋ͷʢ୯७ͳෳ੡ʣ ɾ ΦϦδφϧΛमਖ਼ͯ͠΋ɺ഑ஔͨ͠ύλʔϯʹ͸Өڹ͕ͳ͍ ɹɹ ΦϦδφϧ
37. 36 ಉظύλʔϯ ɾ ςϯϓϨʔ τύʔπΈ͍ͨͳ΋ͷʢίʔυΛݺͼग़͢ʣ ɾ ΦϦδφϧΛमਖ਼͢Δͱશͯʹ൓ө͞ΕΔ ɹɹ ΦϦδφϧ
38. 37 ಉظύλʔϯͷ্ॻ͖ ɾ Ҿ਺෇͖ͷςϯϓϨʔ τύʔπΈ͍ͨͳ΋ͷʢҾ਺ʹΑͬͯग़ྗ͕มΘΔʣ ɾ ΦϦδφϧΛमਖ਼͢Δͱɺ্ॻ͖͍ͯ͠ͳ͍ͱ͜Ζ͚͕ͩ൓ө͞ΕΔ ɹɹ ΦϦδφϧ
39. 38 コードが書けるとブロックテーマは面白い
40. 39 ςʔϚͷઃఆ஋Λ֎෦CSSͰ࢖͍·Θ͢ ɾ theme.json ΍αΠ τΤσΟλʔͷઃఆ஋͕ CSSม਺ʹͳΔ ৭ɾλΠϙάϥϑΟɾεϖʔγϯάɾɾɾ ɹˣ ֎෦CSSͰར༻Ͱ͖Δ ɾ theme.json "settings": { "color": { "palette": [ { "name": "Primary", "slug": "primary", "color": "#0073aa" } ] } } ɹɹɹˣ ɾglobal-style-inline :root { --wp--preset--color--primary: #0073aa; } ɾmy-style.css .my-style { color: var(--wp--preset--color--primary); }
41. 40 ίʔυ͕ॻ͚ΔͱϒϩοΫςʔϚ͸ຊ౰ʹ໘ന͍ͷͰɺ ͲΜͲΜ৮ͬͯΈΑ͏
42. 41 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ