你的客戶還在 WordPress 後台迷路？終極 Admin UI 改造術，打造直覺、高效的專屬工作區

嗨，我是浪花科技的 Eric。身為一個天天跟 WordPress 活在一起的工程師，最讓我哭笑不得的場景，莫過於專案交付後，看著客戶瞪大眼睛，指著滿是選項的 WordPress 後台，問我：「所以…我要去哪裡更新『最新消息』？」

天啊，那種感覺就像你精心打造了一台 F1 賽車，結果客戶只想開去巷口買醬油，還找不到油門在哪。預設的 WordPress 後台對開發者來說是個萬能瑞士刀，但對終端使用者，尤其是非技術背景的客戶而言，它更像一個充滿神秘按鈕的飛機駕駛艙——看起來很厲害，但按錯一個可能就『BOOM！』。這就是今天我要囉嗦的主題：WordPress 自訂後台介面設計（Admin UI）。這不只是改改顏色、換個 Logo 的表面功夫，而是從根本上為你的客戶重塑一個乾淨、直覺且高效的工作流程。

為什麼預設的 WordPress 後台是客戶的惡夢？

我們得先搞懂問題在哪。WordPress 為了保持其靈活性與擴充性，預設介面塞滿了各種功能。再加上你為了專案需求安裝的十幾個外掛，每個外掛都想在後台選單佔有一席之地，結果就是…一場災難。

失焦的儀表板

一登入，客戶看到的是「WordPress 活動與新聞」、「歡迎使用 WordPress」、「快速草稿」… 老實說，你的客戶真的在乎 Matt Mullenweg 的最新動態嗎？他們只關心三件事：

• 我該做什麼？
• 我要去哪裡做？
• 我做得對不對？

預設的儀表板（Dashboard）完全沒有回答這些問題，反而用一堆無關的資訊轟炸他們，造成資訊焦慮。

令人混亂的側邊選單

「工具」、「設定」、「外掛」、「外觀」… 這些對開發者是寶藏，對客戶卻是潘朵拉的盒子。我遇過太多客戶好奇點進「外掛」頁面，然後不小心停用了一個核心功能外掛，網站就直接白畫面給我看。這不是客戶的錯，是我們沒有為他們打造一個安全的沙盒環境。一個好的 WordPress 自訂後台介面設計，就是要移除這些不必要的「誘惑」，讓他們專注在內容管理上。

Admin UI 改造第一刀：大掃除，從 `functions.php` 開始

好了，抱怨完畢，該來動手了。我們的目標是打造一個「極簡化」的後台。所有的魔法都將發生在你的佈景主題 `functions.php` 檔案裡。當然，更專業的做法是寫一個自訂外掛來放這些程式碼，這樣更換佈景主題時才不會失效。但為了教學方便，我們先從 `functions.php` 開始。

第一步：清理儀表板上的雜物 (Dashboard Widgets)

我們要用 WordPress 的 `wp_dashboard_setup` Action Hook 來動手腳。這個 Hook 會在儀表板物件初始化後觸發，是我們移除或新增儀表板小工具（Widgets）的最佳時機。

打開你的 `functions.php`，貼上這段程式碼：

<?php
/**
 * 清理 WordPress 儀表板上的預設小工具
 */
function roamer_remove_dashboard_widgets() {
    // 如果不是管理員，就執行清理
    if ( ! current_user_can( 'manage_options' ) ) {
        // 移除「歡迎使用」
        remove_action( 'welcome_panel', 'wp_welcome_panel' );
        // 移除「網站健康狀態」
        remove_meta_box( 'dashboard_site_health', 'dashboard', 'normal' );
        // 移除「快速草稿」
        remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
        // 移除「WordPress 活動與新聞」
        remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
        // 移除「概覽」 (At a Glance)
        remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
        // 移除「活動」
        remove_meta_box( 'dashboard_activity', 'dashboard', 'normal');
    }
}
add_action( 'wp_dashboard_setup', 'roamer_remove_dashboard_widgets' );
?>

工程師的小囉嗦：注意到了嗎？我加了一行 `if ( ! current_user_can( ‘manage_options’ ) )`。這是一個非常重要的保險！它的意思是「如果目前使用者不具備管理員權限，才執行下方的移除動作」。這樣可以確保身為開發者的你，登入後台時依然能看到完整的資訊，而你的客戶（通常是編輯或作者權限）只會看到被你淨化過的版本。千萬別把自己的後路給斷了！

第二步：修剪側邊選單 (Admin Menu)

儀表板乾淨了，接著來處理那條又長又臭的側邊選單。我們用的是 `admin_menu` 這個 Action Hook，搭配 `remove_menu_page()` 或 `remove_sub_menu_page()` 函式。

繼續在 `functions.php` 加上：

