信州 WordPress Meetup in 松本 Vol.23 WordPress とかの話をする会 (https://www.meetup.com/ja-JP/shinshu-wordpress-meetup/events/292446368/) での登壇資料です。
FSE࣌ʹ͓͚ΔWEBαΠτ੍࡞ͷݚڀToro_Unit @Shinshu WordPress Meetup1
View Slide
$ whoami2
Toro_Unit෦ ߛ (͏Β ͻΖ͠)• Frontend Developer• WordPress Plugin and ThemeDeveloperGithub: @torounitTwitter: @Toro_Unit3
• Gutenberg ͷ։ൃΛͪΐΖͬͱͬͯ·͢ɻ• Shinshu WP Meetup ͷΦʔΨφΠβʔͯ͠·͢ɻ• ϓϥάΠϯ࡞ͬͨΓੲςʔϚ࡞ͬͯͨΓ͠·ͨ͠ɻ• WordPress ͷΠϕϯτͰͬͨΓ͓ञҿΜͩΓͨ·ʹӡӦखͬͨΓͯ͠·͢ɻ4
࠷ޙʹͬͨΠϕϯτ5
3ͿΓʂʂʂ6
• 5.4 20204݄28• 5.5 20209݄1• 5.6 20211݄31• 5.7 20213݄16• 5.8 20219݄4• 5.9 20222݄18• 6.0 20227݄1• 6.1 202211݄15• 6.2 20233݄307
• ϒϩοΫύλʔϯ / ϒϩοΫόϦΤʔγϣϯ• margin / padding / border Λ ཧը໘͔Βઃఆ• άϩʔόϧελΠϧ• άϥσʔγϣϯ / Duotone• theme.json• ϒϩοΫςϯϓϨʔτύʔπ• and more...8
ͱʹ͔͍͘Ζ͍ΖΞοϓσʔτ͞Εͨ9
Full Site Editing10
11
Full Site Editing ͱ• ུͯ͠FSEɻϑϧαΠτฤूͱ༁͞ΕΔɻ• WordPress ͷςʔϚΛཧը໘͔Βฤूग़དྷΔػೳɻ• ϒϩοΫΤσΟλʔͳͷͰɺߘͱಉ͡ϒϩοΫ͕ར༻Մೳɻ• FSEରԠͷςʔϚϒϩοΫςʔϚͱݺΕΔɻҎલͷΑ͏ʹPHP Ͱ࡞͍ͬͯͨϞϊΫϥγοΫςʔϚɻ• ϒϩοΫςʔϚͱΫϥγοΫςʔϚผɻ12
ΫϥγοΫςʔϚͷ͓͞Β͍13
14
15
• PHPͰॻ͔Ε͍ͯΔ• ςϯϓϨʔτϑΝΠϧ• index.php• single.php• header.php• etc...16
ϒϩοΫςʔϚ17
18
19
PHP ͕ͳ͍ʂ20
21
???22
23
24
֤ϒϩοΫͷใ͕ͦΕͧΕ HTML ͱίϝϯτͰอଘ͞ΕͯΔ͚ͩɻ• ཧը໘Ͱ࡞ͬͨςϯϓϨʔτ͕HTMLϑΝΠϧͱͯ͠ஔ͔ΕͯΔ͚ͩɻ• ݱ࣌ͰͷมߋΛͦͷ··ςʔϚϑΝΠϧͱͯ͠ΤΫεϙʔτՄೳɻ• Create Block Theme Plugin Λ͏ͱݱࡏͷςʔϚΛ্ॻ͖Մೳɻ25
σϑΥϧτςʔϚΛݟͯΈΔɻ26
ϑΝΠϧߏ27
├── 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.json28
΄΅ɺHTML ͱ theme.json ͷΈɻ• ϒϩοΫύλʔϯ php ͚ͩͲɺ༁ͱ͔ ςʔϚσΟϨΫτϦͷURLͷऔಘͱ͔ͦͷఔɻ• ϒϩοΫͷελΠϧ theme.json Ͱ੍ޚɻ29
theme.json ʹ͍ͭͯGutenberg ͷʹؔΘͬͯΔ͞Μͷղઆɻ• ʲWordPress5.9 / 6.0൛ʳtheme.jsonશղઆ• ʲWordPress6.1ʳtheme.json ͷมߋ• ʲWordPress6.2ʳtheme.json ͷมߋ30
31
Q. ྑ͍ײ͡ͷςʔϚ։ൃͷΓํڭ͑ͯԼ͍͞• ΒΜɻ• ͍ͯ͏͔ݱ࣌Ͱ୭Θ͔ΒΜɻ• ͱΓ͋͑ͣ৮ͬͯΈΔͱ͜Ζ͔Βɻ• ͦͦϒϩοΫΤσΟλʔ͍ͬͨ͜͡ͱແ͍ͳΒ·ͣͦ͜৮Δͷ͕ྑ͍͔ɻ32
ࠓߟ͍͑ͯΔ͜ͱ33
ͦͦWEB੍࡞͜ΕͰָʹͳΔʁ• ͳΒͳ͍ؾ͕͢Δɻେมతʹ1.2~1.5ഒ͘Β͍ʹͳΔؾ͕͢Δɻ• div Ұݸॻ͘ͷʹ͍͍ͪͪ Group ϒϩοΫ࡞ͬͯ....• ෳࡶͳσβΠϯͱ͔Ͳ͏͢Δʁ34
͡ΌɺԿ͕ྑ͍Θ͚ʁ• ฤूָʹͳΔɻ• ӡ༻͢ΔਓָʹͳΔؾ͕͢Δɻ• ϔομʔ/ϑολʔͷมߋͱ͔ΛΤϯδχΞʹཔ·ͳͯ͘ྑ͘ͳΔɻ• ΧελϜϝχϡʔͱ͔ɺΧελϚΠβʔͱ͔ΟδΣοτͱ͔ਖ਼ΊͪΌͪ͘Ό͍ͮΒ͔ͬͨɻ• ϒϩοΫΛ͍͡Δ͜ͱ͕ग़དྷΕهࣄॻ͚Δ͠ςϯϓϨʔτηΩϡϦςΟϦεΫແ͘มߋग़དྷΔɻ35
CSS ཁΒͳ͍ʁ• ཁΔʂ• theme.json ཧը໘Ͱઃఆग़དྷΔελΠϧݶఆతɻ• ϝσΟΞΫΤϦͱ͔͏ͨΊʹCSSॻ͔͘͠ແ͍ɻ• theme.json ཧը໘ͰCSSΛهड़ग़དྷΔ͕ɺΤσΟλͰॻ͍ͨํࠓͷͱ͜Ζָɻ• ࠓ·Ͱ௨Γ CSS ϑΝΠϧΛ༻ҙͯ͠ॻ͍ͨํָ͕ͳέʔε͕ଟ͍ͱࢥ͏ɻ• CSS ͕ͱͬͪΒ͔Δͷ͕ਏ͍ͳΒɺtailwind ͱ͔͏ͷ͋Γ͔͠Εͳ͍36
PHP ཁΔʁ• ·͊ཁΒͳ͘ͳΒͳ͍ɻ• ࠓ·Ͱ PHP Ͱ͍ͬͯͨ͜ͱ͕݁ߏϒϩοΫͱ͔ʹஔ͖ΘͬͯΔɻ37
Ͳ͏ͬͯϒϩοΫςʔϚΛ࡞Δͷ͕ྑ͍ͷʁ• Create Block Theme ͰۭͬΆͷϒϩοΫςʔϚΛ࡞ɻ• ͳΜͱͳ͘ཧը໘Ͱϙνϙν͢Δɻ• ΤΫεϙʔτɻ• ׳Ε͖ͯͨΒ͋Δఔؾ߹͍Ͱίʔυॻ͍ͨ΄͏ָ͕͔ɻ38
ϒϩοΫςʔϚ࡞ΕΔΑ͏ʹͳΕαΠτ੍࡞ग़དྷΔʁ• খنͳαΠτ: ͨͿΜYES.• ΨοπϦσβΠϯ͕ࢧڅ͞ΕΔϠπ: NO.• ෳࡶͳ HTML/CSS͕ग़ͯ͘ΔͷΧελϜϒϩοΫ࡞Βͳ͍ͱ݁ہΩπ͍ɻ• ίϨ·ͰͷΧελϜϒϩοΫΛར༻ͨ͠WEB੍࡞ͱҰॹɻ39
ࠓ·ͰͰ͖ͯͨ͜ͱͰ͖ͳ͘ͳΔʁ• No. ΫϥγοΫςʔϚͰ࣮ݱͰ͖͍ͯͨ͜ͱϒϩοΫςʔϚ+ϒϩοΫͷ֦ுͰ࣮ݱͰ͖Δɻ• ͨͩ͠ɺ࣮ͷํ๏͕มΘΔɻ• ෳࡶͳαϒϧʔϓͱ͔ɺregisterBlockVariation ͱ͔ͰΔɻ• ϒϩοΫ։ൃΛΒͳͯ͘ɺϒϩοΫόϦΤʔγϣϯɺϒϩοΫελΠϧͷՃͳͲग़དྷͨํ͕ྑ͍͔ɻ40
• ϒϩοΫʹΫϥεͷՃͱ͔Λ͍ͨ͠ -> ϒϩοΫελΠϧ• ͕ࣄલઃఆ͞ΕͨϒϩοΫ -> ϒϩοΫόϦΤʔγϣϯ• HTML·ͱΊͯಥͬࠐΊΔΑ͏ʹ͍ͨ͠ɺهࣄͷςϯϓϨʔτ͕ཉ͍͠ -> ϒϩοΫύλʔϯ• ͖উखͳHTMLॻ͖͍ͨ -> ΧελϜϒϩοΫ• ෳࡶͳσβΠϯͷݟग़͠ͱ͔ -> ΧελϜϒϩοΫ•41
Կ͔Β͡ΊͨΒྑ͍ʁ• ཧը໘ͰσϑΥϧτςʔϚΛ͍͡Δɻ• Create Block Theme ͰۭͬΆͷςʔϚΛ͍ͬͯ͡ΈΔɻ• CSS ॻ͍ͯΈΔɻ• registerBlockStyle ͰϒϩοΫελΠϧՃͯ͠ΈΔɻ• registerBlockVariation ͰϒϩοΫͷόϦΤʔγϣϯΛՃͯ͠ΈΔɻ• --------------------------• ΧελϜϒϩοΫΛ࡞ͬͯΈΔɻ• PHPΰϦΰϦॻ͍ͯϓϥάΠϯ࡞ͬͯΈΔɻ42
Any Question ?43
Thanks!44
torounit
dunglas
yui_knk
fendo181
pyama86
kishida
soutaro
manfredsteyer
akatsuki174
mukky620
maguroalternative
treastrain
katsyoshi
tanoku
smashingmag
jcasabona
bkeepers
carmenintech
sstephenson
mojombo
jmmastey
soudai
jensimmons
sachag
maltzj