Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
200
令和時代の 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)
Cloudflare Meetup Nagano Vol.3
torounit
1
53
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.4k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.6k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.8k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
380
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
420
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
540
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
850
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
Other Decks in Technology
See All in Technology
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
130
A Hidden Pitfall of K8s DNS with Spring Webflux
musaprg
0
330
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
8
1.7k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
110
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
180
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
500
Server Side Swift 実践レポート: 2024年に案件で採用して見えた課題と可能性
yusuga
2
470
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
270
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
160
Culture Deck
optfit
0
190
AndroidデバイスにFTPサーバを建立する
e10dokup
0
210
Building Products in the LLM Era
ymatsuwitter
4
1.2k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.1k
Six Lessons from altMBA
skipperchong
27
3.6k
The Invisible Side of Design
smashingmag
299
50k
RailsConf 2023
tenderlove
29
990
A better future with KSS
kneath
238
17k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Gamification - CAS2011
davidbonilla
80
5.1k
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