最好的最佳WordPress 404錯誤頁面設計


網絡上的每個用戶在其整個用戶瀏覽體驗中都至少登陸了404個頁面。 事實是,用戶在404頁上登陸的數量遠高於僅一頁。 通常,當用戶到達404頁面時,他們最終離開您的網站,從而提高了跳出率。 較高的跳出率可能會減少您從廣告商那裡獲得的收入或更多,從而對您的網站產生負面影響。 您可以通過簡單地優化404錯誤頁面來降低跳出率並提高瀏覽量。 在本文中,我們將重點介紹最佳的WordPress 404錯誤頁面設計,並為您創建有關WordPress的漂亮且高度可用的404頁面設計的見解。

靈感展示

在向您展示如何為WordPress設計自己的404頁面設計之前,我們將重點介紹一些在WordPress上使用的最佳404錯誤頁面設計,以激發您的靈感。 我們用來選擇這些設計的標準是創造力和可用性。 有些設計兼有,有些只有一個方面。

1. WPBeginner

WPBeginner的404頁

2.催化劑工作室

Catalyst Studio的404頁

3.傑米·赫斯基森(Jamie Huskisson)

傑米·赫斯基森(Jamie Huskisson)的404頁

4. 45royale Inc.

45royale 404頁

5.焦化

Carsonified 404 Page

6. CSS技巧

CSS技巧404頁面

7. Techkultura

Techkultura 404頁

8.靈感點

靈感位404頁面

9. Catswhocode

Catswhocode 404頁面

10.Ba.pe

Bape 404頁面

11.切和品嚐

剪切並品嚐404頁

12. CSS混音

CSS Remix 404頁面

13. Ateaseweb

Ateaseweb 404頁面

14.科勒媒體

Kollermedia 404頁面

15.擴展廣播

擴展廣播404頁

16.功能

功能404頁面

17.滯后區

延遲區404頁

18.基蒙多

Kidmondo 404頁

19.開發區

Devlounge 404頁面

20.克里斯·詹寧斯

克里斯·詹寧斯404頁

您應該從中學習的最佳做法和經驗教訓

在上面的展示中,您可能看到了404個頁面,這些頁面非常有創意,而另一些頁面卻很奇怪但令人難忘,而另一些頁面卻簡單卻又優雅且實用。 創建404頁面時,您需要記住將所有三個要素結合起來:創造力,可用性和留下持久印象的能力。

在創建404頁面時,我們實際上查看了上面的許多內容,以獲得靈感並將這些元素中的最佳元素組合為一個。 在大多數情況下,當人們進入404頁面時,他們會感到沮喪。 因此,您需要幫助他們找到他們想要達到的目標,但是要以最富創造性的方式。

您可以遵循的良好結構是:

  • 創意形象
  • 熱門帖子列表
  • 最近帖子列表
  • 檔案清單
  • 搜索欄
  • 通過提供聯繫方式提供更多幫助

現在,您不需要全部使用它們,但是在404頁面中,您當然應該擁有兩個以上的這些選項。

分析我們的404頁面後,有人說我們沒有搜索欄。 我們在側邊欄中有搜索欄,因此沒有必要顯示兩次。 我們按月,按類別顯示存檔,並顯示受歡迎的標籤。 當然,創造性的形像是使一切看起來友好而不是沉悶。

現在我們知道,並不是每個人都是偉大的藝術家,不能提出上面的一些插圖和卡通,但是您可以看到上面的Devlounge示例或Function的示例,以了解簡單性也可以如何工作。 Devlounge的頁面非常井井有條,沒有任何圖像,但沒有任何錯誤,但是它的組織性非常好,非常有用,它的404頁面非常有幫助。 功能具有簡單的圖標和其他資源,但沒有超級圖形。

創建自己的404頁面時,請記住這一點。

如何在WordPress中創建404頁面

在您的WordPress主題目錄中,有一個名為 404.php,如果您沒有該文件,則可能要創建一個文件。 您可以在該文件中添加任何HTML以適合您的需求。 但是建議您使用默認參數,因此頁面看起來像是設計的一部分。



現在,圍繞它包裝樣式HTML。 如果您願意,甚至可以復制您的 page.php 內容在 404.php 然後只需刪除內容區域並添加自定義標籤即可。

以下是一些您可以使用的標籤:

按月顯示存檔:

此代碼將按月顯示存檔,但將列出所有月。 因此,如果您的博客已經建立三年了,那可能會變得一團糟。 要了解如何限制顯示的月份數,請查看本教程。

顯示類別列表

此代碼將列出您博客上的所有類別。 當然,您可以使用列表標記或其他標記來設置樣式。

顯示最常用的標籤

這將顯示最常用的標籤,例如我們在404頁上的顯示方式。

顯示最近的帖子

‘,’

‘); ?>

您可以使用更多代碼,只需搜索文檔並找到它。 如果您有特定的問題,請隨時詢問我們。

其他來源:

這些列表有更多的404示例。 我們只精選了WordPress的。

重新加載404錯誤頁面

更多404頁

60個創意404頁面設計