別再把 WordPress 當部落格！資深工程師手把手 CPT 實戰，打造真正客製化的網站後台

哈囉，我是浪花科技的資深工程師 Eric。寫了這麼多年的 WordPress，我最常被問到的問題之一就是：「Eric，我的網站想放『作品集』、『團隊成員』、『客戶案例』，可是用『文章』分類感覺超怪，用『頁面』又一個個散在那邊，管理起來簡直是場災難，怎麼辦？」

每次聽到這個，我都會露出一個「你問對人了」的微笑。這就是 WordPress 從一個單純的部落格系統，進化成全世界最強大的內容管理系統（CMS）的關鍵所在：自訂文章類型（Custom Post Type，簡稱 CPT）。

如果你還在用文章和頁面硬塞所有內容，那這篇文章就是為你寫的。今天，我不是要給你一堆看不懂的理論，而是要帶你親手實戰，一步步解鎖 WordPress 的真正潛力，讓你徹底告別那個雜亂無章的後台。

到底什麼是「文章類型 (Post Type)」？

在我們動手之前，先花個一分鐘搞懂基本觀念，這很重要，不然你只是在複製貼上程式碼，而不是真正理解。其實你每天都在跟 Post Type 打交道。

在 WordPress 的世界裡，所有內容都被視為一種「Post」。你可能會覺得奇怪，我發的不是「文章 (Post)」跟「頁面 (Page)」嗎？沒錯，這兩個就是 WordPress 內建最常見的 Post Type。除此之外，還有一些你可能沒注意到的：

• 文章 (Post): 有時效性，有分類、有標籤，適合部落格文章、最新消息。
• 頁面 (Page): 沒有時效性，通常是靜態內容，如「關於我們」、「聯絡我們」。
• 附件 (Attachment): 你上傳到媒體庫的每張圖片、每個檔案，都是一個 Attachment Post Type。
• 修訂版本 (Revision): 你每次儲存文章時，WordPress 默默幫你存的歷史版本。
• 選單項目 (Nav Menu Item): 沒錯，連選單上的一個個連結，都是一種 Post Type！

看出來了嗎？WordPress 用 Post Type 來區分不同種類的內容。問題來了，當你的內容不屬於以上任何一種時，硬塞進去就會開始出現各種管理上的問題。這就是 CPT 登場的時刻了。

為什麼你需要 WordPress 自訂文章類型 (CPT)？

想像一下，你正在為一個室內設計公司架設網站。你需要一個「設計案例」的區塊，每個案例都要有「坪數」、「風格」、「地點」、「預算」這些專屬欄位。如果用「文章」來做，你可能得用標籤去標註「20坪」、「現代風」，後台一團亂，前端要篩選也很痛苦。如果用「頁面」，它們會全部散落在頁面列表裡，根本無法有效管理。

這時候，我們就可以建立一個叫做「設計案例 (Case Study)」的 CPT。這個 CPT 在後台會有自己獨立的選單，就像「文章」一樣，但它是專門用來管理設計案例的。你可以為它加上專屬的分類法（例如「空間類型」：住宅、商業空間），再搭配客製化欄位（ACF 外掛是你的好朋友），就能打造出一個結構清晰、管理方便、擴充性極強的內容系統。

這就是 CPT 的威力：讓你的內容「結構化」，而不是一盤散沙。

CPT 建立教學：外掛 vs. 手刻，工程師的選擇是？

建立 CPT 主要有兩種方法：

1. 使用外掛：像是 Custom Post Type UI (CPT UI) 這種熱門外掛，透過圖形化介面點幾下就能建立 CPT，非常適合新手。
2. 手動編寫程式碼：直接在佈景主題的 functions.php 或自訂外掛中，使用 WordPress 核心函式 register_post_type() 來註冊。

我知道，用外掛點幾下很香，但相信我，身為一個有點龜毛的資深工程師，我強烈建議你學習手刻。為什麼？

• 掌控權：你可以精準控制每一個參數，不會有多餘的程式碼或資料庫選項。
• 效能：通常比外掛更輕量、更高效。
• 可攜性：程式碼跟著你的佈景主題或自訂外掛走，換站台或重裝都方便。
• 專業度：這能讓你真正理解 WordPress 的底層運作，而不是只會點滑鼠。

