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
最近作ったプラグインをせっかくなので紹介する #wpshinshu / 2019-01-12 WPShinshu
Search
Toro_Unit (Hiroshi Urabe)
January 12, 2019
Technology
0
66
最近作ったプラグインをせっかくなので紹介する #wpshinshu / 2019-01-12 WPShinshu
信州 WordPress Meetup vol.9 登壇資料です。
Toro_Unit (Hiroshi Urabe)
January 12, 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
6.9k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
940
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
310
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
380
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
500
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
820
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
2.9k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.4k
Other Decks in Technology
See All in Technology
web-application-security
matsuihidetoshi
0
150
Cracking the KubeCon CfP
inductor
2
240
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
750
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
290
MapLibreとAmazon Location Service
dayjournal
1
150
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.5k
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
180
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
160
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
190
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Designing for humans not robots
tammielis
248
25k
Debugging Ruby Performance
tmm1
70
11k
Clear Off the Table
cherdarchuk
84
310k
Web development in the modern age
philhawksworth
202
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Writing Fast Ruby
sferik
621
60k
Web Components: a chance to create the future
zenorocha
305
41k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Transcript
࠷ۙ࡞ͬͨϓϥάΠϯΛ ͔ͤͬ͘ͳͷͰհ͢Δ Toro_Unit@ Shinshu WP Meetup vol.9 1
$ whoami 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) • Frontend Engineer • WordPress
Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
ࡳຈͷձࣾͰϦϞʔτϫʔΫͯ͠·͢ 4
5
Contribution • WordPress 5.0.1 and 5.1 (Α͍ͯ) • WordCamp Kyoto
2017 / Osaka 2018 / Ogijima 2018 ࣮ߦҕһ • WordCamp Osaka 2018 Speaker. • etc... 6
Plugins and Themes • Custom Post Type Permalinks • Simple
Post Type Permalinks • Powerful Posts Per Page (PPPP) • Smart PWA <- new! • Vanilla • and more... 7
͚͋·͓ͯ͠ΊͰͱ͏͍͟͝·͢ɻ 8
࢝Կͯ͠·ͨ͠ʁ 9
࣮ՈͰೣٔΕͨΓ 10
11
χϡʔΠϠʔӺݟͨΓ ݩ͕܈അݝଠాࢢ 12
13
ϓϥάΠϯ࡞ͬͨ Γͯ͠·ͨ͠ 14
Δ͜ͱ͕ͳ͗ͯ͢͞… 15
࡞ͬͨϓϥάΠϯ • Advanced Posts Blocks • Advanced Archive Blocks •
Code Editor Blocks • Review Mode 16
Advanced Posts Blocks 17
18
Advanced Posts Blocks https://wordpress.org/plugins/advanced-posts-blocks/ • ʮ࠷৽ͷߘʯϒϩοΫΛڧԽͨ͠Ϡπͱ͔ͦͷ΄͔Ζ Ζɻ • ςʔϚʹPHPϑΝΠϧΛઃஔ͢Δ͜ͱͰݟͨͷΧελϚΠ ζ͕Մೳɻ
• WEB੍࡞Ͱ͍Ζ͍ΖͬͨϒϩοΫΛ·ͱΊͨɻ 19
Posts Blocks • ߘλΠϓɾΧςΰϦʔɾλάɾλΫιϊϛʔ ͰߜΓࠐΜͩ ߘҰཡΛදࣔɻ • τοϓϖʔδɺࣄۀհϖʔδͰͷؔ࿈χϡʔεͱ͔ɻ 20
Post Blocks • ಛఆͷߘΛબΜͰදࣔɻ • ؔ࿈هࣄͱ͔Λखಈઃఆ͢Δͱ͖ͱ͔ɻ 21
Children Blocks • ಛఆͷߘͷࢠϖʔδΛͯ͢දࣔɻ • ݻఆϖʔδͳͲͰαϒϝχϡʔΛ࡞ͬͨΓɻ 22
Advanced Archive Blocks 23
24
Advanced Archive Blocks https://wordpress.org/plugins/advanced-archive-blocks/ • ௨ৗͷΞʔΧΠϒϒϩοΫ݄ผ͔͠ग़དྷͳ͍ͷͰɺɾ ݄ɾɾि ͷΞʔΧΠϒ͑ΔΑ͏ʹͨ͠Ϡπɻ 25
Code Editor Blocks 26
27
Code Editor Blocks https://wordpress.org/plugins/code-editor-blocks/ • ΧελϜHTMLϒϩοΫͷϓϨϏϡʔ͕ iframe ͳͷͰɺී௨ ʹϨϯμϦϯά͢ΔΑ͏ʹͨ͠ɻϝσΟΞΫΤϦʔͳͲ͕ద ༻͞Ε͍ͯͯྑ͍ײ͡ʹϓϨϏϡʔ͢ΔΑ͏ʹɻ
• λμͷςΩετΤϦΞͰͳͯ͘ɺΤσΟλʔ(CodeMirror) Λ͏Α͏ʹͯ͠ΤϥʔͳͲΛݕͰ͖ΔΑ͏ʹɻ 28
Review Mode 29
30
Review Mode https://wordpress.org/plugins/review-mode/ • ϨϏϡʔϞʔυ͕༗ޮʹͳ͍ͬͯΔ߹ʹɺެ։ࡁΈʹՃ͑ ͯʮϨϏϡʔͪʯͷߘؚΊͯදࣔ͢ΔΑ͏ʹ͢Δɻ • ϨϏϡʔϞʔυͷઃఆϢʔβʔ͝ͱʹɻͪΖΜϩάΠϯ ͍ͯ͠ͳ͍ϢʔβʔଞͷϢʔβʔͷը໘ʹӨڹ͠ͳ͍ɻ ެ։͍ͨ͠هࣄ͕ΞʔΧΠϒҰཡͳͲͰͲͷΑ͏ʹݟ͑Δ
ͷ͔Λ֬ೝ͢ΔͨΊͷϓϥάΠϯɻ 31
ײ • ࣝͷ୨Է݉͠ͶͯɺࣄͰ࡞ͬͨػೳͰසग़ͨ͠ϠπΛϓϥάΠϯʹɻ • খ͞ͳ୯ҐͰϓϥάΠϯʹ͓ͯ͘͠ͱϝϯςφϯεָͰখճΓޮ͍ͯྑ ͍ײ͡ɻ • All in One
ͳϞϊ͕ྑ͍͔Ͳ͏͔έʔεόΠέʔε͚ͩͲɺϒϩοΫप Γখ͚ʹͨ͠ํ͕͍উखྑͦ͞͏ɻ • ৭Μͳػೳ͕ೖͬͯΔϞϊػೳ͕ڝ߹ͨ͠ͱ͖໘͍͘͞ɻ • ཉ͍͠ͷ͚ͩΠϯετʔϧ͢Ε͍͍ɻ 32
ΧελϜϒϩοΫͷϓϥάΠϯʹ͍ͭͯ • Gutenberg ͷιʔείʔυɺಘʹ block-library ลΓͷιʔείʔυΛ໓ ۤಡΜͩํ͕͍͍ɻ࣮ྫͳͲ͕গͳ͍ͷͰιʔεΛಡΉͱࢀߟʹͳΔɻ • HOC ɺReact
ͷษڧʹͳΔ͠ɺศརͳϥΠϒϥϦଟ͍ͷͰ WP API Λ͏ͱ͖ʹʹཱ͕͍ͭࣝΖ͍Ζɻ (@wordpress/data,@wordpress/ api-fetch) • ΧελϜϒϩοΫΛҊ݅͝ͱʹຖճ࡞ΔͷຊʹۤߦɻʢϒϩοΫ͝ͱͷ ೖྗͷ༷ܾΊͳͲ͕େมʣ • γϯϓϧͳίϯϙʔωϯτΛ࡞ͬͯϓϥάΠϯʹ͓ͯ͘͠ͷ͕ྑ͍ɻ 33
Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 34