為什么以及如何自定義 WordPress 管理工具欄

WordPress 管理工具欄帶有標準外觀和一組通常非常有用的功能，那么為什么要自定義它呢？好吧，有時標準布局并不適合每個 WordPress 用戶或開發(fā)人員的需求。也許列出了您從未使用過的菜單選項。或者它可能沒有指向您最常用的儀表板部分的鏈接。 

無論出于何種具體原因，對 WordPress 管理工具條進行自定義都可以簡化您的工作流程并改進 WordPress 為個人用戶、團隊和開發(fā)人員提供的功能。出于這個原因，今天，我們正在討論為什么有人可能想要自定義管理 WordPress 工具欄以及幾種方法。

為什么要自定義WordPress 管理工具欄？?

在我們討論如何自定義工具欄的細節(jié)之前，讓我們先花點時間討論一下為什么您可能想要首先完成這項工作。以下只是幾個原因： 

• 您可能希望將快捷方式添加到默認情況下不存在于工具欄中的站點中經(jīng)常訪問的部分。 
• 有時，插件、主題或其他第三方工具會向工具欄添加您不希望出現(xiàn)的菜單或功能。 
• 您可能希望在管理工具欄中添加白標，以便為您的團隊或客戶創(chuàng)建更具品牌特色的體驗。 
• 工具欄的位置對您的個人工作流程不方便，您希望將其移動到其他地方。 

如果聽起來這些可能是有用的修改，請繼續(xù)閱讀。 

如何將項目添加到 WordPress 管理工具欄

如果您想向 WordPress 工具欄添加項目，您的首要任務是向WordPress 中的主題文件functions.php?添加代碼。或者，您可以隨時下載代碼片段插件。它允許您將代碼添加到網(wǎng)站，而無需直接修改主題文件。

但請記住，無論何時對站點代碼進行更改，您都應該始終使用子主題，或者至少有一個最近的備份可以在您犯錯時恢復。?

使用代碼添加菜單項到工具欄

您可以通過多種方式向 WordPress 工具欄添加項目。第一種是手動向主題的函數(shù)文件中添加一些代碼。

// 添加一個父級項到管理工具欄

function add_link_to_admin_bar($admin_bar) {
    $args = array(
        'id' => 'my-custom-link',
        'title' => 'My Custom Link', 
        'href' => 'https://www.mydomain.com'
    );
    $admin_bar->add_node($args);
}
	
add_action('admin_bar_menu', 'add_link_to_admin_bar', 999);

上面的代碼段將向管理工具欄添加一個新菜單項。該id部分控制HTML ID的新菜單項都會有，而title和href確定其標簽，并在那里分別鏈接到。這是 WordPress 后端的樣子：

href可以指向您想要的任何網(wǎng)址。但是，您也可以修改此代碼片段以創(chuàng)建指向 WordPress 管理界面部分的鏈接，例如媒體庫：

// 添加一個媒體庫鏈接到管理工具欄

function add_link_to_admin_bar($admin_bar) {
    $args = array(
        'id' => 'media-library',
        'title' => 'Media Library', 
        'href' => esc_url( admin_url( 'upload.php' ) )
    );
    $admin_bar->add_node($args);
}
	
add_action('admin_bar_menu', 'add_link_to_admin_bar', 999);

要鏈接管理界面中的其他位置，只需將鼠標懸停在 WordPress 儀表板中的菜單項上，然后在瀏覽器中檢查其文檔名稱。然后使用它而不是upload.php.?例如，對于插件菜單，將其替換為plugins.php，對于外觀，使用themes.php，等等。

最后，您還可以使用類似的代碼將子菜單項添加到現(xiàn)有鏈接。為此，您只需要知道要定位的父級的 ID 并將其包含在代碼段中。例如，以下是將子菜單項添加到指向站點前端的鏈接的方法（它也會在新選項卡中打開）：

// 創(chuàng)建一個子菜單項到管理工具欄

function add_link_to_admin_bar($admin_bar) {
	$args = array(
        'parent' => 'site-name',
	'id' => 'google-analytics',
        'title' => 'Google Analytics', 
        'href' => 'https://analytics.google.com/analytics/web/',
	'meta' => array(
            'target' => '_blank',
        )
    );
    $admin_bar->add_node($args);
}
	
add_action('admin_bar_menu', 'add_link_to_admin_bar', 999);

您如何知道您所針對的菜單項的 ID？好吧，您要么知道它，因為它是您首先創(chuàng)建的，要么您可以通過使用瀏覽器開發(fā)人員工具檢查父菜單項來找出答案。檢查它在哪里說類似id="wp-admin-bar-site-name".?后面wp-admin-bar的所有內(nèi)容都是ID，在本例中為site-name。您還可以使用它來創(chuàng)建子子菜單項。

這是上面的代碼的結(jié)果：

使用代碼片段隨意構(gòu)建父菜單項和子菜單項。可以查看開發(fā)人員文檔中的更多信息。

使用插件自定義工具欄

如果您不想折騰代碼，可以試試以下插件，它們可以輕松地向 WordPress 工具欄添加鏈接和菜單。讓我們來看看：

1. Branda

Branda 是一個成熟的白標插件，允許您自定義網(wǎng)站儀表板的幾乎每個方面。它也是免費的。該插件可讓您更改或刪除工具欄中的徽標、添加工具欄鏈接、刪除工具欄鏈接等。此外，它還具有多種其他自定義功能。您可以更改儀表板的外觀、更改登錄屏幕、制作新的配色方案、修改系統(tǒng)電子郵件等。?

2. Admin Toolbar Menus

另一個插件選項是Admin Toolbar Menus，它可以輕松地在儀表板上建立三個不同的 WordPress 工具欄位置。此外，您可以使用標準的 WordPress 菜單頁面制作自定義工具欄菜單。它還包括對多級菜單的支持。菜單位置位于站點名稱菜單下拉菜單下、主工具欄上以及我的帳戶下拉菜單下。也沒有要配置的設置，只需選擇您的菜單位置，它應該包含的內(nèi)容，您就可以開始了。?

3. Toolbar Publish Button

我們?yōu)榇瞬糠滞扑]的最后一個插件是Toolbar Publish Button。它只是將發(fā)布按鈕添加到 WordPress 管理工具欄。這樣，您無需向下滾動頁面即可到達“發(fā)布/保存”按鈕。只需在您的網(wǎng)站頂部訪問它并繼續(xù)您的工作。

如何從工具欄中刪除項目

如果您發(fā)現(xiàn) WordPress 工具欄太雜亂，您也可以刪除這些項目。既可以通過代碼實現(xiàn)，也可以通過使用插件實現(xiàn)。我們先來看看代碼方案。?

使用代碼刪除 WordPress 管理工具欄項目

幸運的是，從WordPress工具欄手動刪除項目可以采用 remove_node() 函數(shù)。為此，您需要首先找到工具欄菜單項 ID，然后使用一些代碼將其刪除。

我們已經(jīng)在上面介紹了如何使用瀏覽器開發(fā)人員工具查找 ID。刪除菜單項也是如此。例如，如果您想去掉 WordPress 徽標，它會是什么樣子： 

function remove_link_from_admin_bar( $wp_admin_bar ) {
	$wp_admin_bar->remove_node( 'wp-logo' );
}

add_action( 'admin_bar_menu', 'remove_link_from_admin_bar', 999 );

這也適用于子菜單和子子菜單項。只需檢查 ID，將其添加到代碼片段中即可完成。

或者使用Branda插件?

我們在上一節(jié)中已經(jīng)提到了 Branda ，它對于刪除和添加工具欄項目很有用。只需點擊幾下，您就可以刪除菜單條目以及 WordPress 徽標、您的頭像和帳戶鏈接等。它極大地簡化了流程，并為您提供了觸手可及的眾多定制機會。?

如何自定義 WordPress 管理工具欄的樣式或品牌

如果您想改變工具欄的外觀或添加一些自定義品牌，這也很容易實現(xiàn)。這里有兩個插件提供了實現(xiàn)特定外觀的直接方法。 

1.?WP Custom Admin Interface

首先是WP Custom Admin Interface插件。顧名思義，它可以輕松創(chuàng)建外觀和功能適合您的 WordPress 管理菜單和工具欄。 

一些突出的功能包括從工具欄中添加或刪除項目、更改其順序、列出項目的菜單級別以及重命名和重新設計工具欄中所有標題和鏈接的能力。您甚至可以為指定的用戶角色設置自定義工具欄條件。 

而且，你能相信嗎，這個插件是完全免費使用的。?

2. Custom Dashboard & Login Page – AGCA

接下來是 Absolutely Glamourous Custom Admin 插件。它使您可以輕松自定義整個 WordPress 儀表板、管理工具欄、菜單和登錄屏幕。具體來說，您可以添加、刪除或隱藏菜單項、刪除 WordPress 徽標以及向工具欄添加自定義配色方案和字體。您還可以為其和儀表板的其他方面創(chuàng)建全新的配色方案。在自定義頁面、字體、文本、顏色和圖像方面為儀表板創(chuàng)建自定義品牌的能力也是包的一部分。

這是一個功能強大的插件，它也是免費的。?

將 WordPress 管理工具欄移動到另一個位置

這里的最后一個任務是討論如何移動 WordPress 工具欄。如果它在屏幕頂部的默認位置經(jīng)常妨礙或只是對您的工作流程不直觀，則可以移動它。

同樣，您可以通過代碼或插件相對輕松地實現(xiàn)這一點，至少對于前端而言。事實證明，在后端移動管理欄需要相當多的標記，尤其是要使其具有響應性。因此，我們將在此處跳過，因為它超出了本教程的范圍。

使用代碼移動 WordPress 工具欄

備份您的網(wǎng)站和/或使用子主題后，打開functions.php文件并插入以下代碼以將工具欄移動到屏幕底部，特別是。或者，將其粘貼到 Code Snippet 插件的文本框中。

function move_admin_bar_to_bottom() {
    ?>
    <style>
        html[lang] {
			margin-top: 0 !important;
		}
		
		#wpadminbar {
			top:auto;
			bottom: 0;
		}
		
		#wpadminbar .menupop .ab-sub-wrapper {
			bottom: 32px;
		}
		
		@media screen and (max-width: 782px) {
            
			#wpadminbar .menupop .ab-sub-wrapper {
				bottom: 46px;
			}
		
		}
		
		@media all and (max-width:600px){
		
			#wpadminbar {
				position: fixed;
			}
			
		}
    </style>
    <?php
}

add_action('wp_head', 'move_admin_bar_to_bottom');

LetsWP 也有一個類似的帶有條件邏輯的片段，只將這個更改應用于您自己而不是您網(wǎng)站上的所有其他用戶。

function lwp_4056_bottom_admin_bar()
{
    ?>
    <style>
        div#wpadminbar {
            top: auto;
            bottom: 0;
            position: fixed;
        }
        .ab-sub-wrapper {
            bottom: 32px;
        }
        html[lang] {
            margin-top: 0 !important;
            margin-bottom: 32px !important;
        }
        @media screen and (max-width: 782px){
            .ab-sub-wrapper {
                bottom: 46px;
            }
            html[lang] {
                margin-bottom: 46px !important;
            }
        }
    </style>
    <?php
}
function lwp_4056_check_username()
{
    if(is_admin()) return;
    $user = wp_get_current_user();
    if($user && isset($user->user_login) && 'johndoe' === $user->user_login) {
        // Remove extra conditions after $user from above to apply for everyone
        add_action('wp_head', 'lwp_4056_bottom_admin_bar', 100);
    }
}
add_action('init', 'lwp_4056_check_username');

不要忘記更改? johndoe 為您的實際用戶名。

使用插件

我們還發(fā)現(xiàn)了三個可靠的插件選項，使移動 WordPress 工具欄變得容易。獎勵：如果您想進一步簡化站點預覽，這些插件甚至可以刪除工具欄。 

1. Remove Admin Toolbar

用于完全刪除 WordPress 工具欄的插件選項是Remove Admin Toolbar。這個簡單的插件使您只需點擊幾下即可隱藏管理工具欄。或者，您可以使用它來隱藏部分內(nèi)容以滿足您的自定義需求。它有三個基本選項可供選擇：對所有人隱藏、對除管理員以外的所有人隱藏和對管理員隱藏但除其他用戶外。這個很容易實現(xiàn)，輕量級，而且免費。?

2. Hide Admin Bar

另一個插件選項稱為Hide Admin Bar。它所做的只是從視圖中隱藏 WordPress 管理工具欄。這是一個開源的免費插件，只有這個功能。但是，如果您不想靠近代碼，這對您來說可能是一個很好的解決方案。?

3. Bottom Admin Toolbar

我們在這里展示的最后一個插件是Bottom Admin Toolbar。它允許您只需單擊幾下即可將 WordPress 工具欄的位置移動到屏幕底部。沒有搞亂代碼或復雜的設置。只需激活并啟用適當?shù)脑O置即可。它甚至添加了一個鍵盤快捷鍵，讓您可以隨意隱藏底部工具欄。只需按Shift + 向下箭頭。?

總結(jié)：自定義 WordPress 管理工具欄

如果 WordPress 工具欄沒有以其當前的形式為您服務，那么它只是在占用空間。

值得慶幸的是，您可以通過多種方式使其適合您。通過添加或刪除項目、更改樣式、更改其位置，甚至完全刪除它。借助一些簡單的代碼片段或易于使用的插件，您可以快速進行這些更改并繼續(xù)您的其余工作。

您是否對 WordPress 管理工具欄進行了更改？如果是這樣，你改變了什么以及如何改變？讓我們在評論中分享！

注：本文來自 torquemag.io，由 WordPress大學 翻譯整理。

拓展閱讀：

• WordPress 使用 Code Snippets 管理代碼片段
• 25+自定義WordPress頂部管理工具條的技巧
• 在 WordPress 頂部管理工具條顯示登錄表單
• WordPress 動態(tài)添加菜單到頂部管理工具條