如何創建自定義 WordPress 404 錯誤頁面

您登陸 404 頁面並立即離開該網站的可能性很高，因為它沒有幫助。 當有人輸入或點擊您網站上不存在的 URL 時，WordPress 會顯示 404 頁面。 此頁面是一個通用錯誤，只是通知訪問者未找到該頁面。 在本文中，我們將探討如何為 WordPress 創建自定義 404 頁面。 一路上，我們會看到好的和壞的設計。

為什麼要為 WordPress 創建自定義 404 頁面？

跳過設計 404 頁面很誘人，因為您希望沒有人會看到它。 但是，它需要對您的訪問者有所幫助。 它可以與任何其他頁面一樣重要。 一般消息是糟糕的用戶體驗。 它看起來不太好，它使他們沒有理由留在您的網站上。

首先，讓我們看看我們試圖避免的通用頁面。

通用 404 頁面

WordPress 顯示的標準 404 頁面只是一條錯誤消息。 它位於正文內容區域內，並顯示您的頁眉、頁腳和側邊欄（如果有）。

不幸的是，它沒有幫助。 這有點像詢問商店工作人員您正在尋找的東西是否在您所在的過道上，而他們只是說不。 您希望他們將您指向正確的過道。 你想要更多的信息。

404 頁面應該為您提供更多信息。 它應該有幫助。 它應該提供工具、鏈接、建議或某種形式的幫助。 你不想一個人呆在過道裡，不知道下一步要去哪裡。

自定義 404 頁面示例

網絡上有成千上萬個令人驚嘆的 404 頁面。 有些很有趣，有些很嚴肅。 有些比其他的更有幫助。 有的平淡無奇，有的則華麗麗。 以下是幾個 404 頁面，以了解它們的設計方式。 有些簡單而乏味，而有些則很有幫助並且看起來很棒。

1. 谷歌

谷歌（不是 WordPress）的 404 頁面很簡單。 它是屏幕中央的一小塊內容區域。 該消息只是告訴您有一個錯誤，並提供了一個機器人的碎片圖形。 它不提供其他信息，但它是谷歌，所以你所要做的就是在搜索欄中輸入其他信息。

2. WordPress.org

WordPress.org 的 404 頁面顯示其標準頁眉和頁腳。 正文包括顯示未找到頁面的標題、帶有幽默感的簡短說明，以及幫助指導您的鏈接列表。 這些鏈接側重於提供幫助。

3. WordPress.com

WordPress.com 的 404 頁面刪除了頁眉和頁腳。 它顯示圖形、標題、帶有可點擊鏈接的描述、搜索框和 WordPress.com 徽標。 這些鏈接很有幫助。

4. 優雅的主題

Elegant Themes 的 404 頁面（因為我知道你無論如何都會去看）顯示了 ET 標題、一個帶有小解釋的大標題，以及一個作為 CTA 的按鈕。 您可以從這裡訪問幾乎所有內容。

5.二十二十一點

WordPress 的二十二十一個主題有一個 404 頁面，使用您的主菜單和頁腳菜單。 它有一個很大的標題。 正文有一個簡短的描述和一個搜索框。 線條用於造型。 背景與網站相符。

6.二十二十

WordPress 的二十二十主題顯示頁眉和頁腳。 正文在中心顯示一個大標題、一個解釋和一個搜索框。 都使用主題的顏色。

7. 鬆弛

Slack 的（非 WordPress）404 頁面在中心顯示一個框，其中包含有關錯誤的信息以及指向幫助中心的鏈接。 所有的菜單也在這裡。 有趣的部分是背景。 這是一個卡通背景，可以左右滾動以跟隨您的鼠標。 動畫動物在屏幕上移動。

8.亞馬遜

亞馬遜（也不是 WordPress）的 404 頁麵包括帶有搜索框的亞馬遜徽標、一條大消息、一條帶有主頁鏈接的較小消息，以及一張帶有了解更多信息的鏈接的動物照片。 它包括許多可以顯示的不同照片。 他們是隨機選擇的。

404頁面內容

那麼，404 頁面需要什麼？ 我們在上面的例子中看到了一些常見的元素。

首先，它需要有幫助。 它不應該只是告訴訪問者有錯誤。 它應該說明錯誤的含義。 想像一下你的車裡有一個錯誤燈亮起。 你的第一個問題是“這是什麼意思？” 不提供有關錯誤的有用信息令人沮喪。

