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
430
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
570
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
79
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
330
Jamstack開発者のための App Runner入門
hideokamoto
1
480
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4.2k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
190
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.8k
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
本が全く読めなかった過去の自分へ
genshun9
0
710
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.2k
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
170
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
1
170
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
380
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
解析の定理証明実践@Lean 4
dec9ue
1
200
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
140
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.3k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
0
130
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
310
怖くない!はじめてのClaude Code
shinya337
0
300
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Designing for Performance
lara
609
69k
Rails Girls Zürich Keynote
gr2m
94
14k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Why Our Code Smells
bkeepers
PRO
337
57k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
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͍͍ͧ
·ͩ༨ͬͨͷͰɺ Ճઆ໌ͷͨΊʹ Γ·͢