舟山企業網站制作:創建自定義WordPress 404錯誤頁

舟山網站建設 | 2019-04-03

很有可能,您遇到了“404 Notfind”錯誤頁面。404引用頁面在URL不存在時接收的HTTP狀態代碼。因此,每次用戶訪問不存在于您網站上的鏈接時,都會為他們提供一個默認404頁面,告知他們這一事實。有一個故事說404代碼來自第一個存放WWW數據庫服務器的房間的編號,但是這是個神話。這只是W3C分配的數字。如果您希望看到404頁正在運行,您可以看到一個關于優雅主題的例子.

404頁的利用率相對較低,通常不提供太多的附加信息就不存在頁面。幸運的是,WordPress使您的404頁面更容易定制,因此您可以使用它向用戶提供有用的信息,并將其引導到站點的其他地方。

如何使用404頁

舟山企業網站制作當找不到頁面時,服務器就會顯示404頁。它通常表示用戶輸入了錯誤的URL,或者跟隨一個鏈接到一個曾經存在但不再存在的頁面。通常,它表示您的用戶丟失了。作為一個負責任的網站所有者,你的工作就是幫助他們重新找到自己的道路。

在這些情況下,您的首要任務是為訪問者提供一條簡單的途徑,讓他們找到真正想要的東西。你也可以增加一些舒適和輕松的網頁,使它符合您的網站的整體外觀,并提供真誠的道歉。

那么應該向404頁面添加什么樣的元素呢?你會想給你的訪問者一些不同的方式連接到他們真正想要的內容。要做到這一點,您可以從更一般的最佳實踐開始,然后嘗試一些更細粒度的方法。例如,搜索表單是必須的,并為用戶提供了重新訪問站點的廣泛途徑。確保頁面上存在主題的主導航也屬于此類別。

但是404頁最重要的方面是細節。在本文中,我將介紹如何使用WordPress實際設置404頁面,并給出一些想法和示例以幫助您開始工作。我也將與你分享一兩個技巧,以提高頁面更多。

設置404頁

WordPress使創建基本404頁面變得非常簡單。本質上,它將所有找不到的頁面路由到主題目錄中的404.php文件中。因此,如果您創建了一個名為404.php的文件,那么您已經設置了404頁面。

大多數主題都附帶了一個404.php文件,其中包含了一些基本信息。如果需要,可以繼續編輯該文件。但是,處理這個問題的更負責任的方法是構建一個子主題,并在其中添加404頁面。

Divi主題的默認404頁。

設置“兒童”主題的404頁

子主題構建在父主題之上,允許對主題的任何更新工作,同時仍然維護您決定添加的任何自定義元素。我不會討論兒童主題的所有優點,也不會討論如何設置它。為此,我推薦尼克·羅奇主題入門文章。在本教程中,我將使用Divi的子主題,但是代碼對于任何主題都是可互換的。

一旦設置了子主題,第一步就是在您的子主題文件夾中創建一個名為“404.php”的文件。這將覆蓋隨主題附帶的404頁,并允許您進行任何想要的更新。舟山企業網站制作在您創建了這個文件之后,我們將添加一些代碼,以便我們開始工作。

<?php get_header(); ?>

<div id="main-content">
	<div class="container">
		<div id="content-area" class="clearfix">
			<div id="left-area">
				<article id="post-0" <?php post_class( 'et_pb_post not_found' ); ?>>
					<h1><?php esc_html_e('Page Not Found','Divi'); ?></h1>
					<p><?php esc_html_e('Whoops. Looks like the page you were looking for doesn\'t exit. Maybe try searching for something else using the search bar above', 'Divi'); ?></p>
				</article> <!-- .et_pb_post -->
			</div> <!-- #left-area -->

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

<?php get_footer(); ?>

還沒發生什么事。這只是一些樣板代碼,以使您的頁面設置。它引入WordPress頁眉、頁腳和側邊欄,就像主題中的任何其他頁面一樣。在中間,我添加了一點文本,為錯誤向用戶道歉,并建議他們嘗試搜索他們想要的內容。確保從404頁面訪問搜索表單是必要的,也是一個良好的開端,但我們可以做得更好。好多了。

您的404頁應該包含哪些內容?

為了確定您應該添加到404頁面的內容,您必須首先評估您正在運行的站點類型。你的目標是讓用戶快速找到相關的內容,而不讓他們有太多的選擇。搜索是有用的,但如果你做得對,你的網站上的每一頁上都會有一個搜索欄。在404頁上,你必須縮小一些范圍。

例如,如果您正在運行一個博客,那么最好提供一個最近的帖子列表。如果您的站點展示了產品,您可以將用戶引導到功能列表或常見問題解答。或者,如果用戶遇到問題,最好提供一種與您聯系的方式。試著進入你的用戶的頭腦,找出最有可能指向他們的頁面是什么。如果所有這些都失敗了,使用分析來確定您最受歡迎的頁面是什么,并指導那里的用戶。

例如,GitHub使事情變得非常簡單。他們的404頁有一個巨大的搜索欄,搜索他們的整個網站。在此下面,他們包含了三個鏈接,以聯系支持或獲得GitHub的狀態,引導他們的用戶到一個新的頁面。

Dropbox采取類似的方法,將用戶引導到他們可以獲得支持的站點區域,或者返回到主頁。合理的選擇,但不要太多。

“紐約時報”采取了更為全面的做法。除了一個搜索欄和一個聯系人鏈接,他們還提供了一個最近的帖子列表,特別受歡迎,希望能讓讀者再次感興趣。

你也會想把你的品牌風格添加到頁面中,這樣用戶就會感到更自在一些。例如,優雅的主題在404頁上有一張富有表現力的圖片,讓用戶知道他們感受到了痛苦。他們的主要導航足以指導用戶到任何他們想去的地方。

這里的要點是:

一旦您了解了想要在頁面上放置什么,下一步就是實際實現它。我們將使用一個內置的WordPress特性,它已經存在了很長一段時間了:Widget,而不是重新發明輪子,并從零開始對所有添加的內容進行硬編碼。

添加404 WidgeizedSidebar

舟山企業網站制作第一次看到的策略賈斯汀·塔洛克,我們可以在構建404頁面時使用小部件。對于那些不熟悉的用戶,小部件是可以通過WordPress管理程序中的拖放界面添加的內容塊。對于不同的特性,有不同的小部件,例如最近的文章、純文本和RSS提要。有些包含在WordPress中,還有一些與插件和主題捆綁在一起。例如,優雅的主題使您可以訪問一些額外的小部件。小部件通常放在側邊欄中,但實際上它們可以在您的站點上的任何位置。

換句話說,穩固404頁面的大部分構建塊都是以小部件的形式出現的。如果我們只為404頁設置一個單獨的小部件區域,那么我們可以輕松地在一個簡單的可視化界面中添加圖像、文本和其他內容,并動態地進行更改。

設置Widget區域

我們需要做的第一件事是注冊一個小部件區域,這樣我們就可以開始使用它了。幸運的是,優雅的主題使得向WordPress添加新的小部件區域變得非常簡單。你要做的就是去外觀->小部件在WordPress管理員中。在右側欄的底部,您將看到一個允許您創建新Widget區域的框。只需在提供的文本字段中輸入名稱“404”,然后單擊創造紐扣。就像這樣,將添加一個新的小部件區域,您可以立即開始使用。

只需鍵入小部件的名稱即可。

如果您沒有使用優雅主題中的主題,則必須使用WordPress‘添加一個小部件。寄存器側欄功能。這段代碼需要添加到子主題的Functions.php文件中。如果沒有,只需在子主題的目錄中創建一個名為“function s.php”的文件,并添加以下代碼:

function widget_area_404() {

	register_sidebar( array(
		'name' => '404 Page',
		'id' => '404',
		'description'  => __( 'Widgets placed here will be shown on the 404 Not Found.' ),
		'before_widget' => '<div class="et_pb_post">',
		'after_widget' => '</div>',
		'before_title' => '<h4 class="widgettitle">',
		'after_title' => '</h4>',
	) );
}
add_action( 'widgets_init', 'widget_area_404' );

這設置了一個簡單的函數,它注冊了WordPress的側邊欄,并添加了一些默認的HTML。

我們可以開始在WordPress管理中向這個區域添加小部件,但是它們還不會出現在我們的頁面上。為此,我們必須將新的小部件區域添加到404頁。

將Widget區域添加到頁面

讓我們回到404.php文件。就在我們添加的文本塊下面,我們將添加一行代碼:

<?php dynamic_sidebar( '404' ); ?>

DynamicSidebar是WordPress提供的一個函數,它允許您顯示一個小部件區域。只需將名稱傳遞給它,小部件區域中的任何小部件都將自動顯示在代碼放置的位置。現在是開始添加頁面的時候了。

向頁面添加小部件

舟山企業網站制作在我們的小部件區域全部設置好之后,唯一要做的事情就是實際開始添加內容。登錄到WordPress儀表板并再次導航到外觀->小部件在菜單上。您將在右側看到新的404 PageWidget區域。在左側,您將看到可以使用的小部件列表。

我的主題已經包括一個搜索欄和標題中的導航以及側欄中的搜索,所以我不需要添加任何一個元素。如果您的主題不包括這一點,那么添加一個搜索小部件將是一個好主意。

接下來,我們將添加一些有用的鏈接。假設我在開博客。我想展示一下最近的幾篇文章,這樣用戶就可以快速瀏覽到他們想要找到的內容。只需將“最近的帖子”小部件拖放到404框中,并更改設置以滿足您的口味。對我來說,我給了它一個簡單的標題,并增加了3個帖子。

配置我最近的帖子小部件

接下來,我想添加一個鏈接到我的聯系人頁面的簡單文本行。為此,我很可能希望使用文本小部件,它接受純文本和HTML。我可以將文本Widget拖到404部分,并添加一個非常小的文本塊:

Can't find what you're looking for? Visit my <a href="/contact">Contact Page</a> to get in touch right away.

您還可以使用TextWidget添加一個圖像,以使頁面更加平易近人。在文本小部件中,保留title字段為空,并使用HTML將圖像鏈接起來。

<img title="404 Page Image" src="http://yoursite.com/images/404.png" alt="404 Not Found" />

確保將“http://yoursite.com/images/404.png”替換為指向要使用的圖像的鏈接。

如果您希望添加一些鏈接,類似于GitHub的方法,您可能還需要考慮設置自定義菜單,并將其添加到“自定義菜單”小部件中。

您決定添加到404頁面的內容取決于您自己,但是無論您要添加什么,都可能有一個可以幫助您的小部件。例如,您可以使用捆綁的優雅主題“關于我”小部件來分享一些關于自己的信息。簡單地連接一個生物圖像,并添加一些關于你是誰的句子。

添加內容時,只需確保內容簡潔即可。給用戶一些不同的方式來訪問你最重要的內容,也許添加一個品牌形象,然后離開。只要幾句話和幾個鏈接,您就可以確保用戶從錯誤頁面中獲得更多信息。

我的404頁面看起來好多了,并且有我的訪問者需要的所有信息。

最后一招

我給你留下最后的建議給那些想嘗試一下的人。WordPress允許您訪問許多可以在任何頁面上訪問的查詢變量。其中一個變量名為“name”,包含站點URL后面的URL片段。因此,如果用戶在http://yoursite.com/404,中鍵入名稱查詢變量,則返回“404”。這在很多方面對你都是有用的。

最簡單的例子就是告訴用戶他們想要訪問的頁面,這樣他們就可以檢查它的拼寫錯誤或錯誤。在我們的404.php頁面上,讓我們首先檢索這個查詢變量。在頁面頂部,僅在get_Header函數下,存儲名稱查詢變量。

<?php $name_var = get_query_var('name');  ?>

然后,我們可以更改PageNotFindHeader,以包含用戶的此信息。

<h1><?php esc_html_e('Page /','Divi'); echo $name_var;  esc_html_e('/ Not Found','Divi'); ?></h1>

現在,舟山企業網站制作用戶將被告知他們試圖立即訪問的鏈接。

當然,這只是一個想法。對于這個特定的變量,還有很多事情可以做,比如為搜索結果提供服務基于頁面的URL,或者使用它來嘗試猜測頁面可能是什么。當你在404頁面中添加內容時,在你的腦海中保留這一點是值得的,以防出現這樣的情況。

404頁面遠不是你網站上最重要的頁面,但是如果你對它進行了一點思考,你就可以為你的訪問者提供更好的體驗,并確保他們能夠堅持你的網站,即使他們收到了錯誤。希望這足以讓你開始工作。


上一篇:舟山企業網站開發:如何使用WordPress創建常見問題頁面下一篇:舟山建站公司:為什么使用Tabs是一個好主意,以及如何在WordPress中創建它們