Tùy biến admin dashboard WordPress

5 tháng ago, WordPress Plugin, Views

Giới Thiệu Về Tùy Biến Admin Dashboard WordPress

Admin dashboard WordPress là giao diện điều khiển trung tâm của website, nơi bạn có thể quản lý nội dung, người dùng, plugin, theme và nhiều thiết lập khác. Mặc dù dashboard mặc định của WordPress cung cấp đầy đủ chức năng cần thiết, nhưng đôi khi bạn cần tùy biến nó để phù hợp với nhu cầu và thương hiệu của mình. Việc tùy biến dashboard có thể giúp:

Cải thiện trải nghiệm người dùng, đặc biệt là đối với khách hàng hoặc thành viên có vai trò hạn chế.
Loại bỏ những mục không cần thiết, giúp dashboard gọn gàng và dễ sử dụng hơn.
Thêm thông tin quan trọng, chẳng hạn như số liệu thống kê, thông báo hoặc liên kết nhanh đến các trang quan trọng.
Thương hiệu hóa dashboard để tạo ấn tượng chuyên nghiệp và nhất quán.

Bài viết này sẽ hướng dẫn bạn qua các phương pháp tùy biến admin dashboard WordPress khác nhau, từ những thay đổi đơn giản bằng CSS đến việc sử dụng plugin và thậm chí là viết code tùy chỉnh.

Các Phương Pháp Tùy Biến Admin Dashboard WordPress

Có nhiều cách để tùy biến admin dashboard WordPress, mỗi cách có ưu và nhược điểm riêng. Dưới đây là một số phương pháp phổ biến nhất:

Sử dụng CSS tùy chỉnh: Đây là phương pháp đơn giản nhất, phù hợp cho những thay đổi nhỏ về giao diện, chẳng hạn như màu sắc, font chữ, hoặc kích thước.
Sử dụng Plugin: Có rất nhiều plugin miễn phí và trả phí cho phép bạn tùy biến dashboard một cách dễ dàng, thường không yêu cầu kiến thức về code.
Tạo Plugin Tùy Chỉnh: Nếu bạn cần những tùy biến phức tạp hơn hoặc muốn kiểm soát hoàn toàn giao diện dashboard, bạn có thể tạo một plugin tùy chỉnh.
Sử dụng Theme Tùy Chỉnh: Một số theme WordPress đi kèm với tùy chọn tùy biến admin dashboard.

Tùy Biến Dashboard Bằng CSS

Để tùy biến dashboard bằng CSS, bạn cần thêm CSS tùy chỉnh vào trang quản trị. Cách đơn giản nhất là sử dụng theme child hoặc một plugin cho phép bạn thêm CSS tùy chỉnh, chẳng hạn như “Simple Custom CSS”.

Sau khi đã cài đặt và kích hoạt plugin (hoặc thiết lập theme child), bạn có thể thêm CSS tùy chỉnh. Ví dụ, để thay đổi màu nền của menu admin, bạn có thể thêm đoạn code sau:


#adminmenu {
  background-color: #f0f0f1;
}

#adminmenu a {
  color: #333;
}

#adminmenu a:hover {
  color: #007bff;
}

Bạn có thể sử dụng DevTools của trình duyệt (thường bằng cách nhấn F12) để kiểm tra các phần tử HTML và CSS trên dashboard, từ đó tìm ra các selector phù hợp để tùy biến.

Sử Dụng Plugin Để Tùy Biến Dashboard

Có rất nhiều plugin mạnh mẽ giúp bạn tùy biến admin dashboard một cách dễ dàng. Dưới đây là một số plugin phổ biến:

