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

NGK2022S でのLT資料です。

Transcript

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

   View Slide

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

   View Slide

3. 2021/12ʹStripeʹδϣΠϯ͠·ͨ͠
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. FSE (Full Site Editing | ϑϧαΠτฤू)
    • αΠτͷݟͨ໨͢΂ͯΛϒϩοΫͰߏங͢Δ࢓૊Έ
    
    
    • WordPress 5.9 (ݱࡏRC)Ͱར༻ՄೳʹͳΔ
    
    
    • ϨΠΞ΢τཁૉʢϔομʔɾϑολʔʣ΍
    

    هࣄҰཡͷઃఆͳͲΛ؅ཧը໘͔ΒΑΓॊೈʹฤूͰ͖Δ
    
    
    • ͜Ε·ͰͷςʔϚͱ࡞Γํ͕ࠜຊతʹมΘΔͨΊɺ
    

    ͍·ͷͱ͜Ζ੾Γସ͑͸೉қ౓͕ߴ͍
    

    View Slide

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

    View Slide

17. View Slide

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)
    

    View Slide

19. 😓
    

    View Slide

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

    View Slide

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

    View Slide

22. WordPress is a
    
    
    publishing platform
    

    View Slide

23. ͳʹΛ࢖͍͍͔ͨʁ
    
    
    ͡Όͳ͘
    
    
    ͳʹΛൃ৴͍͔ͨ͠ʁ
    

    View Slide

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

    View Slide

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

    View Slide

26. View Slide

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

    View Slide

28. Thanks…?
    • ͜Ε·ͰͷWordPressαΠτ੍࡞
    
    
    • Headless WP / FSEͷొ৔ͱࠞཚ
    
    
    • ݪ఺ճؼ - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ
    
    
    •࠷ۙؾʹͳͬͯΔOSSΛͻͨ͢Β঺հ
    

    View Slide

29. Faust.js - Next.jsͱWPΛ࿈ܞ͢ΔͨΊͷJS FW
    

    View Slide

30. Use-shopping-cart: Stripe + ReactͰΧʔτػೳ
    

    View Slide

31. Capacitor: UI FWґଘͳ͠ͷΫϩεPFରԠFW
    

    View Slide

32. Vivliostyle: CSSͰॻ੶ͷ૊൛
    

    View Slide

33. Hydrogen: ShopifyΛ࢖ͬͨECΛReactͰ
    

    View Slide

34. Stencil: Web Component͸͍͍ͧ
    

    View Slide

35. ·ͩ༨ͬͨͷͰɺ
    
    
    ௥Ճઆ໌ͷͨΊʹ
    
    
    ໭Γ·͢
    

    View Slide