如何關閉或隱藏 WordPress 的 Admin Menu 和 Admin Bar 按鈕

如何關閉或隱藏 WordPress 的 Admin Menu 和 Admin Bar 按鈕

有些人自己經營主機,或者是幫別人製作和管理網站,只希望讓使用者看到他真正需要使用內容,不希望使用者動到太多的設定,減輕可能設定被動到的風險。WordPress 有提供相關的 Hook 和 function,供使用者自行調整。

首先我會介紹「Admin Menu」和「Admin Bar」,接著我會列出 WordPress 內建的「Admin Menu」和「Admin Bar」,以及一些知名或常用外掛自行產生的「Admin Menu」和「Admin Bar」,當中也會附上程式碼,供大家使用。

而以下的 code,都編輯在佈景主題當中的「functions.php」檔案當中。另外提醒,有些 Code 的判別條件並不完整,所以請確定是否有安裝該外掛或是改寫程式碼,勁量不要直接複製貼上程式碼使用。

什麼是「Admin Menu」和「Admin Bar」

「Admin Menu」指的就是 WordPress 後台左側的「選單項目」,如下圖的紅色框框圈選範圍。

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

而「Admin Bar」指的就是 上方的「工具導覽列」,上面有許多按鈕如 WordPress 的按鈕、造訪網站的按鈕、留言回應的動態按鈕、新增各種頁面媒體的按鈕…等。如下圖紅色框框圈選範圍

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

WordPress 內建或外掛的「Admin Menu」如何關閉

我們會使用到「admin_init」和「admin_menu」這兩個 Hook。
首先,我們要先了解 WordPress 的「Hook」。若用衣架和衣服來做比喻,「衣架」就像是在該指定處已經先建立好、定義好這個地方會有衣架。而如果需要對這個定義好的地方做調整,就如同把衣服掛到衣架上,如同把自己寫的 function 掛到這個特定的 Hook 上面。而 WordPress 本身已經有不少 Hook 事先被定義好,方便使用者使用並客製化。

「admin_init」Hook

而這裡我們要使用到的 Hook,有「admin_init」和「admin_menu」。

「admin_init」按照官方文件說明有兩條,首先是以下這一條。

「Fires as an admin screen or script is being initialized」

後台介面和腳本執行的「火種」,若更具體的來說則是以下引文

「admin_init is triggered before any other hook when a user accesses the admin area.
Note, this does not just run on user-facing admin screens. It runs on admin-ajax.php and admin-post.php as well.
This hook doesn’t provide any parameters, so it can only be used to callback a specified function.」

「在進入到 WordPress 後台之時,觸發其他任何 hook 之前」最先觸發的 Hook 就是「admin_init」,而其也會在執行 WordPress 核心程式檔案如「admin-ajax.php」和「admin-post.php」之前(前後端都會呼叫到的檔案),先執行「admin_init」Hook。

「admin_menu」Hook

官方文件說的為「Fires before the administration menu loads in the admin」,意思是指在載入「Admin Menu」之前,就會先執行「admin_menu」Hook。

雖然「admin_init」和「admin_menu」這兩個 Hook,執行的時機和先後順序不同,但是對於文章下面要移除「Admin Menu」來說,是沒有什麼影響的。

將會使用到的 function

如果要移除 menu 的話,則會使用到「remove_menu_page」這個已經事先在 WordPress 內定義好的 function。而如果只是單純想要移除選單當中的子項目,則使用「remove_submenu_page」即可。

詳情可以參照以下連結:

請參考: remove_menu_page - Code Reference | WordPress.org

移除 WordPress 原生的「Admin Menu」

add_action( 'admin_menu', 'yann_disable_admin_menu' );
function yann_disable_admin_menu() {

    // 後台首頁
    remove_menu_page( 'index.php' );

    // 編輯文章
    remove_menu_page( 'edit.php' );

    // 編輯頁面
    remove_menu_page( 'edit.php?post_type=page' );

    // 媒體庫
    remove_menu_page( 'upload.php' );

    // 留言
    remove_menu_page( 'edit-comments.php' );

    // 外觀
    remove_menu_page( 'themes.php' );

    // 外掛
    remove_menu_page( 'plugins.php' );

    // 使用者
    remove_menu_page( 'users.php' );

    // 工具
    remove_menu_page( 'tools.php' );

    // 設定
    remove_menu_page( 'options-general.php' );

}


