令和時代の WordPress テーマ開発・ウェブサイト制作の勘所 #wpshinshu / 2019-07-27 Shinshu WordPress Meetup vol.14

Shinshu WordPress Meetup vol.14 登壇資料です

Transcript

1. ྩ࿨࣌୅ͷ WordPress ςʔϚ։ൃɾ ΢ΣϒαΠτ੍࡞ͷצॴ Toro_Unit @Shinshu WP Meetup vol.14 1
2. $ whoami 2
3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
4. Contribution • WordPress 4.3 / 4.4 / 4.7 / 5.0 / 5.1 / 5.2 • WordCamp Osaka 2019 • WordCamp Osaka 2018 Speaker. • etc... 4
5. Plugins and Themes • Custom Post Type Permalinks • Advanced Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 5
6. ྩ࿨ݩ೥5݄8೔ WordPress 5.2 “δϟί” 6
7. ςʔϚपΓͷมߋ wp_body_open() ͷಋೖɻ wp_head, wp_footer ͷ஥ؒɻ ࢖͍ํ <body <?php body_class();?>> <?php wp_body_open();?> <body> ͷ௚Լʹు͖ग़͢HTMLͳͲΛग़ྗ͢ΔͨΊͷϞϊɻ Plugin ͳͲ͕ Facebook SDK ͳͲΛग़ྗ͢ΔͨΊʹ࢖͏ɻ 7
8. ϒϩοΫΤσΟλʔ • WordPress 5.2 Ͱ͸ Gutenberg 5.3 ͕Ϛʔδ͞Ε͍ͯΔ • ΧελϜϒϩοΫͳͲͷ։ൃͷ஌ݟ΋͜ͷ൒೥ͰͦΕͳΓʹ ཷ·͖ͬͯͨɻ 8
9. ࠷ۙ͜Μͳײ͡ͰςʔϚɾWEBαΠτ ࡞ͬͯ·͢ɻ 9
10. 1. gutenberg-starter-theme ΛϕʔεʹΧελϚΠζɻ 2. editor-style ͪΌΜͱ࡞Δɻ 3. ΧελϜϑΟʔϧυ͸ۃྗ࢖ΘͣɺΧελϜϒϩοΫΛ࡞੒ ͢Δ͜ͱͰରԠɻ 4. ςʔϚʹ͸ɺՄೳͳݶΓʮαΠτͷݟͨ໨ʯҎ֎ͷ࢓ࣄΛ͞ ͤͳ͍ɻ 5. ςʔϚ͕ಛఆͷϓϥάΠϯʹґଘ͢Δ͜ͱ͸͋ͬͯ͸ͳΒͳ ͍ɻ 10
11. 1. gutenberg-starter-theme ΛϕʔεʹΧε λϚΠζɻ WordPress/gutenberg-starter-theme: A simple theme for testing Gutenberg. Github ʹެ։͞Ε͍ͯΔɺGutenberg Λςετ͢ΔͨΊͷςʔ Ϛɻ શ෦1͔Βࣗ෼Ͱ࡞Δͱ࣮֬ʹ͍Ζ͍Ζ࿙ΕΔͷͰɺ͔͜͜Βɺ ඞཁͳ͍΋ͷ͸Ҿ͖ࢉͨ͠Γɺ଍͠ࢉͨ͠Γɻ 11
12. 2. editor-style ͪΌΜͱ࡞Δɻ • ϒϩοΫΤσΟλʔΛ༻͍Δ͜ͱͰɺίϯςϯπͷฤूͷࣗ ༝౓͕͕͋ͬͨɻ͔͠͠ฤूը໘ͱදࣔ໘ͰผͷελΠϧ͕ ͍͋ͨͬͯͨΒ͋Μ·Γҙຯ͕ແ͍ͷͰɺeditor-style ͸ͬ͠ ͔Γ࡞Δɻ • ͪΌΜͱઃܭ͞Ε͍ͯΔCSSͰ͋Ε͹ɺςʔϚͰ࢖͍ͬͯΔ CSSͦͷ··ಡΈࠐΜͰΑ͍͸ͣɻ 12
13. add_theme_support( 'editor-styles' ); add_editor_style( 'editor-style.css' ); • gutenberg-starter-theme ʹ͸ద༻͞Ε͍ͯͳ͍ͷͰɺ஫ ҙɻ 13
14. 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
15. //σϑΥϧτͩͱɺ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
16. 3. ΧελϜϑΟʔϧυ͸ۃྗ࢖ΘͣΧ ελϜϒϩοΫΛ࡞੒͢Δ͜ͱͰରԠ 16
17. HTMLͷմ͸ΧελϜϒϩοΫΛ࡞Γ·͘Δɻ • Simple Definition List Blocks dl dt dd Λѻ͏ͨΊͷϒϩοΫɻ • Advanced Posts Blocks WordPress ͷ౤ߘΛ༷ʑͳ৚݅Ͱग़ྗͰ͖ΔϒϩοΫɻ 17
18. ίϯςϯπͷHTMLͷ੍ޚ͸ΤσΟλͷ࢓ࣄɻςʔϚͷ࢓ࣄͰ͸ͳ͍ɻ 18
19. ΧελϜϑΟʔϧυͷ࢖͍Ͳ͜Ζɻ • ΧελϜ ϑΟʔϧυ ɻσʔλΛೖΕΔശɻͦ΋ͦ΋σβΠϯͷ౎߹Ͱ૿ݮ͢ Δ΋ͷͰ͸ແ͍ɻ • ςʔϚ΍ग़ྗํ๏͕มΘͬͯ΋ ( ex. RSS / WP-API ʣऔಘ͢Δ΂͖΋ͷ͸ɺϓ ϥάΠϯͰ࣮૷͢΂͖ɻ • ࠜຊతʹɺίϯςϯπ͸ຊจཝʹಥͬࠐΉͷ͕ WordPress ͷઃܭɻ • ίϯςϯπ (จষɺهࣄͰ঺հ͢ΔϞϊʹؔ͢Δσʔλ) ͳͲͷHTMLΛίϯ τϩʔϧ͢ΔͨΊ͚ͩʹΧελϜϑΟʔϧυΛ༻͍Δ΂͖Ͱ͸ͳ͍ɻ • هࣄʹ෇ਵ͢Δϝλσʔλɺ঎඼ͷՁ֨ͳͲͷεΩʔϚͳͲʹͷΈ༻͍Δɻ 19
20. Ձ֨ɺ஍ਤͷ࠲ඪͳͲɺΧελϜϑΟʔϧυʹ΋σʔλΛอଘͭͭ͠ɺදࣔ΋ ͍ͨ͠͹͍͋͸ɺͦͷΑ͏ͳΧελϜϒϩοΫΛ࡞੒ɻ attributes: { author: { type: 'string', source: 'meta', meta: 'author' }, }, ΧελϜϒϩοΫͷσʔλͷऔಘઌΛΧελϜϑΟʔϧυʹ͢Δ͜ͱ͕ग़དྷΔɻ Attributes | Block Editor Handbook | WordPress Developer Resources 20
21. ʮϦχϡʔΞϧ΍ςʔϚͷมߋͰͿͬ ͱΜͩΒࠔΔ΋ͷ͸ϓϥάΠϯʯ Plugin Territory – WordPressͷͦͷॲཧ͸ςʔϚͰ΍Δ΂͖͔ϓϥάΠϯͰ΍Δ΂͖͔ʁ | Firegoby 21
22. ςʔϚͷมߋͰίϯςϯπ͕ͿͬඈͿ ͜ͱ͸͋ͬͯ͸͍͚ͳ͍ɻ 22
23. ςʔϚ͕มߋ͞ΕΔέʔε • AMP ϓϥάΠϯɻಠࣗͷςʔϚػߏΛ࣋ͭɻ • ࠷ۙগͳ͍͕ɺϞόΠϧઐ༻ςʔϚ 23
24. <article> <h1><?php the_title();?></h1> <?php the_content();?> <?php wp_link_pages();?> </article> Ͱɺίϯςϯπ͕͖ͪΜͱશͯు͖ग़͞ΕΔΑ͏ʹ͢Δͷ͕ཧ ૝ɻ get_post_metaɺ΍ɺACF ͷ get_field ͳͲ͸جຊతʹɺςʔ ϚͰ༻͍Δ΂͖Ͱ͸ͳ͍ɻ 24
25. ΧελϜϑΟʔϧυͷ஋Λग़ྗ͍ͨ͠ͷͰ͋Ε͹ɺ add_filter( 'the_content', function( $content ) { ob_start(); ?> <div> <?php get_post_meta( get_the_ID(), 'key', true );?> </div> <?php $append = ob_get_clean(); return $content.$append; } ); 25
26. 4. ςʔϚʹ͸ɺՄೳͳݶΓʮαΠτͷݟͨ໨ʯ Ҏ֎ͷ࢓ࣄΛͤ͞ͳ͍ɻ • ςʔϚͰΰϦΰϦHTMLͱ͔Λॻ͖ग़ͨ͠Β͍͍ͩͨԫ৴ ߸ɻ • ΧελϜϒϩοΫΛ࣮૷ -> ͦͷ CSS ΛςʔϚͰ࣮૷ͱ͍͏ ͷ͕ྲྀΕͱͯ͠͸ྑͦ͞͏ɻ 26
27. ςʔϚʹ৐ͤΔ΂͖ཁૉ • ϔομʔɾϑολʔɾαΠυόʔͳͲͷϨΠΞ΢τ෦෼ͷ࣮ ૷ɻ • CSSͰͷ૷০ • ϔομʔը૾ɺεϥΠυγϣʔͳͲɺϏδϡΞϧ͕ϝΠϯͳ ΋ͷɻଘࡏ͠ͳͯ͘΋ɺ࠷௿ݶͷίϯςϯπͷఏڙʹࢧোͷ ແ͍΋ͷɻ 27
28. 5.ςʔϚ͕ಛఆͷϓϥάΠϯʹґଘ͢Δ͜ͱ͸ ͋ͬͯ͸ͳΒͳ͍ɻ • ϓϥάΠϯΛఀࢭͨ͠ͱ͖ʹɺςʔϚ͕Τϥʔʹͳͬͯ͸͍͚ͳ ͍ɻ • ຊମ͸ޓ׵ੑΛकΔ͕ɺϓϥάΠϯ͸࡞ऀͷํ਑࣍ୈɻ • PHPͷόʔδϣϯΞοϓʹϓϥάΠϯ͕͍͍͚ͭͯͳ͍έʔε ΋ɻ • ϓϥάΠϯ͕ఀࢭͯ͠΋ɺ80%Ґͷঢ়ଶͰػೳ͢ΔΑ͏ʹ࡞Δɻ 28
29. • 5.2Ͱ௥Ճ͞ΕͨαΠτϔϧεػೳͰ͸ɺ໰୊Λىͨ͜͠ϓϥ άΠϯΛఀࢭͨ͠ঢ়ଶͰϩάΠϯग़དྷΔػೳ͕௥Ճ͞Εͨ ͕ɺͦͷ৔߹ͷσόοά΋ࠔ೉ʹɻ 29
30. WordPress ͷ ڧΈ͸֦ுੑɾɾɾʁ • WordPress ͷڧΈ͸ɺ๛෋ͳϓϥάΠϯͱ֦ுੑͩͱ͔ݴΘΕΔ ͜ͱ΋͋ΔΑ͏ͳɻ • ϓϥάΠϯ͸ɺಠࣗఆٛͷΧελϜϑΟʔϧυʹ͸ରԠ͍ͯ͠ͳ ͍ɻ • ެࣜϨϙδτϦܝࡌςʔϚͱಉ͡Α͏ʹςʔϚΛ࡞͍ͬͯ͘͜ͱ ͸௒ॏཁɻ • Theme Developer Handbook ͸͕ۭ݀͘΄Ͳಡ΋͏΄Μͱʹɻ 30
31. ahmadawais/create-guten-block ΧελϜϒϩοΫϓϥάΠϯͷ։ൃ؀ڥΛαΫοͱ࡞ΔϠπɻ WordPress/gutenberg-examples ϒϩοΫͷαϯϓϧɺνϡʔτϦΞϧɻ 31
32. JS ೉͍͠ɾɾɾʁ • ҰੲલΑΓ৘ใ΋ଟ͍ɻ։ൃ؀ڥͷ੔උ΋؆୯ɻ؆୯ͳΧελϜϒϩοΫΛ࡞ ΕΔ͘Β͍ͷ React ྗͳΒׂͱ͙͢ʹ਎ʹ͚ͭΒΕΔͷͰɺϏϏΒͣʹ৮ͬͨ ํ͕ྑ͍ɻ • ʮReact ͰΰϦΰϦΞϓϦέʔγϣϯΛ࡞ΔʯΈ͍ͨͳͱ͜Ζ·Ͱ͸ཁٻ͞Ε ͳ͍ɻ • ͪΐͬͱͨ͠HTMLͷίϯϙʔωϯτΛ࡞ΕΔ͚ͩͰ͔ͳΓ࢖͍উख͕มΘΔɻ • WordPress ͰαΠτΛ࡞ΔݶΓɺͲʔ͍͔ͤͭ͸ JS ͱ஥ྑ͘ͳΒͳ͚Ε͹͍͚ ͳ͍೔͕དྷΔɻ͖͋ΒΊͯ JS ͱ React ΍ͬͱ͜ɻ 32
33. Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 33