Thêm shortcut links tùy chỉnh vào toolbar WordPress

Giới thiệu về việc Thêm Shortcut Links Tùy Chỉnh vào Toolbar WordPress

Toolbar WordPress, hay còn gọi là Admin Bar, là một công cụ hữu ích cho phép bạn truy cập nhanh chóng vào các khu vực quan trọng của trang web WordPress. Mặc định, toolbar này chứa các liên kết hữu ích như Dashboard, trang chủ, chỉnh sửa bài viết hiện tại, v.v. Tuy nhiên, bạn có thể tùy chỉnh toolbar này bằng cách thêm các shortcut links tùy chỉnh, giúp bạn truy cập nhanh hơn vào các trang quản trị thường xuyên sử dụng, từ đó tăng hiệu quả làm việc.

Bài viết này sẽ hướng dẫn bạn cách thêm các shortcut links tùy chỉnh vào toolbar WordPress một cách dễ dàng, sử dụng cả phương pháp code trực tiếp và sử dụng plugin.

Tại Sao Nên Thêm Shortcut Links Tùy Chỉnh vào Toolbar WordPress?

Việc tùy chỉnh toolbar WordPress bằng cách thêm shortcut links mang lại nhiều lợi ích:

Tiết kiệm thời gian: Truy cập nhanh chóng vào các trang quan trọng mà không cần điều hướng qua nhiều menu.
Tăng hiệu quả công việc: Giảm số lượng click chuột, giúp bạn tập trung hơn vào công việc chính.
Tùy biến theo nhu cầu: Thêm các liên kết phù hợp với quy trình làm việc của bạn, tối ưu hóa trải nghiệm quản trị.
Dễ dàng truy cập: Toolbar luôn hiển thị ở đầu trang, bất kể bạn đang ở đâu trong trang web.

Thêm Shortcut Links Tùy Chỉnh Bằng Code (functions.php)

Phương pháp này yêu cầu bạn chỉnh sửa trực tiếp file functions.php của theme đang sử dụng. Lưu ý rằng việc chỉnh sửa file functions.php có thể gây ra lỗi nếu bạn không cẩn thận. Vì vậy, hãy sao lưu file này trước khi thực hiện bất kỳ thay đổi nào.

Bước 1: Truy Cập File functions.php

Bạn có thể truy cập file functions.php qua:

WordPress Admin: Appearance -> Theme Editor -> Tìm file functions.php ở danh sách bên phải.
FTP Client: Sử dụng FTP client như FileZilla để kết nối đến server và tìm file functions.php trong thư mục theme (/wp-content/themes/tên-theme/functions.php).

Bước 2: Thêm Code Tùy Chỉnh

Thêm đoạn code sau vào cuối file functions.php:

<?php
function custom_admin_toolbar_links( $wp_admin_bar ) {
    $args = array(
        'id'    => 'custom-link-1',
        'title' => 'Trang Của Tôi',
        'href'  => admin_url( 'edit.php?post_type=page' ),
        'meta'  => array(
            'class' => 'my-toolbar-page'
        )
    );
    $wp_admin_bar->add_node( $args );

    $args2 = array(
        'id'    => 'custom-link-2',
        'title' => 'Thêm Bài Viết Mới',
        'href'  => admin_url( 'post-new.php' ),
        'meta'  => array(
            'class' => 'my-toolbar-post'
        )
    );
    $wp_admin_bar->add_node( $args2 );

    $args3 = array(
        'id'    => 'custom-parent-menu',
        'title' => 'Menu Chính',
        'href'  => '#',
        'meta'  => array(
            'class' => 'my-toolbar-menu'
        )
    );
    $wp_admin_bar->add_node( $args3 );

    $args4 = array(
        'id'    => 'custom-submenu-1',
        'title' => 'Tất Cả Các Trang',
        'href'  => admin_url( 'edit.php?post_type=page' ),
        'parent' => 'custom-parent-menu'
    );
    $wp_admin_bar->add_node( $args4 );

    $args5 = array(
        'id'    => 'custom-submenu-2',
        'title' => 'Thêm Trang Mới',
        'href'  => admin_url( 'post-new.php?post_type=page' ),
        'parent' => 'custom-parent-menu'
    );
    $wp_admin_bar->add_node( $args5 );
}
add_action( 'admin_bar_menu', 'custom_admin_toolbar_links', 999 );
?>

Giải thích code:

