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
600
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
86
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.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
Obsidian応用活用術
onikun94
1
440
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
420
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
160
エラーとアクセシビリティ
schktjm
1
1.2k
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.5k
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
210
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
Skrub: machine-learning with dataframes
gaelvaroquaux
0
120
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.5k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
A designer walks into a library…
pauljervisheath
207
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Building an army of robots
kneath
306
46k
Automating Front-end Workflow
addyosmani
1370
200k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
How GitHub (no longer) Works
holman
315
140k
A better future with KSS
kneath
239
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
BBQ
matthewcrist
89
9.8k
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͍͍ͧ
·ͩ༨ͬͨͷͰɺ Ճઆ໌ͷͨΊʹ Γ·͢