Power บล็อกโดยใช้ WordPress API

ในช่วงไม่กี่ปีที่ผ่านมาการพัฒนาของส่วนที่เหลือ API สำหรับ WordPress ได้เปิดประตูใหม่สำหรับนักพัฒนา นักพัฒนาที่เคย จำกัด การเขียนโครงการ WordPress ที่ขับเคลื่อนด้วย PHP ตอนนี้มีความยืดหยุ่นและควบคุมได้มากขึ้นว่าพวกเขาสามารถเข้าหาเทคโนโลยีสแต็กของเว็บไซต์ของพวกเขาเป็นอย่างไร

ซึ่งหมายความว่าเป็นไปได้ที่จะรักษาข้อได้เปรียบทั้งหมดของแผงควบคุม WordPress ที่ยอดเยี่ยมซึ่งมีความยืดหยุ่นอย่างมากจากยอดนิยม ปลั๊กอิน WordPress เช่นฟิลด์ที่กำหนดเองขั้นสูงและมีการสร้างส่วนหน้าที่กำหนดเองอย่างสมบูรณ์ที่มีปฏิสัมพันธ์กับ WordPress เมื่อต้องการ

• ดาวน์โหลดไฟล์การสอน

ในเรื่องนี้ บทช่วยสอน WordPress เราจะสำรวจวิธีการใช้ WordPress REST API เป็นแอปบล็อกที่เรียบง่ายซึ่งปัจจุบันใช้ไฟล์ JSON ในเครื่องเป็นแหล่งข้อมูลและสร้างขึ้นเป็นแอปพลิเคชันหน้าเดียว (SPA) โดยใช้ JavaScript Framework ยอดนิยม vue.js . สิ่งนี้จะเกี่ยวข้องกับการดำเนินการตาม VUEX ซึ่งเราจะใช้ในการจัดเก็บข้อมูลที่เราขอจาก WordPress โดยใช้วิธีการการกระทำและวิธีการกลายพันธุ์

เมื่อเสร็จแล้วคุณควรสร้างสปาแบบลีนง่ายซึ่งมีปฏิกิริยาทั้งหมดของ Vue.js ในขณะที่แสดงโพสต์ที่ดึงมาจากและจัดการโดย WordPress

สำหรับ Apis ที่ยอดเยี่ยมในการสำรวจดูคำแนะนำของเราที่ดีที่สุด จาวาสคริปต์ apis , apis html และ Google Apis .

01. ตั้งค่าพื้นที่ทำงานและการพึ่งพา

สิ่งแรกก่อนคุณควร ดาวน์โหลดไฟล์ของโครงการ และเปิดพวกเขาในบรรณาธิการที่คุณต้องการ

ในคอนโซลซีดีเป็น แม่แบบเว็บไซต์ และเรียกใช้คำสั่งด้านล่างเพื่อติดตั้งการอ้างอิงโหนดของโครงการ (หากคุณไม่มีการติดตั้งโหนด ทำอย่างนั้นก่อน . เราจะทำงานอย่างหมดจดใน src ไดเรกทอรีจากที่นี่เปิดออก

npm install

02. ติดตั้ง VUEX

ถัดไปโดยใช้คำสั่งด้านล่างเราจะติดตั้ง วิค ซึ่งเป็นรูปแบบการจัดการของรัฐและไลบรารีสำหรับแอปพลิเคชัน Vue.js สิ่งนี้จะทำหน้าที่เป็นแหล่งข้อมูลส่วนกลางสำหรับส่วนประกอบ Vue ทั้งหมดที่ขึ้นอยู่กับข้อมูลที่เราได้รับจาก WordPress API สำหรับนักพัฒนาที่คุ้นเคยกับการตอบสนอง VUEX ได้รับแรงบันดาลใจอย่างมากจากฟลักซ์

npm install vuex --save

03. เริ่มต้นเซิร์ฟเวอร์การพัฒนา

ในคอนโซลให้รันคำสั่งด้านล่างเพื่อเริ่มเซิร์ฟเวอร์การพัฒนา สิ่งนี้จะรวบรวมโครงการ Vue.JS ตามที่อยู่ในปัจจุบันและกำหนดให้กับ URL เพื่อให้คุณสามารถเข้าถึงได้ นี่คือมักจะ localhost: 8080 .

ข้อได้เปรียบที่ยิ่งใหญ่หนึ่งข้อนี้นำมาใช้ใหม่คือการโหลดซ้ำดังนั้นเมื่อคุณทำการเปลี่ยนแปลงแอปและบันทึกหน้าในเบราว์เซอร์ของคุณจะอัปเดตตัวเองโดยไม่จำเป็นต้องโหลดซ้ำด้วยตนเอง

npm run dev

04. สร้างร้านค้า VUEX

ใน src สร้างไดเรกทอรีที่เรียกว่า เก็บ และภายในไฟล์ใหม่ที่เรียกว่า index.js . นี่จะเป็นที่ที่ร้าน VUEX ของเราจะถูกกำหนดไว้ แม้ว่าก่อนที่เราจะไปถึงที่เราต้องทำให้แน่ใจว่าแอป Vue.js ของเราตระหนักถึงการดำรงอยู่ของมัน ทำสิ่งนี้ให้เปิด main.js และนำเข้าร้านค้าและรวมถึงการพึ่งพาเช่นเดียวกับในตัวอย่างด้านล่าง

 นำเข้า Vue จาก 'Vue'
นำเข้าแอปจาก './app'
นำเข้าเราเตอร์จาก './Router'
นำเข้าร้านค้าจาก './store'
vue.config.productiontip = false
/ * ESLINT ปิดการใช้งาน NO-New * /
ใหม่ vue ({
  El: '#app',
  เราเตอร์
  เก็บ,
  แม่แบบ: '& lt; app / & gt;',
  ส่วนประกอบ: {app}
}) 

05. สร้างร้านค้านั่งร้านและติดตั้ง axios

เพื่อช่วยให้เราง่ายขึ้นคำขอ AJAX ที่ร้านของเราจะทำกับ WordPress API เราจะติดตั้ง Axios ซึ่งเป็นไคลเอนต์ http ตามสัญญา ในการทำเช่นนี้ให้เปิดหน้าต่างคอนโซลแยกออกไปที่ แม่แบบเว็บไซต์ ไดเรกทอรีและเรียกใช้ NPM ติดตั้ง Axios - บันทึก .

ต่อไปเราเริ่มนั่งร้านร้านค้าโดยทันทีด้วยอ็อบเจ็กต์ร้านค้า VUEX ที่ว่างเปล่าใหม่ ในขณะนี้มันไม่ได้ทำอะไรเลย แต่อย่างน้อยก็ควรระวัง

 นำเข้า Axios จาก 'axios'
นำเข้า Vue จาก 'Vue'
นำเข้า VUEX จาก 'VUEX'
vue.use (vuex)
Const Store = New Vuex.store ({
  สถานะ: {},
  การกระทำ: {},
  การกลายพันธุ์: {}
})
ส่งออกร้านค้าเริ่มต้น 

06. สร้างโพสต์สถานะ

ใน VUEX วัตถุของรัฐเก็บข้อมูลแอปพลิเคชันซึ่งในกรณีนี้จะเป็นข้อมูลโพสต์ WordPress เราจะคว้าโดยใช้ API ภายในวัตถุนี้สร้างอสังหาริมทรัพย์ใหม่ที่เรียกว่าโพสต์และกำหนดค่า null

 สถานะ: {
  กระทู้: null
} 

07. สร้างการกระทำ GetPosts

ใน VUEX การกระทำเป็นวิธีหลักที่การร้องขอแบบอะซิงโครนัสได้รับการจัดการ สิ่งเหล่านี้เป็นวิธีการที่กำหนดไว้ในร้านซึ่งสามารถส่งได้ตามที่แอปต้องการ

ในที่ว่างเปล่า การกระทำ วัตถุเรามานิยามหนึ่งตำแหน่งที่ว่าโพสต์สถานะของเรายังคงเป็นโมฆะ Axios ใช้เพื่อดำเนินการคำขอ AJAX ไปยัง WordPress API และส่งคืนรายการโพสต์ เมื่อเราได้รับการตอบรับเชิงบวกแล้วเราจะแก้ไขสัญญาและส่งโพสต์โดยใช้ ห้องเก็บของ การกลายพันธุ์.

 GetPosts: ฟังก์ชั่น (บริบท) {
  ส่งคืนสัญญาใหม่ ((แก้ไขปฏิเสธ) = & gt; {
  ถ้า (context.state.posts) {
  แก้ไข ()
  }
  อื่น {
  Axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / โพสต์ ')
  . จากนั้น ((ตอบสนอง) = & gt; {
  context.commit ('storeposts'
  response.data)
  แก้ไข ()
  }). จับ ((ข้อผิดพลาด) = & gt; {
  ปฏิเสธ (ข้อผิดพลาด);
  });
  }
  })
} 

08. สร้างการกลายพันธุ์ของการกลายพันธุ์

แนวคิดอื่นที่แนะนำโดย VUEX คือการกลายพันธุ์ซึ่งเป็นวิธีการที่กำหนดไว้ในร้านค้า การกลายพันธุ์เป็นวิธีเดียวที่จะเปลี่ยนสถานะในร้าน VUEX ซึ่งช่วยให้รัฐสามารถติดตามได้ง่ายเมื่อการดีบัก

ในที่ว่างเปล่า การกลายพันธุ์ วัตถุมานิยาม ห้องเก็บของ วิธีที่เราอ้างอิงในขั้นตอนก่อนหน้านี้และทำให้การแทนที่คุณสมบัติโพสต์ในวัตถุของรัฐที่มีข้อมูลใด ๆ การกลายพันธุ์จะได้รับเป็น PAYLOAD

 ห้องเก็บข้อมูล (รัฐ, การตอบสนอง) {
   state.posts = การตอบสนอง} 

09. ทริกเกอร์ GetPosts การดำเนินการโหลด

เราได้สร้างวิธีการกระทำและวิธีการกลายพันธุ์ที่คว้าโพสต์จาก WordPress API และส่งมอบให้กับรัฐ VUEX แต่ตอนนี้เราต้องเรียกกระบวนการนี้ที่ใดที่หนึ่ง ในส่วนบนสุด Vue.js app.vue เพิ่มตัวอย่างด้านล่าง

สร้าง () เป็นตะขอเกี่ยวกับวงจรชีวิตที่ทริกเกอร์รหัสทันทีที่มีการสร้างส่วนประกอบ Vue ในขณะที่การใช้งานของทั่วโลก $ store ตัวแปรช่วยให้เราสามารถเข้าถึงเนื้อหาของร้านค้า VUEX ของเราและจัดส่ง getposts การกระทำจากขั้นตอนที่ 7

 สร้าง () {
   นี้. $ store.dispatch ('getposts')} 

10. อัปเดตแอตทริบิวต์พา ธ

หากคุณทำงานใน Chrome หรือ Firefox และมี Vue.js Extension DevTools (ถ้าไม่ฉันแนะนำให้คุณทำตามที่มีประโยชน์มาก) ตอนนี้คุณควรจะเห็นโพสต์ WordPress ที่โหลดใน สถานะฐาน ภายใต้ วิค แท็บ

กลับไปที่แอปใน /components/posts/posts.vue แม่แบบ HTML จำเป็นต้องชี้ไปที่ข้อมูลนี้ดังนั้นลองปรับแต่งแอตทริบิวต์สองสามเส้นทาง

 สวิตช์ 'โพสต์.title' เป็น 'post.title.rendered'
 สลับ 'โพสต์รีวิว' เป็น 'post.acf.preview'
 สลับ 'post.previewimage' เป็น 'post.acf.header_image_small' 

11. อัปเดต v-for loop

ในส่วนประกอบโพสต์มีคำสั่ง Vue.js ที่เรียกว่า v-for . ลูปนี้ผ่านโพสต์ทั้งหมดและสำหรับแต่ละคนพิมพ์อินสแตนซ์ของโพสต์คอมโพเนนต์ที่แสดงในรายการ

เราจำเป็นต้องอัปเดตเส้นทางที่ส่งผ่านไปยังคำสั่งนี้เนื่องจากยังคงใช้ข้อมูลการทดสอบ Dummy ท้องถิ่น อัปเดต V-for Directive ไปยังตัวอย่างด้านล่างเพื่อชี้ไปที่โพสต์ที่เก็บไว้ในร้าน VUEX

 v-for = "โพสต์ในนี้ $ store.state.posts" 

12. ทำความสะอาดบางอย่าง

รายการของโพสต์ WordPress ในขณะนี้ควรแสดง ในขณะที่เราไม่ได้ใช้ข้อมูลโพสต์ในท้องถิ่นอีกต่อไปให้ลบ SRC / ข้อมูล . จากนั้นในส่วนประกอบโพสต์ลบ กระทู้: postdata.data คุณสมบัติในส่วนประกอบที่เก็บข้อมูลท้องถิ่นจากนั้นนำเข้า Postdata

13. แก้ไขผู้เขียนโพสต์

คุณอาจสังเกตเห็นว่าสำหรับแต่ละโพสต์ผู้เขียนแสดงเป็นตัวเลข นี่เป็นเพราะ WordPress API ส่งคืนรหัสผู้แต่งแทนที่จะเป็นชื่อ เราจำเป็นต้องใช้ ID นี้เพื่อสืบค้น WordPress สำหรับข้อมูลผู้แต่งเต็ม เริ่มต้นด้วยการสร้างสถานที่เพื่อเก็บสิ่งนี้ในร้าน VUEX ของเราพร้อมกับข้อมูลโพสต์ของเราใน store / index.js .

 สถานะ: {
  ผู้แต่ง: null,
  กระทู้: null} 

14. สร้างการกระทำ Getauthors

เช่นเดียวกับโพสต์เราจะสร้างการกระทำใน /store/index.js เพื่อกระตุ้นการร้องขอ AJAX เพื่อสืบค้น WordPress API เมื่อได้รับการตอบสนองที่ประสบความสำเร็จแล้วสัญญาจะแก้ไขและเรียก ร้านค้า การกลายพันธุ์ซึ่งเราจะสร้างต่อไป

 getauthors: ฟังก์ชั่น (บริบท) {
  Axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / ผู้ใช้ ')
  . จากนั้นฟังก์ชั่น (การตอบสนอง) {
  context.commit ('ร้านค้า'
  response.data)
  })
} 

