Tạo "Maintenance mode" trong Oxygen Builder

Maintenance mode là gì?

Maintenace mode chính là chế độ bảo trì hệ thống mà bạn có thể thấy khi một website đang được cập nhật hay chỉnh sửa cái gì đó.

Mặc định trong Wordpress chế độ bảo trì chỉ được kích hoạt khi website đang cập nhật plugin, theme, core,... Để tắt/mở theo ý muốn cần cài đặt plugin hoặc theme đã được tạo sẵn chế độ bảo trì.

Đối với bạn nào sử dụng Elementor thì họ đã tích hợp tùy chọn maintenance trong settings. Việc còn lại chỉ là tạo mẫu theo ý thích.

Trong bài viết này mình sẽ hướng dẫn các bạn tự tạo Maintenance mode mà không cần cài plugin. Mình tạo trên trình kéo thả Oxygen Builder, chỉ cần các bạn hiểu cách thức hoạt động thì sẽ áp dụng được trong mọi trường hợp khác.

Hướng dẫn tạo Maintenance mode trong Oxygen Builder

Mình chỉnh sửa trong template Catch All mà đã tạo trước đó.

Tạo Code Block và đặt ở vị trí trên cùng với mã code như bên dưới. Mình có chú thích các chức năng của từng đoạn code ở trong.

<!-- Thông báo cho bot thu thập dữ liệu như Google hay Bing biết được website đang bảo trì và quay lại sau khoảng thời gian được chỉ định. -->
<?php
	header("HTTP/1.1 503 Service Temporarily Unavailable");
	header("Status: 503 Service Temporarily Unavailable");
	header("Retry-After: 3600"); //Sau "3600 giây = 1 giờ" bot thu thập dữ liệu sẽ quay lại.
?>

<!-- _____________________________________ -->
<!-- Mã HTML giao diện chế độ Maintenance. -->
<div>
	<h1>BẢO TRÌ</h1>
</div>
<style>
	body{
		background-color: #fff;
	}
	h1{
		color: #000;
	}
</style>

<!-- _____________________________________________________ -->
<!-- Đoạn mã dùng để dừng thực thi các đoạn code phía sau. -->
<?php
	exit();
?>

Tạo mẫu thiết kế theo ý bạn của bạn hoặc tìm trên codepen, còn mình thì chỉ đơn giản như này thôi.

Tắt / mở chế độ Maintenance

Chỉnh Condition để ẩn / hiện các phần tử cho Admin và người dùng.

• Maintenance ON: chỉ hiện cho người dùng, không hiện ở Admin.
• Maintenance OFF: không hiện cho cả 2.

Vì Oxygen không có lệnh != cho User Can nên cần phải làm theo cách khác.

Add Condition → Dynamic Data → PHP Function Return value → Function Name: điền current_user_can → manage_options.

Phương án 2: Tạo Custom Plugin

Tạo Custom Plugin có chức năng bật Maintenance Mode. Và chỉ áp dụng đối với giao diện người dùng.

1. Tạo thư mục plugin tùy chỉnh theo ý của bạn. Ví dụ 1-MAINTENANCE

2. Trong thư mục này bạn tạo 2 tệp index.php và 1-MAINTENANCE.php.

Trong tệp index.php điền mã code này vào:

<?php
// Silence is golden.

Tệp 1-MAINTENANCE.php dán mã dưới đây vào:

<?php
/*
Plugin Name: 1-MAINTENANCE
Description: Plugin Maintenance mode.
Version: 1.0
Author: ARTRU
*/

define('MAINTENANCE_MODE_503_FILE', __FILE__);
register_activation_hook(MAINTENANCE_MODE_503_FILE, 'maintenance_mode_503_enable');
register_deactivation_hook(MAINTENANCE_MODE_503_FILE, 'maintenance_mode_503_disable');
function maintenance_mode_503_enable()
{
    set_transient('maintenance_mode_503', true, 0);
}
function maintenance_mode_503_disable()
{
    delete_transient('maintenance_mode_503');
}
function maintenance_mode_503_check()
{
    if (get_transient('maintenance_mode_503') && !current_user_can('manage_options')) {
        header('HTTP/1.1 503 Service Unavailable');
        header('Retry-After: 3600');
        header('Cache-Control: no-cache, must-revalidate, max-age=0');
        header('Pragma: no-cache');
        echo '
            <title>Maintenance mode</title>
            <div id="artru-maintenance_div">
                <h1 id="artru-maintenance_h1">MAINTENANCE</h1>
                <p id="artru-maintenance_p">Please Come Back Later.</p>
            </div>
            <style>
                body{
                    margin: 0px;
                    padding: 0px;
                    display: flex;
                    height: 100vh;
                    width: 100%;
                    background-color: #000;
                    color: #fff;
                    font-family: sans-serif;
                }
                #artru-maintenance_div{
                    margin: auto;
                    text-align: center;
                }
                #artru-maintenance_h1{
                    font-size: 30px;
                }
                #artru-maintenance_p{
                    font-size: 20px;
                }
            </style>
        ';
        exit();
    }
}
add_action('init', 'maintenance_mode_503_check');
?>

3. Vậy là xong rồi. Bạn có thể bật / tắt Maintenance mode bằng việc Activate hoặc Deactivate plugin này.

Chúc bạn thành công.