Code tạo trang bảo trì “Xịn” hơn với CSS tùy biến cho WordPress – Để tạo thông báo website đang bảo trì cho WordPress, bạn có 2 cách nhanh nhất: Dùng code chèn vào file functions.php (nhẹ máy, không cần cài plugin) hoặc Sử dụng file .maintenance (chặn toàn bộ website ngay từ gốc).
Dưới đây là hướng dẫn chi tiết cho từng cách để bạn lựa chọn.
Cách 1: Thêm code vào file functions.php (Khuyên dùng)
Cách này sẽ hiển thị trang bảo trì đối với khách truy cập, nhưng Admin (bạn) vẫn có thể đăng nhập và nhìn thấy giao diện website bình thường để sửa chữa.
Các bước thực hiện:
-
Vào thư mục theme đang dùng:
wp-content/themes/wp-theme-cua-ban/ -
Mở file
functions.phpvà dán đoạn code sau vào cuối file:
function wp_vnc_maintenance_mode() {
// Nếu là admin thì vẫn xem được web bình thường
if (current_user_can(‘edit_themes’) || is_user_logged_in()) {
return;
}
// Thiết lập header phản hồi 503 để không ảnh hưởng SEO
wp_die(
‘<h1>Website đang bảo trì định kỳ</h1><p>Chúng tôi đang cập nhật một số tính năng mới để trải nghiệm của bạn tốt hơn. Vui lòng quay lại sau ít phút!</p>’,
‘Website đang bảo trì’,
array(‘response’ => 503)
);
}
add_action(‘get_header’, ‘wp_vnc_maintenance_mode’);
Mẹo: Bạn có thể thay đổi dòng chữ “Website đang bảo trì định kỳ…” thành bất kỳ nội dung nào bạn muốn hiển thị cho khách hàng.
Cách 2: Tạo trang bảo trì “Xịn” hơn với CSS tùy biến
Nếu bạn muốn trang bảo trì trông đẹp mắt hơn, có màu sắc hoặc căn giữa màn hình, hãy dùng đoạn code kèm CSS dưới đây (cũng chèn vào functions.php):
function wp_custom_maintenance_mode() {
if (current_user_can(‘edit_themes’) || is_user_logged_in()) {
return;
}
$protocol = $_SERVER[“SERVER_PROTOCOL”];
if ( ‘HTTP/1.1’ != $protocol && ‘HTTP/1.0’ != $protocol ) $protocol = ‘HTTP/1.0’;
header( “$protocol 503 Service Unavailable”, true, 503 );
header( ‘Content-Type: text/html; charset=utf-8’ );
header( ‘Retry-After: 3600’ ); // Thời gian hẹn quay lại (tính bằng giây)
?>
<!DOCTYPE html>
<html lang=”vi”>
<head>
<meta charset=”UTF-8″>
<title>Website Đang Bảo Trì</title>
<style>
body { text-align: center; padding: 150px; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; color: #333; background-color: #f4f4f4; }
h1 { font-size: 50px; margin-bottom: 20px; color: #e74c3c; }
body { font: 20px Helvetica, sans-serif; color: #333; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: underline; }
</style>
</head>
<body>
<article>
<h1>Hệ thống đang bảo trì!</h1>
<div>
<p>Xin lỗi vì sự bất tiện này. Website đang được nâng cấp hệ thống để phục vụ bạn tốt hơn.</p>
<p>— Ban quản trị Website</p>
</div>
</article>
</body>
</html>
<?php
die();
}
add_action(‘wp_loaded’, ‘wp_custom_maintenance_mode’);
Cách 3: Sử dụng file .maintenance (Bảo trì toàn diện)
Nếu bạn muốn khóa ngay lập tức và toàn bộ trang web (kể cả trang Admin cũng không vào được) để copy dữ liệu lớn hoặc chuyển host:
-
Tạo một file có tên là
.maintenance(lưu ý có dấu chấm ở đầu) ở ngay thư mục gốc cài đặt WordPress (ngang hàng với filewp-config.php). -
Mở file đó ra và dán đoạn code này vào:
<?php $upgrading = time(); ?>
Lưu ý: Cách này sẽ hiển thị thông báo mặc định của WordPress là: “Briefly unavailable for scheduled maintenance. Check back in a minute.” Khi bảo trì xong, bạn chỉ cần xóa file .maintenance đi là web hoạt động lại.
⚠️ Lưu ý quan trọng khi sửa code:
-
Trước khi sửa file
functions.php, hãy sao lưu (backup) file đó lại để đề phòng dán nhầm chỗ gây lỗi trắng trang. -
Khi đã bảo trì xong, bạn chỉ cần xóa đoạn code trên hoặc ẩn nó đi bằng cách thêm dấu
//ở đầu các dòng code.
