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

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

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

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

TranslatePress visual translation interface 1
圖片來源:TranslatePress

TranslatePress 免費版與付費版的差異

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

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

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

安裝與設定

安裝 TranslatePress

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

translatepress 02 1

設定 TranslatePress

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

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

製作多語系切換選單

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

translatepress 04 1

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

編輯網站語系

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

translatepress 05 1

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

TranslatePress visual translation interface 2
圖片來源:TranslatePress

特定語系顯示 / 隱藏元素

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

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

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

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

TranslatePress 在 Elementor 頁面編輯器的設定

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

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

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

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

在步驟二提到 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 07
translatepress 08

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

延伸閱讀
相關標籤:
SHARE
分享在 facebook
分享在 twitter
分享在 linkedin
WRITTEN BY
Hend Chen
Hend Chen
專長於網頁設計 、UI 設計、品牌設計。我的英文名字取自中文名字發音,發音和手的英文 “hand“ 沒有差異,如果您正面臨網站設計的困擾,我很樂意成為協助您的那雙手!

目錄

Subscribe