首页 > 代码库 > WordPress404页面自定义
WordPress404页面自定义
不知道大家是怎么设计404页面,个性的404可以为网站增色不少,wordpress设置404是在主题里面的404.php页面上,当然比如你用Apache、nginx等服务器,你可以自己建一个单页,内容和404页面一样,那么只要是输错域名都是显示这个页面。
本站的404页面效果如下,大家也可以试一试在地址栏输入本站的错误地址:
那我就贴一下这个单页模板的代码:
1 <?php 2 /* 3 Template Name: page-404 4 单页404 Template 5 */ 6 ?> 7 <?php get_header(); ?> 8 <script type="text/javascript"> 9 //错误计时 10 function count(){ 11 var obj = document.getElementById("time-404"); 12 obj.innerHTML = obj.innerHTML - 1; 13 }; 14 setInterval("count()",1000); 15 </script> 16 <div id="content" class="page-404"> 17 <meta http-equiv="refresh" content="5;url=<?php bloginfo(‘url‘); ?>"> 18 <pre> 19 <!DOCTYPE HTML><br /> 20 <head><br /> 21 <title><span id="font-404-title">zkeyword.com</span></title><br /> 22 </head><br /> 23 <body><br /> 24 <h1><span id="font-404-1">404</span><span id="font-404-2">,你懂得!</span></h1><br /> 25 <p><data id="time-404">5</data>秒钟后,自动返回首页!</p><br /> 26 </body><br /> 27 </html> 28 </pre> 29 </div> 30 <?php get_footer(); ?>
css代码:
/*错误页*/ .page-404 pre{background:#fff;margin:30px auto;font:18px/1.1 ‘\5fae\8f6f\96c5\9ed1‘,‘\9ed1\4f53‘;-webkit-box-shadow:5px 5px 5px #ddd;-moz-box-shadow:5px 5px 5px #ddd;box-shadow:0 0 5px #ddd;-moz-border-radius-topleft:90px;-moz-border-radius-bottomright:90px;-webkit-border-top-left-radius:90px;-webkit-border-bottom-right-radius:90px;border-top-left-radius:90px;border-bottom-right-radius:90px;border:1px solid #eee;padding:30px 20px;} .page-404 pre:hover{background:#fafafa} #font-404-title{color:#09e;font-size:23px} #font-404-1{font-size:90px;color:#900} #font-404-2{font-size:30px;color:#900} #time-404{color:#900}
新建完模板当然要建立实际的单页,单纯模板页是不能访问的,那么,当我们得到这个单页的地址就可以在服务器上设置了,单页指定的模板如下:
服务器端的设置我只讲nginx的设置,用Apache的同学相信比我还熟悉我这里就不讲了,nginx只要在nginx.conf对应的网上加入如下代码重启nginx就可以了:
- error_page 404 http://zkeyword.com/error;
其实,不只是wordpress可以这行做,其他的网站也可以这样,原理是相同的。
WordPress404页面自定义
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。