WordPressでの webサイト制作2022 / ngk2022s

Slide 1

Slide 1 text

WordPressͰͷ webαΠτ੍࡞2022 NGK2022S Hidetaka Okamoto 2022/1/22

Slide 2

Slide 2 text

Ԭຊलߴ @hide__dev • Stripe Developer Advocate • JS / TS Developer • AWS / Next.js / Serverless / shopify / … • 🐈

Slide 3

Slide 3 text

2021/12ʹStripeʹδϣΠϯ͠·ͨ͠

Slide 4

Slide 4 text

Agenda • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొ৔ͱࠞཚ • ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ

Slide 5

Slide 5 text

Agenda •͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొ৔ͱࠞཚ • ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ

Slide 6

Slide 6 text

https://developer.wordpress.org/themes/basics/template-hierarchy/

Slide 7

Slide 7 text

PHPͰHTMLΛඳը ', '' ); the_post_thumbnail(); the_excerpt(); endwhile; else: _e( 'Sorry, no posts matched your criteria.', 'textdomain' ); endif; ?>

Slide 8

Slide 8 text

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' );

Slide 9

Slide 9 text

هࣄ/ϖʔδ͸ϒϩοΫΛ૊Έ߹Θͤͯ࡞੒

Slide 10

Slide 10 text

ࠃ࢈ʢ೔ຊޠϑϨϯυϦʔʣςʔϚ੡࡞ऀͷ૿Ճ

Slide 11

Slide 11 text

WordPressͷू߹஌ • ॻ੶ɾηϛφʔɾϒϩά • ίϛϡχςΟɾϑΥʔϥϜ • ϢʔβʔΧϯϑΝϨϯε • ެ։͞Εͨίʔυ -> ʮू߹஌ʯͱ͍͏ڊਓͷݞʹ͍͔ʹ͏·͘৐ΕΔ͔ʁ

Slide 12

Slide 12 text

Agenda • ͜Ε·ͰͷWordPressαΠτ੍࡞ •Headless WP / FSEͷొ৔ͱࠞཚ • ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ

Slide 13

Slide 13 text

Headless WordPress (Jamstack / etc..) • ʮWordPressςʔϚʯΛ࢖ΘͣʹϑϩϯτΤϯυΛ࣮૷͢Δ • WordPressσʔλ͸APIܦ༝Ͱऔಘ • ؔ৺ɾ੹೚ͷ෼཭͕ՄೳʹͳΔ • هࣄ؅ཧ͸WordPressͰैདྷ௨Γ • αΠτͷ࣮૷͸೚ҙͷٕज़ελοΫΛ࢖͏

Slide 14

Slide 14 text

ࣄྫ&ղઆهࣄ: necco (WP + Next.js) https://necco.co/note/7952

Slide 15

Slide 15 text

FSE (Full Site Editing | ϑϧαΠτฤू) • αΠτͷݟͨ໨͢΂ͯΛϒϩοΫͰߏங͢Δ࢓૊Έ • WordPress 5.9 (ݱࡏRC)Ͱར༻ՄೳʹͳΔ • ϨΠΞ΢τཁૉʢϔομʔɾϑολʔʣ΍   هࣄҰཡͷઃఆͳͲΛ؅ཧը໘͔ΒΑΓॊೈʹฤूͰ͖Δ • ͜Ε·ͰͷςʔϚͱ࡞Γํ͕ࠜຊతʹมΘΔͨΊɺ   ͍·ͷͱ͜Ζ੾Γସ͑͸೉қ౓͕ߴ͍

Slide 16

Slide 16 text

index.html (index.phpͰ͸ͳ͍)

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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)

Slide 19

Slide 19 text

😓

Slide 20

Slide 20 text

Agenda • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొ৔ͱࠞཚ •ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ

Slide 21

Slide 21 text

ͦͷαΠτɾΞϓϦ͸ ͳΜͷͨΊʹ࡞ͬͯΔʁ

Slide 22

Slide 22 text

WordPress is a publishing platform

Slide 23

Slide 23 text

ͳʹΛ࢖͍͍͔ͨʁ ͡Όͳ͘ ͳʹΛൃ৴͍͔ͨ͠ʁ

Slide 24

Slide 24 text

΍Γ͍ͨ͜ͱ͔Βɺखஈ͕બ΂Δ • ͍ΖΜͳSaaS΍APIΛ࿈ܞͤͨ͞େن໛γεςϜ • Headless WordPressͰWPΛ̍APIαʔϏεʹ͢Δ • ࠓ͙͢ίϯςϯπͷ഑৴΍௨ൢΛ࢝Ί͍ͨ • FSE΍഑෍͞Ε͍ͯΔςʔϚͰखૣ͘αΠτߏங • WPͷ੍࡞ձࣾͰಇ͘ɾεΩϧΞοϓ͍ͨ͠ • ࠓ·ͰͷςʔϚ੍࡞ख๏Λ·ͣ͸֮͑Α͏

Slide 25

Slide 25 text

ͳʹ͕΍Γ͍͔ͨɺΘ͔Βͳ͍ • ͍ΖΜͳਓͷ࿩Λฉ͜͏ • WordPress Meetup • WordCamp • WordPressҎ֎ͷϢʔβʔίϛϡχςΟ(JP_Stripesͱ͔) • ͦͷਓͷܦݧஊΛɺࣗ෼ͷܦݧͱॏͶͯΈΔ • ʮࠓࣗ෼͕΍ΔͳΒɺͲ͏΍ΔͩΖ͏ʁʯ

Slide 26

Slide 26 text