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
440
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
610
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
88
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
340
Jamstack開発者のための App Runner入門
hideokamoto
1
490
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4.2k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
200
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.9k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
3.2k
後付けで 従量課金プランの 提供を開始した話 / 20210609-jp_stripes
hideokamoto
0
210
Other Decks in Technology
See All in Technology
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
250
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.2k
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
0
120
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
140
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
970
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
870
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
130
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
170
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
520
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
The Invisible Side of Design
smashingmag
301
51k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Building Adaptive Systems
keathley
43
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
How to Think Like a Performance Engineer
csswizardry
27
2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Into the Great Unknown - MozCon
thekraken
40
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Unsuck your backbone
ammeep
671
58k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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͍͍ͧ
·ͩ༨ͬͨͷͰɺ Ճઆ໌ͷͨΊʹ Γ·͢