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

[ad_1]

您是否要在WordPress中創建404錯誤頁面?

如果觀眾嘗試打開或訪問伺服器中找不到的頁面,則將進入404錯誤頁面。 通過顯示404頁面,您基本上可以使訪問者知道該頁面不存在。

雖然404錯誤頁面非常適合讓您的訪問者了解所發生的錯誤,但它也有可能使您失去訪問者。

這是因為正確的404頁面可能會損害或幫助您提高用戶體驗(UX)。

通過正確設計此頁面,您可以策略性地指導用戶在哪裡找到他們要查找的頁面。 這是留住訪客並降低跳出率的最佳方法,而不是使訪客離開您的網站。

在本文中,我們將向您展示如何以最簡單的方式設計404錯誤頁面,而無需任何編碼。

我們還將告訴您是什麼原因導致404錯誤以及如何修復它。 最後,我們將向您展示一些最佳的鼓舞人心的404錯誤頁面示例,供您在創建頁面之前檢出。

隨時使用此目錄為您找到合適的部分:

  1. 導致404錯誤的原因
  2. 如何修復404錯誤
  3. 如何使用Beaver Builder設計404錯誤頁面
  4. 最佳404錯誤頁面示例靈感

讓我們開始。

是什麼原因導致404錯誤頁面

通常,當訪問者嘗試查找已被刪除,刪除或移至另一個URL的內容時,會顯示404錯誤頁面。

但是當您的訪客看到此錯誤消息時,可能還有其他原因。 例如:

  1. 搜索頁面的URL段已更改,沒有正確的重定向。 因此,在查找頁面時,您的用戶會找到帶有原始URL的原始頁面。
  2. 搜索的域名已不存在。 這很可能是因為用戶輸入了錯誤的URL
  3. 負責該網站的伺服器未運行,或者連接斷開。

並且,一旦發現問題,您將需要找出解決方法。

如何修復404錯誤

登陸404錯誤頁面可能會令人沮喪。 這就是為什麼您必須知道如何修復它的原因。 如果您在自己的網站或其他網站上看到404錯誤頁面,可以嘗試以下提示。

  1. 檢查URL中的錯誤:要做的第一件事是檢查URL中的錯誤。 確保您輸入的URL正確,並且不包含任何拼寫錯誤的單詞,或缺少諸如正斜杠,連字元等字元。
  2. 清除瀏覽器緩存和Cookie注意:如果您只能從特定計算機上看到404錯誤頁面,則此解決方案將像魔術一樣工作。 在這種情況下,請嘗試刪除您的瀏覽器緩存以及該站點的所有cookie,然後重試。
  3. 重新載入頁面:有時只需重新載入頁面即可找到404錯誤頁面的解決方案。 因此,刷新頁面以查看頁面是否正常工作。
  4. 檢查目錄級別:如果顯示錯誤的URL具有以下結構:example.com/Directory1/Directory2/Directory3,則可以返回上一個目錄。 例如,您可以轉到example.com/Directory1/Directory2/以檢查是否可以在其中找到所需的頁面。 如果不起作用,請返回另一個目錄。
  5. 直接聯繫該網站:找到解決方案的另一個好步驟是直接聯繫該網站。 您可以在網站首頁上找到聯繫方式。 他們應該能夠告訴您是否已完全刪除該頁面。
  6. 使用網站搜索功能:您也可以使用網站的搜索功能,並輸入您要查找的一個或多個關鍵字,以找到所需的特定頁面。

現在,我們將向您展示如何為您的網站創建404錯誤頁面。 本部分對希望向用戶顯示此錯誤頁面的網站所有者很有幫助。

如何使用Beaver Builder設計404錯誤頁面

要設計本教程中的404錯誤頁面,我們將使用 海狸生成器 頁面生成器。

海狸生成器

海狸生成器 是強大的 拖放頁面構建器插件 這樣您就可以為網站創建漂亮的頁面,而無需知道任何代碼。

你可以找出來 在這個詳細的評論中更多關於Beaver Builder的信息

除了Beaver Builder插件之外,您還需要將Beaver Themer安裝在您的網站上。 Beaver Themer是一個附加程序,可讓使用Beaver Builder輕鬆快速地設計網頁。 您無需單獨安裝此插件。 它隨附了Beaver Builder插件的高級版本。 您需要做的就是在您的網站上激活它。

步驟1:在您的網站上安裝Beaver Builder

要開始使用,您首先需要 安裝並激活Beaver Builder插件 在您的WordPress網站上。