今天，我們就走工程師的硬派路線，來手刻一個 CPT！

實戰開始：手刻一個「作品集 (Portfolio)」CPT

我們來建立一個常見的「作品集」CPT，讓你可以展示你的專案或作品。

步驟一：找到對的地方放程式碼

最簡單的地方是你的佈景主題資料夾底下的 functions.php 檔案。但這裡要囉嗦一下，直接修改佈景主題的 functions.php 有個風險：佈景主題一更新，你寫的程式碼就全沒了。所以，最佳實踐是使用「子佈景主題」，並將程式碼放在子佈景主題的 functions.php 裡。關於如何建立子佈景主題，可以參考這篇《改壞主題就回不去了？資深工程師手把手教你用「子佈景主題」安全客製化 WordPress！》。

步驟二：使用 `register_post_type()` 函式

將以下程式碼片段加到你的 functions.php 檔案中。這是一個最陽春的版本，我們先求有，再求好。

function roamert_setup_portfolio_cpt() {
    register_post_type('portfolio', // CPT 的英文代稱，務必小寫且不能有空格
        array(
            'labels' => array(
                'name' => '作品集',
                'singular_name' => '作品'
            ),
            'public' => true,
            'has_archive' => true, // 允許擁有彙整頁面
        )
    );
}
add_action('init', 'roamert_setup_portfolio_cpt');

存檔後，重新整理你的 WordPress 後台，你會驚喜地在左側選單看到一個新的項目：「作品集」！點進去看看，是不是跟「文章」的管理介面很像？

步驟三：參數詳解，打造專業級 CPT

剛剛的陽春版雖然能用，但很多細節都不對，例如「新增文章」應該要顯示「新增作品」。接下來，我們要來打磨細節，這也是手刻的價值所在。讓我們來看看 `register_post_type()` 中 `$args` 陣列的幾個關鍵參數：

• labels: (陣列) 用來定義後台介面上的所有文字。這是讓後台體驗變好的關鍵！
• public: (布林值) 設為 true 會讓這個 CPT 在前後台都可見，並且可以被搜尋到。它會自動把 show_ui, publicly_queryable 等參數設為 true。
• show_in_menu: (布林值或字串) 決定是否顯示在後台主選單。你甚至可以把它指定為某個主選單的子項目，例如 'edit.php?post_type=page' 就會把它放到「頁面」底下。
• menu_position: (整數) 控制在主選單的顯示順序，數字越小越前面。（5=文章下方, 20=頁面下方）
• menu_icon: (字串) 設定選單圖示！你可以到 WordPress Dashicons 找一個喜歡的圖示，直接填上它的 class name，例如 'dashicons-portfolio'。
• supports: (陣列) 這是超級重點！用來決定這個 CPT 支援哪些核心功能。常見的有：
  • 'title': 標題
  • 'editor': 主要內容編輯器 (Gutenberg 或傳統編輯器)
  • 'thumbnail': 特色圖片
  • 'excerpt': 摘要
  • 'custom-fields': (傳統的) 自訂欄位
  • 'revisions': 修訂版本
• has_archive: (布林值) 設為 true 的話，WordPress 會自動為你產生一個彙整頁面，網址通常是 yourdomain.com/portfolio/。
• rewrite: (陣列) 用來自訂固定網址 (Permalink) 結構。例如你可以透過 'slug' => 'projects' 讓你的作品網址變成 yourdomain.com/projects/your-project-name/。

最終完整版程式碼

了解了這些參數後，讓我們來寫一個更完整、更專業的版本：

