Khi WordPress cập nhật core, plugin, hay theme, site tạm thời chuyển sang maintenance mode và visitor thấy dòng chữ trần trụi: “Briefly unavailable for scheduled maintenance. Check back in a minute.” Nó hoạt động, nhưng so với brand cân đo của bạn thì đó là một trải nghiệm kém chuyên nghiệp. Trong bài này mình sẽ hướng dẫn bạn tạo trang maintenance mode on-brand cho WordPress block themes — chi cần thêm 1 hook vào functions.php, sau đó quản lý toàn bộ qua Site Editor, khong can code them.
Maintenance Mode Mac Dinh Cua WordPress Hoat Dong Nhu The Nao?
Khi WordPress chạy update, no tao mot file .maintenance o thu muc goc. Trong thoi gian file nay ton tai, tat ca request deu tra ve trang maintenance mac dinh — mot trang HTML don gian, khong co CSS, khong co branding, khong co image. File .maintenance tu xoa khi update xong.
Vấn đề là: nếu update bị lỗi, file .maintenance có thể bị kẹt lại, và visitor cứ thấy trang trắng đó mãi. Mình đã gặp trường hợp plugin update fail khiến site kẹt maintenance mode hơn 2 tiếng — traffic giảm 40% trong ngày đó.
Với block themes (WordPress 5.9+), bạn hoàn toàn có thể thay trang maintenance mặc định bằng một template được thiết kế trong Site Editor — đầy đủ font, màu sắc, logo, và layout của brand. Cách làm gọn gàng nhất là qua filter template_include.
Tai Sao Can Tao Trang Maintenance Mode Custom?
Mình đã quản lý hàng chục site WordPress cho client, và moi lan update la moi lo node visitor boc lo. Trang maintenance mac dinh cua WordPress co 3 van de lon:
1. Khong co branding: Visitor nhin vao trang trang vien khong biet day la site nao. Neu site ban co traffic organic, ho co the nghi site da bi hack hoac dong cu.
2. Khong co thong tin lien he: Khi site maintenance, khach hang can biet khi nao se tro lai. Trang mac dinh khong co email, phone, hay social link.
3. Khong SEO-friendly: Trang maintenance mac dinh tra ve HTTP 200, khong co noindex. Google co the index trang nay thay vi trang that, anh huong thu hang.
Cach Thuc Hien: Hook Vao functions.php Cua Theme
Day la phan duy nhat can code. Mo file functions.php cua child theme va them doan code sau. Mình se giai thich tung dong:
/**
* Serve the template titled "Maintenance" if the template exists.
* Includes headers to signal temporary unavailability to search engines.
*
* @param string $template The path to the template.
* @return string The maintenance template path, or the original template.
*/
function your_theme_force_maintenance_template( $template ) {
// Logged-in users bypass maintenance mode
if ( is_user_logged_in() ) {
return $template;
}
// Only works with block themes
if ( ! current_theme_supports( 'block-templates' ) ) {
return $template;
}
// Look for template(s) titled exactly "Maintenance"
$maintenance_posts = get_posts(
array(
'post_type' => 'wp_template',
'title' => 'Maintenance',
'post_status' => array( 'publish', 'draft' ),
'posts_per_page' => -1,
'no_found_rows' => true,
)
);
$maintenance_post = null;
foreach ( $maintenance_posts as $post ) {
$theme_slugs = wp_get_post_terms(
$post->ID,
'wp_theme',
array( 'fields' => 'names' )
);
if ( in_array( get_stylesheet(), $theme_slugs, true ) ) {
$maintenance_post = $post;
break;
}
}
// If no maintenance template found, return original template
if ( ! $maintenance_post ) {
return $template;
}
$slug = $maintenance_post->post_name;
$maintenance_template = locate_block_template(
$template,
$slug,
array( $slug )
);
// SEO-friendly headers
if ( ! empty( $maintenance_template ) ) {
nocache_headers();
status_header( 503 );
header( 'Retry-After: 3600' );
return $maintenance_template;
}
return $template;
}
add_filter( 'template_include', 'your_theme_force_maintenance_template', 99 );Giai thich tung phan:
is_user_logged_in() — admin va editor van co the vao site binh thuong de kiem tra. Visitor khong login moi thay trang maintenance.
current_theme_supports( 'block-templates' ) — dam bao theme dang dung la block theme. Classic theme se bo qua hook nay.
Phan get_posts tim template co ten chinh xac la “Maintenance” trong database. locate_block_template() kiem tra theo thu tu uu tien: database truoc, file theme sau. Nghia la template tao trong Site Editor se duoc tim thay.
3 headers SEO-friendly:
status_header( 503 )— bao Google day la “Service Unavailable” tam thoi, khong phai loi vinh vien. Google se khong de-index.Retry-After: 3600— goi y Google quay lai sau 1 tieng (3600 giay).nocache_headers()— ngan CDN va proxy luu cache trang maintenance, dam bao site that hien ngay khi update xong.
Cach Tao Maintenance Template Trong Site Editor
Sau khi hook da trong functions.php, tat ca con lai lam trong Site Editor — khong can code them. Day la huong dan tung buoc:
Buoc 1: Vao Appearance → Editor → Templates
Buoc 2: Click “Add New Template”, chon “Custom Template”
Buoc 3: Dat ten la Maintenance — phai dung ten nay, hook se tim template co title chinh xac la “Maintenance”. WordPress tu gan slug maintenance.
Buoc 4: Thiet ke template nhu bat ky template nao khac. Template nay co quyen truy cap day du Global Styles — font, mau sac, spacing deu co san. Ban nen:
- Them header va footer template part de giu branding nhat quan
- Tao layout don gian, tap trung vao thong bao
- Them logo, thong bao maintenance, thoi gian du kien, va link social media
- Dung Cover block hoac Group block lam background
Buoc 5: Save template. Bay gio khi maintenance mode kich hoat, visitor se thay trang nay thay vi trang trang mac dinh.
Cach Bat Va Tat Maintenance Mode?
Co 3 cach de kich hoat maintenance mode, tuy theo nhu cau:
Cach 1 — WP-CLI (khuyen dung cho VPS/server):
# Bat maintenance mode
wp maintenance-mode activate --path=/var/www/yourdomain.com/public_html
# Kiem tra trang thai
wp maintenance-mode status --path=/var/www/yourdomain.com/public_html
# Tat maintenance mode
wp maintenance-mode deactivate --path=/var/www/yourdomain.com/public_htmlCach 2 — Plugin Maintenance Mode:
Cai plugin Maintenance hoac SeedProd Coming Soon Page tren wordpress.org. Cac plugin nay co san giao dien keo tha, nhung luu y: neu ban da co hook functions.php nhu minh huong dan, plugin co the xung dot. Chon 1 trong 2 cach.
Cach 3 — Tao file .maintenance thu cong:
# Tao file .maintenance o thu muc goc WordPress
# Noi dung file: timestamp het han
echo "<?php \$upgrading = " . ( time() - 600 ) . ";" > \
/var/www/yourdomain.com/public_html/.maintenance
# Xoa file de tat maintenance mode
rm /var/www/yourdomain.com/public_html/.maintenanceMình thich cach 1 nhat (WP-CLI) vi no don gian, khong can plugin, va lam viec ca khi WordPress core bi loi. De tao automation, ban co the them vao deployment script:
#!/bin/bash
# deploy.sh - Deployment script cho WordPress
WP_PATH="/var/www/yourdomain.com/public_html"
# Bat maintenance truoc khi update
sudo -u www-data wp maintenance-mode activate --path=$WP_PATH
# Chay update
sudo -u www-data wp core update --path=$WP_PATH
sudo -u www-data wp plugin update --all --path=$WP_PATH
sudo -u www-data wp theme update --all --path=$WP_PATH
# Clear cache
sudo -u www-data wp cache flush --path=$WP_PATH
sudo -u www-data wp rewrite flush --path=$WP_PATH
# Tat maintenance mode
sudo -u www-data wp maintenance-mode deactivate --path=$WP_PATH
echo "Update complete!"Cach Test Trang Maintenance Mode Co Hoat Dong Khong?
Sau khi tao template va hook, ban can test that thu. Mình thuong lam theo quy trinh:
Buoc 1: Mo trang chu o che do Incognito (khong login). Neu thay trang maintenance custom, hook da hoat dong.
Buoc 2: Mo trang chu o browser binh thuong (da login). Phai thay site binh thuong, khong bi maintenance.
Buoc 3: Kiem tra HTTP status code bang curl:
# Test voi curl -- phai thay 503
curl -sI https://yourdomain.com | head -5
# Ket qua mong doi:
# HTTP/2 503
# retry-after: 3600
# content-type: text/html; charset=UTF-8Buoc 4: Kiem tra Google Search Console khong bao loi. Vao Crawl → Fetch as Google, neu Googlebot nhan 503, no se quay lai sau ma khong de-index.
Buoc 5: Test tren mobile. Block template can responsive. Vao Site Editor, chon viewport mobile de kiem tra layout.
Maintenance Mode Anh Huong Den SEO Nhu The Nao?
Day la cau hoi minh nhan duoc nhieu nhat tu client. Neu lam dung, maintenance mode khong anh huong SEO. Google hieu 503 la tam thoi va se quay lai.
Nhung neu lam sai, SEO bi anh huong nghiem trong:
Loi 1 — Tra ve HTTP 200: Neu maintenance page tra 200, Google se index trang maintenance thay vi trang that. Khi site tro lai, Google can thoi gian de re-index. Fix: dung status_header( 503 ) nhu minh huong dan.
Loi 2 — Maintenance qua lau: Neu site maintenance hon 48 gio, Google co the danh dau URL la “soft 404”. Neu can maintenance lau, tao trang “Coming Soon” day du noi dung thay vi trang maintenance trong.
Loi 3 — Khong co Retry-After: Google bot se lap lai crawl ngay lap tuc, tan dung crawl budget. Retry-After: 3600 bao Google doi 1 tieng truoc khi quay lai.
Một kinh nghiem thuoc: site cua minh tung maintenance 6 tieng lien de chuyen server. Nho gui 503 kem Retry-After, traffic organic tro lai binh thuong chi sau 2 ngay. Neu tra 200, minh chac chan phai mat 2-3 tuan de Google re-index.
Toi Uu Trang Maintenance Mode Cho Core Web Vitals?
Mac du trang maintenance la tam thoi, nhung no van phai nhanh. Visitor dang o trang maintenance cung khong muon doi 5 giay de load. May man, vi template duoc tao bang block editor, no tu dong toi uu:
1. Khong load plugin scripts: Template maintenance khong chay cac plugin nhu WooCommerce, Yoast, Elementor. Backend nhe hon, TTFB duoi 200ms.
2. Image toi uu: Dung image nho (duoi 50KB) cho logo va background. WordPress tu dong tao responsive srcset. Dang dung WebP hoac AVIF.
3. Giom CSS minimum: Block theme chi load Global Styles CSS can thiet cho template do. Khong load toan bo theme CSS.
4. Preload font: Neu template dung custom font, them preload de font tai song song voi HTML:
<link rel="preload" href="/wp-content/themes/yourtheme/assets/fonts/main.woff2"
as="font" type="font/woff2" crossorigin>Ket hop voi huong dan toi uu toc do WordPress 2026 cua minh, trang maintenance se load duoi 1 giay.
Nhung Loi Thuong Gap Khi Tao Maintenance Template?
Loi 1 — Template khong hien ra: Hook khong tim thay template. Kiem tra: template phai co title dung la “Maintenance” (chu M hoa), va template phai thuoc theme dang hoat dong. Vao Site Editor → Templates, tim template co ten “Maintenance”.
Loi 2 — Logged-in user van thay trang maintenance: Hook kiem tra is_user_logged_in() truoc. Neu van thay maintenance khi da login, xoa cache browser va CDN, sau do reload.
Loi 3 — White screen of death: Neu co PHP syntax error trong functions.php, toan bo site se trang. Luon test code tren staging truoc. dung php -l functions.php de kiem tra syntax.
# Kiem tra PHP syntax truoc khi save
php -l wp-content/themes/yourtheme/functions.phpLoi 4 — Header bi gui sau output: Neu plugin hoac theme da output HTML truoc khi hook chay, status_header() va header() se fail. Dam bao hook duoc add voi priority cao (99) va khong co output truoc do.
Loi 5 — CDN cache trang maintenance: Cloudflare hoac CDN khac co the cache trang 503. Dung nocache_headers() nhu minh huong dan, hoac tao Page Rule tren Cloudflare de bypass cache khi status code la 503.
Co The Dung Cach Nay Cho Classic Theme Khong?
Khong duoc truc tiep. Hook locate_block_template() chi hoat dong voi block themes. Neu ban dung classic theme (vi du Flatsome, Newspaper, Avada), ban can dung cach khac:
Cach cho classic theme: Tao file maintenance.php o thu muc goc theme:
<?php
// wp-content/themes/yourtheme/maintenance.php
// Classic theme maintenance page
http_response_code( 503 );
header( 'Retry-After: 3600' );
header( 'Cache-Control: no-cache, must-revalidate' );
// Load WordPress header va footer de giu branding
get_header();
?>
<div class="maintenance-wrapper">
<h1><?php _e( 'Thong bao', 'yourtheme' ); ?></h1>
<p><?php _e( 'Site dang bao tri, vui long quay lai sau it phut.', 'yourtheme' ); ?></p>
<p><?php _e( 'Lien he: [email protected]', 'yourtheme' ); ?></p>
</div>
<?php
get_footer();
// Hook vao wp_maintenance
add_action( 'wp_maintenance', function() {
if ( file_exists( get_template_directory() . '/maintenance.php' ) ) {
load_template( get_template_directory() . '/maintenance.php' );
die();
}
});Tuy nhien, cach nay khong co giao dien keo tha. Mình khuyen len chuyen sang block theme — WordPress 7.1 da co Interactive Styling va SVG Icons API, block theme ngay cang manh.
Ket Luan
Tao trang maintenance mode on-brand cho WordPress block themes la mot upgrade nho nhung gia tri lon. Chi voi 1 hook trong functions.php va 1 template trong Site Editor, ban da thay trang trang trần trụi cua WordPress bang mot trang maintenance chuyen nghiep, day du branding, va SEO-friendly.
Qui trinh nhanh:
- Them hook
template_includevao functions.php (copy code o tren) - Tao template “Maintenance” trong Site Editor
- Thiet ke layout voi logo, thong bao, va link lien he
- Test o Incognito mode va kiem tra HTTP 503
- Them vao deployment script de tu dong bat/tat khi update
Neu ban chua lam buoc nay, nhiem vu hom nay la them hook vao functions.php va tao template. Mat 15 phut, nhung noi loi brand ma 90% site WordPress dang bo qua.
