WordPress 改外掛、佈景主題的翻譯文字：gettext 篩選器與區塊購物車的寫法

WordPress 的外掛、佈景主題介面上的中文，大多是 translate.wordpress.org 上的志工翻譯的。翻譯會打包成「語言包」，跟著外掛更新自動下載到網站。

翻得沒有錯，但不一定是你想要的說法。例如：

• WooCommerce 的「加入購物車」，想改成「我要買」
• 商品頁的「相關商品」，想改成「你可能也喜歡」
• 佈景主題頁尾那一行「使用 WordPress 設計」，想換一個說法

不要直接改 wp-content/languages/ 裡的語言檔。 那些檔案是語言包，下次外掛更新、語言包更新，就會被新的檔案蓋回去。

這篇用程式碼改，外掛怎麼更新都不會被蓋掉。

先懂一件事：程式碼裡寫的是英文

外掛、佈景主題的程式碼裡，介面文字都是英文原文，加上一個「網域」（text domain），例如：

__( 'Add to cart', 'woocommerce' )

顯示的時候，WordPress 拿 Add to cart 去 WooCommerce（網域 woocommerce）的語言檔找，找到「加入購物車」就顯示中文。

所以要改用語，比對的是英文原文，不是中文。

• 網域：通常就是外掛、佈景主題的資料夾名稱。WooCommerce 是 woocommerce，Twenty Twenty-Five 是 twentytwentyfive。
• 找英文原文：到 translate.wordpress.org 打開那個外掛的繁體中文翻譯專案，搜尋畫面上的中文，就會看到對應的英文；或在外掛資料夾裡搜尋中文旁邊可能的英文字。

1. 改外掛的用語

// 改 WooCommerce 介面上的用語：左邊寫英文原文，右邊寫想顯示的字
add_filter( 'gettext_woocommerce', function ( $translation, $text ) {
	if ( is_admin() && ! wp_doing_ajax() ) {
		return $translation; // 後台維持原本的翻譯
	}
	$mine = array(
		'Add to cart'      => '我要買',
		'Related products' => '你可能也喜歡',
		'Description'      => '商品介紹',
	);
	return isset( $mine[ $text ] ) ? $mine[ $text ] : $translation;
}, 10, 2 );

• gettext_woocommerce：只有 WooCommerce 的文字會經過這個篩選器。名稱是 gettext_ 加上網域，WordPress 5.5 以後才有。比起所有文字都會經過的 gettext，它只處理一個外掛的文字，不會每一句翻譯都多跑一次你的程式碼。
• $mine 陣列：左邊英文原文、右邊想顯示的字，要改幾個就加幾行。英文要一字不差，大小寫、標點都要一樣。
• 後台不改：is_admin() 那一段讓後台維持原本的翻譯，自己管理訂單、設定時看到的還是熟悉的字。
• 同一句英文用在很多地方，會一起改：例如 Description 除了商品頁分頁，其他地方用到同一句也會變成「商品介紹」。改完前台多逛幾頁看看。

有些文字用的是另外兩種寫法，要換篩選器：

• 有「情境說明」的文字（程式碼寫 _x()）：用 gettext_with_context_woocommerce，函式多一個 $context 參數。
• 有單複數的文字（程式碼寫 _n()，例如「1 件商品」「%d 件商品」）：用 ngettext_woocommerce。

2. 改佈景主題的用語

// 佈景主題也一樣：網域換成佈景主題的代稱（這裡是 Twenty Twenty-Five 頁尾那一行）
add_filter( 'gettext_twentytwentyfive', function ( $translation, $text ) {
	if ( 'Designed with %s' === $text ) {
		return '網站由 %s 驅動';
	}
	return $translation;
}, 10, 2 );

做法一樣，篩選器換成佈景主題的網域。

Twenty Twenty-Five 頁尾那一行的原文是 Designed with %s，%s 會換成連到 WordPress 的連結，所以新的文字也要保留 %s，連結才會在對的位置。

3. 區塊購物車、區塊結帳的字要另外改

WooCommerce 現在預設的購物車頁、結帳頁是區塊做的，畫面是瀏覽器裡的 JavaScript 畫出來的，文字翻譯也在 JavaScript 裡做。

PHP 的 gettext_woocommerce 改不到這些字。我們實測把購物車頁的 Proceed to Checkout（前往結帳）加進第 1 段的清單，購物車按鈕還是「前往結帳」。

要改，用 WordPress 的 JavaScript 版篩選器：

// 區塊購物車、區塊結帳的字是 JavaScript 畫的，要用 JavaScript 版的篩選器改
add_action( 'wp_enqueue_scripts', function () {
	wp_add_inline_script( 'wp-i18n', "wp.hooks.addFilter( 'i18n.gettext_woocommerce', 'zw/my-words', function ( translation, text ) {
	var mine = { 'Proceed to Checkout': '去結帳' };
	return mine[ text ] || translation;
} );" );
} );

• wp.hooks.addFilter：JavaScript 版的 add_filter。篩選器名稱是 i18n.gettext_ 加上網域，用法和 PHP 那段一樣：英文原文對到想顯示的字。
• wp_add_inline_script( 'wp-i18n', … )：把這段 JavaScript 接在 WordPress 的翻譯程式後面，購物車區塊畫畫面之前就準備好。只有有用到翻譯程式的頁面才會輸出。
• 同一個英文原文，購物車頁和其他用 JavaScript 畫的區塊會一起改。

不想寫程式碼，或要改很多字

• 用翻譯外掛：例如 Loco Translate，可以在後台直接改某個外掛的翻譯。要改的字很多時比較方便。存檔時選它的「自訂」位置，才不會被語言包更新蓋掉。
• 翻譯真的有錯：到 translate.wordpress.org 登入 WordPress.org 帳號，替那個外掛的繁體中文翻譯提出建議。審核通過、語言包更新後，其他用繁體中文的網站也會拿到新的翻譯。

只改幾個字，用這篇的程式碼最簡單；程式碼拿掉，就恢復原本的翻譯，不會留下任何東西。

實際測試的結果

測試站：WordPress 7.1.3（繁體中文）＋ WooCommerce 11.2.1，Twenty Twenty-Five（區塊佈景主題）和 Twenty Twenty-One（傳統佈景主題）各測一次。三段程式碼都加上後：

• 商品頁按鈕：加入購物車 → 我要買
• 商店頁每個商品的按鈕：加入購物車 → 我要買
• 商品頁分頁：描述 → 商品介紹
• 相關商品標題：相關商品 → 你可能也喜歡
• 頁尾（Twenty Twenty-Five）：使用 WordPress 設計 → 網站由 WordPress 驅動，WordPress 那個連結還在
• 區塊購物車的按鈕：只用 PHP 篩選器時還是「前往結帳」；加上第 3 段的 JavaScript 篩選器後變成 去結帳
• 後台：在後台用同一段程式碼取 Add to cart、Description 的翻譯，還是「加入購物車」「描述」，沒有被改到

兩個佈景主題的結果都一樣。

延伸閱讀

• WooCommerce 商品頁常用小代碼：分頁改名、購買須知、已售出數量、隱藏相關商品
• WooCommerce 結帳欄位怎麼改？移除、改名、設為必填的程式碼與區塊結帳注意事項
• WordPress 佈景主題怎麼組成：範本檔案、範本標籤與子佈景主題

一個按鈕的用語，也會影響客人要不要按下去。正威網路行銷是 25 年經驗的基隆網頁設計工作室，購物車／電商方案包含購物車、金流、會員與訂單管理，台北與全台客戶也歡迎來聊聊。