W e b I n s i g h t s .

WordPress 教學 - 如何翻譯外掛

WordPress 教學 - 如何翻譯外掛

嗨~大家今天過得好嗎?

小編最近剛好遇到了客戶要求要翻譯外掛的需求,趁這個剛好天時、地利、人和的時候,把外掛翻譯的流程,做了一個紀錄,也一起分享給大家,希望可以幫助到正好有這個需求的你:)

此次我們將以「woocommerce-social-login」這個外掛作為翻譯的範例。

下載外掛安裝完後,發現外掛都是英文的文字介面,雖然現在顯示的是後台,但是也代表著前台使用者在觀看的時候,其實文字也都是英文的,下載的外掛沒有提供中文翻譯檔,那該怎麼辦呢?

其實我們也可以到外掛的翻譯資料夾中,看看是否有支援中文翻譯。
(嗯,看起來是沒有支援中文了)

大部分的翻譯檔,大多會放在 languages 資料夾中(但也會有例外),如上圖所示,我們是在 外掛 > i18n > languages,進而才找到我們要翻譯的檔案。如果您點擊外掛資料夾後,沒有發現上述這些資料夾的話,可以多找看看外掛內其他的資料夾(像是可以找看看是否有 i18n、lang、l10n 這些資料夾),是否有相關的 .po 或是 .pot 檔案囉!

既然我們發現外掛裡沒有中文的翻譯檔,那麼就自己來建立一個中文翻譯檔吧!

首先,我們需要以下一些工具

  • 翻譯工具:Poedit
  • 翻譯檔案:Pot檔

你可能會疑惑什麼是 pot 檔呢?
pot 檔是這個外掛語言的基礎,我們可以透過它來建立不同語系的翻譯檔。

WordPress 本身在判斷使用語言的檔案是 mo 檔案,因此我們需要透過翻譯工具來載入 pot 檔案,翻譯工具會顯示哪些字串是可以被我們所翻譯成不同的語系,接著我們可以儲存為不同語系的 po 檔。

等待翻譯完成後,為了讓 WordPress 可讀取得到我們翻譯後的文字,我們需要把 po 檔,透過翻譯工具編譯成 mo 檔,這樣 WordPress 自然而然就可以讀取到我們翻譯之後的文字囉!

那麼,接下來我們就要開始展開翻譯的旅程囉!


首先,我們需要先下載並安裝翻譯工具「Poedit」,接著我們打開 Poedit 翻譯工具之後,會來到以下的畫面

點擊「建立新譯文」,但之後您想要修改既有的 po 檔的話,那可以直接點選「編輯譯文」進行翻譯的修正。

但因為此次我們是重新建立一個中文翻譯檔案,所以必須透過加入 pot 檔,然後建立新的 po 檔來做中文翻譯。

我們把 pot 檔載入進來後,首先會出現請您選擇翻譯的語言,我們可以選擇中文(台灣,繁體),或是保留原先設定的「zh_TW」也可以噢!

接著,我們會看到以下圖片的畫面,小編這邊用幾個顏色圈選來說明:

  • 紅色區塊:主要所有可翻譯的字串都集中在這邊,我們可以在這個區塊選取想要翻譯的文字。
  • 橘色區塊:這邊會顯示您目前所選取的文字。
  • 藍色區塊:此為翻譯區塊,我們可以透過橘色區塊的來源文字,將翻譯文字填寫在藍色區塊中。(備註:請記得!如果有標點符號結尾的話,一定要有標點符號結尾才算完成哦!例如:英文的「.」結尾時,中文就必須要有「。」結尾,這樣才算翻譯成功。
  • 紫色區塊:這邊會依據您所選擇的來源文字,而提供給您參考相關的翻譯文字,您可以透過點擊紫色區塊適合您的翻譯文字,或是直接在藍色區塊輸入您想翻譯的文字,又或者是可以先選擇右側紫色區塊的翻譯文字,之後再回到藍色區塊做微調,這是是非常有彈性的哦!
  • 綠色區塊:提供注意事項給您,這邊告訴您的來源文字中「%1$s」、「%2$s」,絕大多數是代表著變數,舉例來說:您的購物車內有 2 個商品,其中這個「2」在翻譯的時候,就會使用變數來代替(畢竟每個顧客的購物車內的數量,不一定都會是 2 ),因此我們在翻譯的時候,要記得把變數一起寫進去哦!
備註:此次的範例比較特別,這個長得像變數的符號,其實分別代表的 html 中 <a> tag 的開關標籤,但就還是依照前述所說的,有變數的時候,記得在翻譯時,也要把他們加上去哦!

但或許你又會想說,如果翻譯字串有成千上百個,但我只是想要翻譯比較常用的那幾個,這樣我該怎麼翻譯呢?

其實,我們可以透過搜尋的功能,來針對特定幾個我們打算翻譯的文字,來做中文翻譯即可。


舉例來說,假如我們想要翻譯「Need help setting up and configuring Facebook? Read the docs」這段文字,那麼我們可以這樣做:

  1. 我們可以透過「Coommand + F」或是「Ctrl + F」來進行搜尋
  2. 接著我們可以透過一些設定,來縮小範圍。像是這段文字會是出現在原文中,並且排除大小寫的限制。
  3. 最後,我們可以在譯文的區塊,輸入相關適合的翻譯文字,請記得,如果有使用到一些特殊的符號,也要一起寫進去譯文裡面哦!

來源文字中的「%1$s」、「%2$s」的變數符號,在翻譯的時候,要記得把它們一起寫上去哦!

請記得,如果原文是標點符號結尾,要記得翻譯的時候,也要用標點符號作為該翻譯文字的結尾哦!

當您完成了您的中文翻譯時,我們就可以先把這個 po 檔案存檔。

還記得前面我們曾說到的,WordPress 只會讀取 mo 檔,因此我們需要把現在翻譯好的 po 檔,編譯成 mo 檔。

那麼該如何編譯成 mo 檔呢?

  1. 我們找到 poedit 上排的工具列
  2. 「檔案」>「編譯成 mo 檔」
  3. 請將 po & mo 檔,複製一份到以下資料夾的路徑:「wp-content」> 「languages」> 「plugins」資料夾中,而非放在原先的 plugin 資料夾裡哦!如果放在原先的外掛資料夾裡,之後在外掛更新的時候,會把之前辛辛苦苦翻譯的檔案給洗掉的。

這邊要注意一下關於檔案的命名方式,請留意底線的使用方式!
正確的命名方式:[外掛名稱-語言].副檔名

  • woocommerce-social-login-zh_TW.po
  • woocommerce-social-login-zh_TW.mo

請不要使用 [外掛名稱_語言].副檔名,這樣的底線命名方式,WordPress 無法辨識哦!注意!以下是錯誤命名方式:

  • woocommerce-social-login_zh_TW.po
  • woocommerce-social-login_zh_TW.mo

文章最後更新於 : 2022/07/04