令和時代の 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
520
E03953e0c18d776fead147601fdc3899?s=48 torounit
11
1.7k
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.2k
E03953e0c18d776fead147601fdc3899?s=48 torounit
2
170
E03953e0c18d776fead147601fdc3899?s=48 torounit
1
37
E03953e0c18d776fead147601fdc3899?s=48 torounit
0
47

Other Decks in Technology

See All in Technology
107ba69ff7888cacdb4307a28adf5527?s=48 fukuiretu
0
370
5bbbb20da49b1f802af50b0f17a4f31f?s=48 miuranobuki
0
950
C636093440dd4a8be6416e83cb980979?s=48 iselegant
7
440
0b238801605070def81a98cfe8061aee?s=48 shonansurvivors
1
180
6d87223b5fcfb9a5a73007f77f134e28?s=48 taketora
0
130
11b879ad001638b95dd62331eed65505?s=48 fortegp05
0
120
8120d39cb575881c830287046f06fec8?s=48 daoka
1
1.9k
F01c8fdfa64bdfc00a94896e0b1359e0?s=48 tmdoi
0
220
Cd931bc05e7cee46b9a950a63e47ba4c?s=48 you
0
110
17d762ae166e66cab39e9b2e3df7d198?s=48 ysakashita
3
630
Cb7edd153cf503f44c727b73647558bf?s=48 tetsuroito
0
790
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
300

Featured

See All Featured
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
297
30k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
115
4.7k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
607
54k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
5
250
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
267
16k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1348
190k
245cee81a9c424266e5e401d844ea881?s=48 lara
168
9.2k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
13
480
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
53
6k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
324
14k

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