Tạo trang chế độ bảo trì web đẹp * Gsviec

Trong phần này, Gsviec sẽ giới thiệu cách tạo trang Chế độ bảo trì web (hoặc Coming soon) đẹp, chuyên nghiệp. Giúp nâng cao giá trị hình ảnh thương hiệu cũng như tránh làm mất khách khi đang bảo trì website.

Mục lục

Chế độ bảo trì website là gì?

Trang chế độ bảo trì (Maintenance) là trang thông báo cho người truy cập website rằng web đang bảo trì. Như đã nói ở trên, tạo một trang thông báo bảo trì sẽ giúp nâng cao giá trị thương hiệu đồng thời tránh việc làm mất khách. Trên trang chế độ bảo trì bạn nên để phương thức liên hệ khác như: Google Maps, Số điện thoại, Zalo, Facebook…

Một website khó mà hoạt động thường xuyên, liên tục từ năm này qua năm khác mà không bảo trì hay sửa chữa định kỳ. Ngoài ra còn khá nhiều lý do khác mà bạn cần bật chế độ bảo trì cho web.

*** Đọc thêm: Lỗi Maintenance khi update WordPress

Cách bật chế độ bảo trì

Để bật chế độ bảo trì web, bạn có thể dùng một trong các cách sau:

Sử dụng plugin

Hiện nay có khá nhiều plugin hỗ trợ tạo chế độ bảo trì khá chuyên nghiệp có thể kể đến như:

WP Maintenance Mode
SeedProd
Elementor Maintenance Mode

Việc bật vào tạo dựng các trang Maintenance trên các plugin này khá dễ dàng và hiệu quả. Ngoài ra, còn nhiều plugin bảo trì khác rất chuyên nghiệp

Sử dụng code bảo trì

Các phương pháp này sử dụng code nên thông thường bạn cần backup các file này lại trước. Hoặc cẩn thận hơn thì bạn backup luôn cả website cho an toàn. Có 2 cách chỉnh sửa file như dưới:

Trên file .htaccess

Để thực hiện cách này, bạn làm theo các bước sau:

Truy cập vào File Manager trên hosting web. Sau đó vào public_html
Bạn tạo một file gsviecmaintenance.html
Click chuột phải gsviecmaintenance.html, chọn Edit
Copy đoạn code bên dưới vào file này và lưu lại

RewriteEngine On 
RewriteBase / 
RewriteCond %{REQUEST_URI} !^/maintenance\.html$ 
RewriteRule ^(.*)$ https://myweb.com/gsviecmaintenance.html [R=307,L]

Lưu ý là myweb.com thì bạn cần sửa lại trang web của bạn.

Trong functions.php

Trong theme editor, bạn chọn chỉnh sửa file functions.php. Sau đó copy đoạn code sau dán vào đó (cuối file)

// Activate WordPress Maintenance Mode 
/**
 * Maintenance mode
 */
function wp_maintenance_mode() {
 
    if ( ! current_user_can( 'administrator' ) ) {
        wp_logout();
    }
 
    wp_die( '<h1>Website đang bảo trì</h1><br />Vui lòng quay laaij sau' );
}
 
/**
 * Check if current page is the login page
 *
 * @return bool
 */
function is_wp_login() {
    if ( isset( $GLOBALS['pagenow'] ) && 'wp-login.php' === $GLOBALS['pagenow'] ) {
        return true;
    }
 
    return false;
}
 
if ( false === is_user_logged_in() && false === is_wp_login() ) {
    add_action( 'get_header', 'wp_maintenance_mode' );
} else {
    if ( ! current_user_can( 'administrator' ) ) {
        add_action( 'admin_init', 'wp_maintenance_mode' );
    }
}

Trên đoạn wp_die thì bạn có thể thay thế các câu chữ cho phù hợp với sở thích như thêm số điện thoại liên hệ…

Chỉnh sửa trên hosting

Tùy thuộc vào hosting, Cpanel mà họ cung cấp các phần này. Bạn có thể liên hệ với nhà cung cấp VPS, hosting để tìm hiểu thêm.

Chỉnh sửa trên theme

Trong phần này, Gsviec sẽ giới thiệu cách sử dụng chế độ bảo trì trên 2 loại theme được ưa chuộng nhất hiện nay trên WP. Cụ thể đó là Flatsome và Astra. Các bạn có thể tìm hiểu thêm ở bên dưới.

Flatsome

Flatsome là dòng theme mà Gsviec cho là rất tuyệt vời vì chúng tự tích hợp sẵn rất nhiều công cụ hỗ trợ. Trong đó có cả việc tạo Maintenance Mode. Cụ thể, các bạn có thể thực hiện các bước sau.

Tạo trang giao diện Maintenance Mode

Trong theme Flatsome, các bạn tiến hành tạo trang Maintenance Mode thông thường như tạo trang khác. Với công cụ hỗ trợ ổn định, các bạn dễ dàng tạo trang thông báo chuyên nghiệp. Tương tự, bạn cũng dễ dàng tạo trang lỗi 404 hoặc sử dụng mẫu Coming soon từ Flatsome Studio.

Mẫu Coming soon dùng cho chế độ bảo trì trong Flatsome Studio

Cấu hình Maintenance Mode trong Flatsome

Trong Dashboard của website, bạn di chuột vào Flatsome -> Advanced. Sau đó chọn Maintenance Mode. Tại đây, bạn cấu hình như hình bên dưới.

Phần Custom Maintenance Mode, bạn chọn giao diện trang vừa làm ở mục trên. Khi nãy Gsviec thực hiện đặt tên trang là: Web bảo trì nên giờ chúng tôi chọn trang này. Sau đó, các bạn cứ bấm lưu lại là được

Astra

Trong Astra có 2 plugin cực kì thích hợp sử dụng để cấu hình Maintenance Mode. Cụ thể đó là Spectra hoặc Elementor. Cụ thể các bạn tiến hành như bên dưới.

Spectra

Tương tự như phần Flatsome, các bạn tạo một trang Chế độ bảo trì. Sau đó tiến hành như sau:

Trong Dashboard, chọn Spectra -> Settings -> Site Visibility. Sau đó bật chế độ Coming soon hoặc Maintenance Mode. Sau đó chọn trang đã thiết kế.

Elementor

Đối với Elementor, các bạn cũng làm tương tự như những phần trên và tiến hành như sau:

Trong giao diện admin, phần Mẫu Elementor -> Thêm mới. Sau đó chọn như hình dưới

Từ đó, các bạn cũng thiết kế tương tự Flatsome để tạo một trang bảo trì chuyên nghiệp.

Dễ dàng tạo một trang web đang bảo trì trong Elementor

Cấu hình Elementor thực hiện theo các bước như sau:

Trong Dashboard, vào Elementor -> Công cụ -> Chế độ bảo trì.
Chọn chế độ: Sắp có
Chọn mẫu: lựa chọn mẫu đã thiết kế trước đó
Nhấn Lưu lại

Kết luận

Qua bài viết này, Gsviec hi vọng đã mang đến cho các bạn các bước thực hiện tạo một chế độ bảo trì cho web đẹp, chuyên nghiệp. Trong quá trình thực hiện, nếu gặp trục trặc xin vui lòng liên hệ với chúng tôi để nhận hỗ trợ. Nếu quý khách có nhu cầu cần thiết kế trang giao diện Maintenance Mode chuyên nghiệp; xin vui lòng liên hệ ngay với chúng tôi.