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

2 tháng ago, Hướng dẫn WordPress, 1 Views

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 thanh công cụ tiện lợi nằm ở phía trên cùng của trang web, cung cấp quyền truy cập nhanh đến các chức năng quan trọng của WordPress như bảng điều khiển, chỉnh sửa trang, và các tùy chọn khác. Mặc dù WordPress đã cung cấp sẵn một số shortcut hữu ích, bạn hoàn toàn có thể tùy chỉnh và thêm các shortcut links tùy chỉnh của riêng mình để tăng tốc quy trình làm việc và truy cập nhanh đến các khu vực bạn thường xuyên sử dụng.

Lợi ích của việc Thêm Shortcut Links Tùy Chỉnh

Việc thêm các shortcut links tùy chỉnh mang lại nhiều lợi ích thiết thực:

Tiết kiệm thời gian: Truy cập nhanh đến các trang hoặc chức năng quan trọng chỉ với một cú click.
Tăng năng suất: Loại bỏ việc tìm kiếm phức tạp trong bảng điều khiển, giúp bạn tập trung hơn vào công việc.
Cá nhân hóa: Tùy chỉnh toolbar theo nhu cầu và sở thích cá nhân.
Dễ dàng quản lý: Thay đổi và cập nhật các shortcut links bất cứ lúc nào.

Các Phương Pháp Thêm Shortcut Links Tùy Chỉnh

Có nhiều cách để thêm shortcut links tùy chỉnh vào toolbar WordPress, bao gồm sử dụng code trong file `functions.php` của theme, sử dụng plugin, hoặc kết hợp cả hai. Chúng ta sẽ xem xét từng phương pháp chi tiết hơn.

Sử dụng Code trong `functions.php`

Đây là phương pháp phổ biến và linh hoạt nhất. Bạn có thể thêm code trực tiếp vào file `functions.php` của theme con (child theme) để đảm bảo các tùy chỉnh không bị mất khi theme chính được cập nhật. Nếu bạn chưa có child theme, hãy tạo một child theme trước khi thực hiện các bước sau:

Truy cập File `functions.php`: Mở trình soạn thảo mã (code editor) và truy cập vào file `functions.php` của child theme của bạn. Thông thường, đường dẫn sẽ là `/wp-content/themes/tên-child-theme/functions.php`.

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


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

function them_shortcut_links( $wp_admin_bar ) {
  $wp_admin_bar->add_node( array(
    'id'    => 'my-first-shortcut',
    'title' => 'Viết Bài Mới',
    'href'  => admin_url( 'post-new.php' ),
    'meta'  => array( 'target' => '_blank' ), // Tùy chọn mở trong tab mới
  ) );

  $wp_admin_bar->add_node( array(
    'id'    => 'my-second-shortcut',
    'title' => 'Trang Cài Đặt Theme',
    'href'  => admin_url( 'customize.php' ),
  ) );

  $wp_admin_bar->add_node( array(
    'id'    => 'my-third-shortcut',
    'title' => 'Tất Cả Các Trang',
    'href'  => admin_url( 'edit.php?post_type=page' ),
  ) );
}

Giải thích Code:
- `add_action( ‘admin_bar_menu’, ‘them_shortcut_links’, 999 );`: Hàm này gọi hàm `them_shortcut_links` để thêm các mục vào admin bar. `999` là độ ưu tiên, đảm bảo các shortcut của bạn hiển thị sau các mục mặc định.
- `$wp_admin_bar->add_node( array( … ) );`: Hàm này thêm một nút (node) mới vào admin bar.
- `’id’ => ‘my-first-shortcut’`: ID duy nhất cho shortcut. Hãy chọn ID dễ nhớ và không trùng lặp.
- `’title’ => ‘Viết Bài Mới’`: Tiêu đề hiển thị trên admin bar.
- `’href’ => admin_url( ‘post-new.php’ )`: URL mà shortcut sẽ trỏ đến. Sử dụng `admin_url()` để tạo URL đến các trang trong bảng điều khiển WordPress.
- `’meta’ => array( ‘target’ => ‘_blank’ )`: Các thuộc tính bổ sung cho shortcut. Ở đây, chúng ta đặt `target=”_blank”` để mở liên kết trong một tab mới.
Lưu Thay Đổi: Lưu file `functions.php`.
Kiểm tra: Truy cập trang web của bạn và kiểm tra admin bar. Bạn sẽ thấy các shortcut links mới đã được thêm vào.

Sử dụng Plugin

