如何在 WordPress 中自定義 404 頁面

已發表: 2021-06-29

您是否正在尋找方法來編輯您網站上的 404 錯誤頁面？ 我們已經為您服務了。 在本指南中，我們將向您展示在 WordPress 中自定義 404 頁面的不同方法。

如果您經常使用互聯網，您可能至少遇到過一次 404 錯誤頁面。 它在請求的頁面不可用時出現。 大多數網站所有者離開默認的 404 頁面，卻沒有意識到您可以做很多事情來充分利用該頁面。 好消息是，如果您使用 WordPress，您可以輕鬆自定義它。

在我們了解如何編輯此錯誤頁面之前，讓我們更好地了解 404 頁面是什麼以及自定義它的一些好處。

什麼是 404 頁面？

404 錯誤頁面是當用戶在 Web 瀏覽器中輸入損壞或無效鏈接時顯示的網站頁面。 這意味著訪問者嘗試訪問的頁面不可訪問。 您可以想像，這對您的網站來說不是一件好事。

損壞的鏈接不僅會造成糟糕的體驗，還會影響您的 SEO 排名。 作為一般規則，您應該盡量避免將訪問者引導至 404 頁面，因為他們不會在那裡找到他們正在尋找的內容。

但是，無論您的網站維護得多麼好，您的訪問者都會至少登陸一次 404 頁面。 如果服務器關閉、移動的頁面未正確重定向或頁面本身從未存在，則可能會發生這種情況。 最重要的是，用戶也可能因為在瀏覽器中輸入了錯誤的 URL 而最終進入 404 頁面。 所以沒有辦法完全阻止對 404 頁面的訪問。

為什麼要自定義 404 頁面？

由於您無法完全避免訪問者登陸 404 錯誤頁面，因此您應該充分利用它並將這種糟糕的體驗轉化為機會。

大多數網站的默認 404 頁面都不是很好。 它們通常會顯示“未找到”錯誤以及該問題的一些技術細節，並且它們看起來非常相似。 可以想像，這對用戶來說並不是最好的。 用戶唯一能做的就是返回上一頁。

默認 404 頁面 在 wordpress 中自定義 404 頁面

好消息是，由於大多數網站都有默認的 404 頁面，您可以通過編輯它從競爭對手中脫穎而出。 在 WordPress 中，您可以輕鬆自定義 404 頁面，向用戶提供附加信息，並鼓勵他們採取一些行動。

如何更改網站的 404 頁面有多種可能性。 例如，您可以通過更改背景和添加一些選項來改進頁面的設計。 同樣，您可以讓用戶知道他們為什麼會登陸 404 頁面，並添加一些提示以獲取他們想要的信息。 或者，您可以添加一些指向您網站的其他有用帖子或頁面的鏈接。

這些定制也可以給您的訪問者留下深刻印象，這對您的網站總是有好處的。

事不宜遲，讓我們看看如何編輯您的 404 頁面。

如何在 WordPress 中自定義 404 頁面

在 WordPress 中輕鬆自定義 404 頁面有兩種主要方法：

  1. 以編程方式
  2. 帶插件

讓我們看一下每種方法，以便您選擇最適合您的方法。

在開始該過程之前，請確保創建站點的完整備份。 我們將編輯您網站上的敏感信息，因此最好進行備份，以防出現問題。

1) 以編程方式自定義 WordPress 404 頁面

這種方法對於那些有一定編碼技能的人來說非常有用，並為您提供了足夠的靈活性來更改 404 頁面。 即使您不是高級用戶，您也可以通過添加一些片段輕鬆自定義 404 頁面的各種組件。

您需要做的就是在 WordPress 儀表板中轉到外觀 > 主題編輯器，然後從屏幕右側打開404.php文件。 您必須在此處添加我們將在下面看到的代碼片段。

主題編輯器 404 文件在 wordpress 中自定義 404 頁面

請記住，這些文件上的代碼因您使用的主題而異。 我們使用的是 Divi 主題，但如果您使用其他主題，代碼可能會有所不同。 如果您也想使用 Divi，請查看我們的完整評論。

