Phát hiện chặn quảng cáo

Xin lỗi bạn, mình có đặt quảng cáo để lấy kinh phí duy trì trang, nếu bạn không thấy phiền có thể tắt chức năng chặn quảng cáo và tải lại trang.

Tiếp tục xem
Tải lại

Hướng dẫn tích hợp WordPress với VueJS

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@latest

Sau 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-reload

Tiế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.jsapp.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_scriptwp_enqueue_style lần lượt trong 2 hàm enqueue_stylesenqueue_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!

Về Đặng Thắng

Chào mọi người, mình là Thắng. Sở thích của mình là lập trình và chia sẻ mọi thứ mình học được cho tất cả mọi người. Rất mong mọi người ủng hộ Blog của mình.

Đề xuất

[VueJS] Hãy ứng dụng ngay Composable vào dự án của bạn

Hôm nay sẽ là một nội rất là hay và hữu ích cho các bạn …

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *