Sử dụng Vue trong WordPress

Trong bài này chúng ta sẽ sử dụng short_code hiển thị nội dung được tạo ra từ Vue. Chúng ta sẽ xây dụng một ví dụ đơn giản về sự kết hợp giữa Vue và Wordpress với nhau.

Chúng ta xây dựng ví dụ gồm 5 bước:

1. Tạo plugin wordpress để sử dụng code
2. Tạo một shortcode trong plugin
3. Tạo file Vue code
4. Load Vue mà bạn vừa tạo ra
5. Đảm bảo tập tin .js được tải sau khi dom được rút ra.

1. Wordpress Plugin

Plugin vừa đơn giản vừa mạnh mẽ, chúng cho phép bạn thêm chức năng vào trang web của bạn. Plugin chúng ta tạo là loại "hello world". Chúng ta gọi nó là wp-vue, vì vậy hãy bắt đầu:

1.1 Tạo folder trong thư mục Plugins của dự án Wordpress của bạn

/wp-content/plugins/wp-vue

Chúng ta cần tạo một tập tin chính, vì vậy hãy thực hiện điều đó.

1.2 Trong thư mục wp-vue chúng tạo tập tin chính với tên plugin.

File này được gọi là "wp-vue.php" vì vậy nó trông giống như sau:

/wp-content/plugins/wp-vue/wp-vue.php

Vâng, tên plugin và thư mục chưa tập tin chính đều giống nhau để WordPress biết nơi tìm nó.

Khi WordPress mở nó ra, nó cần thêm một số thông tin về thứ này là gì. Điều đó bao gồm trong Tiêu đề. Chúng tôi đang giữ cho nó đơn giản, vì vậy trong wp-vue.php, hãy thêm đoạn mã sau:

<?php
/**
 * Plugin Name: WordPress Vue
 * Description: Một ví dụ sử dụng Vue in WordPress.
 */
?>
 

Xem thêm: https://developer.wordpress.org/plugins/

Nếu bạn truy cập vào bảng điều khiển Wordpress của bạn, bạn sẽ thấy plugin chúng ta vừa tạo ra.

Dashboard->Plugins

Nó sẽ xuất hiện trong danh sách

1.3 Activate plugin của bạn

Click Active trên plugin vừa tạo ra.

Bây giờ nó đã tải xong, nhưng không có điều gì xảy ra vì không có mã để chạy. Vì vậy, hãy tạo một shortcode

Một shortcode nói cho Wordpress trèn nội dung được tạo ra bởi PHP code và nội dung của trang hoặc bài viết.

Ví dụ: Người dùng nhập [myshortcode] và khi trang đã hiển thị, nó hiển thị nội dung "Đây là nội dung từ shortcode của tôi"

Lưu ý: Trình soạn thảo hiện tại của WordPress (Gutenberg) cho phép bạn đặt các khối nội dung vào. Một shortcode sẽ vẫn hoạt động với điều đó, trên thực tế có một khối (block) đặc biệt dành riêng cho shortcode. Chúng ta đang sử dụng shortcode trong hướng dẫn này vì nó là tiêu chuẩn hoạt động.

Xem thêm tại: https://codex.wordpress.org/Shortcode_API

2. Tạo một shortcode trong Plugin

Chúng ta thêm đoạn code sau vào file plugin  (wp-vue.php) như sau:

//Thêm shortscode
function func_wp_vue(){
return "Xin chào Shortcode";
}
//Thêm shortcode to WordPress

 

Hàm func_wp_vue sẽ trả về text là "Xin chào Shortcode". "wpvue" là code chúng ta sử dụng trong content [wpvue]

File của chúng ta sẽ trông giống như sau:

 <?php
/**
 * Plugin Name: WordPress Vue
 * Description: Một ví dụ sử dụng Vue in WordPress.
 */
//Thêm shortscode
function func_wp_vue(){

return "Xin chào Shortcode";

}
?>

Test nó bằng cách sửa hoặc thêm mới bài viết (post) hoặc trang (page) trong WordPress của bạn. Chúng ta thêm mã [vpvue] vào trong nội dung của bài viết sau đó xuất bản (publish) chúng ta sẽ nhìn thấy "Xin chào Shortcode" ở ngoài front-end.

Bây giờ chúng ta đổi code như sau:

//Thêm shortscode
function func_wp_vue(){
  //Thêm Vue.js
  wp_enqueue_script('wpvue_vuejs');
  //Thêm vuecode.js
    wp_enqueue_script('my_vuecode');
  $str= " <div id='divWpVue'> "
  ."Message from Vue:"
  ." </div> ";

 
  return $str;
}