Pro Yearly is on sale from $80 to $50! »

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

E03953e0c18d776fead147601fdc3899?s=47 Toro_Unit (Hiroshi Urabe)
July 27, 2019
Technology
0
130

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

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

E03953e0c18d776fead147601fdc3899?s=128

Toro_Unit (Hiroshi Urabe)

July 27, 2019
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

See All by Toro_Unit (Hiroshi Urabe)
E03953e0c18d776fead147601fdc3899?s=48 torounit
4
550
E03953e0c18d776fead147601fdc3899?s=48 torounit
11
1.8k
E03953e0c18d776fead147601fdc3899?s=48 torounit
2
1.2k
E03953e0c18d776fead147601fdc3899?s=48 torounit
4
1k
E03953e0c18d776fead147601fdc3899?s=48 torounit
0
140
E03953e0c18d776fead147601fdc3899?s=48 torounit
0
1.3k
E03953e0c18d776fead147601fdc3899?s=48 torounit
2
170
E03953e0c18d776fead147601fdc3899?s=48 torounit
1
39
E03953e0c18d776fead147601fdc3899?s=48 torounit
0
47

Other Decks in Technology

See All in Technology
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
140
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
270
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
230
38f77168b7c5802adc9cc3a5cfcf031b?s=48 niharika28
0
280
2a35cc4d9c9dd2672aba2f097980e5d1?s=48 kou_kita
0
170
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
480
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
130
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
200
842515eaf8fbb2dfcc75197e7797dc15?s=48 sat
2
700
4b2f3a64637b51e81813accbe8a98083?s=48 miura55
0
160

Featured

See All Featured
9128d500301ae51524e887bb680f471d?s=48 caitiem20
306
17k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
116
4.8k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
410
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.5k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
256
36k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
216
16k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.5k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.8k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
4k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
107
11k

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