custom_admin_toolbar_links: Tên hàm tạo liên kết tùy chỉnh.
$wp_admin_bar->add_node( $args ): Hàm thêm một liên kết vào toolbar.
$args: Mảng chứa các thông tin về liên kết:
- id: ID duy nhất cho liên kết.
- title: Tiêu đề hiển thị trên toolbar.
- href: URL của liên kết.
- meta: Các thông tin bổ sung như class CSS.
- parent: ID của menu cha (dùng để tạo submenu).
add_action( 'admin_bar_menu', 'custom_admin_toolbar_links', 999 ): Hook vào action admin_bar_menu để thêm liên kết vào toolbar. Số 999 chỉ độ ưu tiên (cao nhất).

Bước 3: Tùy Chỉnh Liên Kết

Bạn có thể tùy chỉnh các liên kết bằng cách thay đổi các giá trị trong mảng $args:

Thay đổi tiêu đề: Sửa giá trị của 'title'.
Thay đổi URL: Sửa giá trị của 'href'. Tìm URL của các trang quản trị tại WordPress Codex.
Thêm class CSS: Sửa giá trị của 'meta' => array( 'class' => 'tên-class' ). Bạn có thể sử dụng class này để tùy chỉnh giao diện của liên kết bằng CSS.
Tạo menu con: Thêm 'parent' => 'id-cua-menu-cha' để liên kết trở thành menu con của liên kết có ID tương ứng.

Ví dụ về các URL thường dùng:

admin_url( 'index.php' ): Trang Dashboard
admin_url( 'edit.php' ): Trang Quản lý Bài viết
admin_url( 'post-new.php' ): Trang Thêm Bài Viết Mới
admin_url( 'edit.php?post_type=page' ): Trang Quản lý Trang
admin_url( 'post-new.php?post_type=page' ): Trang Thêm Trang Mới
admin_url( 'themes.php' ): Trang Giao diện
admin_url( 'plugins.php' ): Trang Plugin
admin_url( 'users.php' ): Trang Thành viên
admin_url( 'options-general.php' ): Trang Cài đặt chung

Thêm Shortcut Links Tùy Chỉnh Bằng Plugin

Nếu bạn không muốn chỉnh sửa code trực tiếp, bạn có thể sử dụng các plugin hỗ trợ tùy chỉnh toolbar WordPress. Dưới đây là một số plugin phổ biến:

Admin Menu Editor: Plugin mạnh mẽ cho phép bạn tùy chỉnh toàn bộ menu quản trị, bao gồm cả toolbar.
Toolbar Extras: Plugin tập trung vào việc mở rộng và tùy chỉnh toolbar WordPress.
Custom Admin Bar: Plugin đơn giản, dễ sử dụng để thêm các liên kết tùy chỉnh.

Hướng dẫn sử dụng plugin Admin Menu Editor (ví dụ)

Cài đặt và kích hoạt plugin Admin Menu Editor.
Truy cập Settings -> Menu Editor.
Trong giao diện Menu Editor, bạn sẽ thấy danh sách các menu và sub-menu.
Để thêm liên kết vào toolbar, chọn tab “Toolbar”.
Nhấn “Add Menu Item” để thêm một liên kết mới.
Điền thông tin cho liên kết:
- Title: Tiêu đề hiển thị trên toolbar.
- URL: URL của liên kết.
- Target: Chọn cách liên kết sẽ mở (trong tab hiện tại hoặc tab mới).
- Capability: Chọn quyền hạn cần thiết để người dùng nhìn thấy liên kết này.
Kéo và thả liên kết để sắp xếp vị trí trên toolbar.
Nhấn “Save Changes” để lưu lại thay đổi.

Tùy Biến Giao Diện Shortcut Links

Bạn có thể tùy biến giao diện của các shortcut links bằng CSS. Để làm điều này, bạn cần:

Kiểm tra mã HTML của liên kết trên toolbar bằng Developer Tools (F12) của trình duyệt.
Tìm class CSS của liên kết (đã thêm trong phần code ở trên hoặc được plugin tạo ra).
Thêm CSS tùy chỉnh vào file style.css của theme (hoặc sử dụng plugin CSS tùy chỉnh).

Ví dụ, để thay đổi màu nền của liên kết có class my-toolbar-page, bạn có thể thêm đoạn CSS sau vào file style.css:

#wpadminbar a.my-toolbar-page {
    background-color: #f00;
    color: #fff;
}

Kết Luận

Việc thêm shortcut links tùy chỉnh vào toolbar WordPress là một cách tuyệt vời để tối ưu hóa quy trình làm việc và tiết kiệm thời gian. Bạn có thể sử dụng phương pháp code trực tiếp để có toàn quyền kiểm soát hoặc sử dụng plugin để dễ dàng quản lý các liên kết. Hãy thử các phương pháp khác nhau và chọn phương pháp phù hợp nhất với nhu cầu và kỹ năng của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa