如何製作 WordPress 多國語言網站?(使用 TranslatePress 翻譯外掛)

如何製作 WordPress 多國語言網站?(使用 TranslatePress 翻譯外掛)

這是一篇「 WordPress多國語言 」網站(語系),要如何進行翻譯+製作的完整教學。

我會教學 TranslatePress 這款優質的 WordPress 翻譯外掛,完成後就能在選單進行語言切換,實現多國語系網站的效果。更多 多國語系外掛推薦

不論是 個人品牌網站公司形象網站線上購物網站 等 ..,都能順利的進行多語系切換,滿足自己或是客戶的需求。

好,話不多說!我們來看能學到些什麼。


1. TranslatePress 是什麼?

WordPress多國語言 :TranslatePress 外掛教學
TranslatePress 外掛教學

TranslatePress 是一款輕量級的「 WordPress多國語言 」外掛,有提供免費版使用。詳細可參考 TranslatePress 外掛教學

提供 200 多種國家語言翻譯,支援多種 主流頁面編輯器、不同的佈景主題、WooCommerce 線上商店 ..,幫助你進行全面翻譯。

如果你只是想要簡單的多國語系功能,這 TranslatePress 會很適合你,因為它不像 WPML 那樣上手難度高(加上 WPML 功能很多,網站會變比較重)。

WordPress多國語言外掛 :翻譯 Elementor 頁面
WordPress多國語言外掛 :翻譯 Elementor 頁面

安裝後基本上也沒什麼需要設定,大概就是即裝即用的感覺,至於編輯畫面採用的是可視化編輯器,這對許多站長來說,操作起來非常簡單。

TranslatePress 有什麼優缺點呢?

TranslatePress 有許多優點,這邊列出來與大家分享(用免費版角度)。

  • 入門非常簡單,也不會和其他外掛 or 主題有衝突問題。
  • 支援頁面編輯器、支援 WooCommerce 線上商店翻譯,且無需安裝任何額外外掛(相比 Polylang 需安裝額外的外掛,才有辦法支援)。
  • 使用可視化編輯器直接進行網站翻譯,翻譯起來速度快(跟頁面編輯器,編輯文字的方式一樣)。
  • 只需維護一份翻譯頁面,未來維護容易(相比 Polylang 不同語言的頁面都需各別維護,語言一多會很雜)。
  • 翻譯文章的 SEO 優化良好,提供頁面編輯、描述、社交訊息等 ..,並支援流行的 SEO 優化外掛(相比 GTranslate 雖然支援快速翻譯,但幾乎沒有 SEO 效果)。
  • 支援不同語系的圖片切換,例如可在中文版&英文版放置不同的圖片。

如果要說 TranslatePress 缺點部分的話,可能是免費版只能製作雙語切換(三個以上語言,需用升級方案)。

TranslatePress 有支援自動翻譯功能嗎?

TranslatePress 免費版有整合 Google Translate API(需向 Goolge 申請憑證),可幫助實現自動翻譯功能。

如果擔心自動翻譯得不夠理想,還能用手動翻譯進行微調(TranslatePress 支援手動+自動翻譯綜合搭配)。

整體來說,TranslatePress 的易用性和完整性,是非常適合拿來做多國語系網站的武器!


2. 安裝 TranslatePress 翻譯外掛

這章節開始,我們就來實際使用 TranslatePress 這款外掛啦!

首先,前往 WordPress 後台 > 安裝外掛,搜尋 TranslatePress 進行安裝+啟用。

WordPress多國語言 :安裝 TranslatePress 外掛
WordPress多國語言 :安裝 TranslatePress 外掛

3. TranslatePress 基本設定

前往 WordPress 設定 > TranslatePress,你可參考我的設定(依照自己需求調整),這裡是示範中英雙語版本。

WordPress多國語言 :TranslatePress 基礎設定
TranslatePress 基礎設定
  • Default Language 預設語言:選擇繁體中文,預設會用這個語言當基準(建議和 WordPress 設定 > 一般,網站語言的值一致)。
  • All Languages 所有語言:TranslatePress 免費版可雙語切換(如果超過 2 種以上語言,需使用進階版),選擇你要的語言點 Add 即可,然後拖曳可排順序。Slug 是網址 id 的部分,用預設值即可。
  • Native language name 母語名稱:如果希望語言用母語顯示,請選擇 Yes。否則將會用英文顯示。
