WordPress 勾選父分類自動勾選所有子分類：分類連動教學

在 WordPress 後台編輯文章時，若分類層級較深且子分類繁多，編輯人員往往需要逐一勾選父分類與其下的所有子分類，這不僅浪費時間，也容易發生漏選導致前台顯示邏輯錯誤。另一種常見狀況是取消勾選父分類時，子分類依然維持勾選狀態，造成資料關聯的不一致。

為什麼需要分類連動功能？

WordPress 原生的分類核取方塊在 UI 設計上是各自獨立的，並沒有父子層級的逻辑連動。但在許多實務情境中，分類具有包含關係，當文章屬於某個大類別時，通常也應自動歸類到其下所有細分項目中。透過 JavaScript 監聽 DOM 樹的結構變化，我們可以讓核取狀態自動向下傳遞，確保資料結構的完整性並提升上架效率。

實作程式碼：使用 jQuery 遍歷分類層級

以下程式碼利用 WordPress 後台內建的 jQuery 函式庫，鎖定分類核取方塊的 ID 規則進行連動控制：

jQuery(document).ready(function($) {
    // 當分類核取方塊的狀態（勾選或取消）改變時觸發
    $('input[type="checkbox"][id^="in-category-"]').change(function() {
        var checkbox = $(this);
        var isChecked = checkbox.prop('checked');
        var currentLi = checkbox.closest('li'); // 獲取當前點擊分類所在的 <li> 容器

        // 在當前分類下尋找所有子分類容器（ul.children）
        // 並將其中所有核取方塊的狀態同步為與父分類一致
        currentLi.find('ul.children input[type="checkbox"]').each(function() {
            $(this).prop('checked', isChecked);
        });
    });
});

步驟拆解與邏輯說明

• 定位目標元素：利用 id^="in-category-" 選取器。WordPress 分類項目的 ID 通常以此字串開頭，這能確保我們精準選中分類核取方塊，而不影響後台其他功能的 Checkbox。
• 鎖定父子範圍：透過 closest('li') 向上尋找最近的列表項，以此作為基準點向下搜尋 ul.children。這樣可以確保連動行為只會發生在當前點擊的「分支」內，不會誤觸到其他同層級的分類。
• 同步布林值：將父分類的 checked 屬性值直接賦予給所有子代元素，實現一次勾選、全部選取，或一次取消、全部清除的行為。

實務踩坑與注意事項

此外，要注意「常用分類」標籤頁與「所有分類」標籤頁的 ID 結構可能略有不同。此段代碼主要是針對標準的文章編輯頁面開發。如果網站使用了自定義分類法（Custom Taxonomies），請務必檢查後台生成的 HTML 原始碼，確認其 ID 前綴是否仍為 in-category-，若前綴隨分類法名稱改變，則需要調整正則匹配選取器。最後，這種同步是「單向向下」的，如果需求是「選取任一子分類就必須選取父分類」，則需要另外編寫向上遍歷（Parents traversal）的邏輯。

看不懂沒關係，照做就能用

以上的原理看不懂沒關係，只要照著下面的步驟操作就能直接套用：

1. 安裝並啟用 FluentSnippets 外掛
2. 點擊「Add New Snippet」新增片段
3. 選擇程式碼類型為「Javascript」並將文章中的程式碼貼入
4. 在執行位置（Priority & Location）設定中，選擇「Admin Only」
5. 點擊儲存並將片段狀態切換為「啟用」
6. 前往文章編輯後台，對分類進行勾選或取消勾選，確認子分類是否會自動同步狀態