$30 off During Our Annual Pro Sale. View Details »

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

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

NGK2022S でのLT資料です。

Hidetaka Okamoto
PRO

January 22, 2022
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Technology

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"} /-->
  17. None
  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ͱ͔)

    • ͦͷਓͷܦݧஊΛɺࣗ෼ͷܦݧͱॏͶͯΈΔ • ʮࠓࣗ෼͕΍ΔͳΒɺͲ͏΍ΔͩΖ͏ʁʯ
  26. None
  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. ·ͩ༨ͬͨͷͰɺ ௥Ճઆ໌ͷͨΊʹ ໭Γ·͢