WordPress多國語言 :TranslatePress 基礎設定
TranslatePress 基礎設定

Language Switcher 語言切換器

TranslatePress 有提供 3 種方式,可以在網站上顯示語言切換器。

  • Shortcode 短代碼:基本上可在網站任何位置呈現,使用 [language-switcher] 短代碼
  • Menu item 選單:可放在任一選單上
  • Floating language selection 浮動語言框:預設好像是開啟的,如果不想使用的話不要勾選。

至於語言選項的顯示樣式,也有多種樣式可選擇。

  • Full Language Names:完整語言
  • Short Language Names:簡短語言
  • Flags with Full Language Names (default):國旗+完整語言
  • Flags with Short Language Names:國旗+簡短語言
  • Only Flags:只有國旗

簡單來說,TranslatePress 基本上能讓你在網站不同地方,加上你喜愛的語言切換器樣式。

好囉!設定完成後,點擊儲存就可以了~


4. 如何在網站加上語言切換器?

TranslatePress 基本設定完成後,我們來在網站上添加「 語言切換器 」,這樣訪客才能自行切換語言。下面我會示範 2 種添加方法。

在選單上添加

前往 WordPress 外觀 > 選單,會看到多了 Language Switcher(語言切換器)的選項,把想要放入的語言新增到選單。更多 WordPress 基本選單 教學。

WordPress多國語言 :在選單上新增語言切換器
在選單上新增語言切換器

如果網站想直接顯示各國國旗,Current Language 這個就不要加,然後不要設父子關係。(至於我上圖的編排方式,會變成用下拉選單的方式呈現)

好囉!前往 WordPress 前台看一下,果然雙語切換功能就出現了!

WordPress多國語言 :選單顯示語言切換器
選單顯示語言切換器

使用短代碼添加

在想要添加語言切換的地方,加上 [language-switcher] 短代碼就可以了。

這邊示範在網站側邊欄,加上語言切換功能。前往 WordPress 外觀 > 小工具,找到「 自訂 HTML 」並加入到選單中。

WordPress多國語言 :使用自訂 HTML 工具
使用自訂 HTML 工具

輸入 [language-switcher] 代碼,然後儲存。

WordPress多國語言 :輸入語言切換器的短代碼
輸入語言切換器的短代碼

前往網站前台,看一下成果。

Good!語言切換器出現囉,如果想更換顯示樣式,到 TranslatePress 設定調整一下就好了(上面章節有提到)。

WordPress多國語言 :側邊欄的語言切換出現囉~
側邊欄的語言切換出現囉~

5. 一般頁面翻譯

接下來,開始進入到好玩的地方啦!我們來看一下 TranslatePress 如何進行文章翻譯。

TranslatePress 採用的是視覺編輯器的方式,想要修改什麼文字,就點擊相對應的 Icon 進行編輯即可。

前往網站前台,在你想要翻譯的頁面,點擊 Translate Page。

WordPress多國語言 :點擊 Translate Page 進行翻譯
點擊 Translate Page 進行翻譯

翻譯網站文字

這裡示範如何翻譯成英文。

首先將語言介面,切換成你準備要翻譯的語言(English) > 將滑鼠移至需翻譯的文字,點擊筆 Icon 進行修改 > 找到要翻譯國家的,並輸入翻譯後的文字 > 進行儲存。

WordPress多國語系 :使用視覺化編輯器,進行語言翻譯
使用視覺化編輯器,進行語言翻譯

小技巧分享:使用快捷鍵 Ctrl+S(Window 系統)或是 Command+S(Mac 系統),就能快速儲存唷(否則系統會提醒你)!

如此一來,就完成了第一個文字翻譯啦!當點擊儲存按鈕後,應該也會看到右側的視覺編輯區,文字已經改為你翻譯後的英文了!

接下來其他的頁面文字,也依照這個流程逐步翻譯即可。

額外分享:

這邊分享 DeepL 翻譯軟體,個人認為目前比 Google 翻譯的更加精準,如果中翻英的話可以試玩看看~

但如果你是要英文翻譯成中文的話,目前 DeepL 只支援簡體中文,如果要繁中的話可能要到 Google 翻譯再轉一次。

