在上一篇文章添加待審核文章數(shù)量氣泡提醒到 WordPress 文章菜單中，我為大家介紹了怎么添加通知消息數(shù)量氣泡到 WordPress 后臺的管理菜單中，在本文中，我們接著來看一下怎么添加通知消息氣泡到 WordPress 管理工具條中。 添加后的顯示效果圖下圖，在管理工具條上，用戶左邊，顯示了一個 “new messages” 的菜單項目，菜單項目前面是一個帶通知消息數(shù)量的紅色氣泡標簽。
創(chuàng)建菜單項目
首先，我們需要創(chuàng)建一個新的菜單項目，到管理工具條上，這個步驟我們通過 WordPress 的動作鉤子“admin_bar_menu” 實現(xiàn)，把我們自定義的消息數(shù)量顯示函數(shù)掛載到這個鉤子上就可以了。
function create_private_messages_bubble_item_on_toolbar( $wp_admin_bar ) {
$args = array(
'id' => 'private-message',
'parent' => 'top-secondary',
'title' => '<span class="custom-bubble-numbers">104256</span><span class="custom-bubble-messages">' . __('new messages') . '</span>',
'meta' => array( 'class' => 'private-messages-on-toolbar' )
);
$wp_admin_bar->add_node( $args );
}
add_action( 'admin_bar_menu', 'create_private_messages_bubble_item_on_toolbar', 999 );admin_bar_menu 動作鉤子可以讓我們自定義 WordPress 管理工具條，我們可以使用 $wp_admin_bar 對象的 add_node?方法來添加自定義的菜單項目，該方法支持以下幾個參數(shù)：
- id – 用來指管理工具條菜單項目的，顯示為新菜單項目的 CSS 類前綴。
- parent – 管理工具條的父級菜單，“top-secondary” 為 WordPress 內(nèi)置的容器，也就是說顯示在管理工具條用戶名稱的左側(cè)。
- title – 新菜單的標簽
- meta – 其他輔助性的屬性 (詳情參考)
設(shè)置管理工具條新菜單項目樣式
通過上一步，添加上了管理工具條菜單，我們還需要設(shè)置一下新菜單的樣式來讓顯示通知消息數(shù)量的氣泡效果，直接添加下面的 CSS 樣式到你的主題樣式文件，或者單獨的后臺樣式文件中就可以了。
#wpadminbar .private-messages-on-toolbar .custom-bubble-numbers{
display: inline-block;
border-radius: 10px;
color: white;
background: red;
padding: 5px;
font-size: 11px;
line-height: 10px;
font-weight: bold;
margin-right: 5px;
}
@media (max-width: 970px) {
#wpadminbar .private-messages-on-toolbar {
display: none;
}
}除了添加通知消息數(shù)量到管理工具條上，我們還可以使用文中介紹的方法添加其他類型的消息和內(nèi)容到管理工具條上。具體能實現(xiàn)什么樣的效果，就要靠你的想象力了。
