打造个性化WordPress 404页面

时间有限,我就没有自己花时间去制作了。
这儿找了张图,觉得还可以,就用上了。至于怎么访问我博客的404页面,这个应该不用我说了~~


下面说下两种方法。

用WP 页面模板实现404页面

这个非常简单,可以是WP系统指定的模板( 404.php ) ,也可以是自定义模板(如果还不熟悉WP自定义模板的可以参考文档:Creating_Your_Own_Page_Templates
对于较新版本的WP,404 模板法是比较合适的。
修改当前主题的404.php 文件(如果没有的话,可参考 twentyeleven模板中的404.php 文件自己做一个)。
如:

1
2
3
4
5
6
7
8
9
<?php get_header(); ?>
    <h1 class="pagetitle"><?php _e( '404: Page Not Found', 'vigilance' ); ?></h1>
    <div class="entry page">
        这里是你自己的HTML代码....
        <?php get_search_form(); ?>
    </div><!--end entry-->
</div><!--end content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

其中 get_search_form() 是显示搜索表单的,如果不需要可以去掉这一句。如果不需要WP的 header 、 sidebar 和 footer,也可以去掉。


插件法

模板法虽然简单,但是修改不太方便,因为每次更换模板都要修改这个 404.php ,不适合我这种懒人。因此我没有采用上面的方法。
插件的好处是,一劳永逸,这也是我至今在用WP的原因,很简单,它插件机制非常强大,使用起来很方便。

大致思路是:
在WP即将加载模板之前,执行我们自己定义的操作(显示我们自定义的404页面内容)。
demo 代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
 * @filename custom-404-page.php
 * @encoding UTF-8
 * @author 荒野无灯 <HuangYeWuDeng>
 * @link http://ihacklog.com
 * @copyright Copyright (C) 2012 荒野无灯
 * @license http://creativecommons.org/licenses/by-nc/2.5/
 * @Description 自定义404页面
 */

add_action('template_redirect','ihacklog_pkg_custom_404_page',-100);
function ihacklog_pkg_custom_404_page()
{
    if( is_404() )
    {
        /**
         * 开始发送 404 页面内容
         */

        send_nosniff_header();
        send_frame_options_header();
        status_header( 404 );
        header( 'Content-Type: text/html; charset=utf-8' );
        $tempate_file = dirname(__FILE__) . '/my-404-tempate.php';
        if( file_exists($tempate_file) )
                 {
                    require  $tempate_file;
                 }
                 else
                 {
                    echo '404 page not found.';
                 }
        die();
    }

}

my-404-tempate.php 即为个性化的 404 页面内容。

好了,收工,访问博客的404页面,可以看到这个效果了:

更多有趣的 404 页面资源:
http://www.hongkiat.com/blog/60-really-cool-and-creative-error-404-pages/
http://www.hongkiat.com/blog/49-nice-and-creative-error-404-pages/
http://coolshell.cn/articles/1826.html
http://article.yeeyan.org/view/39879/214905

更多
3 Responses Post a comment
  1. 荒野无灯

    A1:
    一般来说,404页面是会在没有找到404.php模板等最后才会fallback回index.php模板的。用过很多模板,没有遇到此问题。应该是你有其它地方没注意。
    A2:wp应该有返回状态码的吧,这个我没有仔细去看它的源码。(刚测试了下你的博客,是有返回404状态信息的)

  2. miaoshahao

    这就是自己制作wordpress模板的时候遇到的问题了,我也是这样子,自己制作的模板是直接用函数替换掉原有的html来实现调用,遇到没有的路径返回的是首页。只能用robots文件屏蔽了。

  3. 潜行者m

    对于wordpress的404,我一直有很多疑问。
    1,我制作wordpress模板的时候,制作了404页面,随便输入一个网址的时候,没有调用404,而是调用了index.php。。
    2,制作的404.php,不需要在头部返回一些http状态码给搜索引擎看吗?还是说,wordpress系统定义了访问自动输出?

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS