Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    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