function roamert_setup_portfolio_cpt() {
    $labels = array(
        'name'                  => '作品集',
        'singular_name'         => '作品',
        'menu_name'             => '作品集管理',
        'name_admin_bar'        => '作品',
        'archives'              => '作品彙整',
        'attributes'            => '作品屬性',
        'parent_item_colon'     => '上層作品:',
        'all_items'             => '所有作品',
        'add_new_item'          => '新增作品',
        'add_new'               => '新增',
        'new_item'              => '新作品',
        'edit_item'             => '編輯作品',
        'update_item'           => '更新作品',
        'view_item'             => '檢視作品',
        'view_items'            => '檢視作品',
        'search_items'          => '搜尋作品',
        'not_found'             => '找不到作品',
        'not_found_in_trash'    => '在垃圾桶中找不到作品',
        'featured_image'        => '作品主圖',
        'set_featured_image'    => '設定作品主圖',
        'remove_featured_image' => '移除作品主圖',
        'use_featured_image'    => '做為作品主圖',
        'insert_into_item'      => '插入至作品',
        'uploaded_to_this_item' => '上傳至此作品',
        'items_list'            => '作品列表',
        'items_list_navigation' => '作品列表導覽',
        'filter_items_list'     => '篩選作品列表',
    );
    $args = array(
        'label'                 => '作品',
        'description'           => '用來展示公司專案與作品',
        'labels'                => $labels,
        'supports'              => array('title', 'editor', 'thumbnail', 'excerpt', 'revisions'),
        'hierarchical'          => false,
        'public'                => true,
        'show_ui'               => true,
        'show_in_menu'          => true,
        'menu_position'         => 5,
        'menu_icon'             => 'dashicons-portfolio',
        'show_in_admin_bar'     => true,
        'show_in_nav_menus'     => true,
        'can_export'            => true,
        'has_archive'           => true,
        'exclude_from_search'   => false,
        'publicly_queryable'    => true,
        'rewrite'               => array('slug' => 'portfolio'), // 固定網址的 slug
        'capability_type'       => 'post',
    );
    register_post_type('portfolio', $args);
}
add_action('init', 'roamert_setup_portfolio_cpt');

一個工程師都踩過的坑：404 錯誤！

當你興高采烈地新增完第一筆作品，點下「檢視」後，卻看到一個大大的「404 Page Not Found」時，請不要慌張。這是一個經典的坑，新手時期我也踩過好幾次。

這是因為 WordPress 需要更新它的「重寫規則 (Rewrite Rules)」資料庫，才能知道你新增的 CPT 網址結構。解決方法超級簡單：

到 WordPress 後台 -> 「設定」 -> 「固定網址」，然後什麼都不用改，直接按下「儲存設定」按鈕。

這個動作會強制 WordPress 清除並重建它的網址規則，你的作品頁面就應該可以正常顯示了！每次你修改了 register_post_type 函式中的 rewrite 或 has_archive 參數後，都建議來這裡按一下儲存，養成好習慣。

結論：CPT 是你通往專業 WordPress 開發的入場券

今天，我們從觀念到實作，完整地走了一遍 WordPress 自訂文章類型的建立教學。你會發現，CPT 並不只是在後台新增一個選單這麼簡單，它是一種內容管理的「思維模式」。

學會了 CPT，你就能開始打造各種複雜的網站應用，例如：

• 房地產網站：建立「建案」CPT，搭配「地區」、「房型」等自訂分類法。
• 食譜網站：建立「食譜」CPT，搭配「菜系」、「烹飪時間」等自訂分類法。
• 線上課程網站：建立「課程」CPT，並將「單元」設為另一個 CPT，兩者再做關聯。

當然，CPT 只是第一步。接下來，你還需要學習如何建立自訂分類法 (Custom Taxonomies) 來為你的 CPT 分類，以及如何使用進階自訂欄位 (ACF) 來增加結構化資料，最後再製作專屬的樣板檔案 (single-portfolio.php, archive-portfolio.php) 來將這些資料完美地呈現在前端。這些都是我們之後可以深入探討的主題。

掌握 CPT，你就掌握了將 WordPress 從一個部落格平台，真正轉化為一個強大、彈性、客製化的內容管理系統的鑰匙。這也是區分一個 WordPress 小白和專業開發者的重要分水嶺。

如果你覺得這些程式碼太過複雜，或是你有更進階的客製化需求，需要專業的協助來規劃你的網站內容架構，歡迎與浪花科技的團隊聯繫。我們很樂意為你打造一個結構清晰、效能卓越的 WordPress 網站！

延伸閱讀

• 不只是文章和頁面！解放 WordPress 潛能，用 Custom Post Type 打造獨一無二的網站結構
• 別再被版型綁架！ACF 終極指南：用客製化欄位打造 WordPress 夢幻後台
• 改壞主題就回不去了？資深工程師手把手教你用「子佈景主題」安全客製化 WordPress！