FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23

信州 WordPress Meetup in 松本 Vol.23 WordPress とかの話をする会
(https://www.meetup.com/ja-JP/shinshu-wordpress-meetup/events/292446368/) での登壇資料です。

1. FSE࣌୅ʹ͓͚ΔWEBαΠτ੍࡞ͷݚڀ Toro_Unit @Shinshu WordPress Meetup 1
2. $ whoami 2
3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Developer • WordPress Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
4. • Gutenberg ͷ։ൃΛͪΐΖͬͱ΍ͬ ͯ·͢ɻ • Shinshu WP Meetup ͷΦʔΨφΠ βʔͯ͠·͢ɻ • ϓϥάΠϯ࡞ͬͨΓੲςʔϚ࡞ͬͯ ͨΓ͠·ͨ͠ɻ • WordPress ͷΠϕϯτͰ஻ͬͨΓ͓ ञҿΜͩΓͨ·ʹӡӦख఻ͬͨΓ͠ ͯ·͢ɻ 4
5. ࠷ޙʹ΍ͬͨΠϕϯτ 5
6. 3೥ͿΓʂʂʂ 6
7. • 5.4 2020೥4݄28೔ • 5.5 2020೥9݄1೔ • 5.6 2021೥1݄31೔ • 5.7 2021೥3݄16೔ • 5.8 2021೥9݄4೔ • 5.9 2022೥2݄18೔ • 6.0 2022೥7݄1೔ • 6.1 2022೥11݄15೔ • 6.2 2023೥3݄30೔ 7
8. • ϒϩοΫύλʔϯ / ϒϩοΫόϦΤʔγϣϯ • margin / padding / border Λ ؅ཧը໘͔Βઃఆ • άϩʔόϧελΠϧ • άϥσʔγϣϯ / Duotone • theme.json • ϒϩοΫςϯϓϨʔτύʔπ • and more... 8
9. ͱʹ͔͍͘Ζ͍ΖΞοϓσʔτ͞Εͨ 9
10. Full Site Editing 10
12. Full Site Editing ͱ͸ • ུͯ͠FSEɻϑϧαΠτฤूͱ΋༁͞ΕΔɻ • WordPress ͷςʔϚΛ؅ཧը໘͔Βฤूग़དྷΔػೳɻ • ϒϩοΫΤσΟλʔͳͷͰɺ౤ߘͱಉ͡ϒϩοΫ͕ར༻Մೳɻ • FSEରԠͷςʔϚ͸ϒϩοΫςʔϚͱݺ͹ΕΔɻҎલͷΑ͏ʹ PHP Ͱ࡞͍ͬͯͨϞϊ͸ΫϥγοΫςʔϚɻ • ϒϩοΫςʔϚͱΫϥγοΫςʔϚ͸ผ෺ɻ 12
13. ΫϥγοΫςʔϚͷ͓͞Β͍ 13
16. • PHPͰॻ͔Ε͍ͯΔ • ςϯϓϨʔτϑΝΠϧ • index.php • single.php • header.php • etc... 16
17. ϒϩοΫςʔϚ 17
20. PHP ͕ͳ͍ʂ 20
22. ??? 22
25. ֤ϒϩοΫͷ৘ใ͕ͦΕͧΕ HTML ͱίϝϯτͰอଘ͞ΕͯΔ ͚ͩɻ • ؅ཧը໘Ͱ࡞ͬͨςϯϓϨʔτ͕HTMLϑΝΠϧͱͯ͠ஔ͔ ΕͯΔ͚ͩɻ • ݱ࣌఺ͰͷมߋΛͦͷ··ςʔϚϑΝΠϧͱͯ͠ΤΫεϙʔ τՄೳɻ • Create Block Theme Plugin Λ࢖͏ͱݱࡏͷςʔϚΛ্ॻ͖ Մೳɻ 25
26. σϑΥϧτςʔϚΛݟͯΈΔɻ 26
27. ϑΝΠϧߏ੒ 27
28. ├── assets (ϑΥϯτϑΝΠϧͱ͔) ├── parts (ςϯϓϨʔτύʔπ) │ ├── comments.html │ ├── footer.html │ ├── header.html │ └── post-meta.html ├── patterns (ϒϩοΫύλʔϯ) │ ├── call-to-action.php │ ├── footer-default.php │ ├── hidden-404.php │ ├── hidden-comments.php │ ├── hidden-no-results.php │ └── post-meta.php ├── style.css ├── styles (σβΠϯͷόϦΤʔγϣϯ) ├── templates (ςϯϓϨʔτ) │ ├── 404.html │ ├── archive.html │ ├── blank.html │ ├── blog-alternative.html │ ├── home.html │ ├── index.html │ ├── page.html │ ├── search.html │ └── single.html └── theme.json 28
29. ΄΅ɺHTML ͱ theme.json ͷΈɻ • ϒϩοΫύλʔϯ͸ php ͚ͩͲɺ຋༁ͱ͔ ςʔϚσΟϨΫτ ϦͷURLͷऔಘͱ͔ͦͷఔ౓ɻ • ϒϩοΫͷελΠϧ౳͸ theme.json Ͱ੍ޚɻ 29
30. theme.json ʹ͍ͭͯ Gutenberg ͷʹؔΘͬͯΔ඿໺͞Μͷ ղઆɻ • ʲWordPress5.9 / 6.0൛ʳtheme.json શղઆ • ʲWordPress6.1ʳtheme.json ͷมߋ ఺ • ʲWordPress6.2ʳtheme.json ͷมߋ ఺ 30
31. <!-- wp:template-part {"slug":"header","tagName":"header"} /--> <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} --> <main class="wp-block-group"> <!-- wp:query { "query":{"perPage":10,"pages":0,"postType":"post","order":"desc","orderBy":"date","inherit":true}, "displayLayout":{"type":"flex","columns":3}, "align":"wide","layout":{"type":"default"} } --> <div class="wp-block-query alignwide"> <!-- wp:post-template {"align":"wide"} --> <!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"max(15vw, 30vh)","align":"wide"} /--> <!-- wp:post-title {"isLink":true,"align":"wide"} /--> <!-- wp:post-excerpt /--> <!-- wp:post-date {"isLink":true} /--> <!-- wp:spacer {"height":"var(--wp--preset--spacing--70)"} --> <div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer --> <!-- /wp:post-template --> <!-- wp:query-pagination { "paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"space-between"} } --> <!-- wp:query-pagination-previous /--> <!-- wp:query-pagination-next /--> <!-- /wp:query-pagination --> </div> <!-- /wp:query --> </main> <!-- /wp:group --> <!-- wp:template-part {"slug":"footer","tagName":"footer"} /--> 31
32. Q. ྑ͍ײ͡ͷςʔϚ։ൃͷ΍Γํڭ͑ͯԼ͍͞ • ஌ΒΜɻ • ͍ͯ͏͔ݱ࣌఺Ͱ͸୭΋Θ͔ΒΜɻ • ͱΓ͋͑ͣ৮ͬͯΈΔͱ͜Ζ͔Βɻ • ͦ΋ͦ΋ϒϩοΫΤσΟλʔ͍ͬͨ͜͡ͱແ͍ͳΒ·ͣͦ͜ ৮Δͷ͕ྑ͍͔΋ɻ 32
33. ࠓߟ͍͑ͯΔ͜ͱ 33
34. ͦ΋ͦ΋WEB੍࡞͜ΕͰָʹͳΔʁ • ͳΒͳ͍ؾ͕͢Δɻେม౓తʹ͸1.2~1.5ഒ͘Β͍ʹͳΔؾ ͕͢Δɻ • div Ұݸॻ͘ͷʹ͍͍ͪͪ Group ϒϩοΫ࡞ͬͯ.... • ෳࡶͳσβΠϯͱ͔Ͳ͏͢Δʁ 34
35. ͡ΌɺԿ͕ྑ͍Θ͚ʁ • ฤू͸ָʹͳΔɻ • ӡ༻͢Δਓ͸ָʹͳΔؾ͕͢Δɻ • ϔομʔ/ϑολʔͷมߋͱ͔ΛΤϯδχΞʹཔ·ͳͯ͘΋ྑ͘ͳΔɻ • ΧελϜϝχϡʔͱ͔ɺΧελϚΠβʔͱ͔΢ΟδΣοτͱ͔ਖ਼௚Ί ͪΌͪ͘Ό࢖͍ͮΒ͔ͬͨɻ • ϒϩοΫΛ͍͡Δ͜ͱ͕ग़དྷΕ͹هࣄ΋ॻ͚Δ͠ςϯϓϨʔτ΋η ΩϡϦςΟϦεΫແ͘มߋग़དྷΔɻ 35
36. CSS ͸ཁΒͳ͍ʁ • ཁΔʂ • theme.json ΍؅ཧը໘Ͱઃఆग़དྷΔελΠϧ͸ݶఆతɻ • ϝσΟΞΫΤϦͱ͔࢖͏ͨΊʹ͸CSSॻ͔͘͠ແ͍ɻ • theme.json ΍؅ཧը໘ͰCSSΛهड़ग़དྷΔ͕ɺΤσΟλͰॻ͍ͨํࠓͷͱ͜Ζ ָɻ • ࠓ·Ͱ௨Γ CSS ϑΝΠϧΛ༻ҙͯ͠ॻ͍ͨํָ͕ͳέʔε͕ଟ͍ͱ͸ࢥ͏ɻ • CSS ͕ͱͬͪΒ͔Δͷ͕ਏ͍ͳΒɺtailwind ͱ͔࢖͏ͷ͸͋Γ͔΋͠Εͳ͍ 36
37. PHP ͸ཁΔʁ • ·͊ཁΒͳ͘͸ͳΒͳ͍ɻ • ࠓ·Ͱ PHP Ͱ΍͍ͬͯͨ͜ͱ͕݁ߏϒϩοΫͱ͔ʹஔ͖׵ ΘͬͯΔɻ 37
38. Ͳ͏΍ͬͯϒϩοΫςʔϚΛ࡞Δͷ͕ྑ͍ͷʁ • Create Block Theme ͰۭͬΆͷϒϩοΫςʔϚΛ࡞੒ɻ • ͳΜͱͳ͘؅ཧը໘Ͱϙνϙν͢Δɻ • ౎౓౎౓ΤΫεϙʔτɻ • ׳Ε͖ͯͨΒ͋Δఔ౓ؾ߹͍Ͱίʔυॻ͍ͨ΄͏ָ͕͔΋ɻ 38
39. ϒϩοΫςʔϚ࡞ΕΔΑ͏ʹͳΕ͹αΠτ੍࡞ग़དྷΔʁ • খن໛ͳαΠτ: ͨͿΜYES. • ΨοπϦσβΠϯ͕ࢧڅ͞ΕΔϠπ: NO. • ෳࡶͳ HTML/CSS͕ग़ͯ͘Δͷ͸ΧελϜϒϩοΫ࡞Βͳ ͍ͱ݁ہΩπ͍ɻ • ίϨ·ͰͷΧελϜϒϩοΫΛར༻ͨ͠WEB੍࡞ͱҰॹɻ 39
40. ࠓ·ͰͰ͖ͯͨ͜ͱͰ͖ͳ͘ͳΔʁ • No. ΫϥγοΫςʔϚͰ࣮ݱͰ͖͍ͯͨ͜ͱ͸ϒϩοΫςʔϚ+ϒ ϩοΫͷ֦ுͰ࣮ݱͰ͖Δɻ • ͨͩ͠ɺ࣮૷ͷํ๏͕มΘΔɻ • ෳࡶͳαϒϧʔϓͱ͔͸ɺregisterBlockVariation ͱ͔Ͱ΍ Δɻ • ϒϩοΫ։ൃΛ΍Βͳͯ͘΋ɺϒϩοΫόϦΤʔγϣϯɺϒϩο ΫελΠϧͷ௥ՃͳͲ͸ग़དྷͨํ͕ྑ͍͔΋ɻ 40
41. • ϒϩοΫʹΫϥεͷ௥Ճͱ͔Λ͍ͨ͠ -> ϒϩοΫελΠϧ • ஋͕ࣄલઃఆ͞ΕͨϒϩοΫ -> ϒϩοΫόϦΤʔγϣϯ • HTML·ͱΊͯಥͬࠐΊΔΑ͏ʹ͍ͨ͠ɺهࣄͷςϯϓϨʔ τ͕ཉ͍͠ -> ϒϩοΫύλʔϯ • ޷͖উखͳHTMLॻ͖͍ͨ -> ΧελϜϒϩοΫ • ෳࡶͳσβΠϯͷݟग़͠ͱ͔ -> ΧελϜϒϩοΫ • 41
42. Կ͔Β͸͡ΊͨΒྑ͍ʁ • ؅ཧը໘ͰσϑΥϧτςʔϚΛ͍͡Δɻ • Create Block Theme ͰۭͬΆͷςʔϚΛ͍ͬͯ͡ΈΔɻ • CSS ॻ͍ͯΈΔɻ • registerBlockStyle ͰϒϩοΫελΠϧ௥Ճͯ͠ΈΔɻ • registerBlockVariation ͰϒϩοΫͷόϦΤʔγϣϯΛ௥Ճͯ͠ΈΔɻ • -------------------------- • ΧελϜϒϩοΫΛ࡞ͬͯΈΔɻ • PHPΰϦΰϦॻ͍ͯϓϥάΠϯ࡞ͬͯΈΔɻ 42
43. Any Question ? 43
44. Thanks! 44