9. Giới thiệu WordPress Action Hook

Như bạn đã biết, thì ở các bài trước tôi hay nhắc đến khái niệm Hook nhưng lại không hướng dẫn và nói cụ thể về nó, tại vì nó quá nhiều kiến thức nếu nói sơ quá thì bạn sẽ khó hiểu và sẽ gặp nhiều khó khăn khi phát triển WordPress. Do đó ở bài Giới thiệu WordPress Action Hook tôi sẽ trình bày chi tiết hơn.

Các ví dụ trong bài sẽ được thực hiện thông qua một plugin , vậy nên nếu bạn nào quên bài thì mời xem lại bài Xây dựng WordPress plugin căn bản.

Các nội dung bạn được học trong bài bao gồm:

· Hook là gì ?

· Giới thiệu WordPress Action Hook

· Khai báo & sử dụng Action Hook

Kết thúc bài này thì tôi tin rằng bạn đã hiểu khái niệm về Hook cũng như cách sử dụng tốt nó trong hệ thống WordPress, vì thoạt nhìn bạn sẽ nghĩ rằng nó không quá quan trọng, nhưng đừng xem thường nó , bạn sẽ mất đi 30% sức mạnh của WordPress nếu không am tường kỹ càng vấn đề này.

1/ Hook là gì ?

Nói suông về vấn đề này sẽ rất khó hiểu, vì thế tôi sẽ đưa ra một giả thiết để bạn dễ hình dung hơn.

Đây là mô hình của một ngôi nhà, bạn hãy tưởng tượng là bạn bỏ tiền ra mua một căn nhà ở chung cư , ngôi nhà đã được các người chủ đầu tư xây dựng sẵn, và trong quá trình xây dựng thì những người thợ sẽ thiết lập một hệ thống dây điện và các thiết bị điện cho ngôi nhà của bạn. Nhưng các thiết bị điện đã gắn sẵn như là bóng đèn, quạt máy hay máy lạnh, chưa chắc sẽ đáp ứng hết nhu cầu của bạn. Chính vì điều này mà những người thợ điện đã tạo ra những cái ổ cắm ở đầu dây điện trong ngôi nhà của bạn, để bạn có thể dễ dàng gắn thêm những thiết bị điện khác. Ví dụ bạn mua thêm một cái tivi và bạn để trong ngôi nhà của bạn. Thì bạn chỉ cần mua nó về và cắm vào ổ cắm là nó hoạt động.

Ở ví dụ minh họa này tôi đã sử dụng những vật gần gũi nhất trong cuộc sống của chúng ta. Bây giờ bạn sẽ xem xét ví dụ trên với hình minh họa, Ngôi nhà bạn mua chính là hệ thống của WordPress và sau khi các bạn đã cài đặt hệ thống dây điện, các thiết bị điện và các ổ cắm điện có sẵn chính là hệ thống các phương thức trong WordPress.Vậy Hook trong WordPress sẽ giống như các ổ cắm điện để bạn gắn thêm vào các thiết bị, các plugin của bạn chính là các thiết bị điện mà chúng ta muốn bổ sung thêm vào cho ngôi nhà.

Hook

Tóm lại:

Khái niệm Hook trong WordPress giúp bạn đưa vào hệ thống WordPress một số chức năng để thực thi những hành động mà bạn muốn, mà không cần phải chỉnh sửa core của WordPress. Hook được sử dụng nhiều trong quá trình xây dựng plugin và thiết kế themes cho WordPress.

Các plugin sẽ tương tác với các Hook để thay đổi quá trình xử lý trong hệ thống WordPress. Trong core của WordPress hiện tại đang sử dụng khá nhiều Hook, WordPress hỗ trợ bạn hai kiểu Hook chính: Action Hook & Filter Hook.

Bạn không cần quan tâm tới Filter Hook, tôi sẽ hướng dẫn về nó ở các bài sau. Trong bài này trọng tâm sẽ là Action Hook.

2/ Giới thiệu WordPress Action Hook?

Action Hook là một hàm được viết bằng php và thực thi các thao tác thông qua file plugin.php thuộc folder wp-includes, nó được sử dụng nhiều trong quá trình viết plugin, hỗ trợ bạn gọi và kích hoạt các hàm được gán vào vị trí mà Hook đang hoạt động.

Vậy hiện tại hệ thống WordPress cung cấp cho bạn bao nhiêu Hook? Câu trả lời là có gần 2000 Hook các kiểu, bạn có thể xem chi tiết hơn ở link này.

Link: http://adambrown.info/p/wp_hooks/hook

Bạn sẽ hiểu hơn về nó sau khi sử dụng.

1/ Khai báo & sử dụng Action Hook?

Để gắn một Action vào một vị trí (Hook) nào đó bạn sẽ sử dụng hàm:

1	add_action( $tag, $function, $priority, $accepted_args );

Các tham số:

· $tag: Là tên của một Action Hook (Bạn có thể xem danh Action Hook ở link trên)

· $function: Tên action (hàm) mà bạn viết để tương tác vào hệ thống

· $priority: Độ ưu tiên của action

· $accepted_args: Số lượng các tham số được truyền vào action (Chưa quan tâm tới)

Ok, tiếp theo bạn cần phải tạo ra một plugin mới, cách tạo plugin thì tôi sẽ không nhắc lại, nếu bạn quên thì có thể xem lại bài cũ, tôi sẽ lướt nhanh ở phần này.

Vào folder wp-content->plugin tôi tạo folder lionel-hook.

Cấu trúc plugin

lionel-hook – css – style.css – lionel-hook.php

Nội dung file lionel-hook.php:

1 2 3 4 5 6 7 8 9 10 11 12 13

<?php /** * @package Demo Hook Action By Lionel * @version 0.1 */ /* Plugin Name: Demo Hook Action Plugin URI: http://laptrinhweb.org Description: Demo về cách sử dụng Hook Action. Author: Lionel Version: 1.0 Author URI: None */

Demo Hook action plugin

Click active xem có điều gì xảy ra không? chắc chắn là không vì có đoạn code xử lý gì đâu nào

Hàm add_action:

Hàm này giúp bạn gắn một action vào vị trí của Hook do bạn chỉ định. Để hàm này hoạt động thì bạn cần trải qua hai bước chính.

1. Tạo action (hàm) thực thi các hành động bạn tạo ra.

2. Cho phép action vừa tạo truy cập vào Hook được chỉ định

Đoạn code xử lý:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?php /** * @package Demo Hook Action By Lionel * @version 0.1 */ /* Plugin Name: Demo Hook Action Plugin URI: http://laptrinhweb.org Description: Demo về cách sử dụng Hook Action. Author: Lionel Version: 1.0 Author URI: None */ add_action('wp_head', 'lionel_hook_demo'); function lionel_hook_demo(){ echo "Hook Working <br />"; }

Kết quả: Bạn sẽ thấy dòng text Hook Working xuất hiện ở phần đầu của trang web.

Phần xử lý code, tức là tôi khởi tạo action lionel_hoọk_demo, sau đó tôi cho phép action này truy cập và hiển thị nội dung câu chào ở vị trí Hook wp_head., tức phần header(đầu trang web).

Vấn đề nảy sinh, nếu tôi có hai action muốn hiển thị cùng một vị trí thì action nào sẽ được ưu tiên hiển thị trước ?

À, bây giờ thì bạn cần phải khai báo thêm tham số thứ ba vào hàm add_action rồi đây.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?php /** * @package Demo Hook Action By Lionel * @version 0.1 */ /* Plugin Name: Demo Hook Action Plugin URI: http://laptrinhweb.org Description: Demo về cách sử dụng Hook Action. Author: Lionel Version: 1.0 Author URI: None */ add_action('wp_head', 'lionel_hook_demo'); add_action('wp_head', 'lionel_hook_demo1'); function lionel_hook_demo(){ echo "Hook Working <br />"; } function lionel_hook_demo1(){ echo "Hook Working demo <br />"; }

Đoạn code này tôi chưa truyền vào tham số thứ ba thì, mặc nhiên nó sẽ hiển thị thằng nào đứng ở vị trí cao hơn.

Kết quả : Trình duyệt trả về.

Hook Working Hook Working demo

Giá trị mặc định của tham số thứ ba là 10, nếu bạn để rỗng nó sẽ tự set giá trị bằng 10. và sắp xếp theo kiểu thằng nào xếp trước thì được ưu tiên hiển thị đầu tiên.

