{"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 \u201cMaintenance mode\u201d 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 \u2013 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 th\u1ec3 th\u1ea5y khi m\u1ed9t website \u0111ang \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt hay ch\u1ec9nh s\u1eeda c\u00e1i g\u00ec \u0111\u00f3. M\u1eb7c \u0111\u1ecbnh trong Wordpress ch\u1ebf \u0111\u1ed9 b\u1ea3o tr\u00ec ch\u1ec9 \u0111\u01b0\u1ee3c [&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}]}}