{"id":201,"date":"2023-04-18T12:15:56","date_gmt":"2023-04-18T05:15:56","guid":{"rendered":"https:\/\/dev.artru.eu.org\/?p=201"},"modified":"2023-10-27T14:37:52","modified_gmt":"2023-10-27T07:37:52","slug":"tao-maintenance-mode-trong-oxygen-builder","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/tao-maintenance-mode-trong-oxygen-builder\/","title":{"rendered":"Create &quot;Maintenance mode&quot; in Oxygen Builder"},"content":{"rendered":"<div class=\"wp-block-group has-vivid-green-cyan-color has-black-background-color has-text-color has-background\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>UPDATE:<\/strong> July 23, 2023.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>I have created Custom Plugin to enable\/disable Maintenance Mode.<\/li>\n\n\n\n<li>Follow the new how-to guide <a href=\"#phuong-an-2-tao-custom-plugin\">under<\/a>.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group has-vivid-red-color has-black-background-color has-text-color has-background\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>ERROR:<\/strong> July 22, 2023.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Currently this approach is not compatible with the new version of Oxygen Builder and Rank Math SEO.<\/li>\n\n\n\n<li>I will try to update the new solution as soon as possible.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is maintenance mode?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Maintenace mode is the system maintenance mode that you can see when a website is being updated or modified.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, in Wordpress maintenance mode is only activated when the website is updating plugins, themes, core, etc. To turn it on\/off at will, you need to install a plugin or theme that has been created in maintenance mode.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For those of you using Elementor, they have integrated a maintenance option in settings. All that remains is to create the template to your liking.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, I will guide you to create Maintenance mode yourself without installing a plugin. I created on Oxygen Builder drag and drop, as long as you understand how it works, it will be applicable in all other cases.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Instructions for creating Maintenance mode in Oxygen Builder<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I edited in the template <strong>Catch All<\/strong> that were created earlier.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"288\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/04\/Structure-code-block-Oxygen-builder.png\" alt=\"Stucture Code Block in Oxygen builder\" class=\"wp-image-326\"\/><figcaption class=\"wp-element-caption\">Create code blocks in Oxygen Builder<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Create <strong>Code Block<\/strong> and put in the top position with the code as below. I have annotated the functions of each code in.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;!-- Th\u00f4ng b\u00e1o cho bot thu th\u1eadp d\u1eef li\u1ec7u nh\u01b0 Google hay Bing bi\u1ebft \u0111\u01b0\u1ee3c website \u0111ang b\u1ea3o tr\u00ec v\u00e0 quay l\u1ea1i sau kho\u1ea3ng th\u1eddi gian \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. --&gt;\n&lt;?php\n\theader(\"HTTP\/1.1 503 Service Temporarily Unavailable\");\n\theader(\"Status: 503 Service Temporarily Unavailable\");\n\theader(\"Retry-After: 3600\"); \/\/Sau \"3600 gi\u00e2y = 1 gi\u1edd\" bot thu th\u1eadp d\u1eef li\u1ec7u s\u1ebd quay l\u1ea1i.\n?&gt;\n\n&lt;!-- _____________________________________ --&gt;\n&lt;!-- M\u00e3 HTML giao di\u1ec7n ch\u1ebf \u0111\u1ed9 Maintenance. --&gt;\n&lt;div&gt;\n\t&lt;h1&gt;B\u1ea2O TR\u00cc&lt;\/h1&gt;\n&lt;\/div&gt;\n&lt;style&gt;\n\tbody{\n\t\tbackground-color: #fff;\n\t}\n\th1{\n\t\tcolor: #000;\n\t}\n&lt;\/style&gt;\n\n&lt;!-- _____________________________________________________ --&gt;\n&lt;!-- \u0110o\u1ea1n m\u00e3 d\u00f9ng \u0111\u1ec3 d\u1eebng th\u1ef1c thi c\u00e1c \u0111o\u1ea1n code ph\u00eda sau. --&gt;\n&lt;?php\n\texit();\n?&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Create your own design or find it on <a href=\"https:\/\/codepen.io\/search\/pens?q=maintenance&amp;depth=title_desc_tags&amp;show_forks=false\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">codepen<\/a>, and I&#039;m just as simple as this.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Turn on\/off Maintenance mode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adjust Condition to hide\/show elements for Admin and user.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Maintenance ON:<\/strong> Only visible to users, not in Admin.<\/li>\n\n\n\n<li><strong>Maintenance OFF:<\/strong> not visible for both.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"756\" height=\"185\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/04\/Tuy-chinh-Condition-trong-che-do-Maintenance-Oxygen-builder.png\" alt=\"Customize Condition in Maintenance Oxygen builder mode\" class=\"wp-image-322\"\/><figcaption class=\"wp-element-caption\">Customize Condition in Maintenance Oxygen builder mode<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Because Oxygen has no command <code data-no-translation=\"\" data-no-auto-translation=\"\">!=<\/code> give <strong>User Can<\/strong> so it needs to be done differently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-translation=\"\" data-no-auto-translation=\"\">Add Condition<\/code> \u2192 <code data-no-translation=\"\" data-no-auto-translation=\"\">Dynamic Data<\/code> \u2192 <code data-no-translation=\"\" data-no-auto-translation=\"\">PHP Function Return value<\/code> \u2192 Function Name: enter <code data-no-translation=\"\" data-no-auto-translation=\"\">current_user_can<\/code> \u2192 <code data-no-translation=\"\" data-no-auto-translation=\"\">manage_options<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"phuong-an-2-tao-custom-plugin\">Option 2: Create Custom Plugin<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create Custom Plugin with function to enable Maintenance Mode. And that only applies to the user interface.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"973\" height=\"809\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Maintenance-mode.png\" alt=\"Maintenance mode\" class=\"wp-image-1609\"\/><figcaption class=\"wp-element-caption\">Maintenance mode<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">1. Create your own custom plugin directory. For example <strong><code data-no-translation=\"\" data-no-auto-translation=\"\">1-MAINTENANCE<\/code><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. In this folder you create 2 files <code data-no-translation=\"\" data-no-auto-translation=\"\">index.php<\/code> and <code data-no-translation=\"\" data-no-auto-translation=\"\">1-MAINTENANCE.php<\/code>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"854\" height=\"115\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/2-tep-PHP-Custom-plugin-Maintenance-mode.png\" alt=\"2 files PHP Custom plugin Maintenance mode\" class=\"wp-image-1598\"\/><figcaption class=\"wp-element-caption\">2 files PHP Custom plugin Maintenance mode<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">In the file <code data-no-translation=\"\" data-no-auto-translation=\"\">index.php<\/code> Enter this code:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;?php\n\/\/ Silence is golden.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">File <code data-no-translation=\"\" data-no-auto-translation=\"\">1-MAINTENANCE.php<\/code> Paste the below code in:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;?php\n\/*\nPlugin Name: 1-MAINTENANCE\nDescription: Plugin Maintenance mode.\nVersion: 1.0\nAuthor: ARTRU\n*\/\n\ndefine('MAINTENANCE_MODE_503_FILE', __FILE__);\nregister_activation_hook(MAINTENANCE_MODE_503_FILE, 'maintenance_mode_503_enable');\nregister_deactivation_hook(MAINTENANCE_MODE_503_FILE, 'maintenance_mode_503_disable');\nfunction maintenance_mode_503_enable()\n{\n    set_transient('maintenance_mode_503', true, 0);\n}\nfunction maintenance_mode_503_disable()\n{\n    delete_transient('maintenance_mode_503');\n}\nfunction maintenance_mode_503_check()\n{\n    if (get_transient('maintenance_mode_503') &amp;&amp; !current_user_can('manage_options')) {\n        header('HTTP\/1.1 503 Service Unavailable');\n        header('Retry-After: 3600');\n        header('Cache-Control: no-cache, must-revalidate, max-age=0');\n        header('Pragma: no-cache');\n        echo '\n            &lt;title&gt;Maintenance mode&lt;\/title&gt;\n            &lt;div id=\"artru-maintenance_div\"&gt;\n                &lt;h1 id=\"artru-maintenance_h1\"&gt;MAINTENANCE&lt;\/h1&gt;\n                &lt;p id=\"artru-maintenance_p\"&gt;Please Come Back Later.&lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;style&gt;\n                body{\n                    margin: 0px;\n                    padding: 0px;\n                    display: flex;\n                    height: 100vh;\n                    width: 100%;\n                    background-color: #000;\n                    color: #fff;\n                    font-family: sans-serif;\n                }\n                #artru-maintenance_div{\n                    margin: auto;\n                    text-align: center;\n                }\n                #artru-maintenance_h1{\n                    font-size: 30px;\n                }\n                #artru-maintenance_p{\n                    font-size: 20px;\n                }\n            &lt;\/style&gt;\n        ';\n        exit();\n    }\n}\nadd_action('init', 'maintenance_mode_503_check');\n?&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">3. That&#039;s it. You can enable\/disable Maintenance mode by <strong>Activate <\/strong>or <strong>Deactivate <\/strong>this plugin.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"522\" height=\"72\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/07\/Activate-Deactivate-custom-plugin-maintenance.png\" alt=\"Activate - Deactivate custom plugin maintenance\" class=\"wp-image-1601\"\/><figcaption class=\"wp-element-caption\">Activate - Deactivate custom plugin maintenance<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Good luck.<\/p>","protected":false},"excerpt":{"rendered":"<p>C\u1eacP NH\u1eacT: ng\u00e0y 23, th\u00e1ng 7, 2023. L\u1ed6I: ng\u00e0y 22, th\u00e1ng 7, 2023. Maintenance mode l\u00e0 g\u00ec? Maintenace mode ch\u00ednh l\u00e0 ch\u1ebf \u0111\u1ed9 b\u1ea3o tr\u00ec h\u1ec7 th\u1ed1ng m\u00e0 b\u1ea1n c\u00f3 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":329,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oxygen-builder"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/329"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}