0%

正威網路行銷工作室,專注於基隆、台北與全台客製化網頁設計,提供專業 RWD 響應式、SEO 搜尋引擎優化、品牌形象設計與網站維護託管服務。

搜尋文章
聯絡資訊
地址基隆市仁二路 220 號 5 樓
追蹤我們

WordPress 404 頁面怎麼做:自訂內容、最新文章、要不要自動跳回首頁

WordPress 404 頁面怎麼做:自訂內容、最新文章、要不要自動跳回首頁 封面

訪客點到一個不存在的網址,網站就會回應「404」,意思是找不到這個網頁。常見的原因有:文章刪掉了、網址改過、別的網站連結打錯、訪客自己打錯字。

404 本身不是壞事。Google 在 Search Console 的說明裡寫得很清楚:404 錯誤不會影響網站的索引或排名。需要注意的是訪客的感受:一個只寫著「Not Found」的頁面,訪客多半直接關掉離開。

WordPress 自己會先幫你處理兩件事

在動手改 404 頁之前,先知道 WordPress 已經做了什麼:

  • 猜網址:網址只打了開頭,例如文章網址是 /website-speed-tips/,訪客打成 /website-spe,WordPress 會找開頭相同的文章,用 301 轉過去。
  • 改網址自動轉址:文章的網址代稱改過,WordPress 會記住舊網址,有人點舊網址就 301 轉到新網址。

這兩個都是在測試站實際試過的。所以只要是「網址改過」的文章,WordPress 會自己處理;真的會跑到 404 的,是文章刪掉、或網址完全打錯的情況。

如果不希望 WordPress 用「開頭相同」去猜(例如有好幾篇文章開頭很像,怕轉錯篇),可以加這一行,改成網址完全相同才轉:

PHP
// 網址要完全相同才自動轉過去,只打了開頭的網址就顯示 404
add_filter( 'strict_redirect_guess_404_permalink', '__return_true' );

好的 404 頁要有什麼

  1. 一句白話的說明:找不到這個網頁,可能是網址打錯或文章已經移除。
  2. 搜尋框:讓訪客直接找他要的內容。
  3. 幾篇最新文章:給訪客一個可以點的地方,不會卡住。
  4. 回到首頁的按鈕。

Twenty Twenty-Five、Twenty Twenty-One 這些官方佈景主題的 404 頁本來就有搜尋框,下面把另外三項補上。修改都放在子佈景主題裡,母佈景主題更新時才不會被蓋掉。

區塊佈景主題(例如 Twenty Twenty-Five)

區塊佈景主題可以在後台「外觀 → 編輯器 → 範本 → 404 頁面」直接用區塊編輯。想用檔案管理,就在子佈景主題建立 templates/404.html:

HTML
<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">找不到這個網頁</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>網址可能打錯了,或這篇文章已經移除。可以搜尋看看,或從下面的最新文章找起。</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"搜尋","showLabel":false,"buttonText":"搜尋"} /-->

<!-- wp:heading -->
<h2 class="wp-block-heading">最新文章</h2>
<!-- /wp:heading -->

<!-- wp:latest-posts {"postsToShow":5} /-->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/">回到首頁</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->
  • 用的都是 WordPress 內建區塊:標題、段落、搜尋、最新文章、按鈕,之後還是可以在網站編輯器裡改。
  • 「最新文章」區塊會自動列出最近 5 篇,不用手動更新。
  • 要注意:如果曾經在網站編輯器裡改過 404 範本,網站會優先用編輯器存的版本,檔案改了看不到變化。這時在網站編輯器裡把 404 範本的自訂內容重設掉,就會改用檔案的版本。

傳統佈景主題(例如 Twenty Twenty-One)

傳統佈景主題的 404 頁是 404.php。把母佈景主題的 404.php 複製到子佈景主題,只改中間的內容。以 Twenty Twenty-One 為例:

PHP
<?php
/**
 * 子佈景主題的 404 頁(以 Twenty Twenty-One 為例)
 */
get_header();
?>

	<header class="page-header alignwide">
		<h1 class="page-title">找不到這個網頁</h1>
	</header>

	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p>網址可能打錯了,或這篇文章已經移除。可以搜尋看看,或從下面的最新文章找起。</p>
			<?php get_search_form(); ?>

			<h2>最新文章</h2>
			<ul>
				<?php foreach ( get_posts( array( 'numberposts' => 5 ) ) as $recent ) : ?>
					<li><a href="<?php echo esc_url( get_permalink( $recent ) ); ?>"><?php echo esc_html( get_the_title( $recent ) ); ?></a></li>
				<?php endforeach; ?>
			</ul>

			<p><a href="<?php echo esc_url( home_url( '/' ) ); ?>">回到首頁</a></p>
		</div>
	</div>

<?php
get_footer();
  • get_search_form() 顯示佈景主題自己的搜尋框,樣式會和網站其他地方一樣。
  • get_posts() 抓最近 5 篇已發佈的文章,列成連結。
  • 外層的 header、div 名稱照 Twenty Twenty-One 原本的寫法,版面才會對齊。其他佈景主題就保留它原本 404.php 的外框,只換中間。

兩個佈景主題都在測試站看過:網址打錯時,頁面回應的仍然是 404,上面依序是標題、說明、搜尋框、5 篇最新文章、回到首頁,手機寬度也排得整齊。