不過以上當中,通常只會限制使用者不要使用「外觀」、「外掛」、「使用者」、「工具」、「設定」,按自己需求修改程式碼即可。

移除 WordPress 知名外掛的「Admin Menu」

以下列出一些 WordPress 當中常用的外掛,當然我沒有用過所有的外掛,如果有其他需求就得花錢找工程師幫你寫,或是你自己花時間研究了。

Yoast SEO

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

這款是目前 WordPress 當中最具名氣的 SEO 外掛之一吧。

add_action( 'admin_init', 'yann_admin_disable_yoastseo');
function yann_admin_disable_yoastseo() {

    remove_menu_page('wpseo_dashboard');

}

Elementor

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

這款是目前 WordPress 當中最具名氣的頁面編輯器之一吧。

function yann_disable_admin_elementor_menus() {

    // 隱藏 Elementor
    remove_menu_page('elementor');

    // 隱藏 Elementor → 設定
    remove_submenu_page('elementor', 'elementor');

    // 隱藏 Elementor → 角色管理員
    remove_submenu_page('elementor', 'elementor-role-manager');

    // 隱藏 Elementor → 工具
    remove_submenu_page('elementor', 'elementor-tools');

    // 隱藏 Elementor → 系統資訊
    remove_submenu_page('elementor', 'elementor-system-info');

    // 隱藏 Elementor → Getting Started
    remove_submenu_page('elementor', 'elementor-getting-started');

    // 隱藏 Elementor → Get Help
    remove_submenu_page('elementor', 'go_knowledge_base_site');

    // 隱藏 Elementor → 自訂字型
    remove_submenu_page('elementor', 'elementor_custom_fonts');

    // 隱藏 Elementor → Custom Icons
    remove_submenu_page('elementor', 'elementor_custom_icons');

    // 隱藏 Elementor → 許可證
    remove_submenu_page('elementor', 'go_elementor_pro');


    // 隱藏 Templates
    remove_menu_page('edit.php?post_type=elementor_library');

    // 隱藏 Templates → Saved Templates
    remove_submenu_page('edit.php?post_type=elementor_library', 'edit.php?post_type=elementor_library&tabs_group=library');
    // 隱藏 Templates → Theme Builder
    remove_submenu_page('edit.php?post_type=elementor_library', 'theme_templates');

    // 隱藏 Templates → Popups
    remove_submenu_page('edit.php?post_type=elementor_library', 'popup_templates');

    // 隱藏 Templates → Add New
    remove_submenu_page('edit.php?post_type=elementor_library', 'edit.php?post_type=elementor_library#add_new');

    // 隱藏 Templates → Categories
    remove_submenu_page('edit.php?post_type=elementor_library', 'edit-tags.php?taxonomy=elementor_library_category&post_type=elementor_library');

}
add_action('admin_menu', 'yann_disable_admin_elementor_menus', 801);

Jetpack

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

Jetpack 是由 WordPress 母公司 automattic 開發的,他們有一個 wordpress.com 的網站,Jetpack 會把功能連結到這個 wordpress.com,方便使用者管理自己的網站。

function yann_disable_admin_jetpack_menu() {

    remove_menu_page( 'jetpack' );

}
add_action( 'admin_menu', 'yann_disable_admin_jetpack_menu', 999 );

這裡需要注意的是,因為 Jetpack 似乎在載入「Admin Menu」的時間點上比較慢一點,需要先讓 Jetpack 先加入 menu 之後,我們才有辦法移除他。因此,我們需要調整權重到更後面,若權重數字越大,代表是越後面執行的意思,所以才寫 999。

Contact Form 7

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

這個是一個日本人開發的表單外掛,我個人蠻喜歡這款外掛的。

function yann_disable_admin_cf7_menu() {

    remove_menu_page( 'wpcf7' );

}
add_action( 'admin_menu', 'yann_disable_admin_cf7_menu' );

ACF Custom Fields

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。
function yann_disable_admin_acf_menu() {

    remove_menu_page( 'edit.php?post_type=acf' );

}
add_action( 'admin_menu', 'yann_disable_admin_acf_menu' , 100 );