訪問者需要知道他們是否做錯了什麼或者內容是否不存在。 如果他們不知道，他們會繼續尋找內容，直到他們憤怒地離開網站，發誓再也不回來。 最好通過一條簡單的消息和可能吸引眼球的圖像來完成。 從您的正常內容中脫穎而出的東西會吸引您的觀眾。

接下來，它需要提供一些下一步要做什麼的方向。 這可以是文章列表、搜索框、類別列表、最受歡迎的帖子、最近的帖子、聯繫您的方式等。

就這麼簡單。 404 頁面不需要很多內容。 只要有幫助就夠了。

上面的例子包括：

• 與網站匹配的背景顏色和圖案/
• 帶有關於錯誤的簡短消息的標題。
• 顯示它是 404 頁面的大文本。
• 幾個按鈕為訪問者提供了一些方向。

它簡單但時尚且有用。 這就是你所需要的。

讓我們看看如何使用我們剛剛討論的內容創意為 WordPress 創建自定義 404 頁面。

如何使用 Divi Theme Builder 在 WordPress 中創建自定義 404 頁面

Divi Theme Builder 可以輕鬆創建和分配 404 頁面。 Elegant Themes 有幾個預製的 404 頁面，您可以免費下載。 您可以以任何方式自定義它們。 它們是在 404 頁面設計方面領先一步的好方法。 如果您願意，可以從頭開始構建一個。

上面的示例來自第四個主題生成器佈局包。 ET 博客中有很多 404 頁面。 要找到它們，請搜索“主題構建器佈局包”或在此處查看它們：

• 下載 Divi 的第一個免費主題生成器包
• 下載 Divi 的第二個免費主題生成器包
• 下載 Divi 的第三個免費主題生成器包
• 下載 Divi 的第四個免費主題生成器包
• 下載 Divi 的第五個免費主題生成器包
• 下載 Divi 的第六個免費主題生成器包

將自定義 404 頁面導入 Divi Theme Builder

您將通過轉到Divi > Theme Builder在 WordPress 儀表板中找到Divi Theme Builder 。 這將打開您可以在其中創建或導入模板並分配它們的頁面。 在右上角，您將看到導入圖標。 單擊此圖標可導入您的 404 頁面模板。

注意 - 有關使用 Divi Theme Builder 的教程，請在 Elegant Themes 博客中搜索“theme builder”。

一個模態打開，您可以在其中導入模板。 選擇“導入”並導航到“選擇文件”下的文件。 默認情況下選擇覆蓋默認值和分配的選項。 我建議讓他們選擇。 單擊以導入模態底部的模板。 我正在為 Crowdfunding Layout Pack 導入 404 頁面。

通過導入 404 頁面，它會自動分配。 接下來，單擊編輯圖標以打開構建器。

現在，通過添加鏈接、圖像、顏色、文本等在每個模塊中進行編輯。保存佈局並單擊右上角的 x 關閉構建器。

最後，保存更改以應用模板。 您現在有一個自定義 404 頁面。

使用 Divi Theme Builder 創建自定義 404 頁面

在主題生成器中，選擇添加新模板。

這將打開模板設置。 滾動到底部並選擇“其他”下的“ 404 頁面”。 接下來，單擊創建模板。 模板設置將關閉。

現在，您可以創建 404 頁面。 大多數不使用頁眉或頁腳。 選擇添加自定義正文。

這顯示了兩個選擇，允許您構建自定義主體或從庫中添加。 選擇構建自定義主體。

像往常一樣使用 Divi Builder 構建 404 頁面。 保存並退出。

最後，保存您的更改。 你完成了。

結束有關為 WordPress 創建自定義 404 頁面的想法

這就是我們對如何為 WordPress 創建自定義 404 頁面的看法。 404 頁面需要有幫助。 不幸的是，通用的 WordPress 404 頁面沒有幫助，它提供了糟糕的用戶體驗。 幸運的是，您可以使用 Divi Theme Builder 創建自己的 404 頁面。

使用我們在此處提供的信息，您可以很好地創建漂亮的 404 頁面，為用戶提供出色的體驗，並且在操作時看起來很棒。

我們希望聽到您的意見。 您是否為 WordPress 網站創建了自定義 404 頁面？ 在評論中讓我們知道我們的經驗。

精選圖片來自 Letters-Shmetters / shutterstock.com