Cung cấp năng lượng cho một blog bằng API WordPress

Trong vài năm qua, sự phát triển của API REST cho WordPress đã mở cửa mới cho các nhà phát triển. Các nhà phát triển trước đây đã bị giới hạn để viết một dự án hỗ trợ Wordpress trong PHP hiện có tính linh hoạt và kiểm soát hơn về cách họ có thể tiếp cận ngăn xếp công nghệ của trang web của họ.

Điều này có nghĩa là có thể giữ lại tất cả những lợi thế của bảng điều khiển WordPress Brilliant, được phổ biến cực kỳ linh hoạt bởi phổ biến Plugin WordPress. Chẳng hạn như các trường tùy chỉnh nâng cao và có một lối đi được xây dựng hoàn toàn tùy chỉnh chỉ tương tác với WordPress khi cần.

• Tải xuống các tệp hướng dẫn

Trong này Hướng dẫn WordPress. Chúng tôi sẽ khám phá cách triển khai API REST WordPress vào một ứng dụng blog đơn giản, hiện đang sử dụng tệp JSON cục bộ làm nguồn dữ liệu của nó và được xây dựng dưới dạng ứng dụng một trang (SPA) bằng cách sử dụng khung JavaScript phổ biến Vue.js. . Điều này sẽ liên quan đến việc thực hiện VUEX, chúng tôi sẽ sử dụng để lưu trữ dữ liệu mà chúng tôi yêu cầu từ một WordPress bằng cách sử dụng kết hợp các phương thức hành động và đột biến của nó.

Sau khi hoàn thành, bạn nên tạo ra một spa nạc, đơn giản, có tất cả khả năng phản ứng của Vue.js, trong khi hiển thị các bài đăng được truy xuất và quản lý bởi WordPress.

Đối với các API tuyệt vời hơn để khám phá, hãy xem hướng dẫn của chúng tôi để tốt nhất API JavaScript. Cái gì API HTML. và API Google. .

01. Thiết lập không gian làm việc và phụ thuộc

Điều đầu tiên trước tiên, bạn nên Tải tập tin của dự án và mở chúng trong trình soạn thảo ưa thích của bạn.

Trong bảng điều khiển, CD vào mẫu trang web và chạy lệnh bên dưới để cài đặt các phụ thuộc nút của dự án (nếu bạn không cài đặt nút, Làm điều đó trước ). Chúng tôi sẽ làm việc hoàn toàn trong SRC. thư mục từ đây ra ngoài.

npm install

02. Cài đặt Vuex.

Tiếp theo, sử dụng lệnh bên dưới, chúng tôi sẽ cài đặt Vuex. , một mô hình quản lý nhà nước và thư viện cho các ứng dụng Vue.js. Điều này sẽ hoạt động như một cửa hàng thông tin trung tâm cho tất cả các thành phần VUE phụ thuộc vào dữ liệu chúng ta nhận được từ API WordPress. Đối với các nhà phát triển quen thuộc với React, VUUX được truyền cảm hứng rất nhiều bởi Flux.

npm install vuex --save

03. Bắt đầu máy chủ phát triển

Trong bảng điều khiển, chạy lệnh bên dưới để bắt đầu máy chủ phát triển. Điều này sẽ biên dịch dự án Vue.js vì hiện đang đứng và gán nó cho một URL để bạn có thể truy cập nó. Đây thường là localhost: 8080. .

Một lợi thế lớn Điều này mang lại là tải lại trực tiếp, vì vậy một khi bạn thay đổi ứng dụng và lưu, trang trong trình duyệt của bạn sẽ tự cập nhật mà không cần phải tải lại thủ công.

npm run dev

04. Tạo cửa hàng VUEX

Trong SRC. , tạo một thư mục được gọi là cửa hàng và trong đó một tập tin mới gọi là index.js. . Đây sẽ là nơi cửa hàng VUEX của chúng tôi sẽ được xác định. Mặc dù trước khi chúng tôi đến đó, trước tiên chúng tôi cần đảm bảo ứng dụng Vue.js của chúng tôi nhận thức được sự tồn tại của nó. Để làm điều này, mở main.js. và nhập cửa hàng và bao gồm nó như một phụ thuộc, như trong đoạn trích dưới đây.

 Nhập VUE từ 'VUE'
