如何在 WordPress 子主題中製作自定義 404 頁面

已發表: 2018-10-23

無論您的網站設計和架構多麼出色，用戶都會在某個時候遇到 404 頁面。 它可以像輸入拼寫錯誤的 URL 一樣簡單。 例如，如果您在 www.website.com/contact 上找到了一個聯繫頁面，並且有人試圖登陸 www.website.com/contacts，那麼他們很可能會被重定向到 404 頁面。 此外，網站內容調整可能並不總是考慮在沒有重定向鏈接的情況下可能已經移動的頁面。 希望這種體驗不會經常發生在您的用戶身上，但當它發生時，這是一個提供幫助並為您的品牌創造獨特事物的機會。

您可能對網絡上的 404 頁面並不陌生，因此您可能已經有了設計思路。 如果沒有，通過谷歌搜索“酷 404 頁面”，你會找到各種各樣的靈感。 設計可以是從嚴肅到有趣、文字繁重或極簡主義，或介於兩者之間的任何東西。

以下是我的一些最愛。 它們是如何在頁面設計中使用創造力的很好的例子。

無花果

figma 自定義 404 頁面

Figma 是一個簡單的 404 頁面，但圖形與矢量點非常吻合。 我喜歡它的簡單和大膽； 這確實是所需要的。

愛彼迎

airbnb 自定義 404 頁面

此示例在內容方面提供了更多信息。 說明性的方法宣傳幽默元素。 這包括一些主要鏈接。 如果用戶輸入了錯誤的內容，他們可能會在列表中找到他們要查找的內容。

郵件黑猩猩

mailchimp 自定義 404 頁面

MailChimp 網站上的設計總是很有趣，尤其是最近的重新設計。 它在文字和插圖中都有幽默的元素。

免費獲取 Genesis Framework 和 StudioPress 主題！

當您在 Flywheel 上託管您的網站時，您將可以直接從我們令人愉快的儀表板訪問 30 多個高級 WordPress 主題（包括 Genesis！）。 價值超過 2,000 美元，您只需每月 15 美元即可開始使用！ 在這裡了解更多。

創建自定義 404 頁面

首先要做的事情：所有自定義都應該在子主題中完成。 這樣，任何修改都不會被常規主題的更新覆蓋。 這個 404 頁面將是子主題中的一個文件，確切地說是名為404.php的文件。

如何添加 CSS 變量來自定義 WordPress 子主題

CSS 變量，也稱為 CSS 自定義屬性，允許在 CSS 樣式表中輕鬆重用。 如果您使用過 WordPress 子主題，您可能會發現自己做了很多樣式...

另外，請記住在測試環境中執行此操作。 更改主題文件時，總是有可能導致站點關閉的語法錯誤。

1.新建一個文件

當您擁有子主題時，第一步是創建一個新文件以開始使用。 您需要打開創建子主題的文件夾並添加一個404.php文件。

2. 編輯文件

基本示例

此示例說明包含文本和圖像的頁面。 這裡的設計理念是創建需要插圖圖形的簡單事物。

將以下代碼粘貼到404.php頁面中。 這是一個基本的開始。 您可以將內容修改為不同的結構以真正使其成為您自己的（即，如果您不想要側邊欄，則可以將其刪除）。 

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>
帶有火車圖形的基本 wordpress 自定義子主題 404 頁面教程示例

您必須進行一些修改。 一種是更改圖像的路徑並包含您想要的標題。 不要忘記編寫自定義消息，然後保存您的更改。

如果到目前為止您已按照說明進行操作，那麼您已經創建了一個包含圖像、消息和標準頁眉、側邊欄和頁腳的自定義模板。 （你可能在其他頁面上也有這個。）

小部件方法

這是可選的，但許多設計師更喜歡使用小部件區域。 更容易進行更改並且更易於維護。 例如，小部件是顯示最新和流行的博客文章的有效方式。

wordpress儀表板小部件區域基礎wordpress自定義子主題404頁面教程

添加小部件

要將小部件添加到404.php file中，您需要創建一個新的小部件區域。 子主題需要一個functions.php文件，所以現在是時候仔細檢查子主題是否有一個。

在functions.php文件中，需要一個片段來在頁面上添加一個新的小部件。 

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

此代碼段僅添加小部件。 要真正開始使用它，必須調用此函數。 它將在404.php文件中調用。 請留意您想要此小部件區域的位置。

將以下代碼複製並粘貼到您要顯示新小部件的位置（例如，在標題和文本之後）： 

<?php dynamic_sidebar( '404' ); ?>

現在您已經確定了在哪裡顯示新的小部件區域，是時候通過轉到Appearance > Widgets添加小部件內容了。 您可以在此處為 404 頁面選擇 HTML 塊、熱門帖子或任何其他小部件等內容。

wordpress 儀表板小部件區域插入基本的 wordpress 自定義子主題 404 頁面教程示例與火車圖形

無論您是創建簡單的內容還是包含許多鏈接的頁面，創建自定義 404 頁面都非常簡單。 通過使用子主題和小部件，有無限的設計可能性。

尋找更多自定義網站的方法？ 查看這些教程：

  • 如何添加 CSS 變量來自定義 WordPress 子主題
  • Genesis子主題的簡單自定義
  • 如何在 WordPress 中創建和使用自定義字段