Tìm hiểu về hệ thống Hook của Genesis Framework

Hook là gì ? Nếu bạn sử dụng WordPress có lẽ bạn sẽ được nghe đến nó. Bạn còn được nghe đến nó nhiều hơn nếu bạn sử dụng các theme chuyên dụng như Genesis hoặc Thesis. Trong bài viết này mình muốn giới thiệu với các bạn về bộ Hook của Genesis.

Hook để làm gì ?

Hook là một công cụ được viết để bạn bổ sung code vào theme của WordPress một cách dễ dàng và nhanh chóng mà không làm thay đổi những mặc định trong theme. Nói cách khác, Hook là chìa khóa giúp bạn custom theme WordPress được dễ dàng hơn.

Nhận diện “Hook” của theme Genesis

Rất đơn giản, bạn có thể mở và tìm thấy những đoạn code như sau:

<?php genesis_before_footer(); ?>
<div id="footer">
<div class="wrap">
<?php genesis_footer(); ?>

Dòng đầu tiên và cuối cùng trong đoạn code trên là 2 hook nằm trong file foooter.php của một theme Genesis. Những đoạn này sẽ được thay thế bằng các nội dung bạn tạo bổ sung.

Sử dụng Hook

Đây là phần quan trọng vì nó giúp bạn có thể điều khiển các Hook dễ dàng và tùy chỉnh theo ý mình. Việc nắm rõ cách sử dụng, tên các Hook có thể giúp bạn dễ dàng tùy biến nội dung theo ý mình., Vì vậy các bạn hãy chú ý nhé :)

Bước 1: tạo một file nội dung.
Bạn tạo một file php bất kì rồi đưa một vài nội dung cần hiển thị ở bên ngoài theme vào. Ví dụ ở đây, tôi tạo file bottom-widgets.php.

Bước 2: CSS và HTML.

Đây là bước làm đẹp cho nội dung trước khi đưa trang này lên thông qua Hook. Bạn sử dụng CSS để định dạng và căn chỉnh cho hợp lý.

Bước 3: Tạo hàm cho phép gọi file bottom-widgets.php. Hàm bạn tạo được đặt trong functions.php nằm trong child theme của bạn. Đây là đoạn code của mình:

function include_bottom_widgets() {
    require(CHILD_DIR.'/bottom-widgets.php');
}

Nếu nội dung của bạn cần là một đoạn text ngắn, hoặc bạn có thể lập trình bằng PHP bạn có thể code trực tiếp tất cả trong hàm này. Việc thực thi bước 1, bước 2 vì tôi muốn các mã lập trình sáng sủa hơn và dễ tìm thấy hơn bằng cách chia nhỏ ra.

Bước 4: gọi Hook tương ứng

Bạn có thể đặt đoạn code sau vào phía trên đoạn code ở bước 3 để gọi Hook và truyền hàm tương ứng vào Hook này:

add_action('genesis_before_footer', 'include_bottom_widgets');

Ở đây NhanWeb gọi Hook genesis_before_footer và gọi hàm include_bottom_widgets đã viết ở bước 3 để thực thi tại vị trí trước vị trí footer.

Đoạn code đẹp và hoàn chỉnh cho bước 3 và 4 là

add_action('genesis_before_footer', 'include_bottom_widgets');
function _include_bottom_widgets() {
    require(CHILD_DIR.'/bottom-widgets.php');
}

Danh sách các Hook bạn có thể sử dụng

Ở trên mình đã giới thiệu cách sử dụng Hook rồi, sau đây mình xin giới thiệu các bạn danh sách các Hook của Genesis để bạn có thể sử dụng. Bạn muốn sử dụng Hook nào thì gọi tương ứng như đã nói ở trên và đặt vào functions.php trong child theme nhé.

Internal Action Hooks

genesis_pre
This is the first hook to execute within Genesis. Think of any function hooked to it as being executed before any Genesis functions have loaded.

genesis_pre_framework
This hook executes immediately before any of the Genesis Framework components have been loaded, but after all the constants have been defined.

genesis_init
This hook fires at the end of the /lib/init.php file. Think of any function hooked to it as being executed after all Genesis functions have loaded, but before any custom code in the child functions.php file is run.

Document Head Action Hooks

genesis_title
This hook executes between tags and outputs the doctitle. You can find all doctitle related code in /lib/structure/header.php.

genesis_meta
This hook executes in the section of the document source. By default, things like META descriptions and keywords are output using this hook, along with the default stylesheet and the reference to the favicon.

Structural Action Hooks

genesis_before
This hook executes immediately after the opening tag in the document source.

genesis_after
This hook executes immediately before the closing tag in the document source.

