404錯誤頁面大改造－以WordPress佈景主題為例

過往大家對404錯誤頁面的印象，應該還是停留在一個大大的Not Found字眼
然後摸摸鼻子按上一頁吧。
不過現在越來越強調使用者的網站使用體驗
一個擁有自己網站風格，加上導引至正確連結的404頁面
從單純告知錯誤到指引，404頁面的設計也成為網站規劃中一個不可或缺的因素了
有關404頁面的設計以及不同網站所設計的404錯誤頁面，可以參考Desire Clicking的介紹



而現在網誌空間的404頁面多半都有導回正途的功用，
WordPress的主題更是有提供404頁面的模板，因此你可以參照著設計出屬於你網站的頁面
讓不小心走錯路的人也能感到有趣，譬如以下的404頁面

 

用了平偉XD

在WordPress上修改404錯誤頁面

1. 首先進入WordPress的後台管理，找到外觀－＞主題編輯器

2. 進到主題編輯後從右邊的外觀列表選擇404找不到頁面

3. 你可以對照程式碼，在對照原本404頁面所呈現的內容修改

以我的佈景主題為例，對應程式碼如下:

get_header();

<div id="primary" class="content-area">

<div id="content" class="site-content" role="main">

<section class="error-404 not-found"><header class="page-header">

<h1 class="page-title"><?php _e( '走錯路走到機車行啦!', 'subsimple' ); ?></h1>

</header><!-- .page-header -->

<div class="page-content"><p>

<img src="http://davisview.cu.cc/wp-content/uploads/2013/08/pingwei-404-page-not-found.jpg" alt="404錯誤頁面-平偉">

</p>
<p>走到機車行啦!<a href="http://davisview.cu.cc">Davis' view</a>在這裡!</p>
<p>或是來看看下面的推薦文章捧捧場吧!</p>

 <?php get_search_form(); ?>

<?php the_widget( 'WP_Widget_Recent_Posts' ); ?>

<?php if ( subsimple_categorized_blog() ) : // Only show the widget if site has multiple categories. ?>

<div class="widget widget_categories">

<h2 class="widgettitle"><?php _e( 'Most Used Categories', 'subsimple' ); ?></h2>
<ul>

<?php

wp_list_categories( array(

 'orderby'    => 'count',

 'order'      => 'DESC',

 'show_count' => 1,

 'title_li'   => '',

 'number'     => 10,

 ) );

?>

</ul>

</div><!-- .widget -->
<?php endif; ?>

<?php

/* translators: %1$s: smiley */

 $archive_content = '<p>' . sprintf( __( 'Try looking in the monthly archives. %1$s', 'subsimple' ), convert_smilies( ':)' ) ) . '</p>';

the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h2>$archive_content" );

?>

<?php the_widget( 'WP_Widget_Tag_Cloud' ); ?>

</div><!-- .page-content -->

</section><!-- .error-404 -->

</div><!-- #content -->

</div><!-- #primary -->
<?php get_footer(); ?>

首先從上面開始看：

get_header();

這一段是載入header, 不動它

接下來才是內容：

<div id="primary" class="content-area">

<div id="content" class="site-content" role="main">

<section class="error-404 not-found">
<header class="page-header">
<h1 class="page-title"><?php _e( '走錯路走到機車行啦!', 'subsimple' ); ?></h1>
</header><!-- .page-header -->

這一段是頁面標題的部分，由於只有<?php _e( '走錯路走到機車行啦!', 'subsimple' ); ?>這段是文字內容，這時我就可以知道更改裡面的內容就好

下一段則是主內容：

<div class="page-content">
<p>
<img src="http://davisview.cu.cc/wp-content/uploads/2013/08/pingwei-404-page-not-found.jpg" alt="404錯誤頁面-平偉">
</p>
                   
<p>走到機車行啦!<a href="http://davisview.cu.cc">Davis' view</a>在這裡!</p>
<p>或是來看看下面的推薦文章捧捧場吧!</p>

從<div class="page-content">以下這段都是可更改的內容
我在這裡插入了一張平偉的圖片，還有下面兩段話，其中當然包括可以回首頁的路徑

而以下的代碼則是推薦文章，這裡我不動它：

<?php get_search_form(); ?>

<?php the_widget( 'WP_Widget_Recent_Posts' ); ?>

<?php if ( subsimple_categorized_blog() ) : // Only show the widget if site has multiple categories. ?>
<div class="widget widget_categories">
<h2 class="widgettitle"><?php _e( 'Most Used Categories', 'subsimple' ); ?></h2>
<ul>
<?php
wp_list_categories( array(
 'orderby'    => 'count',
 'order'      => 'DESC',
'show_count' => 1,
'title_li'   => '',
 'number'     => 10,
 ) );
 ?>
</ul>
</div><!-- .widget -->
 <?php endif; ?>

<?php
/* translators: %1$s: smiley */
$archive_content = '<p>' . sprintf( __( 'Try looking in the monthly archives. %1$s', 'subsimple' ), convert_smilies( ':)' ) ) . '</p>';
 the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=</h2>$archive_content" );
 ?>

<?php the_widget( 'WP_Widget_Tag_Cloud' ); ?>

</div><!-- .page-content -->
</section><!-- .error-404 -->

</div><!-- #content -->

然後按更新檔案，搞定

基本上這是可以直接修改Wordpress佈景主題的方法
如果你是想要自己重做一個新的404頁面，或是不用Wordpress這種CMS架網站的話
也可以透過設定.htaccess 的方法
或是如果懂CSS的話也可以自行修改語法內套用的CSS class或ID選擇器的指定樣式
如下圖可在樣式表的地方修改~

雖然修改的過程不用會寫程式
不過建議還是懂點網頁基礎程式碼，改起來比較輕鬆XD