視覺化、好操作的多語系外掛 TranslatePress

TranslatePress 擁有直覺的操作介面，在網站前端即可進行網站翻譯，還可以與 WooCommerce 、佈景主題、編輯器一起使用，快速地建置出多語系網站。

TranslatePress 官方網站：https://translatepress.com/

利益揭露：文章中的連結可能為推廣連結，透過此連結購買產品或服務，我將得到廠商的推廣獎金；但不論是直接或間接購買，皆無需負擔額外的費用。

TranslatePress 免費版與付費版的差異

免費版的 TranslatePress 僅能讓網站新增一個語系，如原本只有中文的網站，可以透過 TranslatePress 新增一個英文語系的網站。
付費版的 TranslatePress 會有許多延伸功能，比較常用的功能如：

• 可以在一個網站新增兩個以上的語系
• 針對不同語系設定 SEO
• 自動偵測使用者瀏覽器設定或 IP 顯示對應語系
• 透過後台外觀 / 選單設定不同語系顯示不同的選單項目
• 免費版和付費版詳細的差異可以參閱 Translation Features

多語系網站建置案例
專案名稱：Lih Song
網站使用 TranslatePress 延伸功能：
SEO Pack、Automatic User Language Detection、Navigation Based on Language

安裝與設定

安裝 TranslatePress

至後台 外掛 / 安裝外掛 / 搜尋外掛 / 輸入 TranslatePress，找尋到 TranslatePress 後安裝並啟用它。

Translate Multilingual sites – TranslatePress

設定 TranslatePress

安裝完成後，至後台 設定 / TranslatePress，在這裡可設定多語系以及預期顯示的方式。

• Default Language：網站預設的語系，一般不會調整到。
• All Languages：新增語系，Code 可以用來設定 CSS、Slug 即是多語系網站呈現的網址。
• Native language name：必須要調整為『 Yes 』，多語系選單才會在選單顯示對應的語言，如英文將顯示為 English。
• Language Switcher：可以控制多語系選單要呈現的方式，如：顯示為縮寫、顯示國旗等。
• Floating language selection：預設為勾選，將會在前台右下角顯示多語系選單。

製作多語系切換選單

至後台 外觀 / 選單 / 將 Language Switcher 內顯示的語系新增至選單中。

因為我有安裝 TranslatePress 延伸功能 Navigation Based on Language，所以在選單中還可以額外勾選要在哪個語系出現，目前的設定為在中文語系只顯示切換為英文；在英文語系只顯示切換為中文。

編輯網站語系

最快速直覺的方式是在前台上方點擊 Translate Page，即可進入編輯畫面。

進入編輯畫面後，如同官方網站所展示的圖片，只要點擊想要編輯的區塊就可以進行翻譯，在這裡可以善用 Previous 以及 Next 按鈕快速選到上一個或下一個要編輯的區塊，此外可以透過上方下拉選單快速檢視並選定欲翻譯的文字。
翻譯完成後，記得點選最上方按鈕 Save translation，才會儲存剛剛設定完成的文字。

特定語系顯示 / 隱藏元素

在步驟二有提到，新增語系後產生的 Code 可以用來設定 CSS，其 CSS 格式如下：

.translatepress-en_US {}
.translatepress-zh_TW {}

因此，我們可以利用這個 CSS，在特定的語系中顯示或隱藏元素：

/*在中文語系隱藏 about-title 這個元素*/
.translatepress-zh_TW .about-title {
    display: none !important;
}

TranslatePress 在 Elementor 頁面編輯器的設定

在 TranslatePress 官方文件有提到與 Elementor 彼此間的搭配，選取指定元素後選擇『 進階 』，即有對應的項目可以控制元素在不同語系是否要顯示或隱藏。

若您是第一次接觸 Elementor，可以先閱讀：WordPress 頁面編輯器 – Elementor 教學 (初級) 🙂

Elementor Website Builder

• Restrict by Language：限制在選定語系出現。
• Exclude from Language：在選定語系排除。

透過上述設定，就可以在不同語系顯示不同的元素，如：對於英文網站而言是不需要顯示中文網站的徵才資訊，可以藉由此設定，將徵才資訊只顯示在中文網站。

更改多語系選單預設顯示的名稱

在步驟二提到 Native language name 調整為『 Yes 』，多語系選單會在選單顯示對應的語言，如英文將顯示為 English；但如果希望 English 只顯示為 EN，我們需要透過修改 PHP，建議搭配使用 Code Snippets 來達成。

<?php

add_filter( 'trp_beautify_language_name', 'trpc_change_language_name', 10, 3 );
function trpc_change_language_name ($name, $code, $english_or_native ){
if ( $code == 'en_US' ){                // 更改為該語系的 code
return 'EN';     // 更改為你期望顯示的名稱
}
if ( $code == 'zh_TW' ){                // 更改為該語系的 code
return '中';     // 更改為你期望顯示的名稱
}
return $name;
}

TranslatePress 的設定非常簡單且視覺化、容易操作，在製作多語系網站時，使用 TranslatePress 一直是我的首選，有興趣的話可以從免費版體驗看看，在依照自己的需求考慮是否要購買延伸功能。