Nhập ứng dụng từ './app'
Nhập bộ định tuyến từ './rouat'
cửa hàng nhập khẩu từ './store'
Vue.config.productiontip = false.
/ * eslint-Vô hiệu hóa không mới * /
VUE MỚI ({
  el: '#app',
  bộ định tuyến,
  cửa hàng,
  Mẫu: '& lt; ứng dụng / & gt;',
  Các thành phần: {ứng dụng}
}) 

05. Tạo giàn giáo cửa hàng và lắp đặt Axios

Để giúp chúng tôi đơn giản hóa các yêu cầu Ajax, cửa hàng của chúng tôi sẽ thực hiện đối với API WordPress, chúng tôi sẽ cài đặt AXIOS, đây là ứng dụng khách HTTP dựa trên Lời hứa. Để làm điều này, hãy mở một cửa sổ bảng điều khiển riêng biệt, điều hướng đến mẫu trang web thư mục và chạy AXIOS cài đặt NPM - Lưu .

Tiếp theo, hãy bắt đầu giàn giáo cửa hàng bằng cách khởi tạo một đối tượng cửa hàng VUEX trống mới. Hiện tại, nó không làm gì cả, nhưng ít nhất là VUE nên biết về nó.

 Nhập AXIOS từ 'AXIOS'
Nhập VUE từ 'VUE'
Nhập VUEX từ 'VUEX'
VUE.USE (VUEX)
Const Store = New Vuex.store ({
  tiểu bang: {},
  Hành động: {},
  Đột biến: {}
})
Xuất cửa hàng mặc định 

06. Tạo bài viết Trạng thái

Trong VUEX, đối tượng trạng thái giữ thông tin ứng dụng, trong trường hợp này sẽ là dữ liệu bài đăng WordPress, chúng tôi sẽ sử dụng API. Trong đối tượng này, tạo một thuộc tính mới gọi là bài đăng và gán một giá trị của null.

 Bang: {
  Bài viết: Null.
} 

07. Tạo hành động GetPosts

Trong VUEX, hành động là cách chính trong đó các yêu cầu không đồng bộ được xử lý. Đây thường là các phương thức được xác định trong cửa hàng, sau đó có thể được gửi theo yêu cầu của ứng dụng.

Trong trống. hành động Đối tượng, hãy xác định một trong đó nếu trạng thái bài viết của chúng tôi vẫn là NULL, AXIOS được sử dụng để thực hiện yêu cầu AJAX cho API WordPress và trả về danh sách các bài đăng. Khi chúng tôi đã nhận được phản hồi tích cực, sau đó chúng tôi sẽ giải quyết được lời hứa và cam kết các bài đăng bằng cách sử dụng cửa hàng đột biến.

 GetPosts: Chức năng (bối cảnh) {
  Trả lại lời hứa mới ((giải quyết, từ chối) = & gt; {
  if (bối cảnh.state.posts) {
  giải quyết()
  Không thể
  khác {
  AXIOS.GET ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Bài viết ')
  .Then ((phản hồi) = & gt; {
  bối cảnh.Commit ('StorePosts',
  phản hồi.data)
  giải quyết()
  }). Bắt ((lỗi) = & gt; {
  từ chối (lỗi);
  });
  Không thể
  })
} 

08. Tạo đột biến Storeposts

Một khái niệm khác được VUEX giới thiệu là đột biến, cũng thường là các phương thức được xác định trong cửa hàng. Đột biến là cách duy nhất để thay đổi trạng thái trong một cửa hàng VUEX, cho phép trạng thái dễ dàng được theo dõi khi gỡ lỗi.

Trong trống đột biến đối tượng, hãy xác định cửa hàng Phương pháp chúng tôi được tham chiếu ở bước trước và làm cho nó ghi đè thuộc tính POST trong đối tượng trạng thái với bất kỳ dữ liệu nào, đột biến sẽ nhận dưới dạng tải trọng.

 Lưu trữ (trạng thái, phản hồi) {
   State.Posts = Phản hồi} 

09. Kích hoạt GetPosts Hành động trên Tải

Chúng tôi đã tạo các phương thức hành động và đột biến lấy các bài đăng từ API WordPress và cam kết với trạng thái VUEX, nhưng bây giờ chúng ta cần thực sự kích hoạt quy trình này ở đâu đó. Trong phần đầu cấp Vue.js thành phần App.vue. , thêm đoạn trích dưới đây.

tạo() là một hook vòng đời kích hoạt mã ngay khi thành phần VUE được tạo trên tải, trong khi việc sử dụng toàn cầu $ cửa hàng Biến cho phép chúng tôi truy cập nội dung của cửa hàng VUEX và gửi Getposts. hành động từ bước 7.

 Đã tạo () {
   Điều này. $ store.dispatch ('getposts')} 

10. Cập nhật đường dẫn thuộc tính

Nếu bạn đang làm việc trong Chrome hoặc Firefox và có Vue.js devtools mở rộng. (Nếu không, tôi khuyên bạn nên làm như nó rất hữu ích), bây giờ bạn sẽ có thể thấy các bài đăng WordPress đã tải trong Nhà nước cơ sở. ở dưới cái Vuex. chuyển hướng.

Quay lại ứng dụng, trong /components/posts/posts.vue. , Mẫu HTML cần trỏ đến dữ liệu này, vì vậy hãy chỉnh sửa một vài đường dẫn thuộc tính.

 Chuyển đổi 'post.title' thành 'post.title.rendered'
 Chuyển 'post.preview' thành 'post.acf.preview'
 Chuyển 'post.previewimage' thành 'post.acf.header_image_small' 

11. Cập nhật V-For Loop

Trong thành phần Bài viết, có một Chỉ thị Vue.JS đang sử dụng được gọi là v-for. . Các vòng lặp này thông qua tất cả các bài đăng và cho mỗi lần in một thể hiện của thành phần POST, hiển thị chúng trong một danh sách.

Chúng ta cần cập nhật đường dẫn được truyền cho chỉ thị này vì nó vẫn đang sử dụng dữ liệu thử nghiệm giả cục bộ. Cập nhật chỉ thị V-for vào đoạn trích dưới đây để trỏ đến các bài đăng lưu trữ của chúng tôi trong cửa hàng VUEX.

 v-for = "Đăng trong này. $ Store.state.posts" 

12. Làm một số vệ sinh

Một danh sách các bài đăng WordPress sẽ hiển thị. Vì chúng ta không còn sử dụng dữ liệu bài đăng địa phương, hãy xóa SRC / Dữ liệu . Sau đó trong thành phần bài viết, xóa Bài viết: postdata.data. Tài sản trong các thành phần lưu trữ dữ liệu cục bộ và sau đó nhập postdata.

13. Sửa lỗi tác giả

Bạn có thể nhận thấy rằng cho mỗi bài đăng, tác giả đang hiển thị dưới dạng một số. Điều này là do API WordPress trả về ID Tác giả, thay vì tên. Chúng ta cần sử dụng ID này để truy vấn WordPress cho thông tin Tác giả đầy đủ. Hãy bắt đầu bằng cách tạo một vị trí để lưu trữ này trong cửa hàng VUEX của chúng tôi, cùng với thông tin bài đăng của chúng tôi, trong Cửa hàng / index.js. .

 Bang: {
  Tác giả: null,
  Bài viết: null} 

14. Tạo hành động GetAuthors

Như với bài viết, chúng tôi sẽ tạo một hành động trong /store/index.js. Để kích hoạt một yêu cầu AJAX để truy vấn API WordPress. Khi nhận được phản hồi thành công, lời hứa sẽ giải quyết và kích hoạt Cửa hàng Đột biến, chúng tôi sẽ tạo tiếp theo.

 GetAuthors: Chức năng (bối cảnh) {
  AXIOS.GET ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / người dùng)
  . sau đó (chức năng (phản hồi) {
  bối cảnh.commit ('cửa hàng',
  phản hồi.data)
  })
} 

15. Tạo sự đột biến của kho

Trong đối tượng Đột biến của cửa hàng VUEX, hãy tạo Cửa hàng đột biến sử dụng đoạn trích dưới đây. Giống như với cửa hàng Từ bước 8, điều này lấy tải trọng của nó được truyền và đặt nó là giá trị của tài sản của tác giả trong trạng thái của cửa hàng của chúng tôi.

 Cửa hàng (trạng thái, phản hồi) {
  tiểu bang.authors = phản hồi} 

16. GetAuthors kích hoạt trên tải

Chúng ta cần lấy thông tin tác giả từ WordPress ngay khi ứng dụng bắt đầu tải. Hãy sửa đổi thành phần cấp cao nhất App.vue. một lần nữa và gửi getAuthors. hành động trong cùng tạo() LifeCycle hook như Getposts. hoạt động.

 Đã tạo () {
  cái này. $ store.dispatch ('getauthors')
   Điều này. $ store.dispatch ('getposts')} 

17. Tạo phương thức GetUserName

Bây giờ chúng tôi đang truy vấn WordPress để biết thông tin của tác giả về tải, tất cả những gì chúng ta cần làm là xác định một phương thức trong thành phần bài viết của chúng tôi cho phép chúng tôi chuyển ID Tác giả và nhận lại tên. Sao chép đoạn trích dưới đây vào đối tượng Phương thức của Thành phần Bài viết, bên dưới hiện có Goesinglepost. phương pháp.

 GetUserName: Chức năng (userid) {
  var tên người dùng = 'chưa biết';
  Điều này. $ store.state.
  Tác giả.Filter (chức năng (người dùng) {
  if (user.id === userid) {
  Tên người dùng = user.name.
  Không thể
  });
  Trả về tên người dùng;
} 

18. Gọi phương thức GetUserName

Bây giờ chúng ta chỉ cần gọi getusername. . Vẫn trong thành phần Bài viết, trong mẫu, thay thế tham chiếu thuộc tính của tác giả sang post.Author. Vì vậy, nó phản ánh đoạn trích dưới đây. Tên của tác giả sẽ hiển thị chính xác cho mỗi bài đăng.

: Tác giả = "getusername (post.author)" 

19. Đang tải blog

Khi chúng ta đang tải dữ liệu POST không đồng bộ, có một khoảnh khắc trước khi yêu cầu hoàn thành nơi ứng dụng trống. Để chống lại điều này, chúng tôi sẽ thực hiện trạng thái tải hoạt động cho đến khi blog được điền đầy đủ. Trong thành phần Bài viết, dán đoạn trích bên dưới ngay sau khi mở & lt; script & gt; Thẻ để nhập các biểu tượng Chúng tôi sẽ sử dụng.

 Biểu tượng nhập từ '@ / linh kiện / biểu tượng / biểu tượng'
Nhập khẩu từ './../../
tài sản / img / tải.svg '

20. Thêm biểu tượng vào danh sách thành phần

Tiếp theo, vẫn nằm trong bài viết, thêm một tham chiếu đến biểu tượng trong các đối tượng Thành phần. Điều này làm cho thành phần bài viết nhận biết thành phần biểu tượng được nhập gần đây của chúng tôi.

 Thành phần: {
   biểu tượng,
   bài} 

21. Tạo các phần tử tải

Bây giờ chúng ta chỉ cần thêm các phần tử đang tải vào mẫu bài đăng để nó hiển thị trên trang. Thứ nhất, bọc div thứ hai trong đoạn đoạn xung quanh hai div với v-if. Chỉ thị để đảm bảo không có bài đăng nào hiển thị cho đến khi tải hoàn tất.

Sau đó thêm div đầu tiên từ đoạn trích trên nó. Điều này chứa biểu tượng tải và một v-if. Chỉ thị, có nghĩa là nó sẽ chỉ hiển thị cho đến mức tải ứng dụng hoàn toàn. Sau khi hoàn thành, tải bây giờ sẽ được thực hiện.

 & lt; div v-if = "! Cái này. $ Store.state.posts"
Class = "U-Căn chỉnh trung tâm" & GT;
   & lt; icon class = "c-icanding"
   Sử dụng = "Đang tải" & GT; & lt; / Icon & GT;
& lt; / div & gt;
& lt; div v-if = "cái này. $ store.state.posts" & gt;
   [...]
& lt; / div & gt; 

22. Cập nhật các đường dẫn thuộc tính bài đơn

Điều duy nhất còn lại để làm là đảm bảo các bài đăng duy nhất được thiết lập chính xác để chúng sử dụng dữ liệu bài đăng WordPress trong cửa hàng VUEX. Bước đầu tiên là cập nhật các đường dẫn thuộc tính trong mẫu Thành phần Bài viết trong v-if = "this.type === 'đơn" " div, xử lý màn hình của các bài viết đơn.

 Chuyển đổi 'SinglePost.Title' thành 'SinglePost.Title.Rendered'
 Chuyển 'SinglePost.Author' thành 'getusername (SinglePost.Author)'
 Chuyển 'SinglePost.Fullimage' thành 'SinglePost.acf.header_image'
 Chuyển 'SinglePost.Content' thành 'SinglePost. Nội dung.Rendered '

23. Phương pháp Tái cấu trúc GetSinglepost

Chúng ta cũng cần tái cấu trúc các thành phần bài viết Goesinglepost. phương pháp. Nó cần phải trả lại một lời hứa gửi đến Getposts. hoạt động. Theo dõi sau đó Chức năng, chúng tôi sẽ tìm kiếm các bài đăng của cửa hàng VUEX để một mục nhập với Slug khớp với người được truyền trong URL. Nếu tìm thấy, chúng tôi sẽ sao chép dữ liệu vào trạng thái cục bộ của thành phần của chúng tôi và giải quyết lời hứa. Nếu nó không tìm thấy, lời hứa sẽ bị từ chối.

 GetSinglePost: Hàm () {
   Trả lại lời hứa mới
   ((giải quyết, từ chối) = & gt; {
  cái này. $ skeet.dispatch ('getposts')
  .Then (() = & gt; {
  var underpost = false;
  Điều này. $ store.state.posts.
  bộ lọc ((bài) = & gt; {
  if (post.slug ===
  Điều này. $ route.params.slug) {
  this.singlepost = post;
  underpost = true; Không thể
  });
  underpost? giải quyết (): từ chối ();
  })
  })
} 

24. Bài viết cấu trúc lại được tạo () Móc

Tiếp theo, chúng ta cần tái cấu trúc tạo() LifeCycle hook trong thành phần bài viết. Nếu chúng ta đang cần hiển thị một bài đăng duy nhất, hook sẽ gọi Goesinglepost. Phương thức từ bước trước đó và nếu lời hứa của nó bị từ chối, hãy gửi người dùng đến trang 404 'trang không tìm thấy'. Điều này là để giải thích các kịch bản nơi người dùng nhập một bài đăng bài không tồn tại trong URL.

 Đã tạo () {
  if (this.type === 'đơn') {
  this.getsinglepost (). Sau đó (null, () = & gt; {
  cái này. $ router.push ({tên: 'pagenotfound'})
  });
  Không thể
} 

25. Thêm Chỉ thị V-IF

Bước cuối cùng là thêm đoạn trích dưới đây vào thành phần POST trong v-if = "this.type === 'đơn" " div trong mẫu. Chỉ thị này có nghĩa là bài đăng sẽ chỉ hiển thị khi dữ liệu bài đăng cục bộ được cung cấp bởi Goesinglepost. phương pháp được điền. Điều này là để dừng phương tiện từ kết xuất sớm các thành phần và do đó gây ra lỗi.

 v-if = "đơn" 

26. Xây dựng ứng dụng

Bây giờ với tất cả mọi thứ hoạt động, trong bảng điều khiển, hủy bỏ NPM Run Dev. Lệnh hoặc mở bảng điều khiển mới và chạy lệnh dưới đây để tạo phiên bản Sẵn sàng sản xuất để tải lên máy chủ của riêng bạn. Điều này sẽ xuất hiện trong quận danh mục.

 NPM RUN Build 

Bài viết này xuất hiện trong sự cố 268 của nhà thiết kế web, tạp chí thiết kế web sáng tạo - cung cấp các hướng dẫn chuyên gia, xu hướng tiên tiến và tài nguyên miễn phí. Theo dõi nhà thiết kế web bây giờ.

Đọc thêm:

• 32 chủ đề WordPress miễn phí tốt nhất
• 10 tài nguyên WordPress hàng đầu
• Các Nền tảng blog miễn phí tốt nhất