如果您使用不同的主題，請使用以下一些片段作為基礎並調整它們以在 WordPress 中自定義您的 404 頁面。

404頁面的文字和標題自定義

您可以通過編輯404.php文件中的默認代碼輕鬆自定義 404 頁面的文本和標題。

404 錯誤頁面的默認代碼可能如下所示。

 <?php get_header(); ?>

<div id=”主要內容”>
<div 類=“容器”>
<div id=”content-area” class=”clearfix”>
<div id=”left-area”>
<article id="post-0" <?php post_class('et_pb_post not_found'); ?>>
<?php get_template_part('includes/no-results', '404'); ?>
</article> <!– .et_pb_post –>
</div> <!– #left-area –>

<?php get_sidebar(); ?>
</div> <!– #content-area –>
</div> <!– .container –>
</div> <!– #main-content –>

<?php

get_footer();

您需要做的就是將整個<article>標記替換為一組標題標記，然後添加要在 404 頁面上顯示的文本和標題，如下所示。

 <?php get_header(); ?>

<div id=”主要內容”>
<div 類=“容器”>
<div id=”content-area” class=”clearfix”>
<div id=”left-area”>
<h2> 頁面未找到 – 404 錯誤 </h2>
可能是服務器問題。
</div> <!– #left-area –>

<?php get_sidebar(); ?>
</div> <!– #content-area –>
</div> <!– .container –>
</div> <!– #main-content –>

<?php

get_footer();

快速提示：如果要預覽 404 頁面，只需在 Web 瀏覽器的新選項卡中輸入您的網站 URL 並添加404 路徑即可。

例如，如果您的站點 URL 是“ www.sitename.com ”，那麼您只需在其末尾添加 404（“ www.sitename.com/404 ”）即可預覽 404 頁面。

確保您的網站上沒有包含該確切路徑的頁面。 如果它已經存在，那麼您可以在路徑中添加一些隨機字符，例如“ www.sitename.com/404-preview-404” 。

在 404 頁面中顯示最近的帖子

如果您想在您網站的 404 頁面上顯示最新的帖子，只需將以下代碼片段添加到404.php文件中即可。

 <?php wp_get_archives(array('type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br /> ' ) ); ?>

在這種情況下，我們將顯示最後 10 個帖子，但您可以將 limit 屬性更改為要顯示的最近帖子的數量。

在 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>

您還可以通過編輯代碼段來調整要顯示的隨機帖子的數量。

如果您不習慣使用代碼編輯文件，也可以使用插件更改 404 頁面。

2) 使用插件自定義 WordPress 中的 404 頁面

如果您沒有編碼技能或不喜歡使用片段編輯文件，此方法會很有用。 使用插件可能是在您的 WordPress 網站中自定義 404 頁面的最快和最簡單的方法之一。 您需要做的就是安裝插件並進行一些更改。

您可以使用多個插件來編輯 404 頁面。 一些最好的是：

2.1) 404page by Peter Raschendorfer

404page是最受歡迎的 WordPress 插件之一，用於自定義 404 頁面。 它允許您使用默認的 WordPress 頁面編輯器來幫助您創建自己的自定義錯誤頁面。

該插件非常易於使用，因此您可以在幾分鐘內編輯您的 404 頁面。 它適用於大多數流行的 WordPress 主題和插件，因此您不會遇到任何兼容性問題。

主要特點
  • 使用默認的 WordPress 頁面編輯器來編輯 404 頁面
  • 與主要的 WordPress 主題和插件兼容
  • 非常簡單易用
  • 有據可查並附帶插件手冊
價格

404page 是一個免費的插件。

2.2) Colorlib 404 定制器

Colorlib 404 Customizer是一款出色的插件，用於自定義 404 頁面。 它為您提供了使用主題定制器編輯 404 頁面的選項，這非常方便，因為您可以在實時預覽中看到您所做的所有更改。

它還允許您編輯 404 頁面的背景圖像以及多個 404 頁面模板。 同樣，如果需要，您還可以向頁面添加自定義 CSS 以進一步自定義它。