15. สร้างการกลายพันธุ์ของร้านค้า

ภายในวัตถุกลายพันธุ์ของร้าน VUEX สร้าง ร้านค้า การกลายพันธุ์โดยใช้ตัวอย่างด้านล่าง ชอบ ห้องเก็บของ จากขั้นตอนที่ 8 สิ่งนี้จะใช้จ่ายเงินผ่านและตั้งค่าเป็นมูลค่าของทรัพย์สินของผู้เขียนในสถานะของร้านของเรา

 ร้านค้า (รัฐ, การตอบสนอง) {
  State.authors = การตอบสนอง} 

16. Trigger Getauthors ในการโหลด

เราจำเป็นต้องได้รับข้อมูลผู้แต่งจาก WordPress ทันทีที่แอปเริ่มโหลด ลองแก้ไของค์ประกอบระดับสูงสุด app.vue อีกครั้งและส่ง ผู้พิทักษ์ การกระทำในเดียวกัน สร้าง () ตะขอวงจรชีวิตเป็น getposts หนังบู๊.

 สร้าง () {
  นี้. $ store.dispatch ('getauthors')
   นี้. $ store.dispatch ('getposts')} 

17. สร้างวิธี getusername

ตอนนี้เรากำลังสอบถาม WordPress สำหรับข้อมูลผู้แต่งในการโหลดสิ่งที่เราต้องทำคือกำหนดวิธีการในส่วนประกอบโพสต์ของเราซึ่งช่วยให้เราส่ง ID ผู้แต่งและรับชื่อเพื่อกลับมา คัดลอกตัวอย่างด้านล่างลงในวัตถุวิธีการโพสต์ของคอมโพเนนต์ด้านล่างที่มีอยู่ getsinglepost วิธี.

 ชื่อ getusername: ฟังก์ชั่น (Userid) {
  ชื่อผู้ใช้ var = 'ไม่รู้จัก';
  นี้ $ store.state
  Authors.filter (ฟังก์ชั่น (ผู้ใช้) {
  ถ้า (user.id === userid) {
  ชื่อผู้ใช้ = user.name
  }
  });
  ส่งคืนชื่อผู้ใช้;
} 

