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

NGK2022S でのLT資料です。

Transcript

1. WordPressͰͷ webαΠτ੍࡞2022 NGK2022S Hidetaka Okamoto 2022/1/22
2. Ԭຊलߴ @hide__dev • Stripe Developer Advocate • JS / TS Developer • AWS / Next.js / Serverless / shopify / … • 🐈
3. 2021/12ʹStripeʹδϣΠϯ͠·ͨ͠
4. Agenda • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొ৔ͱࠞཚ • ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ
5. Agenda •͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొ৔ͱࠞཚ • ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ
6. https://developer.wordpress.org/themes/basics/template-hierarchy/
7. 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; ?>
8. 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' );
9. هࣄ/ϖʔδ͸ϒϩοΫΛ૊Έ߹Θͤͯ࡞੒
10. ࠃ࢈ʢ೔ຊޠϑϨϯυϦʔʣςʔϚ੡࡞ऀͷ૿Ճ
11. WordPressͷू߹஌ • ॻ੶ɾηϛφʔɾϒϩά • ίϛϡχςΟɾϑΥʔϥϜ • ϢʔβʔΧϯϑΝϨϯε • ެ։͞Εͨίʔυ -> ʮू߹஌ʯͱ͍͏ڊਓͷݞʹ͍͔ʹ͏·͘৐ΕΔ͔ʁ
12. Agenda • ͜Ε·ͰͷWordPressαΠτ੍࡞ •Headless WP / FSEͷొ৔ͱࠞཚ • ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ
13. Headless WordPress (Jamstack / etc..) • ʮWordPressςʔϚʯΛ࢖ΘͣʹϑϩϯτΤϯυΛ࣮૷͢Δ • WordPressσʔλ͸APIܦ༝Ͱऔಘ • ؔ৺ɾ੹೚ͷ෼཭͕ՄೳʹͳΔ • هࣄ؅ཧ͸WordPressͰैདྷ௨Γ • αΠτͷ࣮૷͸೚ҙͷٕज़ελοΫΛ࢖͏
14. ࣄྫ&ղઆهࣄ: necco (WP + Next.js) https://necco.co/note/7952
15. FSE (Full Site Editing | ϑϧαΠτฤू) • αΠτͷݟͨ໨͢΂ͯΛϒϩοΫͰߏங͢Δ࢓૊Έ • WordPress 5.9 (ݱࡏRC)Ͱར༻ՄೳʹͳΔ • ϨΠΞ΢τཁૉʢϔομʔɾϑολʔʣ΍ 
 هࣄҰཡͷઃఆͳͲΛ؅ཧը໘͔ΒΑΓॊೈʹฤूͰ͖Δ • ͜Ε·ͰͷςʔϚͱ࡞Γํ͕ࠜຊతʹมΘΔͨΊɺ 
 ͍·ͷͱ͜Ζ੾Γସ͑͸೉қ౓͕ߴ͍
16. 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"} /-->
18. 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)
19. 😓
20. Agenda • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొ৔ͱࠞཚ •ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ
21. ͦͷαΠτɾΞϓϦ͸ ͳΜͷͨΊʹ࡞ͬͯΔʁ
22. WordPress is a publishing platform
23. ͳʹΛ࢖͍͍͔ͨʁ ͡Όͳ͘ ͳʹΛൃ৴͍͔ͨ͠ʁ
24. ΍Γ͍ͨ͜ͱ͔Βɺखஈ͕બ΂Δ • ͍ΖΜͳSaaS΍APIΛ࿈ܞͤͨ͞େن໛γεςϜ • Headless WordPressͰWPΛ̍APIαʔϏεʹ͢Δ • ࠓ͙͢ίϯςϯπͷ഑৴΍௨ൢΛ࢝Ί͍ͨ • FSE΍഑෍͞Ε͍ͯΔςʔϚͰखૣ͘αΠτߏங • WPͷ੍࡞ձࣾͰಇ͘ɾεΩϧΞοϓ͍ͨ͠ • ࠓ·ͰͷςʔϚ੍࡞ख๏Λ·ͣ͸֮͑Α͏
25. ͳʹ͕΍Γ͍͔ͨɺΘ͔Βͳ͍ • ͍ΖΜͳਓͷ࿩Λฉ͜͏ • WordPress Meetup • WordCamp • WordPressҎ֎ͷϢʔβʔίϛϡχςΟ(JP_Stripesͱ͔) • ͦͷਓͷܦݧஊΛɺࣗ෼ͷܦݧͱॏͶͯΈΔ • ʮࠓࣗ෼͕΍ΔͳΒɺͲ͏΍ΔͩΖ͏ʁʯ
27. Thanks! • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొ৔ͱࠞཚ • ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ
28. Thanks…? • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొ৔ͱࠞཚ • ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ •࠷ۙؾʹͳͬͯΔOSSΛͻͨ͢Β঺հ
29. Faust.js - Next.jsͱWPΛ࿈ܞ͢ΔͨΊͷJS FW
30. Use-shopping-cart: Stripe + ReactͰΧʔτػೳ
31. Capacitor: UI FWґଘͳ͠ͷΫϩεPFରԠFW
32. Vivliostyle: CSSͰॻ੶ͷ૊൛
33. Hydrogen: ShopifyΛ࢖ͬͨECΛReactͰ
34. Stencil: Web Component͸͍͍ͧ
35. ·ͩ༨ͬͨͷͰɺ ௥Ճઆ໌ͷͨΊʹ ໭Γ·͢