workpress自定义维护页面

前言

当我们的WordPress站点需要临时维护的时候，我们需要告诉访客我们正在维护，请稍等几分钟或者更长时间再访问页面。

最简单粗暴的方法就是直接修改主题的functions.php，强行返回一句话，这样的显然B格不够，而且用户体验极差，今天我介绍一个自定义维护页面的方法，让大家也给自己的网站做一个高B格的维护页面。

效果是这样的：

截屏2020-05-14上午6.27.49.png

实现

1. 安装安全插件《All In One WP Security》

这个是workpress非常好用的安全插件，可以做各种网络安全配置，以及一键设置网站维护状态。

2. 进入网站维护设置

image.png

3. 自定义维护内容

<script>
document.getElementsByTagName('head').item(0).remove()
var head = document.createElement('head')
head.innerHTML = `<metacharset="utf-8">
<title>系统维护中-光速博客</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
line-height: 1.7;
margin: 0;
box-sizing: border-box;
}
html {
background-color: #f3f3f3;
color: #888;
display: table;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
height: 100%;
width: 100%;
}
body {
vertical-align: middle;
margin: 2em auto;
}
h1 {
color: #555;
font-size: 2em;
}
a {
color: #06a;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p, .p { margin: 10px 0 15px; }
input, button {
font-size: 16px;
padding: 6px 10px;
border: none;
border-radius: 2px;
}
input {
background-color: #f3f3f3;
width: 60%;
}
button {
min-width: 80px;
background-color: #009a61;
text-align: center;
color: #fff;
cursor: pointer;
}
button:hover,
button:active {
background-color: #008151;
}
.error { color: #d9534f; }
.text-center { text-align: center; }
.box {
margin: 0 auto;
padding: 40px;
background-color: #fff;
width: 540px;
}
.figure {
float: right;
line-height: 0;
}
.figure img {
height: 200px;
}
.footer {
margin: 15px 0 0;
color: #999;
text-transform: uppercase;
font-size: 13px;
}
.footer a {
color: #999;
}
@media only screen and (max-width: 480px) {
.box {
padding: 20px;
width: 100%;
}
h1 {
font-size: 1.5em;
margin: 0 0 0.3em 0;
}
.figure {
float: none;
}
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
</style>`
document.getElementsByTagName('html').item(0).appendChild(head)
</script>
<div class="box">
        <div class="clearfix">
            
    
            <h1>维护中 , 请稍候。。。</h1>

            <div class="p">
                <p>光速博客 暂时不可用，请稍后访问。</p>
                <p>任何疑问请联系微信客服：speed-vip</p>
            </div>

            <div class="p">❤️❤️</div>
        </div>
    </div>
    <div class="footer text-center">
        from <a href="http://segmentfault.com">光速博客</a>
    </div>

分析

插件《All In One WP Security》安装的时候已经提供了默认的维护页面样式，我们可以修改文字内容：

image.png image.png

我们如何把默认样式换成我们自己想要的结果呢？
思路就是通过自定义的文字内容，进行js渗透，强行修改页面样式与结构，这样我们就可以实现自定义维护页面了

最核心代码：

<script>
document.getElementsByTagName('head').item(0).remove()
var head = document.createElement('head')
head.innerHTML = ``
document.getElementsByTagName('html').item(0).appendChild(head)
</script>

根据head定位，删除第一个子元素，然后创建一个html元素，把style样式插进去，最后放回head中。

总结

这是一种方法，具体内容和样式大家都可以自行替换，这也是非常简单基础的js技术，但是运用在这里就很魔幻地把默认样式给改变了，用技术为自己服务～希望大家喜欢。

文章原创：光速博客(gsbk.org)，禁止转载！