主要特點
  • 使您能夠使用主題定制器來編輯 404 頁面
  • 用於編輯 404 頁面的文本和背景的其他選項
  • 如果需要，可以選擇將自定義 CSS 添加到 404 頁面
  • 多個 404 頁模板
價格

該插件是 100% 免費的，您可以從 WordPress 存儲庫下載它。

使用 Colorlib 404 自定義 404 頁面

現在讓我們看看如何使用插件編輯 404 頁面。 對於本教程，我們將使用Colorlib 404 Customizer 。 除了讓您通過實時預覽實時查看所做的更改之外，您還可以訪問 20 個不同的網站頁面模板。 然後，您所要做的就是使用定制器進行一些更改並更新 404 頁面。

讓我們一步一步來看看這個過程。

安裝並激活插件

要安裝插件，請在您的 WordPress 儀表板中轉到插件 > 添加新插件，然後在搜索欄上搜索插件，如下面的屏幕截圖所示。 找到 Colorlib 404 Customizer 後，單擊立即安裝以安裝插件，然後將其激活。

您也可以手動下載並安裝插件。 如果您不確定如何操作，請查看我們的指南，了解如何手動安裝 WordPress 插件。

自定義您的 404 頁面

插件激活後，進入外觀>自定義打開主題定制器。 轉到Colorlib 404 Customizer Settings選項卡，您將看到三個選項：Active Template、General 選項和 Custom CSS。 根據您選擇的模板，您可能會看到更多選項。

定制器的預覽將相應地更改為您的新自定義 404 頁面。 首先，通過單擊活動模板的更改按鈕為 404 頁面選擇所需的模板。 您可以從 20 種不同的模板中進行選擇。

更改活動模板 9 在 wordpress 中自定義 404 頁面

然後，選擇常規選項。 在這裡，您需要激活Colorlib 404 Customizer 以顯示自定義 404 頁面。 之後，您可以為頁面的主要內容添加或更改背景圖像和文本。 此外，您可以調整頁面的背景重複、大小和顏色。

如果您想將訪問者從 404 頁面重定向到其他地方，您還可以添加文本和鏈接。 這對於將用戶帶到相關頁面並確保他們留在您的網站上非常有用。

該插件包含一個默認按鈕，可將您的觀眾帶到您也可以自定義的主頁。

常規選項在 wordpress 中自定義 404 頁面

如果您返回並打開自定義 CSS選項，則可以使用自定義 CSS 編輯頁面。 這對於更改頁面設計並將其與您網站的外觀相匹配很有用。

如前所述，您可以通過定制器的實時預覽實時查看您所做的所有更改。 對 404 頁面上的所有更改感到滿意後，按發布更新頁面。

最終預覽在 wordpress 中自定義 404 頁面

結論

總之，無論您如何維護您的網站，訪問者最終都會遇到 404 頁面。 大多數網站管理員都會保留默認頁面，但您可以對其進行編輯並充分利用它。 通過更改 404 頁面，您可以通過改善訪問者體驗並避免失去用戶來從競爭對手中脫穎而出。

在本指南中，我們看到了自定義 404 頁面的不同方法：

  • 以編程方式
  • 帶有專用插件

如果您有編碼技能，您可以使用代碼片段來編輯 404 頁面。 您可以更改網站的文本、添加有用的鏈接和按鈕、顯示最近的帖子等等。 但是，如果您是初學者並且不想編輯文件，則可以使用插件來更改 404 頁面。 只需單擊幾下，您就可以自定義頁面的背景圖像和文本。

我們希望您現在可以在本教程的幫助下毫無問題地自定義 404 頁面。 為了充分利用您的網站，我們建議您查看其他一些指南，以幫助您編輯各種其他頁面：

  • 如何編輯WordPress主頁
  • 了解如何以編程方式編輯產品頁面
  • 如何自定義 WooCommerce 商店頁面
  • 自定義 WooCommerce 類別頁面
  • 如何在 WooCommerce 中編輯結帳頁面
  • 學習在 WooCommerce 中自定義“我的帳戶”頁面
  • 如何自定義 WooCommerce 產品頁面

您是否在您的網站上自定義了 404 頁面？ 您使用了哪種方法？ 在下面的評論中讓我們知道！