將通知氣泡添加到WordPress管理菜單的3種方法

有些時候,我們可能需要在WordPress后臺的管理菜單上顯示一些未讀內容的數量通知,用來及時提示我們去查看,通常我們稱之為通知氣泡。也許說的不是很清楚,但是通過下面的圖片,您應該了解我所說的:

從該屏幕截圖中可以清楚地看到,通知氣泡可以添加到子菜單項中,不一定必須包含數字,

下面幾種方法都有一個共同點,都是使用 <span> 標簽將一個包含特定類名的元素添加到菜單名稱的旁邊:

  • <span class="awaiting-mod">2</span>?– 我推薦使用這個
  • <span class="update-plugins">11</span>

方法1.在創建自定義管理頁面時

$notification_count = 2; // 在這里我們以某種方式在代碼中獲得了計數
 
add_menu_page(
	'Tickets',
	$notification_count ? sprintf( 'Tickets <span class="awaiting-mod">%d</span>', $notification_count ) : 'Tickets',
	'manage_options',
	'tickets_page_slug',
	'tickets_page_handler'
);

如果您需要翻譯字符串,可以像上面的代碼一樣使用 sprintf() 函數,否則可以不用。

此方法還可以與以下函數配合使用:

  • add_submenu_page()
  • add_options_page()?–該函數和以下函數在適當的父菜單項下添加一個子菜單頁面,例如,該函數本身在“設置”下添加該功能,而下面的函數可以從名稱了解具體位置。
  • add_management_page()
  • add_dashboard_page()
  • add_posts_page()
  • add_media_page()
  • add_users_page()

讓我給您看一個例子,以使事情變得清楚。

$notification_count = 52;
 
add_management_page(
	'My Tool Page',
	'My Tool <span class="awaiting-mod">' . $notification_count . '</span>',
	'manage_options',
	'my_tool',
	'my_tool_callback'
);

以上代碼就是在“工具”菜單下添加了一個包含氣泡通知的子菜單

方法2.在注冊自定義文章類型時

這個與register_post_type()函數及其$labels數組有關。

$count = 2;
 
register_post_type(
	'support', 
	array(
		'labels' => array(
			'name' => 'Tickets',
 
			// ..更多標簽可以在這里...
 
			'all_items' => $count ? 'All tickets <span class="awaiting-mod">' . $count . '</span>' : 'All tickets',
 
		),
		'public' => true,
 
		// ..更多函數參數...
 
	)
);

方法3.使用全局 $menu

建議您首先查看一下全局菜單數組的外觀。如果您的網站尚未正式上線,請嘗試以下操作:

admin_menu掛鉤內執行代碼 $global $menu; print_r( $menu ); exit;

從此數組更改任何菜單項很容易,不是嗎?像這樣:

add_action( 'admin_menu', function() {
	global $menu;
	$count = 541;
	$menu[2][0] = 'Dashboard <span class="awaiting-mod">' . $count. '</span>';
});

停下來!除非它是您自己的網站,否則請不要這樣做!我知道這很容易,但是菜單項可以根據安裝的插件和注冊的自定義文章類型來更改其位置。我們不知道某個菜單元素可以位于哪個位置。

所以,讓我們看一下 wp_list_filter() 函數,該函數使我們可以輕松地從數組中找出菜單位置。

比如找到“媒體”菜單:

add_action( 'admin_menu', function() {
 
	global $menu;
 
	$count = 5;
 
	$menu_item = wp_list_filter(
		$menu,
		array( 2 => 'upload.php' ) // 2是包含URL的數組項的位置,它將始終為2!
	);
 
	if ( ! empty( $menu_item )  ) {
		$menu_item_position = key( $menu_item ); // 獲取元素的key(即位置)
		$menu[ $menu_item_position ][0] .= ' <span class="awaiting-mod">' . $count . '</span>';
	}
 
});

然后就可以看到正確的結果:

第三種方法不允許我們向子菜單項添加通知氣泡。

現在您知道了這三種方法,并且可以根據您的需要使用最適合您的一種。

參考出處: https://rudrastyh.com/wordpress/notification-counter-bubbles.html ,由 WordPress大學 翻譯整理。

倡萌

一個文科IT宅男,喜歡折騰WordPress和被它折騰 ^_^

暫無評論

發表評論