Nếu bạn không muốn can thiệp vào code, bạn có thể sử dụng plugin để thêm shortcut links tùy chỉnh. Có rất nhiều plugin miễn phí và trả phí có sẵn trên WordPress.org. Một số plugin phổ biến bao gồm:

Admin Menu Editor
Toolbar Extras
WP Admin Menu Editor Pro

Các bước sử dụng plugin thường tương tự nhau:

Cài đặt và Kích hoạt Plugin: Tìm kiếm và cài đặt plugin bạn muốn sử dụng từ bảng điều khiển WordPress (`Plugins` -> `Add New`). Sau khi cài đặt, kích hoạt plugin.
Cấu hình Plugin: Truy cập trang cấu hình của plugin (thường nằm trong menu `Settings` hoặc menu riêng của plugin).
Thêm Shortcut Links: Sử dụng giao diện của plugin để thêm các shortcut links mới. Bạn sẽ cần nhập tiêu đề, URL, và các tùy chọn khác (ví dụ: mở trong tab mới, biểu tượng).
Lưu Thay Đổi: Lưu các thay đổi của bạn.
Kiểm tra: Truy cập trang web của bạn và kiểm tra admin bar.

Kết hợp Code và Plugin

Bạn cũng có thể kết hợp cả hai phương pháp trên. Ví dụ, bạn có thể sử dụng plugin để quản lý các shortcut links cơ bản, và sử dụng code trong `functions.php` để thêm các shortcut links phức tạp hơn hoặc cần tùy chỉnh đặc biệt.

Ví dụ Nâng Cao về Shortcut Links

Dưới đây là một số ví dụ nâng cao về cách sử dụng code để thêm các shortcut links tùy chỉnh:

Shortcut đến trang options cụ thể:


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

function them_shortcut_options( $wp_admin_bar ) {
  $wp_admin_bar->add_node( array(
    'id'    => 'my-options-shortcut',
    'title' => 'Tùy Chọn SEO',
    'href'  => admin_url( 'admin.php?page=wpseo_dashboard' ), // Thay đổi 'wpseo_dashboard' thành slug trang option của bạn
  ) );
}

Shortcut đến trang chỉnh sửa profile:


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

function them_shortcut_profile( $wp_admin_bar ) {
  $wp_admin_bar->add_node( array(
    'id'    => 'my-profile-shortcut',
    'title' => 'Chỉnh Sửa Profile',
    'href'  => admin_url( 'profile.php' ),
  ) );
}

Thêm shortcut có menu con:


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

function them_shortcut_with_submenu( $wp_admin_bar ) {
    $wp_admin_bar->add_node( array(
        'id'    => 'my-main-shortcut',
        'title' => 'Công Cụ',
        'href'  => '#', // URL không quan trọng, chỉ là điểm neo
    ));

    $wp_admin_bar->add_node( array(
        'id'    => 'my-submenu-item-1',
        'title' => 'Kiểm Tra Tốc Độ',
        'href'  => 'https://tools.pingdom.com/',
        'parent' => 'my-main-shortcut',
        'meta'  => array( 'target' => '_blank' ),
    ));

    $wp_admin_bar->add_node( array(
        'id'    => 'my-submenu-item-2',
        'title' => 'Google Analytics',
        'href'  => 'https://analytics.google.com/',
        'parent' => 'my-main-shortcut',
        'meta'  => array( 'target' => '_blank' ),
    ));
}

Lưu ý Quan Trọng

Khi thêm shortcut links tùy chỉnh, hãy lưu ý những điều sau:

Sử dụng Child Theme: Luôn luôn thêm code vào file `functions.php` của child theme để tránh mất tùy chỉnh khi theme chính được cập nhật.
Chọn ID Duy Nhất: Đảm bảo mỗi shortcut có một ID duy nhất.
Kiểm Tra URL: Kiểm tra kỹ URL để đảm bảo nó chính xác.
Cân Nhắc Hiệu Năng: Quá nhiều shortcut có thể làm chậm trang web của bạn. Chỉ thêm những shortcut thực sự cần thiết.
Khả Năng Tương Thích: Kiểm tra khả năng tương thích của plugin với phiên bản WordPress và theme của bạn.

Kết luận

Thêm shortcut links tùy chỉnh vào toolbar WordPress là một cách tuyệt vời để tăng tốc quy trình làm việc và truy cập nhanh đến các khu vực quan trọng của trang web. Bằng cách sử dụng code hoặc plugin, bạn có thể dễ dàng tùy chỉnh toolbar theo nhu cầu của mình và cải thiện năng suất làm việc. Hãy thử các phương pháp trên và khám phá những shortcut hữu ích nhất cho công việc của bạn.