[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 回傳值，不然就會有進無出。而動作則是執行特定函式的功能，這些功能並不一定需要回傳值。

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

常用的勾點

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

小結

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

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

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