genesis_before_header
This hook executes immediately before the header (outside the #header div).

genesis_header
By default, this hook outputs the header code, including the title, description, and widget area (if necessary).

genesis_after_header
This hook executes immediately after the header (outside the #header div).

genesis_site_title
By default, this hook outputs the site title, within the header area. It uses the user-specified SEO settings to build the site title markup appropriately.

genesis_site_description
By default, this hook outputs the site description, within the header area. It uses the user-specified SEO settings to build the site description markup appropriately.

genesis_before_content_sidebar_wrap
This hook executes immediately before the div block that wraps the content and the primary sidebar (outside the #content-sidebar-wrap div).

genesis_after_content_sidebar_wrap
This hook executes immediately after the div block that wraps the content and the primary sidebar (outside the #content-sidebar-wrap div).

genesis_before_content
This hook executes immediately before the content column (outside the #content div).

genesis_after_content
This hook executes immediately after the content column (outside the #content div).

genesis_sidebar
This hook outputs the content of the primary sidebar, including the widget area output.

genesis_before_sidebar_widget_area
This hook executes immediately before the primary sidebar widget area (inside the #sidebar div).

genesis_after_sidebar_widget_area
This hook executes immediately after the primary sidebar widget area (inside the #sidebar div).

genesis_sidebar_alt
This hook outputs the content of the secondary sidebar, including the widget area output.

genesis_before_sidebar_alt_widget_area
This hook executes immediately before the alternate sidebar widget area (inside the #sidebar-alt div).

genesis_after_sidebar_alt_widget_area
This hook executes immediately after the alternate sidebar widget area (inside the #sidebar-alt div).

genesis_before_footer
This hook executes immediately before the footer, outside the #footer div.

genesis_footer
This hook, by default, outputs the content of the footer, including the #footer div wrapper.

genesis_after_footer
This hook executes immediately after the footer, outside the #footer div.

Loop Action Hooks

genesis_before_loop
This hook executes immediately before all loop blocks. Therefore, this hook falls outside the loop, and cannot execute functions that require loop template tags or variables.

genesis_loop
This hook outputs the actual loop. See lib/structure/loop.php and lib/structure/post.php for more details.

genesis_after_loop
This hook executes immediately after all loop blocks. Therefore, this hook falls outside the loop, and cannot execute functions that require loop template tags or variables.

genesis_after_endwhile
This hook executes after the endwhile; statement in all loop blocks.

genesis_loop_else
This hook executes after the else : statement in all loop blocks.

genesis_before_post
This hook executes before each post in all loop blocks (outside the post_class() div).

genesis_after_post
This hook executes after each post in all loop blocks (outside the post_class() div).

genesis_before_post_title
This hook executes immediately before each post title for each post within the loop.

genesis_post_title
This hook outputs the actual post title, contextually, based on what type of page you are viewing.

genesis_after_post_title
This hook executes immediately after each post title for each post within the loop.

genesis_before_post_content
This hook executes immediately before the post/page content is output, outside the .entry-content div.

genesis_post_content
This hook outputs the actual post content and if chosen, the post image (inside the #content div).

genesis_after_post_content
This hook executes immediately after the post/page content is output, outside the .entry-content div.

Comment Action Hooks

genesis_before_comments
This hook executes immediately before the comments block (outside the #comments div).

genesis_comments
This hook outputs the entire comments block, including the section title. It also executes the genesis_list_comments hook, which outputs the comment list.

genesis_after_comments
This hook executes immediately after the comments block (outside the #comments div).

genesis_list_comments()
This hook executes inside the comments block, inside the .comment-list OL. By default, it outputs a list of comments associated with a post via the genesis_default_list_comments() function.

genesis_before_pings
This hook executes immediately before the pings block (outside the #pings div).

genesis_pings
This hook outputs the entire pings block, including the section title. It also executes the genesis_list_pings hook, which outputs the ping list.

genesis_after_pings
This hook executes immediately after the pings block (outside the #pings div).

genesis_list_pings()
This hook executes inside the pings block, inside the .ping-list OL. By default, it outputs a list of pings associated with a post via the genesis_default_list_pings() function.

genesis_before_comment
This hook executes before the output of each individual comment (author, meta, comment text).

genesis_after_comment
This hook executes after the output of each individual comment (author, meta, comment text).

genesis_before_comment_form
This hook executes immediately before the comment form, outside the #respond div.

genesis_comment_form
This hook outputs the actual comment form, including the #respond div wrapper.

genesis_after_comment_form
This hook executes immediately after the comment form, outside the #respond div.

Hầu hết các hướng dẫn tùy biến theme Genesis đều xoay quanh các Hook này, do đó đây là một thành phần bạn không thể không biết đến nếu muốn làm chủ blog cá nhân của mình :)