另外根據官方的說法,這個也有效。

add_filter('acf/settings/show_admin', '__return_false');

OceanWP

在安裝 OceanWP 佈景主題之後,如果有多安裝「OceanWP Extra」的話,則會在「Admin Menu」出現一個「Theme Panel」按鈕。

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。
add_action( 'admin_menu', 'yann_disable_admin_oceanwp_extra_menu', 999 );
function yann_disable_admin_oceanwp_extra_menu( ) {

    remove_menu_page('oceanwp-panel');

}

UpdraftPlus

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

聽說是備份網站當中最好用的一隻外掛,也可以很方便地做網站轉移。

function yann_disable_updraftplus_submenu() {

    // 隱藏在「設定」→「UpdraftPlus Backups」之選項
    remove_submenu_page('options-general.php', 'updraftplus');

}
add_action('admin_menu', 'yann_disable_updraftplus_submenu', 11 );

更多其他外掛如何尋找

如果以上沒有你想要的外掛出現,其實是有方法找到該外掛、佈景主題的「Admin Menu」的註冊名稱的。這裡我提供一個不需要寫程式碼的方式。以下使用 Safari 網路瀏覽器和 Woocommerce 來示範。

STEP 1

首先到自己網站的後台,對著想要移除的「Admin Menu」按下右鍵 → 選擇「檢視元件」。

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

STEP 2

接著找到 li tag,可以看到其 id 寫著「toplevel_page_woocommerce」,如圖中紅色框框所表示。因此,去除掉「toplevel_page_」,我們可以知道,我們要刪除的對象叫做「woocommerce」。

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

STEP 3

接著就可以寫程式囉。把剛剛找到的「woocommerce」給貼上去囉。

function yann_disable_admin_woocommerce_menus() {

    remove_menu_page('woocommerce');

}
add_action( 'admin_menu', 'yann_disable_admin_woocommerce_menus' );

想要針對使用者身份去限定

按照 WordPress 官方的「Roles and Capabilities」的設計,會詳細說明每個角色和權限可以做的事情,可以根據這裡找到適合你的條件。

請參考: Roles and Capabilities - Support | WordPress.org

這個應該也是一些開發者或管理員常需要用到的功能,可能幫助一間公司合作開發一個網站的時候只希望限定某些人可以調整設定的話,就需要多加身份判斷的條件。
有些外掛如 Elementor、Woocommerce 等可以限制使用者的權限,但如果該外掛不具備這個功能的話,可以自行寫判斷式決定是否該使用者「可以看到某特定的 Admin Menu」。以 Elementor 作為舉例。

function yann_disable_admin_elementor_menus() {

    // 判別使用者的身份
    if ( current_user_can( 'administrator' ) ) {

        remove_menu_page('elementor');

    }
}
add_action( 'admin_menu', 'yann_disable_admin_elementor_menus' );

如果想要使用外掛編輯「Admin Menu」

另外,有一個叫做「Admin Menu Editor」的外掛可以幫你直接編輯 WordPress 後台的「Admin Menu」。適合的對象例如有「自己管理網站、幫客戶管理網站(對方公司裡面有經理、小編、行銷等等人),以及就是負責維護公司系統的人」

有幾個狀況可能會發生,例如客戶不小心按到「更新」的按鈕,結果出現錯誤,就會找工程師你。或是客戶希望知道這個功能在什麼地方。或是希望小編不要動到外觀的設定、不要動到你已經設定好的設定。因為客戶不小心或亂按的話,出問題最後還是找工程師你。

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 19。

另外,有些客戶可能安裝非常多外掛,結果導致尋找該功能時因為「Admin Menu」長度太長,結果找錯按錯導致網站出錯。因此,我們會希望只讓特定的人看到他所需要的選單即可,對於不同使用者出現不同的選單。將地對方的犯錯綠,也減少自己維護的成本。

請參考:
1. Admin Menu Editor - Plugin | WordPress.org
2. Admin Menu Editor 官方網站

當然這個外掛有限制,如果不是付費版本的話,會無法做到限制多個特定使用者如管理員不要去看到某些「Admin Menu」。免費版的只能設定到讓大家看到同一種後台畫面。

