建站随笔

创建动态404界面以替换默认404界面

本文于2021年1月24日由AlvinCR更新

更改404界面

1.须知

1 测试方法

输入你的域名+任意字符,比如我输入:https://alvincr.com/111111111111就可以看到如下界面:

这个是我新设置的界面,可以根据个人喜好来自定义404界面,比如可以在界面添加个打砖块娱乐界面之类的(谷歌浏览器已经不支持flash了,因此使用flash插入对于这些用户而言无效),代码可以自己写,也可以网上找。

2 选项不同的解决方法

如果显示界面和我的不一样,或是没有模板选项(理论上应该有),安装elementor即可。

不过在本文中我使用elementor只是为了创建一个地图(下文的返航地图),如果不需要也无需安装。

2 自定义404界面

 

方法一:elementor创建

在模板出选择-添加新模板

类型选择页面,模板命名是你希望在顶部显示的名字,并且子域名也会被设置成该名称。在此添加想要的模板类型。

 

如果要添加代码,那么将文本编辑器拖入小工具一栏,选择文本项(千万别用可视化选项),将代码复制到文本里面即可。

方法二:主题中添加

编辑网站根目录下的404.php,如果使用主题,那么需要更改主题下的404而非网站根目录,如果没有404php则自己添加,注意要同时添加css样式文件到文件夹中,或是直接调用网络js脚本资源。不然就会出现如图这种情况:

删除里面所有代码,然后添加自定义代码,或是复制步骤三给出的404界面的代码并自己添加css,也可以直接下载最下面的压缩文件。

注意更改链接地址,详情参考代码备注。

2021.1.24补充:重新将脚本和CSS代码整合进一个文档中,无需再进行调用。

 

方法三:插件添加

使用插件,不过既然能有代码能很好地解决问题,那就尽量不用插件,一开始搭建网站的时候我是喜欢使用插件的,因为插件比较方便,但是在日常使用过程中,使用插件会减慢访问速度,而且会出现意想不到的情况。最主要的是插件太多看的心烦。

3 个人使用代码分享

文本形式在最下面可以下载。注意此文本不包含css格式,压缩包在文章最后可以下载,如果只使用此代码会在第一行显示0000000000000000444444444444444444,没有任何效果。

<!DOCTYPE html>
<html lang=”zh”><head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>404</title>
<link rel=”stylesheet” href=”./css/style.css”>

</head>
<body>

<main class=”container”>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>4</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<span class=”particle”>0</span>
<article class=”content”>
<p>成功着陆….竟然遇到火星人,</p>
<p><strong>编号404</strong> 不明火星生物警告:请立刻返航。</p>
<p>
<a href=”https://alvincr.com”><button>下达立即返航命令</button></a>
<a href=”https://alvincr.com/?elementor_library=404%e7%95%8c%e9%9d%a2″><button>需要查看返航地图</button></a>    <!-这里的href需要更改为自己想要跳转的界面,请删除标红部分->
</p>
</article>
</main>

 

</body></html>

 

 

相关文件下载地址
该资源需登录后下载,去登录?
©下载资源版权归作者所有;本站所有资源均来源于网络,仅供学习使用,请支持正版!

Leave a Reply

邮箱地址不会被公开。 必填项已用*标注

创建动态404界面以替换默认404界面