Dashboard
Facebook Facebook 社團 Discord

使用 TranslatePress 建立 WordPress 多語系網站

文章累積到一定的數量之後，會開始思考寫過的主題對其他國家的讀者是不是也會有幫助，想要將網站的觸及率進一步擴展到其他語言國家。

這時候我們就會需要能夠支援 WordPress 網站提供多國語言、多語系功能的外掛了。

這篇文章以 TranslatePress 翻譯外掛為例，是我們在調查各種多語系外掛時針對 TranslatePress 所做的深入研究。

根據實際使用的經驗，把建立多國語言文章、網站時會遇到的問題整理出來，希望讓大家未來在經歷相同的過程時，不會有那種「阿… 早知道我應該先…」的感覺，可以更順利的將自己的網站從單一語言轉換為支援多語系的網站，邁向全世界。

TranslatePress 的優點

效能

TranslatePress 是相當輕量的 WordPress 多語言網站外掛，考量原語言頁面與第二語言頁面的頁面載入時間，與 WPML、Polylang、Weglot 相比，TranslatePress 受到的負面影響是最小的。

與 WPML、Polylang 比較最大的差異在於提供多語系內容的方法，TranslatePress 並不會針對每一個頁面、文章等內容提供個別的頁面、文章資料儲存在資料庫中，而是以前端介面選取文字的方式讓使用者逐條翻譯並將文字字串儲存在資料庫中。

也就是說，對比之下 TranslatePress 額外新增的數據不會像 WPML、Polylang 那麼大，頁面載入時的資源相對節省，也因此安裝外掛後對頁面載入效能的影響較小。

適合剛入門的初學者

剛開始學習架設 WordPress 網站總是會野心勃勃的想要為網站新增許多功能與內容，雖然架設 WordPress 網站的成本相對低，但許多吸引人的工具、多語系外掛，真正需要用到的時候，就會發現費用一筆一筆的向上堆疊。

多語系外掛中，TranslatePress 算是最為慷慨，免費方案中就包含了許多超值功能讓初學者們可以安心的提供網站的第二語言內容。

提供 Demo 網站

Demo 網站安裝了功能最完整的開發者方案 (Developer)，可以盡情測試、體驗各個方案所提供的功能，深度了解之後再決定是否要訂閱服務。

一致的瀏覽體驗

第二語言網址以子目錄的方式呈現，不論是頁面、文章、類別、標籤、商品、自訂內容類型網址的呈現方式預設都是相同的，降低管理、訪客瀏覽的複雜度並提供一致的瀏覽體驗。

如果需要按語言呈現不同的網址或標題、描述等 SEO Meta Data，購買最入門的個人方案 (Personal) 即可。

與第三方外掛相容性高

因為是以網頁前端介面選取文字的方式讓使用者逐條翻譯並將文字字串儲存在資料庫中，除非第三方外掛呈現文字的方式是採用動態載入，否則不太會有不相容的問題發生。

對初學者來說較不會遇到難以理解、無法突破的翻譯問題。(如果有遇到，記得直接回報官方客服解決速度最快)

實用的功能設定

TranslatePress 算是說明文件、設定介面都相對友善、易於使用的多語系外掛了。

如果不使用自動翻譯功能，基本上只需要跟著設定頁面中「General」與「Advanced」頁籤下的部分設定就能完成第二語言的設定與翻譯規劃。

  • General – 決定多語言網址、語言選擇器的呈現方式
  • Advanced
    • Exclude strings – 設定排除、不翻譯的網址清單，或指定需要翻譯的網址清單，對於初期的翻譯規畫相當有幫助
    • Miscellaneous options – 設定 hreflang 標記的呈現方式，對 SEO 相當關鍵

開始翻譯的規劃建議

安裝外掛

首先，到 WordPress 後台外掛 > 安裝外掛搜尋 TranslatePress。

translate-multilingual-sites-translatepress-plugin

安裝並啟用外掛。

基本要求