Admin Menu Editor: Cho phép bạn sắp xếp lại, đổi tên, ẩn hoặc thêm các mục menu admin.
White Label CMS: Cung cấp các tính năng tùy biến toàn diện, bao gồm thay đổi logo, màu sắc, font chữ, và ẩn các phần không cần thiết.
Ultimate Dashboard: Cho phép bạn tạo dashboard tùy chỉnh với các widget kéo thả, hiển thị thông tin quan trọng, liên kết nhanh, và video hướng dẫn.
Dashboard Widgets Suite: Cung cấp nhiều widget có sẵn để hiển thị thông tin từ Google Analytics, WooCommerce, và các nguồn khác.

Để cài đặt plugin, bạn có thể tìm kiếm chúng trong kho plugin của WordPress (Plugins > Add New) hoặc tải lên file zip nếu bạn mua plugin từ một nguồn khác.

Sau khi cài đặt và kích hoạt plugin, hãy vào trang cài đặt của plugin để tùy biến dashboard theo ý muốn. Mỗi plugin có giao diện và tính năng khác nhau, nhưng hầu hết đều có giao diện trực quan và dễ sử dụng.

Tạo Plugin Tùy Chỉnh Để Tùy Biến Dashboard

Nếu bạn muốn kiểm soát hoàn toàn giao diện dashboard và cần những tùy biến phức tạp, bạn có thể tạo một plugin tùy chỉnh. Để bắt đầu, hãy tạo một thư mục mới cho plugin của bạn trong thư mục wp-content/plugins/. Ví dụ: wp-content/plugins/my-custom-dashboard.

Tiếp theo, tạo một file PHP trong thư mục này, ví dụ: my-custom-dashboard.php. File này sẽ chứa code của plugin của bạn. Thêm đoạn code sau vào file này:


<?php
/*
Plugin Name: My Custom Dashboard
Description: Customizes the WordPress admin dashboard.
Version: 1.0.0
Author: Your Name
*/

// Add custom CSS to the admin dashboard
function my_custom_dashboard_css() {
  echo '<style type="text/css">
    #adminmenu {
      background-color: #f0f0f1 !important;
    }

    #adminmenu a {
      color: #333 !important;
    }

    #adminmenu a:hover {
      color: #007bff !important;
    }
  </style>';
}
add_action('admin_head', 'my_custom_dashboard_css');

// Remove default dashboard widgets
function my_custom_dashboard_widgets() {
    remove_meta_box('dashboard_activity', 'dashboard', 'normal');   // Recent Activity
    remove_meta_box('dashboard_right_now', 'dashboard', 'normal');  // At a Glance
    remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal'); // Recent Comments
    remove_meta_box('dashboard_incoming_links', 'dashboard', 'normal');  // Incoming Links
    remove_meta_box('dashboard_plugins', 'dashboard', 'normal');         // Plugins
    remove_meta_box('dashboard_quick_press', 'dashboard', 'side');      // Quick Press
    remove_meta_box('dashboard_recent_drafts', 'dashboard', 'side');    // Recent Drafts
    remove_meta_box('dashboard_primary', 'dashboard', 'side');         // WordPress.com Blog
    remove_meta_box('dashboard_secondary', 'dashboard', 'side');       // Other WordPress News
}
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

// Add a custom dashboard widget
function my_custom_dashboard_widget_function() {
    echo "<p>Welcome to your custom WordPress dashboard!</p>";
}