記錄哪些網址常被點到卻找不到

404 頁做好,下一步是找出哪些網址一直有人點,把它修好。下面這段程式碼會記下「從別的網頁連過來,結果找不到」的網址,在後台「工具 → 404 紀錄」查看:

PHP
// 記錄「從別的網頁連過來卻找不到」的網址,在「工具 → 404 紀錄」查看
add_action( 'template_redirect', function () {
	if ( ! is_404() || empty( $_SERVER['HTTP_REFERER'] ) ) {
		return; // 沒有來源網頁的多半是機器人亂試,不記
	}
	$url  = substr( esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) ), 0, 300 );
	$from = substr( esc_url_raw( wp_unslash( $_SERVER['HTTP_REFERER'] ) ), 0, 300 );
	$log  = get_option( 'zw_404_log' );
	$log  = is_array( $log ) ? $log : array();
	$row  = isset( $log[ $url ] ) ? $log[ $url ] : array( 'count' => 0 );

	$row['count']++;
	$row['last'] = time();
	$row['from'] = $from;
	unset( $log[ $url ] );
	$log[ $url ] = $row;                // 最新的排最後
	$log = array_slice( $log, -200, null, true ); // 最多留 200 個網址
	update_option( 'zw_404_log', $log, false );
}, 20 );

add_action( 'admin_menu', function () {
	add_management_page( '404 紀錄', '404 紀錄', 'manage_options', 'zw-404-log', function () {
		if ( isset( $_POST['zw_clear_404'] ) && check_admin_referer( 'zw_clear_404' ) ) {
			delete_option( 'zw_404_log' );
		}
		$log = get_option( 'zw_404_log' );
		$log = is_array( $log ) ? $log : array();
		uasort( $log, function ( $a, $b ) {
			return $b['count'] - $a['count']; // 次數多的排前面
		} );
		echo '<div class="wrap"><h1>404 紀錄</h1>';
		echo '<table class="widefat striped"><thead><tr><th>找不到的網址</th><th>次數</th><th>最後一次</th><th>從哪個網頁連過來</th></tr></thead><tbody>';
		foreach ( $log as $url => $row ) {
			printf(
				'<tr><td>%s</td><td>%d</td><td>%s</td><td>%s</td></tr>',
				esc_html( urldecode( $url ) ),
				$row['count'],
				esc_html( wp_date( 'Y-m-d H:i', $row['last'] ) ),
				esc_html( urldecode( $row['from'] ) )
			);
		}
		if ( ! $log ) {
			echo '<tr><td colspan="4">目前沒有紀錄。</td></tr>';
		}
		echo '</tbody></table><form method="post" style="margin-top:1em">';
		wp_nonce_field( 'zw_clear_404' );
		submit_button( '清除紀錄', 'secondary', 'zw_clear_404', false );
		echo '</form></div>';
	} );
} );
  • 只記有來源網頁的:從 Google 搜尋結果、別的網站、或自己網站的某一頁連過來的才記。沒有來源網頁的 404,多半是機器人在試 wp-config.php.bak 這類檔案,記了只會塞滿紀錄。
  • 最多留 200 個網址,同一個網址累加次數,資料不會一直長大。
  • 紀錄頁依次數排序,列出找不到的網址、次數、最後一次的時間、從哪個網頁連過來。按「清除紀錄」可以重新開始。

測試站的結果:同一個舊網址從自己網站和 Google 各點一次,紀錄顯示 2 次;中文網址正常顯示;沒有來源網頁的 wp-config.php.bak、正常存在的網頁都沒有被記到。

看到紀錄之後怎麼處理

  • 來源是自己網站的某一頁:那一頁有一個壞掉的連結,直接去改連結。
  • 來源是 Google 或別的網站:如果那篇內容換到新網址,就把舊網址 301 轉址到新網址(可以參考 .htaccess 用法大全,或用 Redirection 這類外掛設定)。
  • 內容真的已經沒有了:就讓它維持 404,不用處理。

要不要自動跳回首頁?

網路上常見一種做法:404 頁倒數 5 秒,自動跳回首頁;或乾脆把所有找不到的網址都轉到首頁。不建議這樣做:

  • 訪客會更困惑:他點的是某篇文章,結果突然跑到首頁,不知道發生什麼事,也沒機會用搜尋框。
  • Google 不建議:Search Console 的說明提到,不要把使用者重新導向到首頁,這種做法會被當成「轉址式 404 錯誤」(soft 404),反而讓 Google 更難了解網站。

比較好的做法就是上面那樣:維持 404,頁面上給訪客搜尋框、最新文章和回首頁的按鈕,讓訪客自己選。內容搬到新網址的,才針對那一個網址做 301 轉址。

延伸閱讀

訪客找不到網頁時還能留下來,網站才留得住人。正威網路行銷是 25 年經驗的基隆網頁設計工作室,網站管家年費包含每年 12 次小修改,像改壞掉的連結這類小事都可以交給我們,台北與全台客戶也歡迎來聊聊。

分享這篇文章

返回文章列表更多「Wordpress代碼教學」文章

發表留言

還沒有人留言,歡迎第一個分享你的想法或問題。留言經審核後才會顯示,Email 不會公開。

讓我們一起打造
您的專屬網站!