網站 SSL 設定完成後再進行翻譯，因為翻譯完成後的儲存動作需要在 HTTPS 連線狀態下才能成功執行。

語言設定

接著，在 General 頁籤下我們先從語言設定開始。

translatepress-general-languages
  • Default Language
    設定網站的預設語言，也就是網站上內容的原語言，以台灣來說就是繁體中文 Chinese (Taiwan)。
  • All Languages
    新增想要提供的第二、第三語言，可以拖曳改變語言切換器的排列顯示，Slug 就是顯示在網址中的語言代稱，建議使用預設值即可。

免費版只提供雙語 (可新增一個額外語言)，如果需要更多語言就需要訂閱個人方案以上的方案，只要是收費方案都不限制語言數量。

為簡化敘述，後續我們對預設/原語言之外的其他語言簡稱為「第二語言」。

語言顯示

translatepress-general-language-path
  • Native language name
    語言名稱是否要用母語顯示 (選 Yes)，或是統一用英文顯示 (選 No)。以西班牙語來說，就是 Español 與 Spanish 的差別。
  • Use a subdirectory for the default language
    預設/原語言頁面是否要在網址中以子目錄的方式顯示其語言代稱。對已經經營一段時間的網站來說，選擇 No 對原網站 SEO 的影響最小，原語言的內容、網址都不會受到影響。
  • Force language in custom links
    第二語言頁面中插入的自訂 (內部) 連結，是否要直接改寫加入第二語言的語言路徑。建議選 Yes，可以免除額外翻譯內部連結的工作。

語言切換器

TranslatePress 提供了三種在頁面加入語言切換器的方式。

translatepress-general-language-switcher
  • Shortcode
    使用短代碼 [language-switcher] 或 Language Switcher 區塊，可以在任何頁面、文章、側邊欄插入語言切換器。
  • Menu item
    在選單設定中，選擇 Language Switcher 項目，可以按照需求將語言選項加入到任意選單中。
  • Floating language selection
    浮動語言切換框，可以選擇樣式 (深色、淺色)、位置 (上右、上左、下右、下左)。
translatepress-language-switcher-block
Language Switcher 區塊
translatepress-menu-language-switcher
Language Switcher 選單項目

每一種語言切換器都有五種顯示語言的方式可供選擇：

  • Full Language Names – 語言全名，如「繁體中文」、「English」
  • Short Language Names – 語言代稱，如「ZH」、「EN」
  • Flags with Full Language Names – 國旗加上語言全名
  • Flags with Short Language Names – 國旗加上語言代稱
  • Only Flags – 只顯示國旗
translatepress-language-switcher-options

選單還提供了第六種 Full Language Names No HTML，以非 HTML 的方式顯示語言全名。

如果短代碼語言切換器、浮動語言切換框的樣式與佈景主題衝突而無法正常運作，官方還有提供 PHP 代碼可將語言切換器的樣式改為使用舊版的樣式。

舉例來說，使用 Code Snippets 外掛 WPCodeBox 將以下 PHP 代碼嵌入網站就能改為使用舊版的樣式。

// Use old styling for floating language switcher
add_filter('trp_old_css_styling_for_floater_ls', '__return_true' );
// Use old styling for shortcode language switcher
add_filter('trp_old_css_styling_for_shortcode_ls', '__return_true' );

逐步翻譯規劃

這部分對於已經經營一段時間的網站來說相當重要。

大多數多語系外掛在安裝設定完成後，對於尚未翻譯完成的頁面，頁面上依然會顯示語言切換器，當訪客切換到第二語言時，則會自動導向至首頁 (所以首頁是翻譯的第一步)。

對 TranslatePress 來說，可以利用設定頁面 Advanced 頁籤 > Exclude strings > Do not translate certain paths 選項中的：(如下圖)

  • Translate Only Certain Paths – 只翻譯指定網址

並逐一將各個頁面的第二語言翻譯完，這樣一來，清單之外的頁面就不會顯示在前端 (不會顯示語言切換器、無法存取頁面)，也不會顯示在 sitemap 中。

