WordPress 後台還在用公版？資深工程師帶你動手改造 Admin UI，打造客戶愛不釋手的專屬後台！

嗨，我是浪花科技的 Eric。身為一個天天跟 WordPress 打交道的工程師，我最常聽到客戶或行銷同事的抱怨之一就是：「這個後台好複雜，我到底該按哪裡？」坦白說，WordPress 預設的後台功能強大，但對非技術背景的使用者來說，就像走進一架波音 747 的駕駛艙，滿滿的儀表板和按鈕，只會讓人感到不知所措。

這就是今天我想跟你聊聊的主題：WordPress 自訂後台介面設計（Admin UI）。這不只是改改 Logo、換換顏色那麼簡單，而是從根本上為你的客戶或團隊，打造一個專屬、直覺、高效的工作後台。一個好的 Admin UI 不僅能大幅提升工作效率，更能減少操作失誤，甚至讓客戶覺得你交付的網站「特別好用」，這就是專業價值的體現啊！

為什麼我們需要「動手腳」？預設後台有什麼問題？

在我們捲起袖子開始寫 code 之前，先來點工程師的囉嗦：我們必須先定義問題，才能找到最佳解法。WordPress 的核心理念是「開箱即用」且「無限擴展」，這也導致了它的後台必須容納各種可能性，但這對一個目標明確的網站來說，卻成了負擔。

• 資訊過載： 對一個只需要發布文章的編輯來說，「工具」、「設定」這些選單，甚至是儀表板上各種新聞、活動小工具，都只是干擾。
• 缺乏品牌一致性： 客戶花錢請你做了一個品牌形象鮮明的網站，結果一登入後台，看到的卻是滿滿的 WordPress Logo，這會瞬間削弱專業感。
• 潛在安全風險： 讓不必要的使用者看到過多系統設定選項，無疑是增加了誤觸或被利用的風險。例如，誰知道客戶會不會好奇點進「永久連結」設定然後不小心改掉呢？（別問我為什麼知道，都是淚）
• 操作效率低落： 如果使用者最常用的功能藏在三層深的子選單裡，那每次操作都是一次時間的浪費。

所以，我們的目標很明確：透過客製化，把 WordPress 後台從一個「通用工具」，改造成一把為特定使用者量身打造的「瑞士刀」。

第一刀：減法的藝術 —— 清理不必要的元素

客製化的第一步，往往不是增加，而是減少。我們要做的就是把所有「用不到」的東西都藏起來，還給使用者一個乾淨清爽的介面。這些程式碼片段，你可以放在你的子佈景主題的 functions.php 檔案裡，或者更推薦的方式是，寫一個自己專用的外掛來管理。

1. 移除儀表板（Dashboard）上的小工具

儀表板是使用者登入後第一個看到的畫面，但預設的「WordPress 活動與新聞」、「歡迎使用」等，對多數網站營運者來說根本沒用。我們可以用 remove_meta_box 這個函式來移除它們。

<?php
/**
 * 移除儀表板上的預設小工具
 */
function roamer_remove_dashboard_widgets() {
    // 移除「站內健康狀態」
    remove_meta_box( 'dashboard_site_health', 'dashboard', 'normal' );
    // 移除「概況」
    remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
    // 移除「活動」
    remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' );
    // 移除「快速草稿」
    remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
    // 移除「WordPress 活動與新聞」
    remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
}
add_action( 'wp_dashboard_setup', 'roamer_remove_dashboard_widgets' );
?>

瞧，是不是瞬間清爽多了？工程師的小堅持就是，介面上的每一個元素都應該有它存在的意義，而不是佔著茅坑不拉屎。

2. 整理側邊欄選單（Admin Menu）

接下來是重頭戲：側邊欄選單。對於一個內容編輯者，可能根本不需要「外掛」、「外觀」、「工具」等選單。我們可以使用 remove_menu_page 和 remove_submenu_page 來精簡選單。

<?php
/**
 * 根據使用者角色移除後台選單
 */
function roamer_remove_admin_menus() {
    // 如果目前使用者不是管理員 (administrator)
    if ( ! current_user_can( 'manage_options' ) ) {
        // 移除「外觀」選單
        remove_menu_page( 'themes.php' );
        // 移除「外掛」選單
        remove_menu_page( 'plugins.php' );
        // 移除「工具」選單
        remove_menu_page( 'tools.php' );
        // 移除「設定」選單
        remove_menu_page( 'options-general.php' );
        // 移除「迴響」選單
        remove_menu_page( 'edit-comments.php' );
    }
}
add_action( 'admin_menu', 'roamer_remove_admin_menus', 999 );
?>

這裡我多加了一個判斷 current_user_can('manage_options')，這是一個好習慣。代表只有最高權限的管理員能看到所有東西，其他角色登入後，看到的介面就是我們為他們設計好的簡化版，大大降低了他們「做壞事」的機會。

第二刀：加法的魔法 —— 打造專屬功能入口

清爽的介面是基礎，接下來我們要為使用者打造專屬的功能和資訊看板，讓他們一登入就能掌握最重要的事。

1. 建立自訂儀表板小工具

既然移除了預設的小工具，我們就可以放上更有用的東西。例如，一個顯示公司聯絡資訊和技術支援連結的小工具，或者顯示最新訂單的列表。這需要使用 wp_add_dashboard_widget 函式。

