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 をよりよいものにする方法。/ wordcamp t...
Search
Toro_Unit (Hiroshi Urabe)
November 02, 2019
Technology
2
4.5k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
Toro_Unit (Hiroshi Urabe)
November 02, 2019
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
170
Cloudflare Meetup Nagano Vol.3
torounit
1
72
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.6k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.7k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
390
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
440
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
560
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
870
Other Decks in Technology
See All in Technology
kernelvm-brain-net
raspython3
0
520
3D生成AIのための画像生成
kosukeito
2
620
名単体テスト 禁断の傀儡(モック)
iwamot
PRO
1
140
AWSを利用する上で知っておきたい名前解決の話
nagisa53
6
790
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
carta_engineering
0
27k
Gateway H2 モジュールで スマートホーム入門
minoruinachi
0
140
Next.jsと状態管理のプラクティス
uhyo
4
1.8k
Google Cloud Next 2025 Recap 生成AIモデルとマーケティングでのコンテンツ生成 / Generative AI models and content creation in marketing
kyou3
0
130
MySQL InnoDB Data Recovery - The Last Resort
lefred
0
110
CodeRabbitと過ごした1ヶ月 ─ AIコードレビュー導入で実感したチーム開発の進化
mitohato14
1
240
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start
iktakahiro
0
120
Part2 GitHub Copilotってなんだろう
tomokusaba
2
760
Featured
See All Featured
Building Applications with DynamoDB
mza
94
6.4k
Gamification - CAS2011
davidbonilla
81
5.3k
A Tale of Four Properties
chriscoyier
159
23k
Optimizing for Happiness
mojombo
378
70k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
4 Signs Your Business is Dying
shpigford
183
22k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building an army of robots
kneath
305
45k
Rails Girls Zürich Keynote
gr2m
94
13k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Transcript
1
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) • Frontend Engineer • WordPress
Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 2
Plugins and Themes • Custom Post Type Permalinks • Advanced
Posts Blocks • Simple Post Type Permalinks • Powerful Posts Per Page (PPPP) • Vanilla • and more... 3
4
WordPress Meetup Map • React Ͱग़དྷͯ·͢ɻ • https://github.com/torounit/wp-meetup-map • ϓϧϦΫ͍ͩ͘͞ɻ
5
6
ݝদຊࢢ͔Β͖·ͨ͠ • Shinshu WordPress Meetup • ຖճϐβ৯ͬͯ·͢ɻ • ࠓΞυ֗οΫఱࠃ͕দຊಛूɻ •
ߚ༿͕ݟ͝Ζɻ৽ͦɻ 7
͍ 8
2019.11.12 9
WordPress 5.3 ϦϦʔε༧ఆ 10
11ϲ݄લ 11
2018.12.06 12
WordPress 5.0 !!! 13
͓͞Β͍ɿWordPress 5.0 • 1ͿΓͷϝδϟʔΞοϓσʔτ • ͪʹͬͨɺϒϩοΫΤσΟλʔɺGutenberg ͷϚʔδɻ ( ver 4.6
) 14
͜͜ʹࢸΔ·Ͱɺ͍Ζ͍Ζ͋Γ·ͨ͠ 15
ߋʹ1ϲ݄લ 16
2018.11.13 • WordPress 5.0 beta 4, Gutenberg 4.3 ͷϦϦʔεɻ •
Gutenberg 4.3 WordPress ʹϚʔδࡁΈ • ͜ͷ࣌Ͱɺ11/27 ϦϦʔε༧ఆɻ 17
9:00 ͝Ζɻ • ʮGutenberg Ͱຊޠ͕ೖྗग़དྷͳ͍ŋŋŋʯ • ʮ5.0 Beta 4 Ͱຊޠ͕͏·͘ೖྗग़དྷͳ͍ŋŋŋʯ
ͷͭͿ͖͕ͪΒ΄Βͱɻ 18
ຊޠೖྗͷ ෆ۩߹͕ൃੜ!!! 19
• ຊޠೖྗͰɺ1จࣈ͕֬ఆ͞Εͯ͠·͏όάɻ • kakikukeko → ͕ɺʮk͖͚͋͘͜ʯ • https://github.com/WordPress/gutenberg/issues/11813 • ϦετϒϩοΫͰɺશͯͷจࣈͰൃੜɻ
• kakikukeko → ͕ɺʮk͋k͍k͏k͑k͓ʯ • https://github.com/WordPress/gutenberg/issues/11795 20
15:00 ࠒ https://github.com/WordPress/ gutenberg/issues/11795 ΩλδϚ͞Μ͕ issueใࠂɻ ϦετϒϩοΫͷຊޠೖྗ͕͓͔͍͠ ͱ͍͏༰ɻ ͜ͷ͕ɺGutenberg 4.3
͔Βൃੜ͠ ͨ͜ͱɻ 21
23:30 ࠒ https://github.com/WordPress/ gutenberg/issues/11813 ؔ࿈Λൃݟ͠ใࠂɻ Ͳ͏Βɺ <RichText> ͱ͍͏ίϯϙʔ ωϯτΛ͍ͬͯΔͷશͯͰൃੜ͢Δ ͜ͱɻ
ΩλδϚ͞Μͷͱ·ͨผͷέʔεͰ ຊޠೖྗ͕͓͔͍͜͠ͱΛใࠂɻ 22
͜ͷͱ͖ͷ΅͘ͷ͖ͪ 23
γϟϨʹͳΒΜʂʂʂʂ 24
• ϒϩοΫΤσΟλʔΛ͏ͧʂͱ͍͏Ҋ݅ΛఏҊ͍ͯͨ͠ɻ • ͜ͷ··ϦϦʔε͞ΕͨΒɺʮWordPress ͬͯόάͬͯΔΜ Ͱ͠ΐʁʯΈ͍ͨͳ͜ͱΛݴΘΕΔͷɺ৺͕௧͍ɻετϨ εɻ • Classic Editor
ΛೖΕΔͷ͕ͨΓલʹͳΔͱɺࠓ͍ͭɺ ϒϩοΫΤσΟλʔʹ͢Δͷͱ͍͏ɻ • ࠓޙϢʔβʔɾΫϥΠΞϯτʹઆ໌͢ΔͷҰۤ࿑ɻɻɻ 25
UIͰղΓ͘͢όάΔͷɺϓϩμΫτͷ৴༻ʹؔΘΔɻ 26
2018.11.14 • 4.2 Ͱൃੜ͠ͳ͍͜ͱ͕໌ɻ • ΄͔ͷຊਓ͔Βಈ͔ͳ͍Αʔͱͷใࠂ͕͕݅͋Δɻ • ͳΜͱ͔ݪҼ͕ىͬͨ͜ϑΝΠϧͷಛఆʹޭ͕ͨ͠ɺղ Βͣɻ 27
2018.11.15 ͨͪͳ͞Μ͕ɺMaking WordPress (ެࣜ Slack) ͷ #core-editor νϟϯωϧͰใࠂɻ͔͜͜Β͕ಈ͖࢝ΊΔɻ 28
toru ͞ΜʹΑΔৄࡉͳίϝϯτɻ 29
19:18 ίϛολʔͷElla ͞Μ͕ɺΩλδϚ͞Μ ͷ issue ʹίϝϯτɻ Mac ͷ "ͻΒ͕ͳ" ͷຊޠೖྗγε
ςϜΛೖΕͯΈ͚ͨͲɺྑ͘ղΒͳ͍ɻ ͬͱใ͕ཉ͍͠ʂͱͷ͜ͱɻ ͔͜͜Βɺ̍࣌ؒ΄ͲɺΩλδϚ͞Μ ͱɺElla͞ΜͷΓͱΓɻ 30
21:50 31
• ίϛολʔͷ Ella ͞Μ͔Β Gutenberg ͷमਖ਼൛ͷZIP͕ඈΜ Ͱ͘Δɻ͔͜͜Β͠Β͘ɺElla ͞Μ͕ͨ͠ͷΛ͕ख ݩͰݕূ͢Δɻ •
ӳޠྑ͘ղΒͳ͍͚Ͳɺֆจࣈͱ Google ༁Ͱ͔ͳΓί ϛϡχέʔγϣϯ͕औΕΔɻ • ͪΌΜͱಈ͍ͯͳ͍ͱ͖ɺͱΓ͋͑ͣɺʮOh no...ʯͱ͔ݴ ͑Θͬͨɻ 32
22:30 WordPress ͷίΞίϛολʔͷ ocean90 ͔Βɺhttps://input-inspector.now.sh/ ΩʔϘʔυͷೖྗΠϕϯτΛՄࢹԽ͢ΔπʔϧΛ ڭ͑ͯΒ͏ɻ 33
34
͜ΕҎ߱ɺ 1. Ella ͞Μ͕ Gutenberg Λमਖ਼ 2. ͷखݩͷ WordPress ʹΠϯετʔϧɺݕূɻ
3. ಈ࡞ใࠂͱɺhttps://input-inspector.now.sh/ ͷ݁ՌΛ࿈བྷɻ 4. ݴޠԽɺӳޠԽ͠ʹ͍͘ϞϊɺಈըΛࡱͬͯͦΕΛڞ༗ɻ ͱ͍͏ྲྀΕͰमਖ਼ɾݕূ͕ਐΉɻ 10~20ʹҰ͜ΕΛࢼͯ͠ʔͱ͍͏࿈བྷ͕དྷΔͷͰɺͦΕΛͻ ͨ͢Βݕূɻ 35
23:30 ʮWordPress 5.0 RCʯͷϚΠϧετʔ ϯɺʮ[Priority] Highʯ͕ઃఆ͞ΕΔɻ • ͜ͷ͕ɺॏཁͳͱίϛο λʔਞ͕அͨ͠ɻ •
͜Ε͕ղܾ͞Εͳ͍ݶΓ WordPress 5.0 RC (ϦϦʔεީิ൛) ग़ՙ͞Ε ͳ͍ɻ ͱ͍͏͜ͱ͕ܾ·Δɻ҆৺ͨ͠ͱಉ࣌ ʹɺۤ࿑͕ใΘΕͨؾ͕ͨ͠ɻ 36
11.16 0:35 ͷใࠂͨ͠ɺIssue ͕ Chrome Ͱղܾ͞Εͨ͜ͱΛ֬ೝɻ ΄͔ͷϒϥβͰಈ࡞͍ͯ͠Δ͜ͱΛ֬ೝɻ 0:49 master ϒϥϯνͷөɻ
01:00 ͝Ζ ΄͔ͷϒϩοΫͰͻͱ·ͣେৎͦ͏ͳ͜ͱΛɺToru ͞Μ͕ ใࠂ 37
https://github.com/WordPress/gutenberg/pull/11908 38
39
40
41
ͦͷޙɺͳΜ͔Μ͋ͬͯɺ Gutenberg 4.4 / WordPress 5 beta 5ϦϦʔε 42
݁ہ͕ͬͨ͜ͱ ݁ہ͕ͬͨ͜ͱ 1. ͞Εͨ ϓϥάΠϯΛΠϯετʔϧͯ͠ɺೖྗςετ 2. https://input-inspector.now.sh/ ͷ݁ՌΛใࠂ 3. εΫϦʔϯΩϟϓνϟࡱӨɻGithubʹషΔͨΊʹɺgif
ʹมɻ 4. ͱΓ͋͑ͣGoogle ༁Ͱίϝϯτͱ͔ΛಡΉɻ 5. OK!!! ͱ͔ Oh No.. ͱ͔ݴ͏ɻͪΐͬͱෳࡶͳ͜ͱݴ͍ͨ͘ͳͬͨΒɺ Google ༁ɻ 43
ඞཁͳεΩϧɺϞϊ • Making WordPressͷSlackΞΧϯτɻ • WordPress.org ΞΧϯτͱҰॹʹऔΕΔɻ • Github ΞΧϯτ
• WordPress ڥɻʢͳΜͰ͍͍ɻʣ • Google ༁ɻ 44
͋ͬͨΒศརͳεΩϧ • ͪΐͬͱͷ Git ྗɻ • npm install, npm run
build ग़དྷͳͯ͘ɺzip ͰσʔλΛૹͬͯ͘ΕͨͷͰɺ΄Μͱʹඞਢ Ͱແ͍ɻ 45
ಛผͳεΩϧඞཁͳ͍ 46
• ಈըࡱӨͷΓํͦͷͰάάͬͨɻ • SlackɺGithubย͔ͬΒGoogle༁ʹ͔͚ͨɻ • ྑ͘ղΒΜ୯ޠάάͬͨΒࣙॻ͕ग़ͯ͘Δɻ 47
ಈըࡱӨ mov Github ͷίϝϯτʹషΕͳ͍ͷͰɺGif Ξχϝʹม͢ Δɻ Windows : ScreenToGif:
Ωϟϓνϟ͔ΒGifੜ·ͰҰൃͰग़དྷΔɻ mac 1. command + shift + 5 Ͱ mov ࡱӨ 2. ffmpeg Ͱ mov -> gif ͕؆୯ɻCLI. $ ffmpeg -i issue.mov -r 24 issue.gif 48
OSS ڞಉ࡞ۀͷΓํ youknowriad: Awesome collaboration work on this PR OSSΈΜͳͰιϑτΣΞΛΑ͍ͯ͘͘͠Ұͭͷํ๏ɻ
49
͍͔ͭͩΕ͔͕উखʹͯ͘͠Εͳ͍ɻ • ͦͦӳޠͰ͔͠ύιίϯΛ͍ͬͯͳ͍ਓ͓ͦΒ͘͜ ͷෆ۩߹ΛൃݟͰ͖͍ͯͳ͍ɻCJK ͕ࠃޠͳਓͬͺΓ গͳ͍ɻ • ใࠂ͞Εͯɺਖ਼Α͘Θ͔Βͳ͍͔Βςετͮ͠Β͍ɻ • όάϨϙʔτɾςετʹࢀՃ͢Δ͜ͱɺॏେͳͩͱײ͡
ΔͷͰ͋ΕɺSlack ʹಥܸͯ͠ҙݟΛڼ͙ɺॏཁɻ 50
ʮWordPress όάͬͯΔΑͶʔɻʯ ʮGutenberg ͙ͬͯΔΑͶʔʯͱ SNSͷย۱Ͱ΅͍͍ͯΔ͚ͩͰɺ Կղܾ͠ͳ͍ɻΈΜͳෆɻ 51
• SNS ͷย۱Ͱจ۟Λݴ͍ͬͯΔ͚ͩͰɺෆ۩߹Βͳ͍ ͠ɺݴΘΕͨଆDisΒΕͨ͜ͱ͔͠Θͬͯ͜ͳ͍ͷͰɺෆ ͕ෆΛੜ࢈͢Δ͚ͩɻ • όάϨϙʔτʹ͢Δ͜ͱͰɺੜ࢈తͳΓͱΓʹɻ • 4.3 ͷෆ۩߹͕ղফ͞Εͳ͍··ग़ՙ͞Ε͍ͯͨΒͱ૾͢
Δͱɺ΄ΜͱʹڪΖ͍͠ɻ 52
ͳͥʹϦϓϥΠ͕ඈΜͰ͖ͨͷ͔ɻ • ͨ·ͨ·ɺ͜ͷ݅Ͱใࠂ͍ͯͨ͠ਓؒͷதͰɺSlack ͕͓ٳ ΈϞʔυʹͳ͍ͬͯͳ͔ͬͨɻͨ·ͨ·ɺݱʹډ߹Θͤͨ ͚ͩɻ • ͋ͱɺ͔̍࣌ؒͬͨΒ… 53
݁ہίϛϡχέʔγϣϯॏཁɻ • ʮςετ͘Β͍ͩͬͨΒԶʹग़དྷΔͧʂʯͱ͍͏ਓɺί ϝϯτ͢Δ͜ͱ͕ॏཁɻ૬ख୭ʹ૬ஊͨ͠Βྑ͍ͷ͔ղ Βͳ͍ɻ • Issue Λใࠂ͢ΔɺSlack Ͱίϝϯτ͢Δͱ͍͏͜ͱɺ։ ൃʹࢀՃ͍ͨ͠ʂͱ͍͏ҙࢥදࣔɻ
54
؍ऀޮՌ΄Μͱʹ͜Θ͍ɻ ؍ऀޮՌʢ΅͏͔Μ͠Ό͜͏͔,ӳ:bystander effectʣͱɺ ࣾձ৺ཧֶͷ༻ޠͰ͋Γɺूஂ৺ཧͷҰͭɻ͋Δࣄ݅ʹର͠ ͯɺࣗҎ֎ʹ؍ऀ͕͍Δ࣌ʹઌͯ͠ߦಈΛى͜͞ͳ͍৺ ཧͰ͋Δɻ؍ऀ͕ଟ͍΄ͲɺͦͷޮՌߴ͍ɻ wikipedia ΑΓɻ 55
56
57
ʮ͋ͳ͕ͨݺͼ·͠ΐ͏!!! ফं!!!ʯ ©ͷΓ͚ͭխय़ʗখֶؗ ʰ͋͠ΘͤΞ ϑϩాதʱ4רΑΓ 58
• Βͳ͍͔Βɺ͍͠ͳͷͰŋŋŋ → ͩΕใࠂͯ͠ͳ ͍ɻ • ͩΕ͔ใࠂͯͨ͠Β໎ͳͷͰŋŋŋ → ॏෳ͍ͯ͠ΔͳΒ ͦͬͪʹ༠ಋͯ͘͠ΕΔ͠ɺෳͰى͍ͬͯ͜Δ͜ͱ͕Մࢹ
Խ͞ΕΔɺใࠂ͞Εͳ͍͜ͱͷํ͕ɻ • ผʹΠϥοͱ͞Εͳ͍͔Βେৎɻ5ௐͯͦΕͬΆ͍ Ϟϊ͕ແ͚Εใࠂ͞Εͯͳ͍ͱࢥͬͯ issue ॻ͘ɻ 59
ΜۄʹͳΖ͏ɻ • ίΞͷ Slack, Trac, Github ͰٞͷٞʹࢀՃ͢Δ͜ͱ͕େ ࣄɻʮ୭͔͕දͯ͠ŋŋŋʯͦͷਓҰਓͷʹ͔͠ݟ͑ͳ ͍ɻ •
ʮेͳΜۄ͕͋Εɺશͯͷόάચ͍ग़͞ΕΔʯ(Ϧʔ φεͷ๏ଇ) 60
Slack Ͱͷ APAC Timezone ͷϛʔςΟϯά࢝·ͬͨɻ #coreɺ#core-editor Ͱɺຊ࣌ؒͷ ޕޙʹɺϛʔςΟϯά͕࢝·ͬͨɻ • #core-editor
Λݟ͍ͯΔͱɺʮ͜Ε ࠶ݱ͢ΔʁʯΈ͍ͨͳଟ͍ɻ 61
όάϨϙʔτॻ͘ͷͦ͜·ͰେมͰͳ͍ɻ 1. ຊޠͰॻ͘ɻ 2. Google ༁ʹ͔͚Δ 3. εΫϦʔϯγϣοτɾಈըɻ ׂͱӳޠྗແͯ͘ɺͳΜͱ͔ͳΔಈըҒେɻ 62
େͳͷɺ·ͣɺ͑Α͏ͱ͢Δ͜ͱɻ Ұͷ Issue Ͱશ෦ΘΔͱࢥΘͳ͍ɻ 63
• νϟοτʹࢀՃ͢ΔɺνϟοτͰίϛϡχέʔγϣϯΛऔͬ ͯΈΔɺ࣭ͯ͠ΈΔɻ • ʮ͛͐͢ʂʯͬͯݴ͏͚ͩͰҹมΘΔɻ • Issue Λॻ͘ɻ • طʹ͋ΔɺIssue
/ Pull Request ʹಈ࡞ใࠂ͢Δɻ ͜Μͳͱ͜Ζ͔ΒॳΊͯΈ·ͤΜ͔ɻ 64
͋ͳ͕ͨݺͼ·͠ΐ͏ɺফं!!! 65
͋ͳ͕ͨॻ͖·͠ΐ͏ɺόάϨϙʔτ!!! 66
Thanks! • @Toro_Unit on Twitter and WordPress.org • @torounit on
Github and Making WordPress 67