如何创建个性化404错误页面

17 四 2010

本教程将教你如何为你的WordPress blog创建一个404页面。如果你的博客已经有这个页面，你也可以学习如何修改404页面使其变得更加友好和个性化。

由于404错误页面的特殊，很多时候人们都会忽略了它，并没有想过设计它。其实404错误页面可能意味着用户的离开或者继续浏览你的网页，如果你的404页面太过单调枯燥，游客就很可能不愿意在浏览下去；但如果你的404错误页面富有个性化和友好，就很可能会吸引游客到你的网页的其他页面浏览。

什么是404错误页面

大多数时候，您建立网站并多次检查以确保每一个链接都是有效的。但是，随着时间的推移你就有可能忘了某链接指向一个已经删除的页面或者改了名称的页面，或可能改变了名称。又或者游客通过搜索引擎搜索到你的网页但是无法链接到该页面，则也会跳转到404报错页面。一般情况下wordpress主题都包含404.php，你不需要单独去设计一个。但是如果没有或者你希望拥有一个个性化，有创意的404错误页面，你可以单独设计一个。

Error 404，中文翻译成404错误页面，是指当用户通过搜索引擎或者直接打开已经不存在的链接时所返回的页面。404错误页面有着特殊的意义：向浏览者反馈一个信息，其所请求的页面不存在或链接错误，同时引导用户浏览该网站的其他页面而不是直接离开。

基础的404.php

一般情况下wordpress主题都包含404.php，除个别以外。 WordPress默认设置为当页面出错时自动查找404.php文件，但如果此文件不存在，浏览器则会显示令人生厌的错误信息。更甚至有可能对你的博客的SEO有不良的影响。如果你的博客主题没有这个文件。你可以自己创建一个新的空白文件，命名为404.php

下面是最基础的404.php代码:

404.php File

<?php get_header(); ?>
<h2>Error 404 – Page Not Found.</h2>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

404.php基本的代码包括H2 tags ——“Error 404 – Page Not Found”,读取header, sidebar, 和footer的指令。当然你可以根据需要对这些代码实行相应的调整以适应自己博客的模板，风格。

我们将会通过几个步骤来分解修改404.php的教程。请注意，我是一直会使用get_header，get_sidebar和get_footer命令调用wordpress主题文件。根据需要你应该稍微修改404.php文件以适应你的主题。

开始修改404错误页面

首先，我们将在404错误页面上添加搜索代码，这样404错误页面就不会过于单调缺乏操作选项。假如有游客浏览了你的404页面，他就可以通过搜索框搜索你的其他页面。这是帮助你挽留游客的一种方法。

为404.php 添加搜索代码

<?php get_header(); ?>

<h2>Error 404 – Page Not Found.</h2>

<p>Search:</p>
<?php include(TEMPLATEPATH . “/searchform.php”); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

创意404错误页面

创建一个具有创意的404错误页面，目的是让浏览者短暂地停留在错误的信息上然后重新引导他们到你的主页。404错误页面可以做得尽可能友好，以便实现搜索引擎优化。

下面我们将开始编辑模板中的header.php文件。在你的header.php在顶部的中meta tags，您可以添加以下代码：

<?php
if (is_404()) {
$redirectHome = get_option(‘home’); ?>
<?php echo $redirectHome; ?>

然后在404.php添下红色部分的代码：

<?php get_header(); ?>
<h1>Error 404 – File Not Found.</h1>
<h3>Please <a href=”<?php bloginfo(‘home’); ?>” Click here</a> to return to our home page, or you can wait to be redirected in 15 seconds.</h3>
<?php get_footer(); ?>

上面的例子用于引导游客由404错误页面转向网站主页。这也将有利于网站留住用户，而不是让他们觉得困惑而最终离开。这个例子未必永远是最好的解决方法，但对于游客查找你网站上的内容是非常有效。

确保404错误页面可以工作

您可以通过输入一个你网页不存在的页面来测试404错误页面是否有效。（红色部分是你的主页地址）

例如：http://www.yourwebsitedomain.com/test404page.php

这将会打开你的404错误页面，如果不是则说明测试失败。

如果测试失败

如果碰巧你的服务器没有自动打开404.php，你可以通过修改 .htaccess获得支持。在wordpress安装地址找到 .htaccess文件并添上下面的代码：

ErrorDocument 404 /index.php?error=404

如果你的wordpress并不是安装ftp的根目录下，而是安装在ftp子文件夹下，你必须将.htaccess文件修改成：（YOURSUBFOLDERNAME，指子文件夹的名称）

ErrorDocument 404 /YOURSUBFOLDERNAME/index.php?error=404

这样就会调用你的404.php文件。

下面是一段完整的代码示范，教会你使用404.php帮助用户查找本来想找的东西。尽可能地将一些信息反馈给他们以吸引他们继续浏览其他页面。

<?php get_header(); ?>
<h1>404 Error</h1>
<p>We cannot seem to find what you were looking for.</p>
<p>Maybe we can still help you.</p>
<ul>
<li>You can search our site using the form provided below.</li>
<li>You can visit <a href=”<?php bloginfo?>”</a></li>
<a href=”<?php (‘url’); ?>” the homepage.</a>
<li>Or you can view some of our recent posts.</li>
</ul>
<p>Search:</p>
TEMPLATEPATH . “/searchform.php”); ?>
<h3>Recent Posts</h3>
<ul>
<?php
query_posts(‘posts_per_page=5′);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href=”<?php the_permalink() ?>” title=”Permalink for : <?php the_title(); ?>”><?php the_title(); ?></a>
endwhile; endif; ?>
</ul>
<?php get_footer(); ?>

你可以根据你个人的喜好和页面的风格对代码进行修改调整。在上面的例子中，我们只是告诉浏览者那是一个错误的链接，并为他们提供操作的选项，譬如搜索框。也可以增加最新文章列表以吸引他们继续浏览网站。这些选项都是为了引导游客浏览其他的页面，而不是让游客看到404错误页面掉头就走。

让404错误页面更友好

为了使404错误页面更友好，你通过上面介绍的方法并添上一张有创意的图片。您也可以在404.php文件中使用html代码，以达到整页都是错误页面。

下面是一些比较有趣和有创意的404错误页面，希望能带给你灵感：

1. Mundofox.com

2. CSSRemix.com

3. dazeofourlives.com

4. ChrisJennings.com

5. ook.co.uk

6. Youcastr.com

7. Mixx.com

8. JustCreativeDesign.com

9. Agens.no

error404 example9

10. Mushroomdigital.co.uk

灵活地利用它

使用404错误页面对wordpress和HTML静态页面都是有利的。既可以利用它来刊登广告，又可以利用它来更好地帮助访客浏览你的网站，博客。有很多方法可以创建自己的自定义404错误页面，也可以说有很多方法帮助访问者浏览网站。参考别人的方法，根据个人网页修改404.php以适应自己的网页。注意修改404.php前备份好数据。

P.S. 译者水平有限，更多请参考原文，望见谅！！！

MK编译 via 1stwebdesigner.com

本站文章除注明转载外，均为本站原创编译。转载请注明本文链接！
本文链接：http://www.x-berry.com/how-to-creative-custom-404-error-page
订阅本站：http://feed.x-berry.com/