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

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
12. طʹ࣮༻Խ͞Ε͍ͯΔέʔε͸͚ͬ͜ ͏͋Δɻ 12
14. • ಠཱͨ͠ΞϓϦέʔγϣϯ͕ɺWordPressΛόοΫΤϯυͱ ͯ͠ѻ͏ɻ • WordPressͷ໾ׂ = σʔλ؅ཧٴͼɺJSONͰͷσʔλग़ ྗɻ 14
15. WordPressͷςʔϚͰ΋࣮ݱͰ͖ͳ͍ ͩΖ͏͔ʁ 15
16. • WordPressͷςʔϚͰ΋ϦονͳϢʔβʔମݧ • ϦονͳϖʔδભҠɻ • ϦΞϧλΠϜͳσʔλߋ৽ɻ • REST API Λ׆༻͢Δ͜ͱͰɺPWA౳΁ͷରԠ΋εϜʔζʹɻ • ΦϑϥΠϯϑΝʔετͷ࣮ݱɻ • طଘͷWordPress͔ΒͷҠߦɻ • ϓϨϏϡʔͰαΠτͷݟͨ໨Λ֬ೝɻ 16
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
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