function my_add_dashboard_widgets() {
    wp_add_dashboard_widget('my_dashboard_widget', 'My Custom Widget', 'my_custom_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'my_add_dashboard_widgets');

Giải thích code:

Phần đầu file chứa thông tin về plugin, chẳng hạn như tên, mô tả, phiên bản và tác giả.
Hàm my_custom_dashboard_css() thêm CSS tùy chỉnh vào trang quản trị.
Hàm my_custom_dashboard_widgets() loại bỏ các widget mặc định trên dashboard.
Hàm my_custom_dashboard_widget_function() tạo nội dung cho widget tùy chỉnh.
Hàm my_add_dashboard_widgets() thêm widget tùy chỉnh vào dashboard.

Sau khi thêm code, hãy kích hoạt plugin trong trang Plugins của WordPress. Bạn sẽ thấy dashboard được tùy biến theo code bạn đã viết.

Thêm Widget Tùy Chỉnh Vào Dashboard

Việc thêm widget tùy chỉnh vào dashboard là một cách tuyệt vời để hiển thị thông tin quan trọng hoặc cung cấp các liên kết nhanh. Bạn có thể thêm widget bằng cách sử dụng plugin hoặc bằng cách viết code tùy chỉnh.

Ví dụ về code để thêm một widget tùy chỉnh (đã được trình bày trong phần trước):


// Add a custom dashboard widget
function my_custom_dashboard_widget_function() {
    echo "<p>Welcome to your custom WordPress dashboard!</p>";
}

function my_add_dashboard_widgets() {
    wp_add_dashboard_widget('my_dashboard_widget', 'My Custom Widget', 'my_custom_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'my_add_dashboard_widgets');

Bạn có thể tùy chỉnh nội dung của hàm my_custom_dashboard_widget_function() để hiển thị bất kỳ thông tin nào bạn muốn, chẳng hạn như số liệu thống kê, thông báo, hoặc liên kết nhanh đến các trang quan trọng.

Ẩn Các Mục Không Cần Thiết Trên Dashboard

Một trong những cách tốt nhất để làm cho dashboard gọn gàng hơn là ẩn các mục không cần thiết. Bạn có thể ẩn các mục menu admin, widget dashboard, hoặc các phần khác của giao diện.

Để ẩn các mục menu admin, bạn có thể sử dụng plugin “Admin Menu Editor” hoặc viết code tùy chỉnh:


function remove_menus(){
  //remove_menu_page( 'index.php' );                  //Dashboard
  remove_menu_page( 'edit.php' );                   //Posts
  remove_menu_page( 'upload.php' );                 //Media
  remove_menu_page( 'edit.php?post_type=page' );    //Pages
  remove_menu_page( 'edit-comments.php' );          //Comments
  remove_menu_page( 'themes.php' );                 //Appearance
  remove_menu_page( 'plugins.php' );                //Plugins
  remove_menu_page( 'users.php' );                  //Users
  remove_menu_page( 'tools.php' );                  //Tools
  remove_menu_page( 'options-general.php' );        //Settings
}
add_action( 'admin_menu', 'remove_menus' );

Để ẩn các widget dashboard, bạn có thể sử dụng plugin hoặc viết code tùy chỉnh (như ví dụ đã trình bày ở trên).

Thương Hiệu Hóa Admin Dashboard

Thương hiệu hóa admin dashboard là một cách tuyệt vời để tạo ấn tượng chuyên nghiệp và nhất quán. Bạn có thể thay đổi logo, màu sắc, font chữ và các yếu tố khác để phù hợp với thương hiệu của bạn.

Bạn có thể thương hiệu hóa dashboard bằng cách:

Thay đổi logo WordPress bằng logo của bạn.
Thay đổi màu sắc của các phần tử giao diện (menu, tiêu đề, nút).
Thay đổi font chữ.
Thêm footer tùy chỉnh với thông tin về thương hiệu của bạn.

Plugin “White Label CMS” cung cấp các tính năng thương hiệu hóa mạnh mẽ. Bạn cũng có thể viết code tùy chỉnh để thực hiện những thay đổi này.

Kết Luận

Tùy biến admin dashboard WordPress là một cách hiệu quả để cải thiện trải nghiệm người dùng, làm cho dashboard gọn gàng hơn, và thương hiệu hóa website của bạn. Bạn có thể sử dụng nhiều phương pháp khác nhau để tùy biến dashboard, từ những thay đổi đơn giản bằng CSS đến việc sử dụng plugin và viết code tùy chỉnh. Hãy thử nghiệm các phương pháp khác nhau để tìm ra cách 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