Cách thêm đối tượng vào Admin Bar thủ công

Mặc định cái Admin Bar màu đen của WordPress sẽ chỉ có một vài đối tượng bên trong nó như link trỏ đến Dashboard, quản lý bình luận, viết bài mới và có thể nó sẽ có thêm một vài đối tượng khi cài các plugin như SEO by Yoast chẳng hạn.

Về cách sử dụng plugin để thêm đối tượng vào menu thì mình đã có giới thiệu ở bài này, nhưng ở đây mình sẽ trình bày cách thêm đối tượng bằng code để mọi người dễ nắm bắt.

Tổng quan quy trình

Ở cách này, chúng ta sẽ có một hàm trung tâm để thao tác đè lên các đối tượng được WordPress mặc định sẵn để thêm menu. Sau đó hàm này sẽ xử lý qua một action hook có tên là admin_bar_menu, đây là hook để xử lý mọi vấn đề liên quan tới Admin Bar.

Để thêm menu, ta sẽ sử dụng phương thức có tên là add_menu và trong phương thức này sẽ có một vài tham số rất dễ hiểu mà mình sẽ trình bày kỹ hơn ở phần dưới.

Bắt đầu công viêc

Đầu tiên chúng ta tiến hành tạo một function và một đoạn add_action như sau vào file function.php trong theme:

add_action(‘admin_bar_menu’, ‘custom_admin_bar’);

function custom_admin_bar( $menu ) {
	// Viết code vào đây
}

Tiếp theo, ta sử dụng tham số $menu thực thi phương thức add_menu với một vài tham số như sau:

	$menu->add_menu( array(

		‘id’ => ‘menu1’,

		‘title’ => ‘Menu 1’,

		‘href’ => ‘https://thachpham.com’,

		‘meta’ => array( ‘title’ => ‘Menu 1’ )

	) );

Bạn có thể dễ dàng hiểu các tham số bên trong, và code đầy đủ ta có:

add_action(‘admin_bar_menu’, ‘custom_admin_bar’);

function custom_admin_bar( $menu ) {
	$menu->add_menu( array(

		‘id’ => ‘menu1’,

		‘title’ => ‘Menu 1’,

		‘href’ => ‘https://thachpham.com’,

		‘meta’ => array( ‘title’ => ‘Menu 1’ )

	) );
}

Kết quả ta có:

Coi như là ta đã có một cái menu bình thường. Thế nếu bạn muốn nó là một menu đổ xuống (dropdown menu) thì sao? Bạn có thể viết thêm một đoạn add_menu nữa và chứa tham số là ID của menu mẹ.

	$menu->add_menu( array(

		‘id’ => ‘submenu1’,

		‘parent’ => ‘menu1’,

		‘title’ => ‘Sub Menu 1’,

		‘href’ => ‘http://google.com’,

		‘meta’ => array(

			‘title’ => ‘Sub Menu 1’,

			‘target’ => ‘blank’

		)

	) );

Trong đó, bạn ưu ý đến tham số parent, giá trị của nó là giá trị của tham số id của menu mà bạn muốn thêm sub cho nó. Giờ thì ta sẽ có:

Nếu bạn muốn di chuyển menu ra đằng cuối của Admin Bar thì thay:

add_action(‘admin_bar_menu’, ‘custom_admin_bar’);

Thành

add_action(‘admin_bar_menu’, ‘custom_admin_bar’, 100);

Cái số đằng sau là thứ tự thực thi của nó, số càng nhỏ thì sẽ được ưu tiên đứng trước.

Đây là toàn bộ code:

add_action(‘admin_bar_menu’, ‘custom_admin_bar’);

function custom_admin_bar( $menu ) {
	$menu->add_menu( array(

		‘id’ => ‘menu1’,

		‘title’ => ‘Menu 1’,

		‘href’ => ‘https://thachpham.com’,

		‘meta’ => array( ‘title’ => ‘Menu 1’ )

	) );

	$menu->add_menu( array(

		‘id’ => ‘submenu1’,

		‘parent’ => ‘menu1’,

		‘title’ => ‘Sub Menu 1’,

		‘href’ => ‘http://google.com’,

		‘meta’ => array(

			‘title’ => ‘Sub Menu 1’,

			‘target’ => ‘blank’

		)

	) );
}

Thế là xong rồi đấy. :D