workpress自定义维护页面

闪电
闪电
闪电
57
文章
0
评论
2020年5月14日06:52:29 评论 78

前言

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

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

效果是这样的:
workpress自定义维护页面

实现

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

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

2. 进入网站维护设置

workpress自定义维护页面

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》安装的时候已经提供了默认的维护页面样式,我们可以修改文字内容:

workpress自定义维护页面

workpress自定义维护页面

我们如何把默认样式换成我们自己想要的结果呢?
思路就是通过自定义的文字内容,进行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),禁止转载!

继续阅读
weinxin
我的微信
微信扫一扫
闪电
  • 本文由 发表于 2020年5月14日06:52:29
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
WordPress使用Nginx提速 技术随笔

WordPress使用Nginx提速

前言 使用WordPress搭建好网站以后,我们需要优化网站的访问速度。要整体提升网站的速度,需要不同的优化策略配合。尽量减少非必要的功能、把网站上的图片放到cdn中、压缩js、压缩css等,那么今天...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: