在構建自定義主題或使用子主題時，您可能需要移除或隱藏某些樣式功能，無論是針對單個核心區塊還是完整的主題樣式變體。
這樣做不僅僅是出於個人喜好。它通常可以帶來實際優勢，例如提升效能、更一致的設計和更簡潔的使用者介面。
實現這些目標的方法各不相同，可能取決於您的需求和技能。本文中的示例以 Twenty Twenty-Five (TT5) 的子主題為例，這是一款現代 WordPress 區塊主題。
登出取決於其註冊方式
就我們的目的而言，當我們提到登出區塊或主題樣式變體時，我們會區分完全移除和部分移除，以及變體是完全移除還是僅僅從介面中隱藏。這些區別非常重要。
要了解如何登出區塊，首先要了解它的註冊方式。例如，使用 JavaScript 註冊的核心區塊最好也使用該語言登出。相比之下，主題樣式變體是在 PHP 中註冊的，因此可能需要採用不同的方法。
登出自定義區塊的註冊不在本文討論範圍內，您的方法取決於這些區塊最初的註冊方式。
什麼是樣式變體？
WordPress 區分塊樣式和主題樣式變體。區塊樣式是特定區塊的視覺替代方案，例如按鈕區塊的“填充”或“輪廓”樣式。區 塊樣式變體在核心、 theme.json、 block.json（或外掛）中註冊。
另一方面，主題樣式變體是完整的視覺替代方案，包括在唯一的 theme.json 檔案中定義的顏色、字型和佈局。它們允許使用者在不更改主題的情況下在網站的不同外觀（皮膚）之間切換。TT5 除了預設樣式外，還提供了八種樣式變體。
邁出第一步：將指令碼加入佇列
由於我們正在使用子主題，因此您必須小心地將指令碼正確加入佇列。
此設定可幫助您入門，包括將我們自定義的 unregister-blocks.js 檔案加入佇列。
// Enqueue Parent and Child Styles
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
['parent-style'],
wp_get_theme()->get('Version')
);
});
// Enqueue styles in the WordPress admin
add_action('admin_enqueue_scripts', function () {
wp_enqueue_style(
'child-admin-style',
get_stylesheet_uri(),
[],
wp_get_theme()->get('Version')
);
});
// Enqueue JavaScript for block editor
add_action('enqueue_block_editor_assets', function () {
wp_enqueue_script(
'unregister-core-blocks',
get_stylesheet_directory_uri() . '/js/unregister-blocks.js',
['wp-blocks', 'wp-dom-ready', 'wp-edit-post'],
null,
true
);
});
如您所見，我們在 js/unregister-blocks.js 中有一個 JavaScript 檔案，其中包含本文的所有指令碼。
請勿對 JavaScript 檔案使用 get_template_directory_uri()，因為它指向父主題。
時機至關重要
在 WordPress 中使用 PHP 時，瞭解鉤子何時觸發至關重要。您應該熟悉基本的載入順序，該順序始於 wp-settings.php：
- 常量
- 全域性變數
- 核心元件
- 載入外掛
- 載入主題
確定自定義函式的正確執行時間是 WordPress 開發中最棘手且最令人沮喪的部分之一。
登出核心區塊樣式
假設您希望刪除核心區塊的樣式。在本例中，我們希望刪除按鈕區塊的輪廓樣式。
由於填充和輪廓按鈕樣式已在 TT5 的 theme.json 檔案中註冊，因此我們使用 JavaScript 來處理該過程。
wp.domReady(() => {
if (wp.blocks && wp.blocks.unregisterBlockStyle) {
wp.blocks.unregisterBlockStyle('core/button', 'outline');
}
});
結果是刪除了工具欄和側邊欄中的大綱樣式。
已移除的按鈕區塊輪廓樣式不再可見。
登出核心區塊
假設您希望移除某個區塊的所有塊樣式。更合理的方法是登出該區塊（或多個區塊）。這可以透過移除您不想讓使用者使用的區塊來簡化插入器，並提高效能。
此處，“引言”區塊已被移除。
wp.domReady(() => {
wp.blocks.unregisterBlockType('core/quote');
});
如果在 Quote 區塊已使用後執行指令碼，會發生什麼情況？WordPress 會在編輯器中顯示“此區塊已不可用”的訊息，但內容仍會在前端渲染。使用者可以手動編輯或轉換區塊回退到的原始 HTML 檢視。
移除 Quote 區塊後的頁面編輯器檢視。
您可以保留原樣，也可以將其轉換為 HTML 格式以保留內容和樣式。
如何取消註冊多個區塊？在本例中，我們透過執行 foreach 迴圈來移除 Quote 和 Heading 區塊，從而提供一種非常高效的操作方法。
wp.domReady(() => {
const blocksToRemove = [
'core/quote',
'core/heading',
];
blocksToRemove.forEach((blockName) => {
if (wp.blocks.getBlockType(blockName)) {
wp.blocks.unregisterBlockType(blockName);
}
});
});
如果需要的話，這個指令碼可以方便地刪除其他區塊。
已移除引言和標題區塊的區塊插入器面板。
取消註冊主題樣式變體
區塊主題中樣式變體的美妙之處在於它們無需註冊，就像您過去使用其他 WordPress 擴充套件程式時那樣。
相反，只需將格式正確的 theme.json 檔案放置在子主題的根目錄或 /styles 目錄中，Core 就會自動識別它們。
您很容易認為需要一個函式來取消註冊樣式變體，但區塊主題的工作方式有所不同。
與區塊樣式一樣，沒有預設的 UI 來刪除不需要的樣式變體。
讓我們從最簡單的方法開始，逐步進行。樣式變體之所以如此易於“註冊”或新增到區塊主題中，恰恰是因為“取消註冊”非常困難。因此，我們提供了幾種方法。
移除主題樣式變體
有幾種方法可以移除像 TT5 這樣的塊狀主題中的 Evening 樣式變體。
如果您沒有使用子主題，最直接的方法是從父主題中刪除相應的 .json 檔案。例如，從 /styles 目錄中刪除 01-evening.json 檔案會完全移除 Evening 樣式變體。
但是，我們不建議這樣做，因為該檔案很可能會在下次主題更新後重新出現。
更好、更安全的方法是使用子主題並覆蓋樣式變體。您可以透過在同一路徑下建立一個具有相同檔名的空白檔案來實現此目的。要覆蓋 01-evening.json 檔案，請在子主題的 /styles 目錄中新增一個名為 01-evening.json 的空檔案。
這種方法並不能真正“取消註冊”樣式變體；它只是將其無效化。WordPress 仍然可以識別該檔案，但由於它不包含任何設定，因此樣式變體在 UI 中不可見，並且無法正常執行。此覆蓋僅在子主題在父主題載入後才有效，因此請務必確認您的子主題已正確設定。
使用CSS隱藏變體
另一種解決方法是使用 CSS 從 UI 中隱藏樣式變體。這不會將其從記憶體或 REST API 中刪除，也不會減少前端臃腫，但可以阻止使用者在整站編輯器中選擇它。
以下是隱藏夜間變體的示例：
/* Hide specific global style variations in the Site Editor */
.edit-site-global-styles-variations_item[data-slug="morning"],
.edit-site-global-styles-variations_item[data-name="evening"],
.edit-site-global-styles-variations_item[title="Evening"],
.edit-site-global-styles-variations_item[aria-label*="Evening"] {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
此功能可在“編輯器”>“樣式”>“瀏覽樣式”面板中操作。如果使用者之前啟用了“夜間”變體，該變體仍會應用，但使用者無法重新選擇或切換到該變體。
使用JavaScript隱藏變體
您也可以使用 JavaScript 隱藏變體，該變體透過 PHP 注入，使用 wp_add_inline_script 實現。這有點像 hack，因為樣式變體是在 PHP 中註冊的，但有時這是可靠操作 UI 的唯一實用方法。
以下是一個實際示例：
// Inject JS to hide specific style variations in the Site Editor UI
add_action('enqueue_block_editor_assets', function () {
wp_add_inline_script(
'unregister-core-blocks',
<< {
const interval = setInterval(() => {
document.querySelectorAll(
'[aria-label*="Noon"], [title*="Evening"], [data-name="noon"], [data-slug="evening"]'
).forEach(el => {
el.style.display = 'none';
});
}, 500);
// Stop the interval after 5 seconds
setTimeout(() => clearInterval(interval), 5000);
});
JS
);
});
此指令碼會等待 DOM 載入完畢，然後在幾秒鐘內反覆掃描並隱藏變體。它比較脆弱（因為它依賴於載入時間和類名），但當您需要在不影響檔案系統的情況下隱藏特定變體時，它就很有效。
注：即使您使用 CSS 或 JS 隱藏了變體，如果已應用該變體，它仍然會在 REST API 和塊資料中可用。這些方法主要是為了提升編輯器體驗，而不是為了改善底層主題資料。
小結
保持網站整潔，去除無用元素，可以提升使用者體驗，並且在許多情況下還能提升網站效能。
我們這裡提供的示例提供了登出樣式變體的可靠方法。我們希望這些示例也能幫助您理解為何登出樣式變體會令人困惑。
評論留言