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

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

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

NGK2022S でのLT資料です。

Hidetaka Okamoto

January 22, 2022
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Technology

Transcript

  1. Ԭຊलߴ @hide__dev • Stripe Developer Advocate • JS / TS

    Developer • AWS / Next.js / Serverless / shopify / … • 🐈
  2. 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; ?>
  3. 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' );
  4. Headless WordPress (Jamstack / etc..) • ʮWordPressςʔϚʯΛ࢖ΘͣʹϑϩϯτΤϯυΛ࣮૷͢Δ • WordPressσʔλ͸APIܦ༝Ͱऔಘ •

    ؔ৺ɾ੹೚ͷ෼཭͕ՄೳʹͳΔ • هࣄ؅ཧ͸WordPressͰैདྷ௨Γ • αΠτͷ࣮૷͸೚ҙͷٕज़ελοΫΛ࢖͏
  5. FSE (Full Site Editing | ϑϧαΠτฤू) • αΠτͷݟͨ໨͢΂ͯΛϒϩοΫͰߏங͢Δ࢓૊Έ • WordPress

    5.9 (ݱࡏRC)Ͱར༻ՄೳʹͳΔ • ϨΠΞ΢τཁૉʢϔομʔɾϑολʔʣ΍ 
 هࣄҰཡͷઃఆͳͲΛ؅ཧը໘͔ΒΑΓॊೈʹฤूͰ͖Δ • ͜Ε·ͰͷςʔϚͱ࡞Γํ͕ࠜຊతʹมΘΔͨΊɺ 
 ͍·ͷͱ͜Ζ੾Γସ͑͸೉қ౓͕ߴ͍
  6. 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"} /-->
  7. 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)
  8. Thanks…? • ͜Ε·ͰͷWordPressαΠτ੍࡞ • Headless WP / FSEͷొ৔ͱࠞཚ • ݪ఺ճؼ

    - ͦͷ΢ΣϒαΠτ͸ԿͷͨΊʁ •࠷ۙؾʹͳͬͯΔOSSΛͻͨ͢Β঺հ