Cách dùng JavaScript hook để thêm chức năng cho một plugin WordPress

Hook là một thuật ngữ phổ biến đối với các developer thường làm việc với WordPress. Nó giúp chúng ta mở rộng mã nguồn mà không phải sửa plugin hoặc theme. Nhưng đó là hook trong PHP. Còn đối với JavaScript, việc dùng hook sẽ hơi khác một chút. Trong bài viết này, hãy cùng mình tìm hiểu cách dùng JavaScript hook để thêm chức năng cho một plugin WordPress nhé!

Trước khi bắt đầu, hãy cùng xem JavaScript hook có thể làm gì cho bạn:

Các ứng dụng của JavaScript hook trong WordPress

Bạn có thể dùng JavaScript hook để thêm các filter và action trong WordPress, chẳng hạn như:

  • Thêm filter vào phần kết quả trả về của plugin để nó trả về thêm các thông tin khác.
  • Thêm biến thể (variation) cho các block Gutenberg.
  • Thêm / xóa thuộc tính của các block.
  • Thiết lập plugin để khi nhận được kết quả trả về từ server, plugin sẽ thực hiện thêm các hành động khác như gửi một request để lưu dữ liệu.

Để các bạn dễ hình dung, mình sẽ lấy một ví dụ cụ thể về việc ứng dụng JavaScript hook trong WordPress. Đầu tiên, mình sẽ tạo một plugin giúp xác định trình duyệt mà người dùng đang sử dụng để truy cập vào website. Plugin này sẽ trả về kết quả là tên trình duyệt thôi. Sau đó, mình sẽ dùng JavaScript hook thêm một filter vào plugin để lấy thêm các thông tin khác như version của trình duyệt chẳng hạn.

Sau đây là từng bước cụ thể:

Bước 1: Tạo một plugin

Mình đã tạo một plugin có cấu trúc đơn giản như sau:

Plugin giúp xác định trình duyệt mà người dùng đang sử dụng

Trong đó:

  • File detect-browser.php là file chính của plugin.
  • File loader.php dùng để enqueue file js của plugin (trong thư mục dist > js).
  • Các file webpack.config.js, package.json, và package-lock.json dùng để thiết lập khi build webpack.

Ngoài ra, trong thư mục js, mình tạo thêm một file script.js. Nó sẽ được dùng làm file js của plugin.

Bước 2: Cài đặt package @wordpress/hooks

Giờ chúng ta cần cài thêm package @wordpress/hooks để sử dụng JavaScript hook trong plugin vừa tạo.

@wordpress/hooks là một npm package, bạn có thể cài nó bằng cách chạy câu lệnh sau tại terminal trong thư mục gốc của plugin vừa tạo:

npm install @wordpress/hooks --save

Package @wordpress/hooks có những action và filter như sau:

addAction( 'hookName', 'namespace', 'functionName', callback, priority )
removeAction( 'hookName', 'namespace', 'functionName' )
removeAllActions( 'hookName' )
doAction( 'hookName', arg1, arg2, ... )
doingAction( 'hookName' )
didAction( 'hookName' )
hasAction( 'hookName' )
addFilter( 'hookName', 'namespace', 'functionName', callback, priority )
removeFilter( 'hookName', 'namespace', 'functionName' )
removeAllFilters( 'hookName' )
applyFilters( 'hookName', content, arg1, arg2, ... )
doingFilter( 'hookName' )
didFilter( 'hookName' )
hasFilter( 'hookName' )

Sau khi đã cài đặt xong package @wordpress/hooks, bạn cần import package này vào plugin bằng cách thêm đoạn code sau vào đầu file script.js trong thư mục js của plugin:

import { createHooks } from '@wordpress/hooks';

Vẫn trong file script.js này, hãy tạo một biến để sử dụng hook. Mình đã tạo một biến như sau:

let globalHooks = createHooks();

Giờ thì bạn đã có thể sử dụng JavaScript hook trong plugin rồi đấy!

Bước 3: Tạo chức năng chính cho plugin

Plugin của mình đến lúc này vẫn chưa có tính năng gì cả, nên giờ mình sẽ tạo tính năng là xác định tên của trình duyệt cho nó.

Mình tạo một hàm getBrowser() trong file script.js với nội dung như sau:

function getBrowser() {
	let result = '';
	if ( ( navigator.userAgent.indexOf( 'Opera' ) || navigator.userAgent.indexOf( 'OPR' ) ) != -1 ) {
		result = 'Opera';
	}
	else if ( navigator.userAgent.indexOf( 'Chrome' ) != -1 ) {
		result = 'Chrome';
	}
	else if ( navigator.userAgent.indexOf( 'Safari' ) != -1 ) {
		result = 'Safari';
	}
	else if ( navigator.userAgent.indexOf( 'Firefox' ) != -1 )  {
		result = 'Firefox';
	}
	else if ( ( navigator.userAgent.indexOf( 'MSIE' ) != -1 ) || ( !! document.documentMode == true ) ) {
		result = 'IE';
	}
	else {
		result = 'Unknown';
	}
	return result;
}

Hàm getBrowser() này sẽ trả về tên trình duyệt mà bạn đang sử dụng (Opera, Chrome, Safari, Firefox, IE).

Tiếp theo, bạn hãy gọi hàm getBrowser() trong file script.js với lệnh console.log, cú pháp như sau:

console.log( getBrowser() );

Lúc này, hệ thống sẽ báo lỗi vì bạn chưa cài webpack. Vậy nên, hãy chuyển sang bước 4 để hoàn tất việc tạo plugin.

Bước 4: Cài đặt webpack

