嗨~大家今天過得好嗎?
小編最近剛好遇到了客戶要求要翻譯外掛的需求,趁這個剛好天時、地利、人和的時候,把外掛翻譯的流程,做了一個紀錄,也一起分享給大家,希望可以幫助到正好有這個需求的你:)
此次我們將以「woocommerce-social-login」這個外掛作為翻譯的範例。
下載外掛安裝完後,發現外掛都是英文的文字介面,雖然現在顯示的是後台,但是也代表著前台使用者在觀看的時候,其實文字也都是英文的,下載的外掛沒有提供中文翻譯檔,那該怎麼辦呢?
![](https://cdn.innovext.com/live/wp-content/uploads/2019/07/WordPress-translate-1-1024x838.png)
其實我們也可以到外掛的翻譯資料夾中,看看是否有支援中文翻譯。
(嗯,看起來是沒有支援中文了)
![](https://cdn.innovext.com/live/wp-content/uploads/2019/07/WordPress-translate-2.jpg)
既然我們發現外掛裡沒有中文的翻譯檔,那麼就自己來建立一個中文翻譯檔吧!
首先,我們需要以下一些工具
- 翻譯工具:Poedit
- 翻譯檔案:Pot檔
你可能會疑惑什麼是 pot 檔呢?
pot 檔是這個外掛語言的基礎,我們可以透過它來建立不同語系的翻譯檔。
WordPress 本身在判斷使用語言的檔案是 mo 檔案,因此我們需要透過翻譯工具來載入 pot 檔案,翻譯工具會顯示哪些字串是可以被我們所翻譯成不同的語系,接著我們可以儲存為不同語系的 po 檔。
等待翻譯完成後,為了讓 WordPress 可讀取得到我們翻譯後的文字,我們需要把 po 檔,透過翻譯工具編譯成 mo 檔,這樣 WordPress 自然而然就可以讀取到我們翻譯之後的文字囉!
那麼,接下來我們就要開始展開翻譯的旅程囉!
首先,我們需要先下載並安裝翻譯工具「Poedit」,接著我們打開 Poedit 翻譯工具之後,會來到以下的畫面
![](https://cdn.innovext.com/live/wp-content/uploads/2019/07/WordPress-translate-3.jpg)
點擊「建立新譯文」,但之後您想要修改既有的 po 檔的話,那可以直接點選「編輯譯文」進行翻譯的修正。
但因為此次我們是重新建立一個中文翻譯檔案,所以必須透過加入 pot 檔,然後建立新的 po 檔來做中文翻譯。
![](https://cdn.innovext.com/live/wp-content/uploads/2019/07/WordPress-translate-4.jpg)
我們把 pot 檔載入進來後,首先會出現請您選擇翻譯的語言,我們可以選擇中文(台灣,繁體),或是保留原先設定的「zh_TW」也可以噢!
![](https://cdn.innovext.com/live/wp-content/uploads/2019/07/WordPress-translate-5-1024x807.png)
接著,我們會看到以下圖片的畫面,小編這邊用幾個顏色圈選來說明:
- 紅色區塊:主要所有可翻譯的字串都集中在這邊,我們可以在這個區塊選取想要翻譯的文字。
- 橘色區塊:這邊會顯示您目前所選取的文字。
- 藍色區塊:此為翻譯區塊,我們可以透過橘色區塊的來源文字,將翻譯文字填寫在藍色區塊中。(備註:請記得!如果有標點符號結尾的話,一定要有標點符號結尾才算完成哦!例如:英文的「.」結尾時,中文就必須要有「。」結尾,這樣才算翻譯成功。
- 紫色區塊:這邊會依據您所選擇的來源文字,而提供給您參考相關的翻譯文字,您可以透過點擊紫色區塊適合您的翻譯文字,或是直接在藍色區塊輸入您想翻譯的文字,又或者是可以先選擇右側紫色區塊的翻譯文字,之後再回到藍色區塊做微調,這是是非常有彈性的哦!
- 綠色區塊:提供注意事項給您,這邊告訴您的來源文字中「%1$s」、「%2$s」,絕大多數是代表著變數,舉例來說:您的購物車內有 2 個商品,其中這個「2」在翻譯的時候,就會使用變數來代替(畢竟每個顧客的購物車內的數量,不一定都會是 2 ),因此我們在翻譯的時候,要記得把變數一起寫進去哦!
![](https://cdn.innovext.com/live/wp-content/uploads/2019/07/WordPress-translate-6-1024x737.jpg)
但或許你又會想說,如果翻譯字串有成千上百個,但我只是想要翻譯比較常用的那幾個,這樣我該怎麼翻譯呢?
其實,我們可以透過搜尋的功能,來針對特定幾個我們打算翻譯的文字,來做中文翻譯即可。
![](https://cdn.innovext.com/live/wp-content/uploads/2019/07/WordPress-translate-7.jpg)
舉例來說,假如我們想要翻譯「Need help setting up and configuring Facebook? Read the docs」這段文字,那麼我們可以這樣做:
- 我們可以透過「Coommand + F」或是「Ctrl + F」來進行搜尋
- 接著我們可以透過一些設定,來縮小範圍。像是這段文字會是出現在原文中,並且排除大小寫的限制。
- 最後,我們可以在譯文的區塊,輸入相關適合的翻譯文字,請記得,如果有使用到一些特殊的符號,也要一起寫進去譯文裡面哦!
![](https://cdn.innovext.com/live/wp-content/uploads/2019/07/WordPress-translate-8.png)
![](https://cdn.innovext.com/live/wp-content/uploads/2019/07/WordPress-translate-12.jpg)
來源文字中的「%1$s」、「%2$s」的變數符號,在翻譯的時候,要記得把它們一起寫上去哦!
![](https://cdn.innovext.com/live/wp-content/uploads/2019/07/WordPress-translate-10.jpg)
請記得,如果原文是標點符號結尾,要記得翻譯的時候,也要用標點符號作為該翻譯文字的結尾哦!
當您完成了您的中文翻譯時,我們就可以先把這個 po 檔案存檔。
還記得前面我們曾說到的,WordPress 只會讀取 mo 檔,因此我們需要把現在翻譯好的 po 檔,編譯成 mo 檔。
那麼該如何編譯成 mo 檔呢?
- 我們找到 poedit 上排的工具列
- 「檔案」>「編譯成 mo 檔」
- 請將 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