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

ྩ࿨࣌୅ͷ WordPress ςʔϚ։ൃɾ ΢ΣϒαΠτ੍࡞ͷצॴ Toro_Unit @Shinshu WP Meetup vol.14 1

$ whoami 2

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress
Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3

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݄8೔ WordPress 5.2 “δϟί” 6

ςʔϚपΓͷมߋ wp_body_open() ͷಋೖɻ wp_head, wp_footer ͷ஥ؒɻ ࢖͍ํ <body <?php body_class();?>>
<?php wp_body_open();?> <body> ͷ௚Լʹు͖ग़͢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 for testing
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 Deﬁnition List Blocks dl dt dd Λѻ͏ͨΊͷϒϩοΫɻ
• Advanced Posts Blocks WordPress ͷ౤ߘΛ༷ʑͳ৚݅Ͱग़ྗͰ͖ΔϒϩοΫɻ 17

ίϯςϯπͷHTMLͷ੍ޚ͸ΤσΟλͷ࢓ࣄɻςʔϚͷ࢓ࣄͰ͸ͳ͍ɻ 18

ΧελϜϑΟʔϧυͷ࢖͍Ͳ͜Ζɻ • ΧελϜ ϑΟʔϧυ ɻσʔλΛೖΕΔശɻͦ΋ͦ΋σβΠϯͷ౎߹Ͱ૿ݮ͢ Δ΋ͷͰ͸ແ͍ɻ • ςʔϚ΍ग़ྗํ๏͕มΘͬͯ΋ ( ex.
RSS / WP-API ʣऔಘ͢Δ΂͖΋ͷ͸ɺϓ ϥάΠϯͰ࣮૷͢΂͖ɻ • ࠜຊతʹɺίϯςϯπ͸ຊจཝʹಥͬࠐΉͷ͕ WordPress ͷઃܭɻ • ίϯςϯπ (จষɺهࣄͰ঺հ͢ΔϞϊʹؔ͢Δσʔλ) ͳͲͷHTMLΛίϯ τϩʔϧ͢ΔͨΊ͚ͩʹΧελϜϑΟʔϧυΛ༻͍Δ΂͖Ͱ͸ͳ͍ɻ • هࣄʹ෇ਵ͢Δϝλσʔλɺ঎඼ͷՁ֨ͳͲͷεΩʔϚͳͲʹͷΈ༻͍Δɻ 19

Ձ֨ɺ஍ਤͷ࠲ඪͳͲɺΧελϜϑΟʔϧυʹ΋σʔλΛอଘͭͭ͠ɺදࣔ΋ ͍ͨ͠͹͍͋͸ɺͦͷΑ͏ͳΧελϜϒϩοΫΛ࡞੒ɻ attributes: { author: { type: 'string', source: 'meta',
meta: 'author' }, }, ΧελϜϒϩοΫͷσʔλͷऔಘઌΛΧελϜϑΟʔϧυʹ͢Δ͜ͱ͕ग़དྷΔɻ Attributes | Block Editor Handbook | WordPress Developer Resources 20

ʮϦχϡʔΞϧ΍ςʔϚͷมߋͰͿͬ ͱΜͩΒࠔΔ΋ͷ͸ϓϥάΠϯʯ Plugin Territory – WordPressͷͦͷॲཧ͸ςʔϚͰ΍Δ΂͖͔ϓϥάΠϯͰ΍Δ΂͖͔ʁ | Firegoby 21

ςʔϚͷมߋͰίϯςϯπ͕ͿͬඈͿ ͜ͱ͸͋ͬͯ͸͍͚ͳ͍ɻ 22

ςʔϚ͕มߋ͞ΕΔέʔε • AMP ϓϥάΠϯɻಠࣗͷςʔϚػߏΛ࣋ͭɻ • ࠷ۙগͳ͍͕ɺϞόΠϧઐ༻ςʔϚ 23

<article> <h1><?php the_title();?></h1> <?php the_content();?> <?php wp_link_pages();?> </article> Ͱɺίϯςϯπ͕͖ͪΜͱશͯు͖ग़͞ΕΔΑ͏ʹ͢Δͷ͕ཧ ૝ɻ
get_post_metaɺ΍ɺACF ͷ get_ﬁeld ͳͲ͸جຊతʹɺςʔ ϚͰ༻͍Δ΂͖Ͱ͸ͳ͍ɻ 24

ΧελϜϑΟʔϧυͷ஋Λग़ྗ͍ͨ͠ͷͰ͋Ε͹ɺ add_ﬁlter( '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

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: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 33

令和時代の WordPress テーマ開発・ウェブサイト制作の勘所 #wpshinshu / ...

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

Toro_Unit (Hiroshi Urabe)

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Featured

Transcript

ྩ࿨࣌୅ͷ WordPress ςʔϚ։ൃɾ ΢ΣϒαΠτ੍࡞ͷצॴ Toro_Unit @Shinshu WP Meetup vol.14 1

$ whoami 2

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress

Contribution • WordPress 4.3 / 4.4 / 4.7 / 5.0

Plugins and Themes • Custom Post Type Permalinks • Advanced

ྩ࿨ݩ೥5݄8೔ WordPress 5.2 “δϟί” 6

ςʔϚपΓͷมߋ wp_body_open() ͷಋೖɻ wp_head, wp_footer ͷ஥ؒɻ ࢖͍ํ <body <?php body_class();?>>

ϒϩοΫΤσΟλʔ • WordPress 5.2 Ͱ͸ Gutenberg 5.3 ͕Ϛʔδ͞Ε͍ͯΔ • ΧελϜϒϩοΫͳͲͷ։ൃͷ஌ݟ΋͜ͷ൒೥ͰͦΕͳΓʹ

࠷ۙ͜Μͳײ͡ͰςʔϚɾWEBαΠτ ࡞ͬͯ·͢ɻ 9

1. gutenberg-starter-theme ΛϕʔεʹΧελϚΠζɻ 2. editor-style ͪΌΜͱ࡞Δɻ 3. ΧελϜϑΟʔϧυ͸ۃྗ࢖ΘͣɺΧελϜϒϩοΫΛ࡞੒ ͢Δ͜ͱͰରԠɻ 4.

1. gutenberg-starter-theme ΛϕʔεʹΧε λϚΠζɻ WordPress/gutenberg-starter-theme: A simple theme for testing

2. editor-style ͪΌΜͱ࡞Δɻ • ϒϩοΫΤσΟλʔΛ༻͍Δ͜ͱͰɺίϯςϯπͷฤूͷࣗ ༝౓͕͕͋ͬͨɻ͔͠͠ฤूը໘ͱදࣔ໘ͰผͷελΠϧ͕ ͍͋ͨͬͯͨΒ͋Μ·Γҙຯ͕ແ͍ͷͰɺeditor-style ͸ͬ͠ ͔Γ࡞Δɻ •

add_theme_support( 'editor-styles' ); add_editor_style( 'editor-style.css' ); • gutenberg-starter-theme ʹ͸ద༻͞Ε͍ͯͳ͍ͷͰɺ஫ ҙɻ

editor-styleɹͷྫɻ @charset "UTF-8"; @import 'variable.css'; //ม਺ @import '_elements.css'; //HTMLཁૉ @import

//σϑΥϧτͩͱɺ610px ͔͠ͳ͍ΤσΟλͷԣ෯Λมߋ .wp-block { max-width: 1024px !important; } .wp-block[data-align="wide"] {

3. ΧελϜϑΟʔϧυ͸ۃྗ࢖ΘͣΧ ελϜϒϩοΫΛ࡞੒͢Δ͜ͱͰରԠ 16

HTMLͷմ͸ΧελϜϒϩοΫΛ࡞Γ·͘Δɻ • Simple Deﬁnition List Blocks dl dt dd Λѻ͏ͨΊͷϒϩοΫɻ

ίϯςϯπͷHTMLͷ੍ޚ͸ΤσΟλͷ࢓ࣄɻςʔϚͷ࢓ࣄͰ͸ͳ͍ɻ 18

ΧελϜϑΟʔϧυͷ࢖͍Ͳ͜Ζɻ • ΧελϜ ϑΟʔϧυ ɻσʔλΛೖΕΔശɻͦ΋ͦ΋σβΠϯͷ౎߹Ͱ૿ݮ͢ Δ΋ͷͰ͸ແ͍ɻ • ςʔϚ΍ग़ྗํ๏͕มΘͬͯ΋ ( ex.

Ձ֨ɺ஍ਤͷ࠲ඪͳͲɺΧελϜϑΟʔϧυʹ΋σʔλΛอଘͭͭ͠ɺදࣔ΋ ͍ͨ͠͹͍͋͸ɺͦͷΑ͏ͳΧελϜϒϩοΫΛ࡞੒ɻ attributes: { author: { type: 'string', source: 'meta',

ʮϦχϡʔΞϧ΍ςʔϚͷมߋͰͿͬ ͱΜͩΒࠔΔ΋ͷ͸ϓϥάΠϯʯ Plugin Territory – WordPressͷͦͷॲཧ͸ςʔϚͰ΍Δ΂͖͔ϓϥάΠϯͰ΍Δ΂͖͔ʁ | Firegoby 21

ςʔϚͷมߋͰίϯςϯπ͕ͿͬඈͿ ͜ͱ͸͋ͬͯ͸͍͚ͳ͍ɻ 22

ςʔϚ͕มߋ͞ΕΔέʔε • AMP ϓϥάΠϯɻಠࣗͷςʔϚػߏΛ࣋ͭɻ • ࠷ۙগͳ͍͕ɺϞόΠϧઐ༻ςʔϚ 23

<article> <h1><?php the_title();?></h1> <?php the_content();?> <?php wp_link_pages();?> </article> Ͱɺίϯςϯπ͕͖ͪΜͱશͯు͖ग़͞ΕΔΑ͏ʹ͢Δͷ͕ཧ ૝ɻ

ΧελϜϑΟʔϧυͷ஋Λग़ྗ͍ͨ͠ͷͰ͋Ε͹ɺ add_ﬁlter( 'the_content', function( $content ) { ob_start(); ?> <div>

4. ςʔϚʹ͸ɺՄೳͳݶΓʮαΠτͷݟͨ໨ʯ Ҏ֎ͷ࢓ࣄΛͤ͞ͳ͍ɻ • ςʔϚͰΰϦΰϦHTMLͱ͔Λॻ͖ग़ͨ͠Β͍͍ͩͨԫ৴ ߸ɻ • ΧελϜϒϩοΫΛ࣮૷ -> ͦͷ

ςʔϚʹ৐ͤΔ΂͖ཁૉ • ϔομʔɾϑολʔɾαΠυόʔͳͲͷϨΠΞ΢τ෦෼ͷ࣮ ૷ɻ • CSSͰͷ૷০ • ϔομʔը૾ɺεϥΠυγϣʔͳͲɺϏδϡΞϧ͕ϝΠϯͳ ΋ͷɻଘࡏ͠ͳͯ͘΋ɺ࠷௿ݶͷίϯςϯπͷఏڙʹࢧোͷ ແ͍΋ͷɻ

5.ςʔϚ͕ಛఆͷϓϥάΠϯʹґଘ͢Δ͜ͱ͸ ͋ͬͯ͸ͳΒͳ͍ɻ • ϓϥάΠϯΛఀࢭͨ͠ͱ͖ʹɺςʔϚ͕Τϥʔʹͳͬͯ͸͍͚ͳ ͍ɻ • ຊମ͸ޓ׵ੑΛकΔ͕ɺϓϥάΠϯ͸࡞ऀͷํ਑࣍ୈɻ • PHPͷόʔδϣϯΞοϓʹϓϥάΠϯ͕͍͍͚ͭͯͳ͍έʔε ΋ɻ

• 5.2Ͱ௥Ճ͞ΕͨαΠτϔϧεػೳͰ͸ɺ໰୊Λىͨ͜͠ϓϥ άΠϯΛఀࢭͨ͠ঢ়ଶͰϩάΠϯग़དྷΔػೳ͕௥Ճ͞Εͨ ͕ɺͦͷ৔߹ͷσόοά΋ࠔ೉ʹɻ 29

WordPress ͷ ڧΈ͸֦ுੑɾɾɾʁ • WordPress ͷڧΈ͸ɺ๛෋ͳϓϥάΠϯͱ֦ுੑͩͱ͔ݴΘΕΔ ͜ͱ΋͋ΔΑ͏ͳɻ • ϓϥάΠϯ͸ɺಠࣗఆٛͷΧελϜϑΟʔϧυʹ͸ରԠ͍ͯ͠ͳ ͍ɻ

ahmadawais/create-guten-block ΧελϜϒϩοΫϓϥάΠϯͷ։ൃ؀ڥΛαΫοͱ࡞ΔϠπɻ WordPress/gutenberg-examples ϒϩοΫͷαϯϓϧɺνϡʔτϦΞϧɻ 31

JS ೉͍͠ɾɾɾʁ • ҰੲલΑΓ৘ใ΋ଟ͍ɻ։ൃ؀ڥͷ੔උ΋؆୯ɻ؆୯ͳΧελϜϒϩοΫΛ࡞ ΕΔ͘Β͍ͷ React ྗͳΒׂͱ͙͢ʹ਎ʹ͚ͭΒΕΔͷͰɺϏϏΒͣʹ৮ͬͨ ํ͕ྑ͍ɻ • ʮReact

Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 33