WordPress 內建或外掛的「Admin Bar」如何關閉

和關閉「Admin Menu」的邏輯是相同的,只不過使用的 Hook 和 function 不同,下面就先來介紹一下另外兩個 Hook,「wp_before_admin_bar_render」和「admin_bar_menu」。

「wp_before_admin_bar_render」Hook

此「wp_before_admin_bar_render」Hook 的執行時間點為「$wp_admin_bar」被用來渲染之前的一個 Hook。

「admin_bar_menu」Hook

這個「admin_bar_menu」Hook 就是載入「Admin Bar」所有項目的 Hook。新增新的 node 於「Admin Bar」上的時候也需要透過這個 Hook。

將會使用到的 function

如果外掛是使用「admin_bar_menu」Hook,要移除 menu 的話,則會使用到「remove_node」這個已經事先在 WordPress 內定義好的 function。

不過有些外掛則是使用「wp_before_admin_bar_render」Hook 來新增「Admin Bar」按鈕的,則必須使用「wp_before_admin_bar_render」Hook,並且搭配使用「remove_menu」function。

詳情可以參照以下連結:

請參考: admin_bar_menu - Code Reference | WordPress.org

移除 WordPress 原生的「Admin Bar」

function yann_remove_admin_bar_node() {

    global $wp_admin_bar;

    // 移除「WordPress logo」
    $wp_admin_bar->remove_menu('wp-logo');

    // 移除「關於 WordPress」(存在於 WordPress logo 之下的選單當中)
    $wp_admin_bar->remove_menu('about');

    // 移除「WordPress.org 台灣繁體中文」(存在於 WordPress logo 之下的選單當中)
    $wp_admin_bar->remove_menu('wporg');

    // 移除「線上說明」(存在於 WordPress logo 之下的選單當中)
    $wp_admin_bar->remove_menu('documentation');

    // 移除「技術支援」(存在於 WordPress logo 之下的選單當中)
    $wp_admin_bar->remove_menu('support-forums');

    // 移除「意見反應」(存在於 WordPress logo 之下的選單當中)
    $wp_admin_bar->remove_menu('feedback');

    // 移除「回到 Dashboard」的按鈕(會出現在去到其他 admin 頁面的時候)
    $wp_admin_bar->remove_menu('dashboard');

    // 移除「網站名稱」的按鈕
    $wp_admin_bar->remove_menu('site-name');

    // 移除「更新」按鈕
    $wp_admin_bar->remove_menu('updates');

    // 移除「留言」按鈕
    $wp_admin_bar->remove_menu('comments');

    // 移除「新增項目」按鈕
    $wp_admin_bar->remove_menu('new-content');

    // 移除「使用者帳戶」按鈕
    $wp_admin_bar->remove_menu('my-account');

}
add_action( 'wp_before_admin_bar_render', 'yann_remove_admin_bar_node' );

如果是要換成「admin_bar_menu」Hook 來處理 WordPress 原生的「Admin Bar」也行,只是記得把「remove_menu」function 換成「remove_node」function。

移除 WordPress 知名外掛的「Admin Bar」

Yoast SEO

這款是目前 WordPress 當中最具名氣的 SEO 外掛之一吧。

add_action( 'admin_init', 'yann_admin_bar_disable_yoastseo_node');
function yann_admin_bar_disable_yoastseo_node() {

    remove_action('admin_bar_menu', 'wpseo_admin_bar_menu',95);

}

另外上方還有針對 Yoast SEO 的「Admin Menu」的部分,可以一起使用。

UpdraftPlus

聽說是備份網站當中最好用的一隻外掛,也可以很方便地做網站轉移。

add_action('admin_bar_menu', 'yann_admin_bar_disable_updraftplus_node', 999);
function yann_admin_bar_disable_updraftplus_node() {

    global $wp_admin_bar;
    $wp_admin_bar->remove_node('updraft_admin_node');

}

或是寫成

add_action('wp_before_admin_bar_render', 'yann_admin_bar_disable_updraftplus_node', 999);
function yann_admin_bar_disable_updraftplus_node() {

    global $wp_admin_bar;
    $wp_admin_bar->remove_menu('updraft_admin_node');

}

