• Skip to primary navigation
  • Skip to main content

桓桓鄉寇

如果一開始沒有高牆,就沒有所謂的侵略了嗎?

  • 首頁
  • WordPress 筆記
  • 主機
  • 前端
  • 意見回饋
You are here: 首頁 / WordPress 小功能 / [WordPress 日記] Day 1 勾點 Hook 初探

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

2019-10-10 by Eric Chuang 5 Comments

內容目錄

  • 前言
  • 為什麼要理解 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)。

*Post type 目前的通譯名稱為「文章類型」,但是 post 應為「內容儲存」的單位,因此這個網站將以「內容類型」稱之。

所屬分類: WordPress 小功能, WordPress 筆記

關於 Eric Chuang

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

讀者互動

Trackbacks

  1. [30 天 WordPress 筆記] Day 2 子佈景主題 | 桓桓 WordPress 修煉之路表示:
    2019-10-1122:08:25

    […] Day 1 勾點初探的內容,可以說是希望進行 WordPress […]

    回覆
  2. [30 天 WordPress 筆記] Day 3 Code Snippets | 桓桓 WordPress 修煉之路表示:
    2019-10-1223:36:39

    […] 從這個範例中,我們可以看到在介紹勾點時曾經提到過的 add_action。是的,Code Snippets 最主要的功能,就是可以管理各種勾點。 […]

    回覆
  3. [WordPress 日記] Day 2 子佈景主題 | 桓桓 WordPress 修煉之路表示:
    2019-10-1322:11:04

    […] Day 1 勾點初探的內容,可以說是希望進行 WordPress […]

    回覆
  4. [WordPress 筆記] Day 6 Advanced Custom Fields (下) | 桓桓 WordPress 修煉之路表示:
    2019-10-1623:50:42

    […] ACF 與其他 WordPress 勾點,實現自訂小功能的方法。除了勾點外,本文中使用了 add_shortcode […]

    回覆
  5. 利用 add_meta_box 自行新增自訂欄位 | 桓桓 WordPress 修煉之路表示:
    2020-02-2622:46:31

    […] 註冊欄位需要使用 add_meta_boxes 這個勾點(有關勾點的介紹,可以參考這篇文章)。 […]

    回覆

發佈留言 取消回覆

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

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

Copyright © 2021 · Genesis Sample on Genesis Framework · WordPress