M2 – Action Và Filter Hook Trong WordPress6 phút đọc

Trong bài học này, mình sẽ hướng dẫn các bạn một phần rất quan trọng trong WordPress đó là HOOK. Chúng ta sẽ tìm hiểu HOOK là Action và Filter, cách thức hoạt động như thế nào.

Để mình diễn tả về hoạt động của WordPress nhé. Nếu như cả website là một chiếc xe thì WordPress chính là động cơ. Công việc của chính ta là làm vỏ ngoài (theme), thêm một số tính năng (plugin) phát triển dựa vào động cơ chính. Tuy nhiên, để thao tác với động cơ chính chúng ta cần có những điểm neo, những điểm có thể can thiệp vào hoạt động của động cơ mà phá hỏng hoạt động của nó.

Ví dụ: để đổ nhiên liệu, chính ta cần có bình xăng, không thể đổ trực tiếp vào động cơ. Cần thêm nhớt, chúng ta có điểm neo là bình nhớt. Cần lấy động năng sinh ra từ động cơ, chính ta cần trục quay, không thể lắp bánh xe trực tiếp vào động cơ mà phải thông qua 1 điểm là trục quay. Hook trong WordPress cũng như thế. Chung ta sẽ tương tác, nhập, chỉnh sửa, truy xuất, sử dụng đầu ra của dữ liệu trong trong WordPress thông qua các điểm neo gọi là HOOK.

Action Hook

Action Hook là một điểm neo để chúng ta có thể thêm hành động can thiệp vào hoạt động của WordPress. Mình sẽ làm một số demo về action hook nhé.

Cách sử dụng

+ Thực thi action hay nói cách khác là xác định mỏ neo. Bạn cần tạo mỏ neo ở đâu thì đặt hàm do_action ở đó

do_action( $hook_name);

  • $hook_name (string): tên hook

+ Thêm hàm xử lý cho Hook bằng hàm add_action() bao gồm có tham số sau:

add_action( $hook_name, $callaback_function , $priority  , $accepted_args )

  • $hook_name (string): tên hook cần thêm hàm xử lý
  • $callaback_function (string / anonymous function): các bạn có thể đưa vào tên hàm đã khai báo hoặc một hàm dạng nặc danh.
  • $priority  (int): thứ tự ưu tiên khi có nhiều hàm được gắn vào cùng một hook. Số càng nhỏ, càng được ưu tiên trước.
  • $accepted_args (int): số lượng tham số được truyền vào hàm callback, mặc định là 1.

Bạn có thể hiểu như sau: Tại vị trí có tên là hook_name, chúng ta sẽ thực hiện thao tác có tên là callback_function.

Demo về Action Hook

Ví dụ 1

Xác định vị trí mỏ neo – Khai báo vị trí của Hook.

do_action('demo_action');

Mình đặt do_action trong phần html.

Thêm hàm xử lý cho Hook có tên là demo_action

add_action( 'demo_action', function(){
   echo 'Đây là demo'; 
});

Hoặc có bạn có thể thêm hàm đã có sẵn như sau.

if(!function_exists('func_demo_action')){
   function func_demo_action(){
	echo "<h1>Đây là demo</h1>";
   }
}
add_action( 'demo_action', 'func_demo_action');

Hàm function_exists để kiểm tra xem hàm xử lý của chúng ta đã tồn tại chưa, tránh việc bị trùng tên và gây lỗi. Các bạn xem video để thấy được kết quả nhé.

Ví dụ 2

Lần này chúng ta sẽ sử dụng một hook tiêu chuẩn của WordPress là wp_head chứ không phải hook tự tạo nhé.

add_action( 'wp_head', function(){
	echo "<script>alert('Page is loading...');</script>";
});

Phần do_action thì theme nếu đúng chuẩn của WordPress đã gọi ra rồi nên bạn không cần phải do_action nhé. Nếu muốn biết do_action được gọi ra như thế nào thì các bạn hãy vào file header.php trong theme. Các bạn sẽ thấy hàm wp_head.

Tra cứu trên trang codex WordPress, họ sẽ giải thích rằng:

  • Hàm wp_head làm nhiệm vụ do_action(‘wp_head’)
  • Hook wp_head này cho phép các bạn thao tác, thêm dữ liệu vào phần head của html.

Chạy thử nhé.

Filter Hook

Action Hook là một điểm neo để chúng ta có thể thêm hành động can thiệp vào hoạt động của WordPress và trả về dữ liệu đã thay đổi.

Cách sử dụng

+ Xác định vị trí của Filter Hook bằng apply_filters

apply_filters( $filter_name , $value, $agrs )

  • $filter_name (string): tên bộ lọc hay có thể nói đây là hook
  • $default_value : giá trị đưa vào bộ lọc
  • $agrs:  tham số cho hàm callback

+ Xử lý dữ liệu và trả về dữ liệu

add_filter( $filter_name , $callback_function, $priority, $accepted_args  = 1)

  • $filter_name (string): tên bộ lọc hay có thể nói đây là hook
  • $callback_function: Hàm xử lý được khai báo trước hoặc nặc danh
  • $priority: Thứ tự ưu tiên, số càng nhỏ, càng được ưu tiên trước.
  • $accepted_args: Số lượng tham số truyền vào hàm callback. Giá trị mặc định là 1.

Demo Filter Hook

Ví dụ 1: Tự tạo Filter Hook

Xác định vị trí của Filter Hook

echo apply_filters( 'demo_filter', '<h1>Filter Demo</h1>' );

Xử lý dữ liệu và trả kết quả khác.

function filter_demo_func( $str ) {
    $str = 'Filter đã chỉnh sửa';
    return $str;
}
add_filter( 'demo_filter', 'filter_demo_func' );

Xem kết quả trước và sau khi xử lý nhé.

Ví dụ 2: Sử dụng Filter Hook có sẵn

Chúng ta sẽ biến những từ WordPress xuất hiện trong bài viết được tô nền đỏ chữ trắng.

function keyword_filter( $content ) {
    $find = 'WordPress';
    $replacement = '<b style="color:white;background:red;">WordPress</b>';
    $content = str_replace( $find, $replacement, $content );
    return $content;
}
add_filter( 'the_content', 'keyword_filter' );

Một trang tài liệu rất hữu ích cho các bạn đó Codex WordPress

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 *