translatepress-advanced-translate-only-certain-paths

開始翻譯

翻譯文字

使用 TranslatePress 翻譯網站上的頁面、文章相當直覺，登入帳號後瀏覽相關頁面就能在最上方工具列中找到 Translate Page。

translatepress-translate-page

點擊 Translate Page 就能進入翻譯的前端介面。

翻譯的步驟相當簡單：

  1. 移動滑鼠到想翻譯的文字上，點擊左上方顯示的編輯圖示
  2. 在左邊的翻譯介面「To 第二語言」欄位中輸入第二語言的翻譯
  3. 翻譯完成後點擊 Save 儲存翻譯結果
translatepress-translate-strings

此外，直接點擊原語言下的文字選單 (下圖的 ①)，就會將頁面中外掛偵測到的可翻譯文字按類別區分顯示，方便使用者直接選取進行翻譯。

翻譯時可以利用快捷鍵讓翻譯過程更順暢：

  • Ctrl + S：儲存目前正在翻譯的文字
  • Ctrl + ALT + Z：放棄目前正在翻譯的編輯紀錄
  • Ctrl + ALT + → (右鍵)：前往下一個文字字串
  • Ctrl + ALT + ← (左鍵)：回到上一個文字字串
translatepress-translate-from-string-list

對於網站上佈景主題、外掛所使用到的文字也能從 String Translation > Gettext 下找到。

可以根據語言、Domain 進行篩選，方便使用者快速找到尚未翻譯完成的文字。

translatepress-string-translation-gettext

翻譯圖片 (替換圖片)

對不同文化、語言的閱讀者來說，會需要不同的圖示意象才能增加讀者的同理與帶入感，與翻譯文字的步驟相似：

  1. 移動滑鼠到想翻譯的圖片上，點擊左上方顯示的編輯圖示
  2. 在左邊的翻譯介面「To 第二語言」欄位中選取第二語言要使用的圖檔路徑
  3. 完成後點擊 Save 儲存結果
translatepress-translate-images

檢查翻譯結果

完成翻譯、儲存結果之後，開啟瀏覽器瀏覽相關頁面 (如果使用無痕視窗，記得要清除快取)。

接著，將語言切換為第二語言就能看到翻譯的成果了。

翻譯注意事項

郵件內容 (eq. WooCommerce)

需要思考網站上透過表單或其他外掛寄出郵件的內容，是否可以根據訪客瀏覽器語言條件式寄出不同語言內容的郵件。

這部分可以利用 FluentCRM 或 SureTriggers 自動化工作流外掛進行處理。

WooCommerce 的通知郵件有相當完整的支援，會根據訪客的登入狀態、「偏好語言」決定通知郵件的語系，可以從 String Translation > Emails 頁籤找到對應的郵件內容進行翻譯。

Force language in custom links 設定為 Yes 後，在第二語言頁面中所有內部連結都會被自動轉換為 domain.com/lang_slug/ 下的網址結構，如果有網址使用特殊的方式插入頁面使得 TranslatePress 無法自動轉換，可以使用 PHP 代碼進行轉換。

相反的，如果有連結不需要被處理，可以在插入連結時於網址後方加入 #TRPLINKPROCESSED 字串。

TranslatePress 支援在第二語言頁面翻譯外部連結，這是因為不同語言有可能需要連到對應的不同語言外部連結 (如 Wikipedia)，但對部分外部連結可能不會有這樣的需求 (例如聯盟行銷、社群媒體等)，此時可以利用 PHP 代碼將網域網址加到排除清單中。

條件顯示特定語言內容

如果需要按照語言顯示不同的內容，可以利用 Conditional Shortcode 或區塊編輯器中 TranslatePress Language Restriction 功能，畢竟 TranslatePress 是採用前端讀取第二語言內容的方式呈現多語言網站內容，本質上類似於網站內容的本地化翻譯，而非如同 WPML、Polylang 是對每一個頁面、文章都產生實際的第二語言版本頁面、文章。

translatepress-language-restriction

特定頁面對應不同語言如果需要提供特定的內容，可以透過這個語言限制功能達成。

如果遇到有無法翻譯的內容，或許可以利用這個功能根據語言顯示特定內容的方式來處理。

刪除冗餘翻譯

有時候我們會更新修改舊文章、頁面的內容，如果原語言內容受到改變，翻譯雖然已經儲存在資料庫的 _trp_* 表格中，但舊翻譯文字不會再出現在翻譯頁面中，我們需要對新增的文字重新進行翻譯。

那要如何刪除已失效的翻譯文字以減少資料庫的負擔呢？我們反映給 TranslatePress 客服後，官方已於 2.9.4 版加入可以刪除翻譯字串的新功能了。

translatepress-string-translation-delete-strings

排除錯誤

如果遇到翻譯好的文字沒有出現在第二語言頁面中，從設定頁面 Advanced 頁籤 > Troubleshooting 中勾選 Fix missing dynamic content，如果還是沒出現，聯絡客服。

SEO 強化 – 網站地圖 Sitemap

根據 Google 的說明，搜尋引擎在抓取多語系網站地圖 (Multilingual Sitemap) 時，支援在頁面 HTML 中、HTTP 標頭或 Sitemap 中提供 hreflang 標記，也允許混合使用，但官方建議保持一種主要實作方式，以降低管理複雜度與出錯風險。

TranslatePress 免費版會在各個語言的頁面、文章中加入 HTML hreflang 標記，然而，為了讓搜尋引擎能夠更全面的抓取各語言內容，在 Sitemap 中列出第二語言網址能進一步提升網站的國際化曝光與 SEO 效果。

只要確保 Sitemap 中列出的第二語言網址與各語言頁面 HTML 中的 hreflang 標記完全一致，而且各個頁面都正確設定 Canonical 與 hreflang。

  • Canonical
    也就是每個語言版本的頁面都在 <head></head> 區塊內設定自己的 Canonical 標籤，指向當前頁面的網址。
    例如：英文版頁面設定 Canonical 指向英文版頁面網址 https://example.com/en/page/，中文版頁面則設定 Canonical 指向中文版頁面網址 https://example.com/zh/page/。
    一般只要在 wp-admin > Settings > Reading > Search engine visibility 中設定讓搜尋引擎檢索網站，系統就會自動生成 robots meta 標籤以及預設與頁面網址相同的 Canonical，無須煩惱額外設定。
  • hreflang
    每個語言都要具備所有語言的語言標記 hreflang 與替代頁面網址，如果兩個網頁並未同時指向對方，系統即會忽略標記。這是為了不讓其他網站任意建立標記並冒稱其網頁是你的網頁的替代版本。
    TranslatePress 會自動將標記加到頁面 HTML 中，相關設定在設定頁面 Advanced 頁籤 > Miscellaneous options 中可以找到。

如果要將第二語言的網址顯示在 Sitemap 中，需要 SEO Pack add-on (包含在任一種付費方案中)，目前支援的 SEO 外掛有：

  • Yoast SEO
  • Rank Math
  • SEOPress
  • All in One SEO Pack
  • Squirrly SEO

結語

建立 WordPress 多語系網站並不困難，但要能夠有良好的 SEO 表現，我們需要透徹的了解多語系外掛提供的功能有哪些。

根據這些功能，進一步展開翻譯規劃，並確認網站的相關功能 (需要翻譯的內容) 都包含在規畫之內。

如果你也想要建立 WordPress 多語言網站，透過這個完整的 TranslatePress 多語言外掛教學，你一定可以順利地將自己的網站從單一語言轉換為支援多國語言的網站。

有任何問題也歡迎填寫聯絡表單與我直接討論，或是加入我們的臉書社團、Discord 社團一起討論唷！

【新課程預告】
即將推出 TranslatePress 多語系外掛的教學，為了初學者與中小型網站的站長，我們特地開發了能將第二語言網址加入網站地圖的輕量外掛，這些都在 Academy Q 線上學習網站，敬請期待！

相關文章

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *