Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

[WordPress 日記] Day 1 勾點 Hook 初探

前言

30 天 WordPress 筆記系列,主要是為了讓自己習慣每天產出新的內容開始的小計畫。每篇篇幅並不會相同,會根據自己的忙碌狀態做調整。

為什麼要理解 hook?

原因很簡單:hook (以下稱「勾點」) 是 WordPress 之所以能夠成為市佔率最高 CMS (Content Management System,內容管理系統) 的原因。

在一開始接觸 WordPress 時,可能會聽過 WordPress 的強項在於「可以透過外掛或佈景主題的方式,替 WordPress 提供進階的客製化功能。」而這些進階的客製化功能,則是透過 勾點參與整個 WordPress 網站載入的過程。

即使你並沒有打算成為外掛或佈景主題的開發者,了解勾點的運作機制,不論是在偵錯的時候,或是「不想要安裝太多外掛」時,都可以幫助你達到想要的目的。在後續舉的兩個例子,就是透過 hook 的方式,去完成平常需要透過外掛進行的設定。

什麼是勾點?

勾點就是在特定的網頁流程,找出對應的工具,並且輸出對應的結果。

關於勾點的詳細介紹,可以參考 Audi 的《WordPress的Hook機制與原理》一文,本文將根據目前官方的開發人員文件,針對(我自己)常用的勾點進行解說。但為了使讀者們更便於了解後續內容,這裡會先簡單介紹兩種勾點:filters(以下稱「篩選器」) 與 actions (以下稱「動作」)。

篩選器與動作

根據 WordPress Codex 的定義,動作指的是「在 WordPress 事件發生時,同時觸發特定函式 (functions)」,而篩選器指的是「在 WordPress 將資料於資料庫與瀏覽器間傳遞的過程中,篩選特定資料並回傳已經過轉換的值」。

用情境來理解的話,動作是「WordPress 正在 OOO,這時候我也 XXX」,譬如說:「WordPress 正在載入標頭 (header) 內容,我想要在這時候執行 my_enequeue_style 這項工作,以載入 /path/to/style.css 檔」用動作的寫法就會是:

<?php
add_action( 'wp_head', 'my_enqueue_style' );
function my_enqueue_style () {
    wp_enqueue_style( 'my-style', '/path/to/style.css' );
}

而篩選器則是「現在 WordPress 正要輸出/入 OOO,但我想先 XXX」,譬如說:「WordPress 正要輸出 CSS 跟 JavaScript 的元素,但我想先移除檔案的版本資訊」用篩選器的寫法就會是:

function remove_version_query($src) {
        if (strpos($src, 'ver=')) {
            $src = remove_query_arg('ver', $src);
        }
        return $src;
    }
add_filter('style_loader_src', 'remove_version_query', 999);
add_filter('script_loader_src', 'remove_version_query', 999);

(備註:上述程式碼片段引自開源專案 Work with WordPress

兩者最大的差異,在於篩選器是介於瀏覽器 (前端) 與資料庫 (後端) 將資料進行篩選、改寫,因此必然會需要使用 return 回傳值,不然就會有進無出。而動作則是執行特定函式的功能,這些功能並不一定需要回傳值。

了解了篩選器跟動作之後,這邊就來筆記一下我自己常用的勾點。

常用的勾點

名稱類型功能
wp_enqueue_scriptsactionWordPress 開始引入 CSS、JS 檔案時的動作。
wp_headaction所有會在 wp_head() 執行時的動作,包含載入頁面中繼資料 (meta)、引入 CSS、JS 檔案等。
the_postaction在 WordPress 完成文章查詢請求後的動作。
wp_footeraction所有會在 wp_footer() 執行時的動作,譬如載入客製化的 JavaScript 等。
body_classfilter在導出 body 元素的 CSS 類型時進行篩選、改寫。
get_the_excerptfilter在取得文章內容摘要時,進行篩選、改寫。可用於自訂文章內容摘要長度的時候。
manage_posts_columnsfilter在各文章類型 (post type) 的管理頁面中,顯示特定欄位時使用。

完整的勾點資訊可以參考 WordPress Codex 中的《Plugin API/Action Reference》與《Plugin API/Filter Reference》。

小結

以上是針對勾點觀念的介紹,如同前面所敘述的,學習勾點最主要的好處,在於了解 WordPress 外掛與佈景主題的運作機制,對於「不想安裝太多外掛」的人來說,是相當重要的技巧。

但是有了勾點的概念後,應該要如何使用呢?大多數的線上教學,都會告訴你「把這些程式碼複製貼上到當前佈景主題的 functions.php 檔案中」,但是這項作法其實存在相當的風險:「當佈景主題更新後,你所做的變更就會付諸東流。」

因此本系列的下一篇文章,將會介紹 WordPress 客製化中相當重要的觀念:子佈景主題 (Child Themes)。

Eric Chuang
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

5 則留言

發佈回覆給「[30 天 WordPress 筆記] Day 2 子佈景主題 | 桓桓 WordPress 修煉之路」的留言取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料