<?php
/**
 * 為非管理員使用者移除不必要的後台選單項目
 */
function roamer_remove_admin_menu_items() {
    if ( ! current_user_can( 'manage_options' ) ) {
        // 移除「工具」選單
        remove_menu_page( 'tools.php' );
        // 移除「外觀」底下的「佈景主題編輯器」
        remove_submenu_page( 'themes.php', 'theme-editor.php' );
        // 移除「設定」選單 (非常危險，請謹慎使用)
        // remove_menu_page( 'options-general.php' ); 
        // 移除「留言」
        remove_menu_page( 'edit-comments.php' );
    }
}
add_action( 'admin_menu', 'roamer_remove_admin_menu_items', 999 );
?>

我把 `remove_menu_page( ‘options-general.php’ );` 註解掉了，因為移除「設定」頁面是很極端的作法，除非你百分之百確定客戶不需要動到任何設定。`add_action` 後面的 `999` 是優先權，設高一點確保我們的函式會在其他外掛新增選單後才執行，這樣才能成功移除它們。

不只移除，更要創造價值：打造專屬儀表板小工具

清理只是第一步，真正體現專業價值的是「給予」。當你把客戶不需要的東西都拿掉後，接下來要放上他們「真正需要」的東西。這就是自訂儀表板小工具的威力。

範例：打造一個「客戶支援與快速指南」小工具

這個小工具可以放上你的聯絡方式、常用功能教學連結，讓客戶遇到問題時第一個想到你，而不是去 Google 亂找答案。

一樣，在 `functions.php` 加上這段：

<?php
/**
 * 新增自訂的儀表板小工具
 */
function roamer_add_custom_dashboard_widget() {
    wp_add_dashboard_widget(
        'roamer_support_widget',         // Widget slug
        '網站快速指南與技術支援',       // Title
        'roamer_custom_widget_content'   // Display function
    );
}
add_action( 'wp_dashboard_setup', 'roamer_add_custom_dashboard_widget' );

/**
 * 自訂儀表板小工具的內容
 */
function roamer_custom_widget_content() {
    echo '<p>歡迎使用本網站後台！操作時若有任何疑問，請參考以下資源或直接與我們聯繫。</p>';
    echo '<h3>常用功能連結</h3>';
    echo '<ul>';
    echo '<li><a href="post-new.php?post_type=news">新增最新消息</a></li>';
    echo '<li><a href="edit.php?post_type=page">編輯主要頁面</a></li>';
    echo '<li><a href="upload.php">管理媒體庫</a></li>';
    echo '</ul>';
    echo '<h3>技術支援</h3>';
    echo '<p>如果您遇到無法解決的問題，請隨時聯繫浪花科技 Eric。</p>';
    echo '<p>Email: eric@roamer-tech.com</p>';
    echo '<p>電話: (02) 1234-5678</p>';
}
?>

看到了嗎？透過 `wp_add_dashboard_widget` 這個函式，我們註冊了一個新的小工具，並指定用 `roamer_custom_widget_content` 這個函式來輸出它的 HTML 內容。你可以自由發揮，放入任何對客戶有幫助的資訊，例如：

• 指向 Google Analytics 報表的連結。
• 近期訂單或表單提交的摘要。
• 公司內部公告。

一個好的 WordPress 自訂後台介面設計，核心思想就是「減法優於加法，引導優於放任」。它能大幅降低客戶的學習曲線，減少他們犯錯的機會，最終提升他們對你專業服務的滿意度。這不僅僅是寫程式碼，這是在設計一種更好的工作體驗。

相關閱讀

• 別再給客戶萬年不變的後台！資深工程師教你打造 WordPress 品牌化後台，UX 體驗大升級
• 別再只會分管理員和編輯！WordPress 終極權限寶典，打造滴水不漏的使用者角色管理系統
• 解鎖 WordPress 的隱藏力量：functions.php 終極實戰指南，讓你的網站秒變客製化神器！

結論：別再交給客戶一台「原廠車」了

總結一下，一個精心設計的後台介面，是專案成功的最後一哩路。它能讓你的交付成果從「一個能動的網站」昇華為「一個好用的工具」。下次當你準備交付專案時，別再直接把 WordPress 的鑰匙丟給客戶了。花點時間幫他們改裝一下內裝，拔掉不必要的按鈕，裝上一個專屬的 GPS。客戶會感謝你，而你未來的 support email 也會少很多。

如果你覺得這些程式碼太過繁瑣，或是有更複雜的後台改造需求，浪花科技團隊非常樂意協助你。我們專精於打造高度客製化且使用者友善的 WordPress 解決方案。

準備好為你的客戶打造一個他們會愛上的後台了嗎？立即聯繫我們，讓浪花科技的專業團隊為您規劃最適合的後台解決方案！