Wordpress Dev

Thêm thành phần vào thanh menu Toolbar trên đỉnh trang admin trong WordPress

Hay nói đúng hơn, bạn đang muốn thêm một menu nho nhỏ vào trong menu trên đỉnh trang Admin hoặc bên ngoài …

Hay nói đúng hơn, bạn đang muốn thêm một menu nho nhỏ vào trong menu trên đỉnh trang Admin hoặc bên ngoài giao diện khi đăng nhập, mặc định của WordPress khi cài đặt là cho phép hiển thị thanh menu ngang fix cứng trên đỉnh trang, bạn cũng có thể tắt chúng trong admin vào phần hồ sơ của bạn, tắt phần hiển thị ToolBar đi là xong !

Câu chuyện bây giờ là Toolbar để làm gì ? Tất nhiên là để hiển thị menu thêm thắt cho người dùng tiện hơn, như đăng nhập, đăng ký hoặc các link đường tắt tới một chức năng nào đó, điều này làm cho WordPress trở nên thân thiện và tiện dụng hơn, hãy xem:

Toolbar trên đỉnh trang Admin trong WordPress

Toolbar trên đỉnh trang Admin trong WordPress

Vậy thì muốn thêm một menu khác nữa vào trong Toolbar này thì làm thế nào ? Hãy thử code sau đây:

// Thêm một link vào trong Toolbar
function custom_toolbar_link($wp_admin_bar) {
    $args = array(
        'id' => 'JamViet.com',
        'title' => 'Truy cập JamViet.com', 
        'href' => 'http://jamviet.com', 
        'meta' => array(
            'class' => 'jam-viet', 
            'title' => 'Truy cập vào trang chủ của JamViet.com'
            )
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);

Và kết quả như sau:

Một menu khác đã được thêm vào trong Toolbar

Một menu khác đã được thêm vào trong Toolbar

Nếu bạn muốn có cả Sub-menu xổ xuống khi rê chuột qua thì hãy thử code sau:

/*
* thêm nhóm menu có tên Jamviet.com
*/

// thêm "cha mẹ" cho cả menu


// Thêm một link vào trong Toolbar
function custom_toolbar_link($wp_admin_bar) {
    $args = array(
        'id' => 'jamviet',
        'title' => 'Truy cập JamViet.com', 
        'href' => 'http://jamviet.com', 
        'meta' => array(
            'class' => 'jam-viet', 
            'title' => 'Truy cập vào trang chủ của JamViet.com'
            )
    );
    $wp_admin_bar->add_node($args);

// đứa con đầu lòng :D    
    $args = array(
        'id' => 'learn-seo',
        'title' => 'Học Làm seo', 
        'href' => 'https://www.jamviet.com/lam-seo',
        'parent' => 'jamviet', 
        'meta' => array(
            'class' => 'learnseo', 
            'title' => 'Vào học làm seo cực dễ'
            )
    );
    $wp_admin_bar->add_node($args);

// thêm một đứa con thứ hai :D 
    $args = array(
        'id' => 'dvlamseo',
        'title' => 'Dịch vụ làm seo', 
        'href' => 'https://www.jamviet.com/dich-vu-lam-seo',
        'parent' => 'jamviet', 
        'meta' => array(
            'class' => 'hoclamseo', 
            'title' => 'Muốn thuê tôi làm seo ?'
            )
    );
    $wp_admin_bar->add_node($args);

// Add a child link to the child link

$args = array(
        'id' => 'khuyenmai',
        'title' => 'Chương trình khuyến mại', 
        'href' => 'https://www.jamviet.com/dich-vu-lam-seo/khuyen-mai',
        'parent' => 'dvlamseo', 
        'meta' => array(
            'class' => 'khuyenmai', 
            'title' => 'Các chương trình khuyến mại dịch vụ của Jamviet'
            )
    );
    $wp_admin_bar->add_node($args);

}

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

Và kết quả là được một menu với cha con đầy đủ, cháu chắt có thừa, như sau:

Các menu được thêm vào Toolbar

Các menu được thêm vào Toolbar

* Đến đây, các bạn đã biết cách làm thế nào để thêm menu vào thanh Toolbar của website làm bằng mã nguồn WordPress rồi nhé, chúc các bạn thành công !

Thông tin liên quan