$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
令和時代の WordPress テーマ開発・ウェブサイト制作の勘所 #wpshinshu / ...
Search
Toro_Unit (Hiroshi Urabe)
July 27, 2019
Technology
0
190
令和時代の WordPress テーマ開発・ウェブサイト制作の勘所 #wpshinshu / 2019-07-27 Shinshu WordPress Meetup vol.14
Shinshu WordPress Meetup vol.14 登壇資料です
Toro_Unit (Hiroshi Urabe)
July 27, 2019
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.3k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.5k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.6k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
360
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
400
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
530
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
840
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.1k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
3.1k
Other Decks in Technology
See All in Technology
Behind the scenes of 24-hour global online event “JAWS PANKRATION 2024”
syoshie
0
110
エンジニアの草の根活動のその先へ LINEギフトのアクセシビリティにおける ネクストアクション
lycorptech_jp
PRO
0
100
【LT】ソフトウェア産業は進化しているのか? #Agilejapan
takabow
1
130
最強DB講義 #35 大規模言語モデルに基づく検索モデル
mpkato
1
110
LLMOps: Eval-Centric を前提としたMLOps
asei
5
300
今はまだ小さい東京ガス内製開発チームが、これからもKubernetesと共に歩み続けるために
yussugi
3
470
Storybook との上手な向き合い方を考える
re_taro
5
4.5k
Engineer Recruting Deck
siva_official
PRO
1
3.1k
CDCL による厳密解法を採用した MILP ソルバー
imai448
5
440
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
4
3.1k
【CNDW2024】SIerで200人クラウドネイティブのファンを増やした話
yuta1979
1
230
Kubernetesを知る
logica0419
14
2.2k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Making Projects Easy
brettharned
115
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Done Done
chrislema
181
16k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Become a Pro
speakerdeck
PRO
25
5k
GraphQLとの向き合い方2022年版
quramy
44
13k
Producing Creativity
orderedlist
PRO
341
39k
Speed Design
sergeychernyshev
25
640
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
What's in a price? How to price your products and services
michaelherold
243
12k
Transcript
ྩ࣌ͷ 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 Definition 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_field ͳͲجຊతʹɺςʔ ϚͰ༻͍Δ͖Ͱͳ͍ɻ 24
ΧελϜϑΟʔϧυͷΛग़ྗ͍ͨ͠ͷͰ͋Εɺ 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
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