安裝並激活後,轉到「設置」»「頁面構建器」。 您可以在此處輸入許可證密鑰以啟用支持並接收更新。

Beaver Builder設置

接下來,您必須激活Beaver Themer插件。 為此,轉到儀錶板,然後單擊插件»已安裝的插件。

激活海狸主題

在這裡,您將看到Beaver Themer插件。 只需單擊插件的激活按鈕即可開始工作。 現在,您可以創建自定義404錯誤頁面了。

步驟2:添加主題布局

現在,在儀錶板上,轉到Beaver Builder»Themer Layouts。 然後單擊添加新。

404錯誤頁面

這將打開一個新屏幕,您將在其中看到添加標題的欄位,並選擇頁面的類型和布局。 添加404錯誤頁面作為頁面標題。 對於布局,從下拉列表中選擇404。 現在,單擊添加主題布局按鈕。

添加404錯誤頁面

您會在屏幕上看到一個新窗口。 在這裡,單擊Launch Beaver Builder。

海狸

現在,您可以開始使用Beaver Builder提供的模塊(圖像,鏈接,按鈕等)來設計404錯誤頁面。 如果看不到模塊,請單擊屏幕右上角的+按鈕。

Beaver Builder模塊

當您單擊該按鈕時,它將顯示所有Beaver Builder模塊,可以將其拖放到可視化編輯器中以創建404錯誤頁面。 就像上圖一樣,+號將變為跨號。

如需更多幫助,您可以查看以下詳細信息 如何在此處將模塊添加到Beaver頁面。 您可以使用這些模塊,添加圖像和鏈接,並使它們變得豐富多彩並吸引用戶。

步驟3:發布404錯誤頁面

現在您已經完成了頁面的創建,請單擊頁面右上角的「完成」按鈕。

404_Error_Page完成

這將顯示「發布」按鈕。 點擊它。

發布404_Error_Page

您的404錯誤頁面現已上線。 單擊斷開的鏈接的任何人都將看到此頁面。

就是這樣! 您的404頁面已準備就緒。 容易吧?

現在,讓我們看看404頁面的一些出色示例,您可以在設計自己的頁面時獲得更多啟發。

最佳404錯誤頁面示例靈感

為了幫助您更好地設計404錯誤頁面,我們為您提供了一些啟發示例。

1. Themeisle 404錯誤頁面

Themeisle 404錯誤頁面

Themeisle的404錯誤頁面不僅在視覺上很吸引人,而且還為訪問者提供了一種尋找所需內容的解決方案。 它在頁面上添加了一個搜索欄位,訪問者可以在其中輸入他們想要訪問的頁面的一個或多個關鍵字。

這是保留您的用戶並將他們定向到他們原本打算去的地方的一種好方法。

2. 404錯誤頁面,作者:Andrew Colling

Andrew Collin的404錯誤

Andrew的404錯誤頁面是另一個可以激發您靈感的示例。 它添加了精美的圖形,使其與標題下方添加的描述產生共鳴,並幽默地嘗試將其訪問者重定向回首頁。 它添加了一個吸引人的號召性用語(CTA)按鈕,將人們定向到可以瀏覽網站的頁面。

3. Ryan Duffy的404錯誤頁面

Ryan Duffy的404錯誤,激發了404錯誤頁面

Ryan Duffy的設計簡單而強大。 它告訴訪問者,就像意外一樣,在404錯誤頁面上的登陸是無意的。 但是同時,它還通過使用CTA返回首頁,向他們顯示了退出該頁面的方法。

4. Matt的404錯誤頁面

Matt的404錯誤

此頁面與上述其他頁面不同。 它不僅告訴訪問者該頁面不存在,而且還提供不同的解決方案。 它在標題中添加了不同的鏈接,可以幫助訪問者訪問網站的其他部分。

實際上,這是一種吸引訪問者的好方法,因為您為他們提供了不同的選擇,因此他們可以自由選擇他們想做的事情。

這就是您在WordPress中創建404錯誤頁面的方式。 我們希望本文能幫助您為您的網站創建漂亮的404錯誤頁面。

創建完錯誤頁面後,您可能需要檢查一下 一些可以幫助您查找和修復斷開鏈接的插件 輕鬆地在您的網站上。

這將通過消除站點上的無效鏈接或斷開鏈接來幫助您提高UX。

帖子 如何在WordPress中創建自定義404錯誤頁面 首先出現 IsItWP-免費的WordPress主題檢測器

相關文章