Hiển thị múi giờ WordPress trên admin bar

5 tháng ago, WordPress Plugin, Views

Hiển Thị Múi Giờ WordPress Trên Admin Bar: Hướng Dẫn Chi Tiết

WordPress, nền tảng quản lý nội dung (CMS) phổ biến nhất trên thế giới, cung cấp một loạt các tính năng mạnh mẽ để giúp bạn quản lý trang web của mình một cách hiệu quả. Một trong những tính năng quan trọng, đặc biệt nếu bạn làm việc với một nhóm phân tán ở nhiều múi giờ khác nhau, là khả năng hiển thị múi giờ hiện tại trực tiếp trên thanh quản trị (admin bar) của WordPress.

Việc hiển thị múi giờ giúp bạn tránh những nhầm lẫn về thời gian khi lên lịch đăng bài, quản lý bình luận hoặc cộng tác với các thành viên khác trong nhóm. Bài viết này sẽ hướng dẫn bạn cách thực hiện việc này một cách chi tiết, bao gồm cả việc sử dụng plugin và viết code tùy chỉnh.

Tại Sao Nên Hiển Thị Múi Giờ Trên Admin Bar?

Việc biết múi giờ hiện tại trên thanh quản trị WordPress mang lại nhiều lợi ích, đặc biệt trong các tình huống sau:

Làm việc với nhóm phân tán: Nếu nhóm của bạn trải rộng trên nhiều múi giờ, việc hiển thị múi giờ giúp đảm bảo mọi người đều đồng bộ về thời gian.
Lên lịch đăng bài: Tránh nhầm lẫn khi lên lịch đăng bài viết, đặc biệt nếu bạn muốn đăng vào một thời điểm cụ thể phù hợp với múi giờ khác.
Quản lý bình luận: Dễ dàng xác định thời gian gửi bình luận một cách chính xác.
Kiểm soát nhật ký hoạt động: Theo dõi các hoạt động trên trang web dựa trên thời gian chính xác.

Sử Dụng Plugin Để Hiển Thị Múi Giờ

Cách đơn giản nhất để hiển thị múi giờ trên admin bar là sử dụng plugin. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn thực hiện việc này. Dưới đây là một số plugin phổ biến:

Admin Bar Date Time: Plugin này cho phép bạn tùy chỉnh hiển thị ngày giờ trên admin bar, bao gồm cả múi giờ.
WP Admin Bar: Cung cấp nhiều tùy chọn tùy chỉnh cho admin bar, bao gồm hiển thị múi giờ.
Custom Admin Bar: Cho phép bạn tạo admin bar tùy chỉnh hoàn toàn, bao gồm cả việc thêm múi giờ.

Hướng Dẫn Cài Đặt và Cấu Hình Plugin “Admin Bar Date Time”

Trong ví dụ này, chúng ta sẽ sử dụng plugin “Admin Bar Date Time” để hiển thị múi giờ.

Cài đặt Plugin:
- Đăng nhập vào bảng điều khiển WordPress của bạn.
- Vào “Plugins” > “Add New”.
- Tìm kiếm “Admin Bar Date Time”.
- Nhấp vào “Install Now” và sau đó “Activate”.
Cấu hình Plugin:
- Vào “Settings” > “Admin Bar Date Time”.
- Tại đây, bạn có thể tùy chỉnh định dạng ngày giờ, bao gồm cả múi giờ.
- Chọn múi giờ phù hợp từ danh sách thả xuống.
- Lưu các thay đổi.
Kiểm tra Admin Bar:
- Xem admin bar của bạn, bạn sẽ thấy ngày giờ hiện tại cùng với múi giờ bạn đã chọn.

Viết Code Tùy Chỉnh Để Hiển Thị Múi Giờ

Nếu bạn muốn có nhiều quyền kiểm soát hơn hoặc không muốn sử dụng plugin, bạn có thể viết code tùy chỉnh để hiển thị múi giờ trên admin bar. Dưới đây là cách thực hiện:

Thêm Code vào File functions.php:
- Bạn có thể thêm code vào file `functions.php` của theme hiện tại (khuyến cáo sử dụng child theme để tránh mất code khi cập nhật theme).
- Hoặc, bạn có thể tạo một plugin tùy chỉnh để chứa code.
Code hiển thị múi giờ:


<?php
function add_timezone_to_admin_bar( $wp_admin_bar ) {
  // Lấy múi giờ hiện tại
  $timezone_string = get_option( 'timezone_string' );
  if ( empty( $timezone_string ) ) {
    $timezone_string = 'UTC'; // Mặc định là UTC nếu không có múi giờ được thiết lập
  }

  // Tạo đối tượng DateTimeZone
  $timezone = new DateTimeZone( $timezone_string );

  // Lấy thời gian hiện tại
  $date = new DateTime( 'now', $timezone );
  $time_string = $date->format( 'Y-m-d H:i:s T' ); // Định dạng thời gian, ví dụ: 2023-10-27 10:00:00 UTC

  // Thêm nút vào admin bar
  $args = array(
    'id'    => 'current-timezone',
    'title' => 'Múi giờ: ' . $time_string,
    'href'  => '#', // Tùy chọn: Thêm liên kết
    'meta'  => array(
      'class' => 'my-admin-bar-class' // Tùy chọn: Thêm class CSS
    )
  );
  $wp_admin_bar->add_node( $args );
}
add_action( 'admin_bar_menu', 'add_timezone_to_admin_bar', 999 );

// Thêm CSS tùy chỉnh (tùy chọn)
function add_admin_bar_styles() {
  echo '<style type="text/css">
    #wp-admin-bar-current-timezone > .ab-item {
      padding: 0 10px;
    }
  </style>';
}
add_action( 'admin_head', 'add_admin_bar_styles' );
add_action( 'wp_head', 'add_admin_bar_styles' );
?>

Giải thích Code:
- `get_option( ‘timezone_string’ )`: Lấy múi giờ được thiết lập trong cài đặt WordPress.
- `DateTimeZone`: Tạo đối tượng múi giờ để xử lý thời gian.
- `DateTime`: Tạo đối tượng thời gian hiện tại với múi giờ đã chọn.
- `$wp_admin_bar->add_node()`: Thêm nút vào admin bar với thông tin múi giờ.
- `add_action( ‘admin_bar_menu’, … )`: Hook vào action `admin_bar_menu` để thêm nút vào admin bar.
- Hàm `add_admin_bar_styles()` thêm CSS tùy chỉnh để cải thiện giao diện (tùy chọn).
Kiểm tra Admin Bar:
- Sau khi thêm code và lưu file, hãy kiểm tra admin bar của bạn. Bạn sẽ thấy múi giờ hiện tại được hiển thị.

Tùy Chỉnh Hiển Thị Múi Giờ

Bạn có thể tùy chỉnh hiển thị múi giờ trên admin bar bằng cách thay đổi định dạng thời gian hoặc thêm thông tin khác.

Thay đổi Định Dạng Thời Gian: Sử dụng hàm `date()` trong PHP để định dạng thời gian theo ý muốn. Ví dụ: `’d/m/Y H:i:s’` sẽ hiển thị ngày tháng năm giờ phút giây.
Thêm Thông Tin Khác: Bạn có thể thêm thông tin khác vào tiêu đề của nút trên admin bar, chẳng hạn như tên múi giờ hoặc thông báo tùy chỉnh.

Ví dụ:


$time_string = $date->format( 'd/m/Y H:i:s (T)' ); // Định dạng mới với tên múi giờ trong ngoặc đơn
$args['title'] = 'Múi giờ: ' . $time_string . ' (Máy chủ)'; // Thêm thông báo "Máy chủ"

Khắc Phục Sự Cố

Nếu bạn gặp sự cố khi hiển thị múi giờ trên admin bar, hãy kiểm tra các điều sau:

Kiểm tra Múi Giờ Trong Cài Đặt WordPress: Đảm bảo rằng múi giờ đã được thiết lập chính xác trong “Settings” > “General”.
Kiểm tra Code: Đảm bảo rằng code của bạn không có lỗi cú pháp.
Xung Đột Plugin: Thử tắt các plugin khác để xem có plugin nào gây xung đột không.
Cache: Xóa bộ nhớ cache của trình duyệt và trang web của bạn.

Kết Luận

Việc hiển thị múi giờ trên admin bar WordPress là một cách tuyệt vời để cải thiện hiệu quả làm việc và tránh nhầm lẫn về thời gian. Bạn có thể sử dụng plugin để thực hiện việc này một cách nhanh chóng và dễ dàng, hoặc viết code tùy chỉnh để có nhiều quyền kiểm soát hơn. Hy vọng bài viết này đã cung cấp cho bạn đầy đủ thông tin để thực hiện thành công.

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