18. เรียกวิธี getusername

ตอนนี้เราแค่ต้องโทร ชื่อ getusername . ยังคงอยู่ในองค์ประกอบโพสต์ในเทมเพลตให้แทนที่การอ้างอิงของแอตทริบิวต์ของผู้แต่ง post.author ดังนั้นมันจึงสะท้อนให้เห็นข้อมูลด้านล่าง ชื่อผู้เขียนควรแสดงอย่างถูกต้องสำหรับแต่ละโพสต์

: ผู้แต่ง = "getusername (post.author)" 

19. การโหลดบล็อก

ในขณะที่เรากำลังโหลดข้อมูลโพสต์แบบอะซิงโครนัสมีช่วงเวลาก่อนที่คำขอจะเสร็จสมบูรณ์ที่แอปพลิเคชันว่างเปล่า เพื่อตอบโต้สิ่งนี้เราจะใช้สถานะการโหลดที่ใช้งานจนกว่าบล็อกจะมีประชากรเต็ม ในส่วนประกอบโพสต์วางตัวอย่างด้านล่างหลังจากเปิด & lt; สคริปต์ & gt; แท็กเพื่อนำเข้าไอคอนที่เราจะใช้

 ไอคอนนำเข้าจาก '@ / commonents / ไอคอน / ไอคอน'
