WordPress 網(wǎng)站建設(shè)中的塊很棒。將一些放入頁(yè)面，按照您喜歡的方式排列它們，您就可以毫不費(fèi)力地獲得一個(gè)非常漂亮的登錄頁(yè)面。但是如果 WordPress 中的默認(rèn)塊需要一些調(diào)整呢？比如，如果我們可以刪除 Cover 塊設(shè)置中的對(duì)齊選項(xiàng)會(huì)怎樣？或者 Button 塊的控件大小如何？

在擴(kuò)展 WordPress 中核心塊的功能時(shí)，有很多選擇。我們可以向編輯器中的塊添加自定義 CSS 類、添加自定義樣式或創(chuàng)建塊變體。但即使是這些也可能不足以滿足您的需求，您會(huì)發(fā)現(xiàn)自己需要過(guò)濾核心塊以添加或刪除功能，或者從頭開(kāi)始構(gòu)建一個(gè)全新的塊。

在我們深入研究之前，我想指出，本文中的代碼片段是故意脫離上下文的，以專注于過(guò)濾器而不是構(gòu)建工具和文件結(jié)構(gòu)。如果我包含了過(guò)濾器的完整代碼，這篇文章將很難理解。話雖如此，我知道對(duì)于剛剛開(kāi)始將代碼片段放在哪里或如何運(yùn)行構(gòu)建腳本并使整個(gè)工作正常進(jìn)行的人來(lái)說(shuō)，這并不明顯。過(guò)濾器的概念對(duì) WordPress 來(lái)說(shuō)并不陌生。我們大多數(shù)人都熟悉add_filter()PHP 中的函數(shù)。它允許開(kāi)發(fā)人員使用鉤子修改各種類型的數(shù)據(jù)。PHP 過(guò)濾器的一個(gè)簡(jiǎn)單示例可能如下所示：

function filter_post_title( $title ){
  return '<strong>' . $title . '</strong>';
};

add_filter( 'the_title',  'filter_post_title' );

在此代碼段中，我們創(chuàng)建了一個(gè)函數(shù)，該函數(shù)接收表示帖子標(biāo)題的字符串，然后將其包裝在<strong>標(biāo)簽中并返回修改后的標(biāo)題。然后我們add_filter()用來(lái)告訴 WordPress 在帖子標(biāo)題上使用該功能。

JavaScript 過(guò)濾器的工作方式類似。有一個(gè)名為 JavaScript 的函數(shù)addFilter()存在于wp.hooks包中，其工作方式幾乎與它的 PHP 兄弟相似。在最簡(jiǎn)單的形式中，JavaScript 過(guò)濾器看起來(lái)像這樣：
function filterSomething(something) {
  // Code for modifying something goes here.
  return something;
}

wp.hooks.addFilter( 'hookName', 'namespace', filterSomething );
看起來(lái)很相似，對(duì)吧？一個(gè)顯著的區(qū)別是addFilter()將 anamespace作為第二個(gè)參數(shù)。根據(jù) WordPress 手冊(cè)，“命名空間唯一標(biāo)識(shí)表單中的回調(diào)vendor/plugin/function?！?但是，手冊(cè)中的示例遵循不同的模式：plugin/what-filter-does或plugin/component-name/what-filter-does。我通常遵循后者，因?yàn)樗故直谡麄€(gè)項(xiàng)目中保持獨(dú)特。