Để plugin hoạt động được, mình cần cài webpack bằng cách chạy lần lượt các dòng lệnh sau trong terminal:

  1. Câu lệnh để tạo nội dung đầu tiên cho file package.json: npm init -y
  2. Câu lệnh để cài webpack: npm install --save-dev webpack

Sau khi chạy xong hai câu lệnh trên, một thư mục node_modules sẽ tự động được tạo trong plugin. Thư mục này sẽ chứa tất cả các modules liên quan đến webpack.

Tiếp theo, bạn cần cài đặt webpack-cli bằng cách chạy câu lệnh dưới đây: 

npm install – save-dev webpack-cli

Sau đó, hãy mở file package.json và thêm khai báo sau:

"scripts": {
	"build": "webpack",
	"watch": "webpack --watch"
},

Khai báo này dùng để thiết lập lệnh chạy build webpack (lệnh npm run watch).

Giờ bạn cần tạo file webpack.config.js để thiết lập đường dẫn file js đầu vào và đầu ra của webpack:

const path = require( 'path' );

const config = {
	mode: 'development',
	entry: './js/script.js',
	output: {
		filename: 'main.js',
		path: path.resolve( __dirname, 'dist' )
	}
}

module.exports = config;

Ở đây, mình đã thiết lập file đầu vào ở đường dẫn js/script.js và file đầu ra ở đường dẫn dist/main.js.

Ok, đó là tất cả những gì bạn cần thiết lập cho webpack. Giờ hãy chạy lệnh sau trong terminal để build webpack:

npm run watch

Sau khi webpack được build thành công, plugin đã bắt đầu hoạt động.

Giờ hãy bật Chrome DevTools (nhấn F12) ngoài front end, bạn sẽ thấy kết quả hiển thị ra như sau:

Kết quả hiển thị tên trình duyệt sau khi cài Webback

Như các bạn có thể thấy, plugin đã trả về tên trình duyệt mà mình đang sử dụng là Chrome. Nghĩa là chức năng đã được thêm vào plugin thành công.

Bước 5: Dùng JavaScript Hook để thêm tính năng phụ cho plugin

Bạn còn nhớ hàm getBrowser() trong file script.js mà mình vừa tạo ở bước 3 chứ? Ở phần kết quả trả về của hàm, mình sẽ thay đoạn return result; bằng một đoạn mới là return globalHooks.applyFilters( 'detect_browser', result ); . Đoạn code này dùng để tạo một filter 'detect_browser' giúp thay đổi các kết quả trả về.

Hàm getBrowser() lúc này sẽ có nội dung như sau:

function getBrowser() {
	let result = '';
	if ( ( navigator.userAgent.indexOf( 'Opera' ) || navigator.userAgent.indexOf( 'OPR' ) ) != -1 ) {
		result = 'Opera';
	}
	else if ( navigator.userAgent.indexOf( 'Chrome' ) != -1 ) {
		result = 'Chrome';
	}
	else if ( navigator.userAgent.indexOf( 'Safari' ) != -1 ) {
		result = 'Safari';
	}
	else if ( navigator.userAgent.indexOf( 'Firefox' ) != -1 )  {
		result = 'Firefox';
	}
	else if ( ( navigator.userAgent.indexOf( 'MSIE' ) != -1 ) || ( !! document.documentMode == true ) ) {
		result = 'IE';
	}
	else {
		result = 'Unknown';
	}
	return globalHooks.applyFilters( 'detect_browser', result );
}

Tiếp theo, mình sẽ thực hiện hook vào filter 'detect_browser' trên để thay đổi kết quả trả về của plugin bằng cách viết tiếp đoạn code sau vào file script.js:

globalHooks.addFilter( 'detect_browser', 'myApp', filterGetBrowser );
function filterGetBrowser( browser ) {
	const { userAgent } = navigator;
	if ( userAgent.includes( 'Firefox/' ) ) {
		browser = `Firefox v${userAgent.split( 'Firefox/' )[1]}`;
	} else if ( userAgent.includes( 'MSIE/' ) ) {
		browser = `IE v${userAgent.split( 'MSIE/' )[1]}`;
	} else if ( userAgent.includes( 'Chrome/' ) ) {
		browser = `Chrome v${userAgent.split( 'Chrome/' )[1]}`;
	} else if ( userAgent.includes( 'Safari/' ) ) {
		browser = `Safari v${userAgent.split( 'Safari/' )[1]}`;
	}
	return browser;
}

Hàm filterGetBrowser này được hook vào filter 'detect_browser' sẽ trả về thông tin đầy đủ của trình duyệt mà người dùng đang sử dụng.

Sau khi thêm filter, mình chạy lại webpack rồi ra ngoài front end bật Chrome DevTools lên (F12) để kiểm tra kết quả:

Kết quả trả về sau khi thêm tính năng phụ cho Plugin bằng JavaScript  Hook.

Bên cạnh tên trình duyệt (Chrome), plugin đã trả về version của trình duyệt (v90.0.4430.72). Vậy là filter được thêm vào bằng JavaScript hook đã hoạt động tốt.

Bạn có thể tham khảo source code plugin của mình tại đây nhé!

Lời cuối

Tổng kết lại, trong bài này, chúng ta đã sử dụng Javascript hook để nâng cấp chức năng cho một plugin giúp xác định trình duyệt mà người dùng đang sử dụng. Bạn có thể dùng filter này trong theme hoặc dùng nó để xử lý sâu hơn như lấy version của trình duyệt chẳng hạn.

Đây chỉ là một trong vô vàn các ứng dụng của việc dùng JavaScript hook trong WordPress. Bạn đã từng sử dụng nó trong một trường hợp cụ thể nào khác chưa? Hãy chia sẻ kinh nghiệm đó cho chúng mình biết trong phần bình luận nhé!

Để lại bình luận

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 *