Tạp Chí CNTT

Mặc định thanh Admin Bar màu đen của WordPress 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.

Tổng quan quy trình

Chúng ta sẽ có một hàm trung tâm để thao tác đè lên các đối tượng mặc định để 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' => 'http://themescss.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' => 'http://themescss.com',
                'meta' => array( 'title' => 'Menu 1' )
        ) );
 
} 

Chúng ta có kết quả như sau:

Coi như là ta đã có một cái menu bình thường. 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' => 'http://themescss.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'
                )
        ) );
 
} 

Chúc các bạn thành công!