REST API な WordPress テーマについて考える。

REST API な WordPress テーマについて考える。

E03953e0c18d776fead147601fdc3899?s=128

Toro_Unit (Hiroshi Urabe)

September 03, 2017
Tweet

Transcript

  1. REST API ͳ WordPress ςʔϚʹͭ ͍ͯߟ͑Δɻ Toro_Unit @2017.09.03/RESTࡇΓ 1

  2. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) ϑϦʔϥϯε Frontend Engineer / Web

    Designer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 2
  3. Plugin and Theme Developer. • Custom Post Type Permalinks •

    Vanilla • and more... 3
  4. Contribution • WordBench ௕໺ ϞσϨʔλʔ • WordCamp Kyoto 2017 ࣮ߦҕһ

    • VCCW Team • etc... 4
  5. ௕໺ݝদຊࢢ͔Β͓ૹΓ͠· ͢ɻ1 • ϫΠϯ͓͍͍͠Αɻ • ͦΖͦΖڶഴ΋͓͍͍͠Αɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author:

    663highland. License: CC BY 2.5 5
  6. ೔ຊҰඒຯ͍͍͔͕͋͢͠Δͱ͔ແ͍ͱ͔ɻ 6

  7. ຊ೔ͷऴిҊ಺ 7

  8. REST API Λ׆༻ͯ͠ɺWEBαΠτΛ ͭ͘Δɻ 8

  9. 9

  10. 10

  11. 11

  12. طʹ࣮༻Խ͞Ε͍ͯΔέʔε͸͚ͬ͜ ͏͋Δɻ 12

  13. 13

  14. • ಠཱͨ͠ΞϓϦέʔγϣϯ͕ɺWordPressΛόοΫΤϯυͱ ͯ͠ѻ͏ɻ • WordPressͷ໾ׂ = σʔλ؅ཧٴͼɺJSONͰͷσʔλग़ ྗɻ 14

  15. WordPressͷςʔϚͰ΋࣮ݱͰ͖ͳ͍ ͩΖ͏͔ʁ 15

  16. • WordPressͷςʔϚͰ΋ϦονͳϢʔβʔମݧ • ϦονͳϖʔδભҠɻ • ϦΞϧλΠϜͳσʔλߋ৽ɻ • REST API Λ׆༻͢Δ͜ͱͰɺPWA౳΁ͷରԠ΋εϜʔζʹɻ

    • ΦϑϥΠϯϑΝʔετͷ࣮ݱɻ • طଘͷWordPress͔ΒͷҠߦɻ • ϓϨϏϡʔͰαΠτͷݟͨ໨Λ֬ೝɻ 16
  17. 17

  18. ೉͍͠ͱ͸ݴΘΕ͍ͯΔɻ ςʔϚͷ৔߹͸ϧʔςΟϯάͳͲɺWordPressͰߦ͍ͬͯΔ͜ͱ Λ࡞Γ௚͢ඞཁ͕͋ΓɺͪΐͬͱτϦοΩʔͱίϝϯτɻ ΠϕϯτϨϙʔτɿWordPress Meetup Tokyo #34 - AMA Session

    with Joe Hoyle and Bryce Adams - Capital P 18
  19. Wallace Wallace WordPress Theme • A next-generation* WordPress theme built

    with the Rest API and Angular 19
  20. ࣗ෼΋΍ͬͯΈͨɻ 20

  21. torounit/vuepress 21

  22. DEMO 22

  23. 23

  24. Ͱ͖ͯΔ! 24

  25. ͦΜͳʹ؁͘ͳ͍ɻ ՝୊͕ࢁੵΈɻ 25

  26. URLͷύʔεʹ͍ͭͯ 26

  27. • WEBαΠτ͸ඞͣ͠΋TOPϖʔδ͔ΒΞΫηε͞ΕΔΘ͚Ͱ ͸ͳ͍ɻ • URL͔Βදࣔ͢Δίϯςϯπɺঢ়ଶʢهࣄϖʔδʁΧςΰϦ ʔʁʣΛݕࡧ͢Δඞཁ͕͋Δɻ • ͦͯ͠ύʔϚϦϯΫ͸؅ཧը໘͔Βࣗ༝ʹઃఆՄೳ!!! 27

  28. Vue Router Λ࢖͏έʔεɻ URLͷύεϕʔεɻ 28

  29. Category, Tag, Date λΫιϊϛʔ͸ɺURLͷϕʔεɺ/category/, /tag/ Λ WordPress͔Β౉͢ɻ ೔෇ϕʔεͷURL͸ɺURLߏ଄Λ WP_Rewrite::get_date_permastruct ͔ΒऔಘɻJSʹ౉͠ਖ਼

    نදݱʹม׵ɻ 29
  30. WordPress͔ΒJSʹ஋Λ౉͢ wp_localize_script Λ࢖͑͹ग़དྷΔɻʢຊདྷͷ࢖༻๏ͱ͸ͣ ΕΔؾ΋͢Δ͚Ͳʣ wp_localize_script( 'vuepress-script', 'WPSettings', [ 'root' =>

    esc_url_raw( rest_url() ), 'nonce' => wp_create_nonce( 'wp_rest' ), 'date_permastruct' => $wp_rewrite->get_date_permastruct(), 'page_on_front' => get_option('page_on_front'), 'page_for_posts' => get_option('page_for_posts'), 'category_base' => get_option('category_base') ? get_option('category_base') : 'category', 'tag_base' => get_option('tag_base') ? get_option('tag_base') : 'tag' ] ); 30
  31. ౤ߘܥ 31

  32. http://example.com/sample-page/ (ݻఆϖʔδ) http://example.com/hello-world/ (౤ߘ) ΛͲ͏΍ͬͯ۠ผ͢Δʁ 32

  33. ࠓճ͸ɻ 1. /wp-json/vuepress/v1/post/<URL> ͱ͍͏APIΛ࡞੒ɻ 2. category, tag, date, ౳ͷ৚݅ʹϚον͠ͳ͔ͬͨશͯͷURL Λ͜ͷAPIʹ౤͛Δɻ

    3. url_to_postid ͰURL͔Β postID Λݕࡧ 4. get_post Ͱ౤ߘσʔλΛऔಘ͠ฦ٫ɻ 33
  34. add_action( 'rest_api_init', function () { register_rest_route( 'vuepress/v1', '/post/(?P<url>.*)', array( 'methods'

    => 'GET', 'callback' => function ( $request ) { $post_id = url_to_postid( $request['url'] ); if ( ! $post_id ) { return []; } $post = get_post( $post_id ); $post_type = get_post_type_object( $post->post_type ); $request['id'] = $post_id; $response = new WP_REST_Posts_Controller( $post->post_type ); return $response->get_item( $request ); } ) ); } ); 34
  35. ͳ͔ͳ͔ແཧ໼ཧͳ࣮૷ɻ 35

  36. ͔͜͠͠ΕͰ΋଍Γͳ͍ɻ 36

  37. σϑΥϧτͷ WordPressʹ౥ࡌ͞ ΕΔRewrite Rule͸ ໿90ݸ 37

  38. "Clean URL"Ͱͳ͍URL΁ͷରԠ • /?s=hoge /search/hoge ͱ౳ՁͰ͋Δ͕ϦμΠϨΫτ͞Εͳ͍!!! • /?cat=1 ͸ϦμΠϨΫτ͞ΕΔ͕ɺ/?cat=1&cat=2 •

    /?p=123౳ͷɺ"Clean URL"Λ࢖༻͍ͯ͠ͳ͍έʔεɻ • ৽ن౤ߘͷϓϨϏϡʔ͸ɺ/?p=123&preview=true ܗࣜʹͳΔɻ • URL ͔Β /caregory/ Λফ͍ͨ͠ͱ͔͍͏ෆಧ͖ऀ΋ଟ͍ 38
  39. Ͳ͏͠Α͏ʁ • WP_Rewirte / WPΫϥεͷ Α͏ͳϞϊΛJavaScriptͰ࠶࣮૷ ͢Δʁ • ͦ΋ͦ΋΋ͬͱΑ͍Ξϓϩʔν͕͋Δʁ 39

  40. Let's think together 40

  41. Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 41