<?php
/**
 * 新增自訂儀表板小工具
 */
function roamer_add_custom_dashboard_widget() {
    wp_add_dashboard_widget(
        'roamer_custom_help_widget',         // Widget slug.
        '網站技術支援',                      // Title.
        'roamer_custom_dashboard_widget_content' // Display function.
    );
}
add_action( 'wp_dashboard_setup', 'roamer_add_custom_dashboard_widget' );

/**
 * 自訂儀表板小工具的內容
 */
function roamer_custom_dashboard_widget_content() {
    echo '<p>您好，歡迎使用本系統！</p>';
    echo '<p>若您在操作上遇到任何問題，請隨時聯繫您的專案窗口或透過以下方式聯繫浪花科技：</p>';
    echo '<ul>';
    echo '<li>Email: <a href="mailto:service@roamer-tech.com">service@roamer-tech.com</a></li>';
    echo '<li>聯絡表單: <a href="https://roamer-tech.com/contact/" target="_blank">點此前往</a></li>';
    echo '</ul>';
}
?>

這樣一來，客戶一登入就能看到求救管道，是不是很貼心？對我們來說，這也省去了每次都要重覆回答「我該找誰」的麻煩。

2. 品牌化你的登入頁面

這是最基本也最重要的一步。把預設的 WordPress Logo 換成客戶公司的 Logo，能瞬間提升網站的客製化程度和專業感。

<?php
/**
 * 自訂登入頁面的 Logo
 */
function roamer_custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/your-logo.png);
            height: 65px; /* 根據你的 Logo 調整 */
            width: 320px; /* 根據你的 Logo 調整 */
            background-size: contain;
            background-repeat: no-repeat;
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'roamer_custom_login_logo' );

/**
 * 自訂登入頁面 Logo 的連結 URL
 */
function roamer_custom_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'roamer_custom_login_logo_url' );

/**
 * 自訂登入頁面 Logo 的提示文字
 */
function roamer_custom_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'roamer_custom_login_logo_url_title' );
?>

別忘了把 /images/your-logo.png 換成你自己的 Logo 圖片路徑。這雖然只是一個小細節，但魔鬼就藏在細節裡，客戶會感受到的。

第三刀：結構性重塑 —— 打造真正的客製化後台

當加減法都做完後，我們就可以進入更深層次的結構改造了。這通常與自訂內容類型 (CPT) 和進階自訂欄位 (ACF) 息息相關，它們是打造客製化後台的核心武器。

1. 調整文章列表欄位

舉例來說，如果我們有一個「活動」的 CPT，預設的文章列表可能只有標題、作者、日期。但我們可能更關心「活動日期」、「活動地點」或「報名人數」。這時候就可以透過 `manage_{$post_type}_posts_columns` 這個 filter 來新增或移除欄位。

這部分的操作相對複雜，但它能極大地提升後台資料的可讀性，讓營運人員一眼就能找到關鍵資訊，而不是還要點進每一篇文章去查看。這才是真正從使用者工作流程出發的客製化設計。

2. 建立專屬設定頁面

很多時候，網站會有一些全域的設定，例如頁尾的聯絡電話、社群媒體連結等。與其讓客戶去小工具或佈景主題設定裡大海撈針，不如直接用 ACF PRO 的 `acf_add_options_page()` 功能，為他們建立一個名為「全站設定」的專屬頁面，把所有常用設定都集中在一起。

這對客戶來說是一個巨大的福音。他們不需要理解 WordPress 的複雜結構，只需要知道：「要改網站上的聯絡電話，就去『全站設定』裡找。」這就是直覺化設計的力量。

結論：好的後台設計，是提升價值的關鍵

WordPress 自訂後台介面設計（Admin UI），從來都不只是一個美化工程。它是一門結合了使用者體驗 (UX)、工作流程優化與品牌塑造的綜合藝術。對我們工程師來說，這不只是寫幾行 code 而已，更是展現我們理解客戶需求、解決實際問題能力的最佳舞台。

一個乾淨、直覺、品牌化的後台，能讓客戶用得順手、減少錯誤，最終他們會更願意、也更頻繁地更新網站內容，這對網站的長期發展絕對是正向的。下一次，當你交付一個 WordPress 網站時，不妨多花點時間在後台的雕琢上，我相信，這份用心，客戶絕對感受得到。

延伸閱讀

想更深入了解如何打造一個強大的 WordPress 後台嗎？這裡有幾篇文章你絕對不能錯過：

• 別再只會分管理員和編輯！WordPress 終極權限寶典，打造滴水不漏的使用者角色管理系統
• 別再把 WordPress 當部落格！資深工程師手把手 CPT 實戰，打造真正客製化的網站後台
• 別再被版型綁架！ACF 終極指南：用客製化欄位打造 WordPress 夢幻後台

需要更進階的後台客製化服務嗎？

如果你的需求不僅僅是調整介面，還需要串接 ERP、建立複雜的會員系統，或是打造專屬的數據儀表板，這些都需要更深入的架構設計與開發。浪花科技團隊擁有豐富的 WordPress 深度客製化經驗，我們不只會寫 Code，我們更懂如何為您的業務流程打造最貼合的後台系統。歡迎點擊這裡，與我們的專家聊聊，讓我們幫助您把 WordPress 的潛力發揮到極致！