Thêm custom dashboard widget WordPress

7 ngày ago, WordPress Themes, 2 Views

Thêm Custom Dashboard Widget WordPress: Hướng Dẫn Chi Tiết

Dashboard WordPress là trang đầu tiên bạn nhìn thấy sau khi đăng nhập. Nó cung cấp tổng quan nhanh về trang web của bạn, bao gồm thống kê, tin tức WordPress, và các hoạt động gần đây. Tuy nhiên, đôi khi thông tin mặc định này không đủ hoặc không phù hợp với nhu cầu của bạn. Đó là lý do tại sao việc thêm custom dashboard widget (tiện ích trên dashboard tùy chỉnh) trở nên hữu ích. Bài viết này sẽ hướng dẫn bạn cách tạo và thêm custom dashboard widget vào WordPress.

Tại Sao Nên Thêm Custom Dashboard Widget?

Việc tạo custom dashboard widget mang lại nhiều lợi ích cho người dùng WordPress, đặc biệt là cho các nhà phát triển và quản trị viên web:

Hiển thị thông tin quan trọng: Bạn có thể hiển thị các số liệu, thống kê, hoặc thông tin quan trọng khác liên quan đến trang web của bạn, giúp bạn theo dõi hiệu quả hoạt động của trang web một cách nhanh chóng.
Tiết kiệm thời gian: Thay vì phải tìm kiếm thông tin ở nhiều nơi khác nhau, bạn có thể tập trung tất cả vào một nơi trên dashboard.
Tùy biến cao: Bạn có toàn quyền kiểm soát nội dung và giao diện của widget, đảm bảo nó phù hợp với thương hiệu và phong cách của bạn.
Cải thiện trải nghiệm người dùng: Đối với các trang web có nhiều người dùng, bạn có thể tạo các widget khác nhau cho từng vai trò, giúp họ dễ dàng truy cập thông tin cần thiết.

Các Bước Thực Hiện Thêm Custom Dashboard Widget

Quá trình tạo custom dashboard widget bao gồm các bước sau:

Tạo plugin tùy chỉnh: Tạo một plugin để chứa code cho widget của bạn. Điều này giúp bạn dễ dàng quản lý và cập nhật widget mà không ảnh hưởng đến các file core của WordPress.
Viết code cho widget: Viết code PHP để định nghĩa nội dung và giao diện của widget.
Đăng ký widget vào dashboard: Sử dụng action hook wp_dashboard_setup để đăng ký widget vào dashboard WordPress.

Bước 1: Tạo Plugin Tùy Chỉnh

Để tạo plugin tùy chỉnh, bạn cần thực hiện các bước sau:

Tạo thư mục plugin: Trong thư mục wp-content/plugins/ của WordPress, tạo một thư mục mới cho plugin của bạn. Ví dụ: my-custom-dashboard-widget.
Tạo file plugin: Trong thư mục plugin vừa tạo, tạo một file PHP mới với tên giống với tên thư mục. Ví dụ: my-custom-dashboard-widget.php.
Thêm thông tin plugin: Mở file plugin và thêm thông tin về plugin vào đầu file. Ví dụ:


<?php
/**
 * Plugin Name: My Custom Dashboard Widget
 * Description: Creates a custom dashboard widget for WordPress.
 * Version: 1.0.0
 * Author: Your Name
 * Author URI: https://yourwebsite.com
 */

Bước 2: Viết Code Cho Widget

Bây giờ, chúng ta sẽ viết code để định nghĩa nội dung và giao diện của widget. Dưới đây là ví dụ về một widget đơn giản hiển thị thông tin về số lượng bài viết:


<?php
function my_custom_dashboard_widget_content() {
  $post_count = wp_count_posts()->publish;
  echo '<p>Tổng số bài viết đã đăng: ' . $post_count . '</p>';
}

Hàm my_custom_dashboard_widget_content() này sẽ lấy số lượng bài viết đã đăng và hiển thị nó trong một đoạn văn.

Bước 3: Đăng Ký Widget Vào Dashboard

Để đăng ký widget vào dashboard, chúng ta sẽ sử dụng action hook wp_dashboard_setup. Thêm đoạn code sau vào file plugin của bạn:


function my_custom_dashboard_widget() {
  wp_add_dashboard_widget(
    'my_dashboard_widget', // Widget slug
    'Thống Kê Bài Viết', // Widget title
    'my_custom_dashboard_widget_content' // Callback function
  );
}
add_action('wp_dashboard_setup', 'my_custom_dashboard_widget');

Trong đoạn code này:

wp_add_dashboard_widget() là hàm để thêm widget vào dashboard.
'my_dashboard_widget' là slug của widget. Nó phải là duy nhất.
'Thống Kê Bài Viết' là tiêu đề của widget sẽ hiển thị trên dashboard.
'my_custom_dashboard_widget_content' là callback function mà chúng ta đã định nghĩa ở bước trước. Hàm này sẽ được gọi để hiển thị nội dung của widget.

Cuối cùng, kích hoạt plugin trong trang quản trị WordPress của bạn. Sau khi kích hoạt, bạn sẽ thấy widget mới của mình trên dashboard.

Tùy Biến Widget Nâng Cao

Bạn có thể tùy biến widget của mình để hiển thị thông tin phức tạp hơn, sử dụng CSS để thay đổi giao diện, và thêm các tùy chọn cho người dùng.

Thêm CSS Vào Widget

Để thêm CSS vào widget, bạn có thể sử dụng hook admin_enqueue_scripts để đăng ký file CSS của bạn. Ví dụ:


function my_custom_dashboard_widget_enqueue_scripts() {
  wp_enqueue_style( 'my-dashboard-widget-style', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}
add_action( 'admin_enqueue_scripts', 'my_custom_dashboard_widget_enqueue_scripts' );

Sau đó, tạo một file CSS có tên style.css trong thư mục css bên trong thư mục plugin của bạn. Bạn có thể thêm các style cần thiết vào file này để tùy chỉnh giao diện của widget.

Thêm Tùy Chọn Cho Người Dùng

Bạn có thể thêm các tùy chọn cho người dùng để họ có thể tùy chỉnh widget theo ý muốn. Ví dụ, bạn có thể cho phép người dùng chọn màu sắc của widget hoặc số lượng bài viết hiển thị.

Để thêm tùy chọn, bạn cần:

Tạo một form trong callback function của widget để người dùng nhập các tùy chọn.
Lưu các tùy chọn vào database bằng hàm update_option().
Lấy các tùy chọn từ database bằng hàm get_option() và sử dụng chúng để hiển thị nội dung của widget.

Ví Dụ Nâng Cao: Widget Hiển Thị Thông Tin Google Analytics

Để tạo một widget hiển thị thông tin Google Analytics, bạn cần sử dụng API của Google Analytics để lấy dữ liệu và hiển thị nó trong widget. Quá trình này phức tạp hơn và yêu cầu bạn phải có tài khoản Google Analytics và biết cách sử dụng API của nó. Tuy nhiên, đây là một ví dụ minh họa:

Cài đặt thư viện Google Analytics API: Sử dụng Composer để cài đặt thư viện Google Analytics API vào plugin của bạn.
Lấy thông tin xác thực: Lấy thông tin xác thực từ tài khoản Google Analytics của bạn (client ID, client secret, refresh token).
Kết nối đến Google Analytics API: Sử dụng thư viện Google Analytics API để kết nối đến API và lấy dữ liệu.
Hiển thị dữ liệu trong widget: Hiển thị dữ liệu đã lấy được trong widget của bạn.

Kết Luận

Việc thêm custom dashboard widget vào WordPress là một cách tuyệt vời để tùy chỉnh dashboard và hiển thị thông tin quan trọng cho người dùng. Bằng cách làm theo các bước hướng dẫn trong bài viết này, bạn có thể tạo các widget tùy chỉnh của riêng mình và cải thiện trải nghiệm người dùng trên trang web WordPress của bạn.

Hãy nhớ rằng việc tạo custom dashboard widget đòi hỏi kiến thức về PHP, HTML, CSS, và WordPress API. Nếu bạn không quen thuộc với các công nghệ này, bạn có thể thuê một nhà phát triển WordPress để giúp bạn tạo widget.

admin

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