นำเข้าโหลดจาก './../../
สินทรัพย์ / img / loading.svg '

20. เพิ่มไอคอนไปยังรายการส่วนประกอบ

ถัดไปยังอยู่ภายในโพสต์เพิ่มการอ้างอิงถึงไอคอนในวัตถุคอมโพเนนต์ สิ่งนี้ทำให้องค์ประกอบโพสต์ตระหนักถึงองค์ประกอบไอคอนที่นำเข้าล่าสุดของเรา

 ส่วนประกอบ: {
   ไอคอน,
   โพสต์} 

21. สร้างองค์ประกอบการโหลด

ตอนนี้เราเพียงแค่ต้องเพิ่มองค์ประกอบการโหลดไปยังเทมเพลตโพสต์เพื่อให้ปรากฏบนหน้า ประการแรกห่อ DIV ที่สองในตัวอย่างรอบสอง Divs ด้วย v- ถ้า คำสั่งเพื่อให้แน่ใจว่าไม่มีโพสต์ปรากฏขึ้นจนกว่าการโหลดจะเสร็จสมบูรณ์

จากนั้นเพิ่ม DIV แรกจากตัวอย่างด้านบน นี่มีไอคอนโหลดและ v- ถ้า คำสั่งซึ่งหมายความว่าจะมองเห็นได้เท่านั้นจนกว่าจะถึงจุดที่แอปโหลดเต็ม เมื่อเสร็จแล้วการโหลดควรดำเนินการแล้ว

 & lt; div v-if = "! นี้. $ store.state.posts"
Class = "U-align-center" & GT;
   & lt; icon class = "c-icon-loading"
   ใช้ = "กำลังโหลด" & gt; & lt; / icon & gt;
& lt; / div & gt;
& lt; div v-if = "นี้ $ store.state.posts" & gt;
   [... ]
& lt; / div & gt; 

22. อัปเดตเส้นทางแอตทริบิวต์โพสต์เดี่ยว

สิ่งเดียวที่เหลือให้ทำคือการตั้งค่าโพสต์เดียวจะถูกตั้งค่าอย่างถูกต้องเพื่อให้พวกเขาใช้ข้อมูลโพสต์ WordPress ในร้าน VUEX ขั้นตอนแรกคือการอัปเดตเส้นทางแอ็ตทริบิวต์ในเทมเพลตคอมโพเนนต์โพสต์ภายใน v-if = "this.type === 'เดี่ยว'" DIV ซึ่งจัดการการแสดงผลของโพสต์เดียว

 สลับ 'singlepost.title' เป็น 'singlepost.title.rendered'
 สลับ 'singlepost.author' เป็น 'getusername (singlepost.author)'
 สลับ 'singlepost.fullimage' เป็น 'singlepost.acf.header_image'
 สลับ 'singlepost.content' เป็น 'singlepost content.rendered '

23. refactor getsinglepost วิธีการ

นอกจากนี้เรายังต้อง refactor ส่วนประกอบโพสต์ getsinglepost วิธี. มันต้องส่งคืนสัญญาที่ส่ง getposts หนังบู๊. ในการติดตาม จากนั้น ฟังก์ชั่นเราจะค้นหาโพสต์ของ VUEX Store สำหรับรายการที่มีกระสุนที่ตรงกับที่ส่งผ่านใน URL หากพบเราจะคัดลอกข้อมูลไปยังสถานะท้องถิ่นของคอมโพเนนต์และแก้ไขสัญญา หากไม่พบสัญญาจะถูกปฏิเสธ

 GetSinglepost: ฟังก์ชั่น () {
   กลับสัญญาใหม่
   ((แก้ไขปฏิเสธ) = & gt; {
  นี้. $ store.dispatch ('getposts')
  . จากนั้น (() = & gt; {
  var foundpost = false;
  นี้. $ store.state.posts
  ตัวกรอง ((โพสต์) = & gt; {
  ถ้า (post.lug ===
  นี้. $ route.params.lug) {
  นี่.singlepost = โพสต์;
  foundpost = true; }
  });
  Foundpost? แก้ไข (): ปฏิเสธ ();
  })
  })
} 

24. refactor โพสต์ที่สร้างขึ้น () hook

ต่อไปเราต้อง refactor สร้าง () Lifecycle Hook ในส่วนประกอบโพสต์ หากเราต้องการแสดงโพสต์เดียวตะขอควรเรียก getsinglepost วิธีการจากขั้นตอนก่อนหน้านี้และหากสัญญาถูกปฏิเสธส่งผู้ใช้ไปยังหน้า 404 'ไม่พบหน้า' นี่คือบัญชีสำหรับสถานการณ์ที่ผู้ใช้ป้อนกระสุนโพสต์ที่ไม่มีอยู่ใน URL

 สร้าง () {
  ถ้า (this.type === 'เดี่ยว') {
  this.getSinglepost () จากนั้น (null, () = & gt; {
  นี้. $ Router.Push ({name: 'pagenotfound'})
  });
  }
} 

25. เพิ่ม V-IF Directive

ขั้นตอนสุดท้ายคือการเพิ่มตัวอย่างด้านล่างไปยังส่วนประกอบโพสต์ภายใน v-if = "this.type === 'เดี่ยว'" div ในเทมเพลต คำสั่งนี้หมายความว่าโพสต์จะแสดงเฉพาะเมื่อข้อมูลโพสต์ในเครื่องที่มีให้โดย getsinglepost วิธีการบรรจุ นี่คือการหยุด vue จากการเรนเดอร์องค์ประกอบก่อนกำหนดและทำให้เกิดข้อผิดพลาด

 V-IF = "singlepost" 

26. สร้างแอป

ตอนนี้กับทุกสิ่งที่ทำงานในคอนโซลยกเลิก NPM Run Dev คำสั่งหรือเปิดคอนโซลใหม่และเรียกใช้คำสั่งด้านล่างเพื่อสร้างเวอร์ชันพร้อมผลิตเพื่ออัปโหลดไปยังเซิร์ฟเวอร์ของคุณเอง สิ่งนี้จะปรากฏใน ด่าง ไดเรกทอรี.

 NPM Run Build 

บทความนี้ปรากฏในปัญหา 268 ของนักออกแบบเว็บไซต์นิตยสารสร้างสรรค์ Web Design - เสนอแบบฝึกหัดผู้เชี่ยวชาญแนวโน้มที่ทันสมัยและทรัพยากรฟรี สมัครสมาชิกนักออกแบบเว็บไซต์ตอนนี้

อ่านเพิ่มเติม:

• 32 ธีม Wordpress ฟรีที่ดีที่สุด
• 10 ทรัพยากร WordPress ยอดนิยม
• ที่ แพลตฟอร์มบล็อกฟรีที่ดีที่สุด