您想改進 WordPress 中的 404 頁面範本嗎?
通過用您自己的設計替換預設的 WordPress 404 頁面,您可以改善訪問者體驗並讓人們在您的網站上停留更長時間。
在本文中,我們將向您展示如何在 WordPress 中自定義您的 404 頁面範本。
為什麼要改進 WordPress 中的 404 頁面範本?
大多數WordPress 主題都帶有一個基本的 404 範本,包括預設的 WordPress 範本。 例如,在下圖中,您可以看到 Twenty Twenty-Two 的 404 頁面。
但是,這些預設範本中的大多數都很簡單,不會顯示您網站中的任何內容。 這意味著任何登陸您的 404 頁面的人都更有可能離開您的WordPress 網站,這將增加您的跳出率。
這對您的WordPress SEO來說是個壞消息,並且可能會影響您的網站在搜尋引擎排名中的位置。
也就是說,用您自己的內容和品牌創建一個 404 頁面是個好主意。
例如,在 WPBeginner,我們展示了一個自定義圖像並鼓勵訪問者與我們聯繫,這樣我們就可以修復 404 錯誤。 側邊欄還有指向我們社交媒體資料的連結,甚至還有一些關於電子書下載的資訊。
這也是宣傳您在線商店中最受歡迎的帖子或產品的機會。 這樣,您的 404 頁面可以為您的訪問者增加價值,從而增加綜合流覽量並降低跳出率。
如果您正在尋找靈感,那麼我們收集了最好的 404 錯誤頁面設計範例供您查看。
注意:即使您設計了一個引人入勝且有用的頁面,您仍然需要修復任何 404 錯誤。
讓我們來看看如何改進 WordPress 中的 404 頁面範本。
方法 1. 在沒有代碼的 WordPress 中建立自訂 404 頁面(推薦)
改進 404 頁面範本的最佳方法是使用SeedProd頁面構建器外掛程式。
SeedProd 是WordPress的最佳登陸頁面構建器。 它使您無需編寫任何代碼即可創建、編輯和自定義 WordPress 頁面。
使用此外掛程式,您可以使用各種專業設計的範本輕鬆創建自定義 404 頁面。
您需要做的第一件事是安裝 SeedProd 外掛程式。
注意:SeedProd有免費版本,但我們將使用專業版,因為它可以讓您替換主題的內置 404 範本。
啟動外掛程式后,SeedProd 將要求您提供許可證密鑰。
您可以在您在 SeedProd 網站上的帳戶下找到此資訊 。 輸入許可證后,按兩下驗證金鑰按鈕。
完成後,轉到 SeedProd » Landing Pages。 在「404 頁面」部分,點擊「設置 404 頁面」。。
您現在可以為 404 頁面選擇一個範本。
要預覽設計,只需將滑鼠懸停在它上面,然後按兩下放大鏡。
當您找到喜歡的設計時,只需按兩下選擇此樣本。
我們使用的是“Oh No 404 Page”範本,但您可以使用任何您喜歡的設計。
選擇範本後,您將被帶到拖放構建器,您可以在其中開始自定義 404 頁面。
在螢幕的左側,您會找到可以添加到設計中的塊和部分。 頁面右側是即時預覽。
大多數 404 範本已經有一些塊,它們是所有 SeedProd 設計的核心部分。
要自定義任何這些現成的塊,只需按下以選擇佈局中的塊。 然後,您可以使用左側功能表中的設置自定義塊。
要向您的設計中添加新塊,只需在左側功能表中找到該塊即可。 然後,將其拖到您的佈局上。 您現在可以按照上述過程自定義塊。
首先,您通常需要將自己的網站徽標添加到 404 頁面。
要用您自己的品牌替換 SeedProd 徽標,只需按下以選擇佈局中的佔位符徽標。 然後,將滑鼠懸停在左側功能表中的圖像上,然後按下「選擇圖像」按鈕。
這將啟動 WordPress 媒體庫,您可以在其中選擇任何圖像或從您的電腦上傳新檔。
許多 404 範本還預設顯示您網站的主導航功能表。 如果您有多個功能表,那麼您可能更願意顯示不同的功能表。
要進行此更改,只需按下範本中的「導航功能表」塊。 然後您可以打開「功能表」下拉功能表並從清單中選擇任何功能表。
您只需添加和自訂塊即可創建任何設計。 然而,當有人到達您的 404 頁面時,他們可能對下一步該做什麼感到困惑。
考慮到這一點,我們將向您展示如何宣傳您最受歡迎的帖子並創建聯繫表格,以便訪問者可以報告任何損壞的連結或丟失的內容。
首先,在您的設計中添加「標題」和「文本」塊。 然後,您可以在左側功能表的文字編輯器中輸入消息。
例如,在下圖中,我們創建了一個標題來解釋無法找到該頁面,並創建了一個“文本”塊,建議閱讀一些帖子或使用聯繫表。
接下來,我們將更改“返回主頁”按鈕,以鼓勵人們查看特定帖子而不是轉到一般主頁。
您可能會包含指向WordPress 博客上最受歡迎的帖子或説明您通過在線博客賺取最多收入的帖子的連結。
要自定義按鈕,只需在頁面佈局中按下以選取中它。 然後,將帖子的 URL 輸入「連結」欄位。
要更改此按鈕上顯示的文字,只需在「按鈕文本」框中鍵入內容即可。
完成後,按一下「高級」選項卡。 在這裡,您可以更改按鈕的顏色、大小等。
將您最受歡迎的帖子添加到您的 WordPress 404 頁面
接下來,您可以將最受歡迎的帖子清單添加到 404 頁面。 由於這些文章很受歡迎,訪問者很有可能會找到他們喜歡的東西。
您可以使用MonsterInsights外掛程式自動建立此清單。 它是超過 300 萬個網站使用的WordPress 最佳分析解決方案。
MonsterInsights 可以查看哪些帖子獲得最多訪問者並將它們添加到您的 404 頁面。
啟動 MonsterInsights 後,您可以通過在 WordPress 中添加短代碼來顯示您最受歡迎的帖子。 在 SeedProd 的左側功能表中,只需找到“簡碼”塊並將其放到您的佈局中即可。
然後,按兩下以選擇「簡碼」塊。 這將打開左側的設置視窗。 接下來,複製以下短代碼:
[monsterinsights_popular_posts_widget theme="beta"]
然後,在標有“內容”的框中,將其粘貼到標有“簡碼”的文本區域中。
默認情況下,SeedProd 不會在頁面編輯器中顯示您最受歡迎的帖子的預覽,因此您需要按兩下右上角的「預覽」 按鈕。 這將在新選項卡中打開您的設計。
如果您更喜歡在頁面編輯器中預覽熱門帖子清單,則只需按兩下顯示短代碼預覽「開關即可」。
在上面的短代碼中,我們使用的是我們的清單,但 MonsterInsights 有幾個不同的主題可供您使用。 theme=“beta”
要查看不同的主題,請轉到WordPress 儀錶板中的Insights » Popular Posts,然後按兩下“Popular Posts Widget”。
您現在可以按兩下不同的主題來查看預覽。
當你找到一個你想使用的設計時,只需更新SeedProd中的短碼。 例如,如果你想使用 「Alpha 」主題,那麼你就需要輸入。
[monsterinsights_popular_posts_widget theme="alpha"]
在你的WordPress 404頁面上添加一個聯繫表格
你可能還想添加一個聯繫表格,以便訪客在找不到他們要找的東西時可以聯繫他們。 這個表格還為人們提供了一個報告破損鏈接的簡單方法,這樣你就可以修復它們,併為未來的訪問者改善體驗。
在你的網站上添加聯繫表單的最好方法是使用WPForms外掛程式。 它是WordPress最好的聯繫表單外掛程式,並配有一個使用者友好的拖放表單產生器。
創建聯繫表單后,可以輕鬆將該表單添加到 404 頁面。 只需找到「聯繫表格」塊並將其拖到您的設計中。
然後,打開「選擇表格」下拉功能表並從清單中選擇您的聯繫表格。
頁面編輯器現在將顯示聯繫表的預覽。
您可能想添加一些文字來介紹您的聯繫表或鼓勵訪問者取得聯繫。
為此,只需在您的聯繫表上方添加一個“標題”或“文本”塊,然後輸入您要使用的文本。
當您對 404 頁面的外觀感到滿意時,就可以發佈它了。
只需按下拉箭頭,然後選擇「另存為範本」。。
當要求時,繼續輸入範本的名稱。 這隻是供你參考,所以你可以使用任何你想要的東西。
之後,點擊『保存範本』。
在接下來的彈出視窗中,點擊『返回頁面編輯器』。 然後你可以點擊右上角的『X』按鈕,關閉SeedProd頁面編輯器。
在這一點上,你可能會看到一個彈出視窗,詢問你是否要發佈你的新404設計。 如果你很樂意繼續,那麼請點擊『是,啟動』。
如果你現在不想發佈範本,那麼請點擊 「不,關閉」。
之後,你可以在任何時候通過進入SeedProd 「 頁面來發佈設計。 在這裡,點擊『404頁』部分的開關,使其顯示『活動』。
要想看到你的404頁面,只需在你的域名後面加上/404。
在發佈您的自定義404頁面后,跟蹤人們對該頁面的參與情況是一個好主意。 這可以讓你看到哪些是有效的,哪些是無效的,所以你可以微調你的404設計,以獲得更多的轉換和參與。
方法2.通過添加代碼在WordPress中創建一個自定義404頁面
如果你不想使用頁面生成器外掛程式,那麼你可以使用代碼創建一個自定義404頁面。 然而,只是要注意,你的代碼中的任何錯誤都可能導致常見的WordPress錯誤,甚至破壞你的網站。
考慮到這一點,不建議初學者使用此方法。 在使用此方法之前備份您的網站也是一個好主意,以防您遇到任何問題。
首先,您需要一個FTP 用戶端,例如FileZilla,或者您可以使用WordPress 託管供應商提供的檔管理器。
連接到伺服器后,轉到 /wp-content/themes/ 然後打開當前 WordPress 主題的資料夾。
如果這個資料夾已經有一個 404.php 檔,那麼您可以繼續在任何文字編輯器(例如記事本)中打開該檔。
如果您的主題沒有 404.php 檔,那麼您需要創建一個。 之後,繼續在文字編輯器應用程式中打開檔。
您現在已準備好使用代碼創建自訂 404 設計。 您可以創建各種設計,但這裡有一些簡單的示例可以説明您入門。
在 404 頁面上顯示最受歡迎的帖子
最受歡迎的帖子清單可以鼓勵訪問者查看您網站的最佳內容。
您可以使用WordPress Popular Posts建立此清單。 它是WordPress 最受歡迎的帖子外掛程式之一,並帶有範本標籤,您可以將其添加到 404.php 檔中。
您需要做的第一件事是安裝並啟動 WordPress Popular Posts 外掛程式。
啟動后,你可以使用以下範本標籤在你的404頁面上添加一個熱門帖子的清單。
<?php wpp_get_mostpopular(); ?>
在404頁面顯示評論最多的帖子
這個外掛程式還可以顯示有最多評論的帖子。
在你的404.php檔中,只需找到你想顯示你最多評論的帖子的地方,然後添加以下範本標籤。
<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
在404頁面上顯示最近的帖子
另一個選擇是顯示你的網站最近的文章。 如果你發佈時間敏感的博客,例如你經營一個新聞聚合網站,這可能特別有效。
有几种不同的方法可以在 WordPress 中显示最近的帖子,但最简单的方法是在 404.php 文件中添加模板标签:
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
在 404 页面上显示随机帖子
您想在自定义 404 页面上显示随机的帖子列表吗?
然后只需将此代码添加到您的 404.php 文件中:
<ul>
<?php
$posts = get_posts('orderby=rand&numberposts=5');
foreach($posts as $post) { ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php } ?>
</ul>