Shinshu WordPress Meetup vol.14 登壇資料です
ྩ࣌ͷ WordPress ςʔϚ։ൃɾΣϒαΠτ੍࡞ͷצॴToro_Unit @Shinshu WP Meetup vol.141
View Slide
$ whoami2
Toro_Unit෦ ߛ (͏Β ͻΖ͠)• Frontend Engineer• WordPress Plugin and ThemeDeveloperGithub: @torounitTwitter: @Toro_Unit3
Contribution• WordPress 4.3 / 4.4 / 4.7 / 5.0 / 5.1 /5.2• WordCamp Osaka 2019• WordCamp Osaka 2018 Speaker.• etc...4
Plugins and Themes• Custom Post Type Permalinks• Advanced Posts Blocks• Simple Post Type Permalinks• Powerful Posts Per Page (PPPP)• Vanilla• and more...5
ྩݩ5݄8WordPress 5.2 “δϟί”6
ςʔϚपΓͷมߋwp_body_open() ͷಋೖɻ wp_head, wp_footer ͷؒɻ͍ํ> ͷԼʹు͖ग़͢HTMLͳͲΛग़ྗ͢ΔͨΊͷϞϊɻPlugin ͳͲ͕ Facebook SDK ͳͲΛग़ྗ͢ΔͨΊʹ͏ɻ7
ϒϩοΫΤσΟλʔ• WordPress 5.2 Ͱ Gutenberg 5.3 ͕Ϛʔδ͞Ε͍ͯΔ• ΧελϜϒϩοΫͳͲͷ։ൃͷݟ͜ͷͰͦΕͳΓʹཷ·͖ͬͯͨɻ8
࠷ۙ͜Μͳײ͡ͰςʔϚɾWEBαΠτ࡞ͬͯ·͢ɻ9
1. gutenberg-starter-theme ΛϕʔεʹΧελϚΠζɻ2. editor-style ͪΌΜͱ࡞Δɻ3. ΧελϜϑΟʔϧυۃྗΘͣɺΧελϜϒϩοΫΛ࡞͢Δ͜ͱͰରԠɻ4. ςʔϚʹɺՄೳͳݶΓʮαΠτͷݟͨʯҎ֎ͷࣄΛͤ͞ͳ͍ɻ5. ςʔϚ͕ಛఆͷϓϥάΠϯʹґଘ͢Δ͜ͱ͋ͬͯͳΒͳ͍ɻ10
1. gutenberg-starter-theme ΛϕʔεʹΧελϚΠζɻWordPress/gutenberg-starter-theme: A simple theme fortesting Gutenberg.Github ʹެ։͞Ε͍ͯΔɺGutenberg Λςετ͢ΔͨΊͷςʔϚɻશ෦1͔ΒࣗͰ࡞Δͱ࣮֬ʹ͍Ζ͍Ζ࿙ΕΔͷͰɺ͔͜͜Βɺඞཁͳ͍ͷҾ͖ࢉͨ͠Γɺ͠ࢉͨ͠Γɻ11
2. editor-style ͪΌΜͱ࡞Δɻ• ϒϩοΫΤσΟλʔΛ༻͍Δ͜ͱͰɺίϯςϯπͷฤूͷࣗ༝͕͕͋ͬͨɻ͔͠͠ฤूը໘ͱදࣔ໘ͰผͷελΠϧ͕͍͋ͨͬͯͨΒ͋Μ·Γҙຯ͕ແ͍ͷͰɺeditor-style ͔ͬ͠Γ࡞Δɻ• ͪΌΜͱઃܭ͞Ε͍ͯΔCSSͰ͋ΕɺςʔϚͰ͍ͬͯΔCSSͦͷ··ಡΈࠐΜͰΑ͍ͣɻ12
add_theme_support( 'editor-styles' );add_editor_style( 'editor-style.css' );• gutenberg-starter-theme ʹద༻͞Ε͍ͯͳ͍ͷͰɺҙɻ13
editor-styleɹͷྫɻ@charset "UTF-8";@import 'variable.css'; //ม@import '_elements.css'; //HTMLཁૉ@import '_accessibility.css';@import 'components/blocks/snow-monkey-blocks/_smb-box.css';@import 'components/blocks/snow-monkey-blocks/_smb-balloon.css';@import 'components/blocks/advanced-posts-block/_post.css';@import 'components/blocks/advgb/_summary.css';@import 'components/blocks/_image.css';@import 'components/blocks/_button.css';@import 'components/blocks/_table.css';@import 'components/blocks/_column.css';14
//σϑΥϧτͩͱɺ610px ͔͠ͳ͍ΤσΟλͷԣ෯Λมߋ.wp-block {max-width: 1024px !important;}.wp-block[data-align="wide"] {max-width: 1200px !important;}.wp-block[data-align="full"] {max-width: none !important;}15
3. ΧελϜϑΟʔϧυۃྗΘͣΧελϜϒϩοΫΛ࡞͢Δ͜ͱͰରԠ16
HTMLͷմΧελϜϒϩοΫΛ࡞Γ·͘Δɻ• Simple Definition List Blocksdl dt dd Λѻ͏ͨΊͷϒϩοΫɻ• Advanced Posts BlocksWordPress ͷߘΛ༷ʑͳ݅Ͱग़ྗͰ͖ΔϒϩοΫɻ17
ίϯςϯπͷHTMLͷ੍ޚΤσΟλͷࣄɻςʔϚͷࣄͰͳ͍ɻ18
ΧελϜϑΟʔϧυͷ͍Ͳ͜Ζɻ• ΧελϜ ϑΟʔϧυ ɻσʔλΛೖΕΔശɻͦͦσβΠϯͷ߹Ͱ૿ݮ͢ΔͷͰແ͍ɻ• ςʔϚग़ྗํ๏͕มΘͬͯ ( ex. RSS / WP-API ʣऔಘ͢Δ͖ͷɺϓϥάΠϯͰ࣮͖͢ɻ• ࠜຊతʹɺίϯςϯπຊจཝʹಥͬࠐΉͷ͕ WordPress ͷઃܭɻ• ίϯςϯπ (จষɺهࣄͰհ͢ΔϞϊʹؔ͢Δσʔλ) ͳͲͷHTMLΛίϯτϩʔϧ͢ΔͨΊ͚ͩʹΧελϜϑΟʔϧυΛ༻͍Δ͖Ͱͳ͍ɻ• هࣄʹਵ͢ΔϝλσʔλɺͷՁ֨ͳͲͷεΩʔϚͳͲʹͷΈ༻͍Δɻ19
Ձ֨ɺਤͷ࠲ඪͳͲɺΧελϜϑΟʔϧυʹσʔλΛอଘͭͭ͠ɺද͍͍ࣔͨ͋͠ɺͦͷΑ͏ͳΧελϜϒϩοΫΛ࡞ɻattributes: {author: {type: 'string',source: 'meta',meta: 'author'},},ΧελϜϒϩοΫͷσʔλͷऔಘઌΛΧελϜϑΟʔϧυʹ͢Δ͜ͱ͕ग़དྷΔɻAttributes | Block Editor Handbook | WordPress Developer Resources20
ʮϦχϡʔΞϧςʔϚͷมߋͰͿͬͱΜͩΒࠔΔͷϓϥάΠϯʯPlugin Territory – WordPressͷͦͷॲཧςʔϚͰΔ͖͔ϓϥάΠϯͰΔ͖͔ʁ | Firegoby21
ςʔϚͷมߋͰίϯςϯπ͕ͿͬඈͿ͜ͱ͍͚͋ͬͯͳ͍ɻ22
ςʔϚ͕มߋ͞ΕΔέʔε• AMP ϓϥάΠϯɻಠࣗͷςʔϚػߏΛ࣋ͭɻ• ࠷ۙগͳ͍͕ɺϞόΠϧઐ༻ςʔϚ23
Ͱɺίϯςϯπ͕͖ͪΜͱશͯు͖ग़͞ΕΔΑ͏ʹ͢Δͷ͕ཧɻget_post_metaɺɺACF ͷ get_field ͳͲجຊతʹɺςʔϚͰ༻͍Δ͖Ͱͳ͍ɻ24
ΧελϜϑΟʔϧυͷΛग़ྗ͍ͨ͠ͷͰ͋Εɺadd_filter( 'the_content', function( $content ) {ob_start(); ?>$append = ob_get_clean();return $content.$append;} );25
4. ςʔϚʹɺՄೳͳݶΓʮαΠτͷݟͨʯҎ֎ͷࣄΛͤ͞ͳ͍ɻ• ςʔϚͰΰϦΰϦHTMLͱ͔Λॻ͖ग़ͨ͠Β͍͍ͩͨԫ৴߸ɻ• ΧελϜϒϩοΫΛ࣮ -> ͦͷ CSS ΛςʔϚͰ࣮ͱ͍͏ͷ͕ྲྀΕͱͯ͠ྑͦ͞͏ɻ26
ςʔϚʹͤΔ͖ཁૉ• ϔομʔɾϑολʔɾαΠυόʔͳͲͷϨΠΞτ෦ͷ࣮ɻ• CSSͰͷ০• ϔομʔը૾ɺεϥΠυγϣʔͳͲɺϏδϡΞϧ͕ϝΠϯͳͷɻଘࡏ͠ͳͯ͘ɺ࠷ݶͷίϯςϯπͷఏڙʹࢧোͷແ͍ͷɻ27
5.ςʔϚ͕ಛఆͷϓϥάΠϯʹґଘ͢Δ͜ͱ͋ͬͯͳΒͳ͍ɻ• ϓϥάΠϯΛఀࢭͨ͠ͱ͖ʹɺςʔϚ͕Τϥʔʹͳ͍͚ͬͯͳ͍ɻ• ຊମޓੑΛकΔ͕ɺϓϥάΠϯ࡞ऀͷํ࣍ୈɻ• PHPͷόʔδϣϯΞοϓʹϓϥάΠϯ͕͍͍͚ͭͯͳ͍έʔεɻ• ϓϥάΠϯ͕ఀࢭͯ͠ɺ80%Ґͷঢ়ଶͰػೳ͢ΔΑ͏ʹ࡞Δɻ28
• 5.2ͰՃ͞ΕͨαΠτϔϧεػೳͰɺΛىͨ͜͠ϓϥάΠϯΛఀࢭͨ͠ঢ়ଶͰϩάΠϯग़དྷΔػೳ͕Ճ͞Ε͕ͨɺͦͷ߹ͷσόοάࠔʹɻ29
WordPress ͷ ڧΈ֦ுੑɾɾɾʁ• WordPress ͷڧΈɺ๛ͳϓϥάΠϯͱ֦ுੑͩͱ͔ݴΘΕΔ͜ͱ͋ΔΑ͏ͳɻ• ϓϥάΠϯɺಠࣗఆٛͷΧελϜϑΟʔϧυʹରԠ͍ͯ͠ͳ͍ɻ• ެࣜϨϙδτϦܝࡌςʔϚͱಉ͡Α͏ʹςʔϚΛ࡞͍ͬͯ͘͜ͱॏཁɻ• Theme Developer Handbook ͕ۭ݀͘΄Ͳಡ͏΄Μͱʹɻ30
ahmadawais/create-guten-blockΧελϜϒϩοΫϓϥάΠϯͷ։ൃڥΛαΫοͱ࡞ΔϠπɻWordPress/gutenberg-examplesϒϩοΫͷαϯϓϧɺνϡʔτϦΞϧɻ31
JS ͍͠ɾɾɾʁ• ҰੲલΑΓใଟ͍ɻ։ൃڥͷඋ؆୯ɻ؆୯ͳΧελϜϒϩοΫΛ࡞ΕΔ͘Β͍ͷ React ྗͳΒׂͱ͙͢ʹʹ͚ͭΒΕΔͷͰɺϏϏΒͣʹ৮ͬͨํ͕ྑ͍ɻ• ʮReact ͰΰϦΰϦΞϓϦέʔγϣϯΛ࡞ΔʯΈ͍ͨͳͱ͜Ζ·Ͱཁٻ͞Εͳ͍ɻ• ͪΐͬͱͨ͠HTMLͷίϯϙʔωϯτΛ࡞ΕΔ͚ͩͰ͔ͳΓ͍উख͕มΘΔɻ• WordPress ͰαΠτΛ࡞ΔݶΓɺͲʔ͍͔ͤͭ JS ͱྑ͘ͳΒͳ͚Ε͍͚ͳ͍͕དྷΔɻ͖͋ΒΊͯ JS ͱ React ͬͱ͜ɻ32
Thanks!Github: @torounitTwitter: @Toro_UnitFacebook: fb.me/torounitBlog: https://torounit.com33