動態文字&通用文字翻譯

TranslatePress 支援動態文字翻譯,就是欄位中可能會看到一些代碼 or HTML 程式語法。

如果編輯的欄位是動態翻譯(或是通用文字)時,會看到筆的 Icon 顯示綠色,點擊即可編輯。

WordPress多國語言 :支援文字動態翻譯
WordPress多國語言 :支援文字動態翻譯

基本上編輯動態文字,就是把原語系預設代碼(或程式碼)拿來用,然後只進行文字的翻譯即可。

但有時候 TranslatePress 無法即時反應翻譯後的成果,但前往網站前台看是翻譯成功的。

翻譯網站圖片(更換圖片)

TranslatePress 支援在不同語言,切換不同的圖片效果。簡單來說,你可以在中文版或英文版頁面,呈現不同的網站圖片。

操作方式跟上面一樣。

WordPress多國語言 :針對不同語言,切換網站圖片
針對不同語言,切換網站圖片

這個功能也滿常用到,如果文章封面圖有中文字體,但在不同語言可能不想有中文字的圖,就可能會用到。

查看網頁翻譯成果

等待語言都翻譯完畢後,前往 WordPress 前台,把語言切換成英文。

就會順利看到英文版的網站,已經正式出現啦:)

WordPress多國語系 :英文版翻譯成果
英文版翻譯成果

6. Elementor 頁面編輯器翻譯

TranslatePress 支援多種主流的 頁面編輯器 翻譯,不論是 Elementor、Beaver Builder、Divi 等 ..,都能進行頁面翻譯。更多 Elementor 教學

下面我用 Elementor 的模板頁面,進行語言翻譯示範,操作方式跟上面的教學幾乎一樣,我就簡單帶過。

前往要翻譯的頁面,點擊 Translate Page。

WordPress多國語言 :點擊翻譯按鈕
點擊翻譯按鈕

點擊需翻譯的位置進行翻譯,完成後記得儲存。

WordPress多國語言 :翻譯 Elementor 頁面
翻譯 Elementor 頁面

這樣一來就完成了 Elementor 頁面的翻譯啦~

WordPress多國語系 :Elementor 頁面翻譯
Elementor 頁面翻譯

7. WooCommerce 購物網站翻譯

TranslatePress 有支援 WooCommerce 開店外掛,相關頁面的語言翻譯,像是商品頁面、購物車頁面、結帳頁面等 ..。

基本上翻譯的方法都跟上面一樣,但其中比較特別的是「 下拉選單內的語言翻譯 」要如何做?

WordPress多國語言 :下拉選單中的文字
下拉選單中的文字

前往翻譯後台,下圖的第一步驟選項,TranslatePress 會幫忙把當前可進行翻譯的文字都找出來。

我們先找到白色,然後進行翻譯+儲存,就可以順利翻譯成功囉:)

WordPress多國語系 :翻譯商品下拉選項中的文字
WordPress多國語系 :翻譯商品下拉選項中的文字

以上就是 WooCommerce 商店多國語系翻譯,其中可能會遇到的問題分享。


8. 網站自動翻譯設定

對於已經有大量文章的站長來說,如果沒有自動翻譯功能,那可能會要人命,因為光手動翻譯就不知道要搞多久。

TranslatePress 有提供兩種自動語言翻譯的配合軟體,分別是 Google Translate API(Google 體系)& DeepL。

Google Translate 或是 Deepl
Google Translate 或是 Deepl

整合 Google Translate API 是 TranslatePress 免費版就有的功能,至於 DeepL 是需升級 TranslatePress Pro 才有辦法使用。

為了幫大家的錢包做考量,這裡就用 Google Translate API 做教學。

備註:這裡提到的 Google Translate API 翻譯,跟一般使用的初階 Google 機器翻譯不同。

Google Translate API 是 Google 開發的仿人類神經翻譯,翻譯起來會更加準確,是進階的收費服務。

Step1:Google Translate API 費用了解&憑證申請

Google Translate API 語言翻譯
Google Translate API 語言翻譯

要使用 TranslatePress 自動翻譯功能,雖然不一定要升級 TranslatePress 方案(因為免費版就整合在一起了)。

