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
400
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
490
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
59
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
280
Jamstack開発者のための App Runner入門
hideokamoto
1
440
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4.1k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
170
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.7k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
3k
後付けで 従量課金プランの 提供を開始した話 / 20210609-jp_stripes
hideokamoto
0
190
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile for engineer
hr01
1
18k
完全自律型AIエージェントとAgentic Workflow〜ワークフロー構築という現実解
pharma_x_tech
0
330
今年一年で頑張ること / What I will do my best this year
pauli
1
220
Visual StudioとかIDE関連小ネタ話
kosmosebi
1
370
実践! ソフトウェアエンジニアリングの価値の計測 ── Effort、Output、Outcome、Impact
nomuson
0
2k
RubyでKubernetesプログラミング
sat
PRO
4
160
【JAWS-UG大阪 reInvent reCap LT大会 サンバが始まったら強制終了】“1分”で初めてのソロ参戦reInventを数字で振り返りながら反省する
ttelltte
0
130
Kotlin Multiplatformのポテンシャル
recruitengineers
PRO
2
150
カップ麺の待ち時間(3分)でわかるPartyRockアップデート
ryutakondo
0
130
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
240
2025年のARグラスの潮流
kotauchisunsun
0
790
[IBM TechXchange Dojo]Watson Discoveryとwatsonx.aiでRAGを実現!座学①
siyuanzh09
0
110
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Music & Morning Musume
bryan
46
6.3k
Unsuck your backbone
ammeep
669
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Statistics for Hackers
jakevdp
797
220k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
We Have a Design System, Now What?
morganepeng
51
7.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
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͍͍ͧ
·ͩ༨ͬͨͷͰɺ Ճઆ໌ͷͨΊʹ Γ·͢