Thắng Đặng Blog – Nothing is Impossible Come to share
Xin chào mọi người, chả là từ lúc đi làm chủ yếu là dùng VueJS, Angular chứ không động chạm gì đến wordpress nữa. Bữa nay nổi hứng muốn viết Plugin, nhưng lại nghĩ xem có cách nào tích hợp vào để viết VueJS cho quen tay không. Mày mò lúc cũng tích hợp WordPress với VueJS được nên share cho mọi người cùng tham khảo.
Tích hợp WordPress với VueJS
1. Tạo Plugin mặc định
Đầu tiên, để tích hợp các bạn có thể tích hợp theo theme hoặc plugin, ở đây thì mình sẽ tạo nguyên plugin mới luôn để tích hợp. Tạo một plugin mặc thì các bạn có thể truy cập WordPress plugin boilerplate generator để tạo: https://wppb.me
Tải về và cài đặt chúng ta sẽ có một plugin default với cấu trúc khá tiện để build một plugin
Lúc này, cây thư mục của plugin sẽ dạng như này:
Về cấu trúc của plugin thì các bạn có thể tìm hiểu thêm sẽ, trong bài viết này mình sẽ không quá đi sâu về cấu trúc của plugin default này. Cơ bản nó sẽ chia thành 2 khu vực admin và public giống như mình chụp ở trên. Trong bài này thì mình sẽ tạo một trang trong admin.
2. Cài đặt VueJS với Vite
Bước tiếp theo thì mình sẽ cài project VueJS bằng Vite vào trong plugin. Để cài các bạn run câu lệnh:
npm create vite@latestSau một vài thao tác theo hướng dẫn của command line thì mình sẽ có kể quả project như sau:
Vậy là mình đã có một source VueJS nằm trong thư mục plugin của wordpress.
3. Host project VueJS trong plugin
Về nguyên lý của cách này đó là chúng ta sẽ thực hiện build project ngay sau khi chúng ta thực hiện chỉnh sửa code trong project để có một file JS hoàn chỉnh. Để làm được việc này, chúng ta cần cần chỉnh sửa file vite.config.js với nội dung như sau:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
import liveReload from 'vite-plugin-live-reload'; // Plugin thực hiện reload khi thay đổi code php
export default defineConfig({
plugins: [
vue(),
liveReload(`${__dirname}/../**/*\.php`), // Cấu hình reload file php
],
build: {
rollupOptions: {
output: {
dir: path.join(__dirname, '../admin/build'), // định nghĩa đường dẫn thư mục build
entryFileNames: 'app.js', // tên file sau khi build
assetFileNames: (assetInfo) => {
let extType = assetInfo.name.split('.')[1];
// Cấu hình file css tĩnh khi được build ra
if (extType == 'css') {
return `app.css`;
} else {
return `assets/[name]-[hash][extname]`
}
}
}
}
}
})Trong đoạn trên mình đã sử dụng vite-plugin-live-reload để cấu hình reload build khi thực hiện sửa các file php code. Nên các bạn chạy thêm lệnh dưới đề cài đặt nhé:
npm i vite-plugin-live-reloadTiếp theo các bạn cần cấu hình chạy lệnh build và watch để sử dụng sau này trong file package.json:
"scripts": {
"dev": "vite",
"build": "vite build",
"watch": "vite build --watch",
"preview": "vite preview"
}Sau đó chúng ta chỉ cần chạy npm run watch để thực hiện việc lệnh tự động build mỗi khi chúng ta chỉnh sửa code trong Plugin.
4. Cấu hình thêm trang admin trong wordpress
Tiếp theo chúng ta cần tạo một trang trong admin để thực hiện nhúng file đã được build ra trong plugin. Trong plugin, mình sẽ thêm vào trong file class-thang-dang-blog-admin.php 2 hàm sau:
// Tạo trang trong admin
function create_admin_page() {
add_menu_page(
'VueJS',
'VueJS',
'manage_options',
'vue-js',
[$this,'custom_page_content'],
'dashicons-cart',
10
);
}
function custom_page_content() {
echo '<div id="app">Nội dung</div>';
}Tại hàm define_admin_hooks trong file class-thang-dang-blog.php bổ sung thêm code để thêm action admin_menu để thêm page:
private function define_admin_hooks() {
$plugin_admin = new Thang_Dang_Blog_Admin( $this->get_plugin_name(), $this->get_version() );
$this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' );
$this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' );
// Thực hiện thêm hook tạo page
$this->loader->add_action( 'admin_menu', $plugin_admin, 'create_admin_page');
}Kết quả mình sẽ có một page trong menu admin:
5. Nhúng file css và js từ trong thư mục VueJS đã được build
Việc còn lại là chúng ta sẽ nhúng file app.js và app.css được build ở bước số 3. Trong file class-thang-dang-blog-admin.php chúng ta sẽ thực hiện sử dụng thêm 2 hàm wp_enqueue_script và wp_enqueue_style lần lượt trong 2 hàm enqueue_styles và enqueue_scripts để cấu hình:
public function enqueue_styles() {
wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/thang-dang-blog-admin.css', array(), $this->version, 'all' );
// Bổ sung thêm code này để thêm app.css
wp_enqueue_style( $this->plugin_name . '_app_css', plugin_dir_url( __FILE__ ) . 'build/app.css', array(), $this->version, 'all' );
}
/**
* Register the JavaScript for the admin area.
*
* @since 1.0.0
*/
public function enqueue_scripts() {
wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/thang-dang-blog-admin.js', array( 'jquery' ), $this->version, false );
// Bổ sung thêm code này để thêm app.js
wp_enqueue_script( $this->plugin_name . '_app_js', plugin_dir_url( __FILE__ ) . 'build/app.js', array(), $this->version, false );
}Vì file build ra sử dụng dưới dạng module, nên các bạn cần phải thêm type khi binding file app.js trên html. Trong file class-thang-dang-blog-admin.php các bạn thêm hàm sau:
// Thêm type="module" vào script tag
public function script_loader_type_module($tag, $handle, $src) {
if ( $this->plugin_name . '_app_js' !== $handle ) {
return $tag;
}
// change the script tag by adding type="module" and return it.
return '<script type="module" src="' . esc_url( $src ) . '"></script>';
}Và add_filter thêm hàm bên trên trong file define_admin_hooks:
private function define_admin_hooks() {
$plugin_admin = new Thang_Dang_Blog_Admin( $this->get_plugin_name(), $this->get_version() );
$this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' );
$this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' );
// Thay đổi thẻ script
$this->loader->add_filter( 'script_loader_tag', $plugin_admin, 'script_loader_type_module',10,3 );
// Thực hiện thêm hook tạo page
$this->loader->add_action( 'admin_menu', $plugin_admin, 'create_admin_page');
}Và bùm, đây chính là kết quả của chúng ta:
Chúc các bạn thành công!