但自動翻譯需要用到的 Google Translate API,這部分還是需向 Google 付點費用。

Google Translate API 是用字節進行費用計算,但好像每月有提供免費 500,000 個字節給你用,用超過才會收費的樣子。

這部分我沒實際操作過,如果有需求可再去了解一下。可參考 Google Translate 官網

備註:在 UTF-8 的編碼中,通常一個繁體中文約 3 個字節(部分是 4 個)。

至於如何申請 Google Translate API 憑證,請參考 TranslatePress 官網的 Google API 憑證申請教學,這裡就不多做敘述。

備註:強烈建議設置 Google 字節使用量以控制成本,上面給的教學連結,裡面也有教學。

完成後,你手上應該會有一組 Google Translate API 憑證了!這時用來啟用 TranslatePress 的 Google 自動翻譯功能。

Step2:在 TranslatePress 設定自動翻譯

前往 Automatic Translation(自動翻譯)> 開啟自動翻譯功能 > 選擇 Google Translate > 輸入剛申請好的 Google Translate API 憑證。

確認有無其他要調整的細節,完成後儲存即可。

WordPress多國語言 :使用 TranslatePress 自動翻譯功能
使用 TranslatePress 自動翻譯功能

Step3:開始自動翻譯&手動調整翻譯不流暢的地方

這時前往網站前台,TranslatePress 應該會幫你自動做翻譯了。

使用 TranslatePress 自動翻譯的好處是,你能把翻譯不流暢的地方,再進行手動翻譯修改(等於說是自動+手動翻譯搭配),這對於要求翻譯品質的來說,是最安全的做法。

再加上 TranslatePress 協助翻譯的文字,都是儲存在資料庫裡面,你的網頁是靜態頁面的呈現,這對 SEO 優化是良好的

反觀像是免費版 GTranslate 之類的動態翻譯外掛,就有點類似一般瀏覽器的自動翻譯功能,這對多國語系的 SEO 優化,是絲毫沒有一點幫助的(除非多國語系有沒 SEO 優化,對你不重要,那就很建議使用)。

而且免費版 GTranslate 也沒支援手動翻譯,這代表如果 Google 翻譯不好,只能摸摸鼻子了。

以上也是我為什麼會選這款 TranslatePress 多國語系外掛,跟大家分享的原因:)


常見問題

TranslatePress 是什麼?


TranslatePress 是一款輕量級的 「 WordPress多國語言 」外掛。

提供 200 多種國家語言翻譯,支援多種 主流頁面編輯器、不同的佈景主題、WooCommerce 線上商店 ..,幫助你進行全面翻譯。

如果你只是想要簡單的多國語系功能,這款外掛會很適合你,因為它不像 WPML 那樣上手難度高(加上 WPML 功能很多,網站會變比較重)。

TranslatePress 有哪些優點?


入門非常簡單、支援流行頁面編輯器、支援 WooCommerce 線上商店翻譯、可視化編輯器作業、只需維護一份翻譯頁面、SEO 優化良好、支援不同語系圖片切換等 ..

它不像 WPML 翻譯外掛,因為功能非常多會比較吃主機效能,這對沒這樣多需求的站長,會是比較大的負擔。

反觀 TranslatePress 小巧輕量,而且好上手!

TranslatePress 的 SEO 優化好嗎?


TranslatePress 採用的是靜態頁面翻譯,翻譯後的文字語言都會存在自己的資料庫中,這代表你也有機會在瀏覽器的不同國家,進行 SEO 排名優化。

與靜態翻譯相反的就是動態翻譯,像是 GTranslate 就是一個代表外掛,這和一般瀏覽器的自動翻譯功能完全一樣,翻譯文字是完全動態產生的,這對 SEO 絲毫沒有幫助。

TranslatePress 免費版能製作多少語系?


TranslatePress 免費版只支援雙語切換,如果有 3 個語言切換的需求,可能需升級為進階版。

或是使用 Polylang,它也是很熱門的多國語系外掛,但我認為操作起來沒有 TranslatePress 直覺(但我覺得是 3 個語言以上需求的站長,目前最好的解決方案)。

而且免費版 Polylang 對於頁面編輯器 or WooCommerce 商店支援不高,需再安裝額外外掛,才有辦法解決。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

Leave a Comment

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

Scroll to Top