Bây giờ tôi sẽ truyền vào tham số thứ ba cho cả hai action.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?php /** * @package Demo Hook Action By Lionel * @version 0.1 */ /* Plugin Name: Demo Hook Action Plugin URI: http://laptrinhweb.org Description: Demo về cách sử dụng Hook Action. Author: Lionel Version: 1.0 Author URI: None */ add_action('wp_head', 'lionel_hook_demo', 19); add_action('wp_head', 'lionel_hook_demo1', 18); function lionel_hook_demo(){ echo "Hook Working <br />"; } function lionel_hook_demo1(){ echo "Hook Working demo <br />"; }

Độ ưu tiên sẽ sắp xếp theo cơ chế giảm dần, số nào nhỏ nhất sẽ được ưu tiên trước. Thông qua ví dụ này hy vọng bạn hiểu được cách sử dụng tham số thứ ba.

Kết quả:

Hook Working demo Hook Working

Để bạn nắm bắt vấn đề tốt hơn, thì tôi có một ví dụ như sau, chèn một đường dẫn chứa file style.css vào cặp thẻ head ở phần đầu trang web. Tức là bạn sẽ cho phép action truy cập vào vị trí Hook wp_head.

Đoạn code xử lý:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<?php /** * @package Demo Hook Action By Lionel * @version 0.1 */ /* Plugin Name: Demo Hook Action Plugin URI: http://laptrinhweb.org Description: Demo về cách sử dụng Hook Action. Author: Lionel Version: 1.0 Author URI: None */ add_action('wp_head', "lionel_hook_add_css"); function lionel_hook_add_css(){ $Url = plugins_url('css/style.css', __FILE__); echo $Url; }

Kết quả: Phần đầu website sẽ show dòng http://localhost/wordpress/wp-content/plugins/lionel-hook/css/style.css.

Hàm lấy ra đường dẫn tương đối plugin thì tôi có hướng dẫn rồi hen, nên sẽ không nhắc lại nửa, quan tâm lúc này là làm sao nhúng dạng link <link rel=’stylesheet‘ href=” type=’text/css‘ media=’all‘ /> vào cặp thẻ head của website.

Xử lý:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<?php /** * @package Demo Hook Action By Lionel * @version 0.1 */ /* Plugin Name: Demo Hook Action Plugin URI: http://laptrinhweb.org Description: Demo về cách sử dụng Hook Action. Author: Lionel Version: 1.0 Author URI: None */ add_action('wp_head', "lionel_hook_add_css"); function lionel_hook_add_css(){ $Url = plugins_url('css/style.css', __FILE__); $css = '<link rel="stylesheet" type="text/css“ media="all" href="' . $Url . '" />'; echo $css; }

Kết quả: Ra trình duyệt, chuột phải view source(xem mã nguồn), bạn sẽ thấy dòng <link rel=”stylesheet” type=”text/css“ media=”all” href=”http://localhost/wordpress/wp-content/plugins/lionel-hook/css/style.css” /><style type=”text/css”>.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>. Xem như bạn vừa thực hiện nạp file css vào hệ thống WordPress.

Lúc này tại đây sẽ nảy sinh ra một vấn đề, tôi chỉ muốn file này được nạp ở vị trị các page, còn các bài viết hay category hoặc trang chủ sẽ không nạp file css này vào? Người nông dân phải làm sao đây.

Lúc bấy giờ , WordPress sẽ hỗ trợ bạn hàm is_page(), hàm này định nghĩa nếu là page sẽ tiến hành nạp file css vào, còn ở các vị trí khác sẽ xuất câu thông báo “Day khong phai la page”.

Code xử lý:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<?php /** * @package Demo Hook Action By Lionel * @version 0.1 */ /* Plugin Name: Demo Hook Action Plugin URI: http://laptrinhweb.org Description: Demo về cách sử dụng Hook Action. Author: Lionel Version: 1.0 Author URI: None */ add_action('wp_head', "lionel_hook_add_css"); function lionel_hook_add_css(){ $Url = plugins_url('css/style.css', __FILE__); if(is_page()){ $css = '<link rel="stylesheet" type="text/css“ media="all" href="' . $Url . '" />'; echo $css; }else{ echo "Day khong phai la page"; } }

Bạn truy cập vào link http://localhost/wordpress/?page_id=2, đây là sample page tức nó là page nên sẽ không có thông báo gì cả, view source thì thấy file css đã được nạp vào.

Do đó, bạn cần quay lại trang chủ hoặc click vào link http://localhost/wordpress/?p=1, đây là bài Hello World, nó không phải là page nên sẽ thấy phần head xuất ra câu thông báo lỗi “Day khong phai la page”.

Ok, vậy thông qua ví dụ này bạn sẽ hiểu cách check page để nạp css hoặc file gì đó cho hợp lý và theo ý của bạn.

Hàm remove_action:

Có hàm add thì tất nhiên sẽ có hàm remove, vậy muốn remove action tại một Hook thì bạn sẽ có cú pháp như sau.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?php /** * @package Demo Hook Action By Lionel * @version 0.1 */ /* Plugin Name: Demo Hook Action Plugin URI: http://laptrinhweb.org Description: Demo về cách sử dụng Hook Action. Author: Lionel Version: 1.0 Author URI: None */ add_action('wp_head', "lionel_hook_demo"); function lionel_hook_demo(){ echo "Hook Working"; } remove_action('wp_head', 'lionel_hook_demo');

Hàm remove_action(), cũng giống như hàm add_action() nó chỉ khác nhau khi thực thi hành động, với đoạn code trên thì bạn sẽ vô hiệu hóa action lionel_hook_demo.

Lưu ý: Hàm remove_action phải được đặt phía sau hàm add_action, nếu không nó sẽ không hoạt động được. Tốt nhất là đặt nó phía sau action của bạn như code tôi vừa xứ lý.

Kết quả: Trình duyệt đã mất đi câu thông báo Hook Working ở phần head.

Hàm remove_all_action():

Hàm này được định nghĩa remove toàn bộ action trong một Hook được bạn chỉ định.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?php /** * @package Demo Hook Action By Lionel * @version 0.1 */ /* Plugin Name: Demo Hook Action Plugin URI: http://laptrinhweb.org Description: Demo về cách sử dụng Hook Action. Author: Lionel Version: 1.0 Author URI: None */ add_action('wp_head', "lionel_hook_demo"); function lionel_hook_demo(){ echo "Hook Working"; } remove_all_actions('wp_head');

Cú pháp khá đơn giản, nhưng cực kì tinh tế mà mạnh mẽ, hàm này thường được dùng để xử lý website của các khách hàng khó chịu, không thanh toán tiền cho bạn.

Code trên, sẽ loại bỏ đi các action của Hook wp_head, kết quả là các file css, jquery nằm ở phần head đã biến mất.

Hàm has_action():

Hàm này được định nghĩa để kiểm tra sự tồn tại của action. nếu action có tồn tại nó sẽ trả về kết quả là 10, tức là giá trị mặc định ở tham số thứ ba của hàm add_action, hoặc sẽ trả về kết quả đúng với giá trị thứ ba của action mà bạn đang sử dụng.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?php /** * @package Demo Hook Action By Lionel * @version 0.1 */ /* Plugin Name: Demo Hook Action Plugin URI: http://laptrinhweb.org Description: Demo về cách sử dụng Hook Action. Author: Lionel Version: 1.0 Author URI: None */ add_action('wp_head', "lionel_hook_demo", 20); echo has_action('wp_head', 'lionel_hook_demo')."<br />"; function lionel_hook_demo(){ echo "Hook Working"; }

Tham số thứ ba của action tôi truyền vào là 20, vậy thì kết quả ở trình duyệt khi kiểm tra sự tồn tại của action sẽ in ra là 20, còn nếu action không tồn tại thì nó sẽ không xuất ra thông báo gì cả.

3/ Kết bài

Đây chỉ là một phần nhỏ đối với vấn đề Action Hook, ở bài sau tôi sẽ hướng dẫn bạn cách tạo mới một Action Hook, cũng như lập trình hướng đối tượng (OOP) để xây dựng plugin. Bài viết này chỉ đơn thuần Giới thiệu WordPress Action Hook mà thôi, cũng không có gì phức tạp hết. Nếu trình bày hết các vấn đề của Hook thì chắc 10 bài cũng chưa đủ, nhưng thông qua các bài nâng cao khác, tôi sẽ hướng dẫn bạn khai thác đầy đủ sức mạnh của nó.

Series Navigation<< Xây dựng WordPress plugin nâng caoXây dựng WordPress plugin với lập trình hướng đối tượng >>

Nguồn: laptrinhweb.org