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での webサイト制作2022 / ngk2022s
Search
Hidetaka Okamoto
January 22, 2022
Technology
0
380
WordPressでの webサイト制作2022 / ngk2022s
NGK2022S でのLT資料です。
Hidetaka Okamoto
January 22, 2022
Tweet
Share
More Decks by Hidetaka Okamoto
See All by Hidetaka Okamoto
OpenAI APIで API Changelogを要約してみた話 / chatgpt-osaka-1
hideokamoto
0
460
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
53
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
270
Jamstack開発者のための App Runner入門
hideokamoto
1
430
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
170
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.6k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
3k
後付けで 従量課金プランの 提供を開始した話 / 20210609-jp_stripes
hideokamoto
0
190
Other Decks in Technology
See All in Technology
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
130
Storybook との上手な向き合い方を考える
re_taro
5
2.2k
Chasing the White Whale of Open Source - ROI
mrbobbytables
0
110
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
670
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
1
230
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
430
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
11
1.5k
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
120
Mastering Quickfix
daisuzu
1
330
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
150
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Writing Fast Ruby
sferik
627
61k
We Have a Design System, Now What?
morganepeng
50
7.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Become a Pro
speakerdeck
PRO
25
5k
Code Review Best Practice
trishagee
64
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
17k
Being A Developer After 40
akosma
87
590k
Optimizing for Happiness
mojombo
376
70k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Unsuck your backbone
ammeep
668
57k
Gamification - CAS2011
davidbonilla
80
5k
Transcript
WordPressͰͷ webαΠτ੍࡞2022 NGK2022S Hidetaka Okamoto 2022/1/22
Ԭຊलߴ @hide__dev • Stripe Developer Advocate • JS / TS
Developer • AWS / Next.js / Serverless / shopify / … • 🐈
2021/12ʹStripeʹδϣΠϯ͠·ͨ͠
Agenda • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొͱࠞཚ • ݪճؼ
- ͦͷΣϒαΠτԿͷͨΊʁ
Agenda •͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొͱࠞཚ • ݪճؼ -
ͦͷΣϒαΠτԿͷͨΊʁ
https://developer.wordpress.org/themes/basics/template-hierarchy/
PHPͰHTMLΛඳը <?php get_header(); if ( have_posts() ) : while (
have_posts() ) : the_post(); the_title( '<h2>', '</h2>' ); the_post_thumbnail(); the_excerpt(); endwhile; else: _e( 'Sorry, no posts matched your criteria.', 'textdomain' ); endif; ?>
JSͱCSSͰݟͨಈ͖Λઃఆ function theme_name_scripts() { wp_enqueue_style( 'style-name', get_stylesheet_uri() ); wp_enqueue_script( 'script-name',
get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
هࣄ/ϖʔδϒϩοΫΛΈ߹Θͤͯ࡞
ࠃ࢈ʢຊޠϑϨϯυϦʔʣςʔϚ࡞ऀͷ૿Ճ
WordPressͷू߹ • ॻ੶ɾηϛφʔɾϒϩά • ίϛϡχςΟɾϑΥʔϥϜ • ϢʔβʔΧϯϑΝϨϯε • ެ։͞Εͨίʔυ ->
ʮू߹ʯͱ͍͏ڊਓͷݞʹ͍͔ʹ͏·͘ΕΔ͔ʁ
Agenda • ͜Ε·ͰͷWordPressαΠτ੍࡞ •Headless WP / FSEͷొͱࠞཚ • ݪճؼ -
ͦͷΣϒαΠτԿͷͨΊʁ
Headless WordPress (Jamstack / etc..) • ʮWordPressςʔϚʯΛΘͣʹϑϩϯτΤϯυΛ࣮͢Δ • WordPressσʔλAPIܦ༝Ͱऔಘ •
ؔ৺ɾͷ͕ՄೳʹͳΔ • هࣄཧWordPressͰैདྷ௨Γ • αΠτͷ࣮ҙͷٕज़ελοΫΛ͏
ࣄྫ&ղઆهࣄ: necco (WP + Next.js) https://necco.co/note/7952
FSE (Full Site Editing | ϑϧαΠτฤू) • αΠτͷݟͨͯ͢ΛϒϩοΫͰߏங͢ΔΈ • WordPress
5.9 (ݱࡏRC)Ͱར༻ՄೳʹͳΔ • ϨΠΞτཁૉʢϔομʔɾϑολʔʣ هࣄҰཡͷઃఆͳͲΛཧը໘͔ΒΑΓॊೈʹฤूͰ͖Δ • ͜Ε·ͰͷςʔϚͱ࡞Γํ͕ࠜຊతʹมΘΔͨΊɺ ͍·ͷͱ͜ΖΓସ͑қ͕ߴ͍
index.html (index.phpͰͳ͍) <!-- wp:template-part {"slug":"header","tagName":"header"} /--> <!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
<main class="wp-block-group"> <!-- wp:query --> <div class="wp-block-query"> <!-- wp:post-template --> <!-- wp:post-title {"isLink":true} /--> <!-- wp:post-date /--> <!-- wp:post-excerpt {"moreText":"Continue reading"} /--> <!-- /wp:post-template --> <!-- wp:query-pagination --> <div class="wp-block-query-pagination"> <!-- wp:query-pagination-previous /--> <!-- wp:query-pagination-numbers /--> <!-- wp:query-pagination-next /--> </div> <!-- /wp:query-pagination --> </div> <!-- /wp:query --> </main><!-- /wp:group --> <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
None
WPͰͷ੍࡞ɺԿΛ֮͑ͨΒ͍͍ʁ • Before • ςʔϚͷ࡞ΓํʢHTML / JS / CSS +
PHPʣΛ֮͑Α͏ • After • ςʔϚͷ࡞Γํ (HTML / JS / CSS + PHP) • FSEͷ࡞Γํ (HTML / JS / CSS + JSON and PHP) • Headless WPͰͷ࡞Γํ (JS, and JavaScript and JS)
😓
Agenda • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొͱࠞཚ •ݪճؼ -
ͦͷΣϒαΠτԿͷͨΊʁ
ͦͷαΠτɾΞϓϦ ͳΜͷͨΊʹ࡞ͬͯΔʁ
WordPress is a publishing platform
ͳʹΛ͍͍͔ͨʁ ͡Όͳ͘ ͳʹΛൃ৴͍͔ͨ͠ʁ
Γ͍ͨ͜ͱ͔Βɺखஈ͕બΔ • ͍ΖΜͳSaaSAPIΛ࿈ܞͤͨ͞େنγεςϜ • Headless WordPressͰWPΛ̍APIαʔϏεʹ͢Δ • ࠓ͙͢ίϯςϯπͷ৴௨ൢΛ࢝Ί͍ͨ • FSE͞Ε͍ͯΔςʔϚͰखૣ͘αΠτߏங
• WPͷ੍࡞ձࣾͰಇ͘ɾεΩϧΞοϓ͍ͨ͠ • ࠓ·ͰͷςʔϚ੍࡞ख๏Λ·֮ͣ͑Α͏
ͳʹ͕Γ͍͔ͨɺΘ͔Βͳ͍ • ͍ΖΜͳਓͷΛฉ͜͏ • WordPress Meetup • WordCamp • WordPressҎ֎ͷϢʔβʔίϛϡχςΟ(JP_Stripesͱ͔)
• ͦͷਓͷܦݧஊΛɺࣗͷܦݧͱॏͶͯΈΔ • ʮࠓ͕ࣗΔͳΒɺͲ͏ΔͩΖ͏ʁʯ
None
Thanks! • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొͱࠞཚ • ݪճؼ
- ͦͷΣϒαΠτԿͷͨΊʁ
Thanks…? • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొͱࠞཚ • ݪճؼ
- ͦͷΣϒαΠτԿͷͨΊʁ •࠷ۙؾʹͳͬͯΔOSSΛͻͨ͢Βհ
Faust.js - Next.jsͱWPΛ࿈ܞ͢ΔͨΊͷJS FW
Use-shopping-cart: Stripe + ReactͰΧʔτػೳ
Capacitor: UI FWґଘͳ͠ͷΫϩεPFରԠFW
Vivliostyle: CSSͰॻ੶ͷ൛
Hydrogen: ShopifyΛͬͨECΛReactͰ
Stencil: Web Component͍͍ͧ
·ͩ༨ͬͨͷͰɺ Ճઆ໌ͷͨΊʹ Γ·͢