而按照 UpdraftPlus 官方說法,其實可以直接在「wp-config.php」檔案裡面直接定義

define('UPDRAFTPLUS_ADMINBAR_DISABLE', true);

就可以達成隱藏 UpdraftPlus 在「Admin Bar」按鈕的效果,不需要再編輯 functions.php 檔案。

另外上方還有針對 UpdraftPlus 的「Admin Menu」的部分,可以一起使用。

更多其他外掛如何尋找

做法跟處理和上方的「Admin Menu」是類似的。以下使用 Safari 網路瀏覽器和 W3 Total Cache 來示範。

STEP 1

首先到自己網站的後台,對著想要移除的「Admin Bar」按鈕按下右鍵 → 選擇「檢視元件」。

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

STEP 2

接著找到 li tag,可以看到其 id 寫著「wp-admin-bar-w3tc」,如圖中紅色框框所表示。因此,去除掉「wp-admin-bar-」,我們可以知道,我們要刪除的對象叫做「w3tc」。

disable-specific-admin-menu-and-admin-bar-node-for-plugins-or-wp
作者ヤンヤン攝於 2020 / 04 / 20。

STEP 3

接著就可以寫程式囉。把剛剛找到的「w3tc」給貼上去囉。

add_action('admin_bar_menu', 'yann_disable_admin_bar_w3tc_node', 999);
function yann_disable_admin_bar_w3tc_node() {

    global $wp_admin_bar;
    $wp_admin_bar->remove_node('w3tc');

}

這樣子就完成拉!

透過改變 URL 仍然可以拜訪某個外掛設定頁面的問題

即使我們關掉的「Admin Menu」和「Admin Bar」按鈕,但是其實我們還是可以拜訪這些頁面,只要改一下瀏覽器的 URL 即可以達成。

例如我們想要拜訪「外掛」頁面,則我們只需要在網路瀏覽器 URL 輸入「https://yourwebsite/wp-admin/plugins.php」,即可以瀏覽外掛的頁面。

但我想,如果你刻意關掉「Admin Menu」上的「外掛」按鈕的話,想必你是為了不希望使用者有機會動到外掛安裝的部分,那麼你還需要補充以下的程式碼。這裡以 WordPress 原生的「外掛」頁面做舉例。

add_action('admin_init','yann_admin_plugin_redirect');
function yann_admin_plugin_redirect() {

    global $pagenow;
    if ( $pagenow == 'plugins.php' ) {

        // 做點什麼事情,例如要求轉向到後台的首頁
        wp_redirect( admin_url() );
        exit;

    }

}

邏輯其實很簡單,就是一旦當他拜訪這個 URL,只要觸發這個條件你就要求做點什麼事情。而我寫「轉到後台的首頁」。

另外一種則是自己安裝的外掛。如果是外掛自己新增的 admin page 呢(就是外掛在後台的設定頁面)?邏輯跟 WordPress 原生的類似,這裡以 Elementor 作為舉例。

add_action('admin_init','yann_elementor_admin_redirect');
function yann_elementor_admin_redirect() {

    // 處理 elementor library
    global $pagenow;
    if ( $pagenow == 'edit.php' && $_REQUEST['post_type'] == 'elementor_library') {

        // 做點什麼事情,例如要求轉向到後台的首頁
        wp_redirect( admin_url() );
        exit;

    }

    // 處理 elementor admin page
    if ( isset( $_GET['page'] ) && $_GET['page'] == 'elementor' ) {

        // 做點什麼事情,例如要求轉向到後台的首頁
        wp_redirect( admin_url() );
        exit;

    }

}

再用一個外掛做舉例,例如 Jetpack 外掛

add_action('admin_init','yann_jetpack_admin_redirect');
function yann_jetpack_admin_redirect() {

    if ( class_exists( 'Jetpack' ) && current_user_can( 'administrator' ) && get_current_user_id() != 1 ) {

        if ( isset( $_GET['page'] ) && $_GET['page'] == 'jetpack' ) {

            wp_redirect( admin_url() );
            exit;

        }

    }

}

文章就差不多到這裡。而雖然關掉了某些眼睛容易看到的部分,但是可能還有一些 bug 的部分,這就得自己去測試了。