網站自製國旗按鈕﹍一鍵轉換各國語言(Google翻譯工具)

最近的一個架站需求，案主需要翻譯網站文字的功能，點擊指定按鈕後，自動將網頁上的中文轉換為英文。這樣的作法，比起另外製作英文版網站，可省下不少成本與時間。 十多年前曾寫過「讓 Google 網頁翻譯工具以國旗超連結執行」，該篇的作法是點擊國旗連結後，另開頁面呈現翻譯效果，無法在同頁面直接翻譯。這麼多年過去了，想必可以有更好的作法。 經研究後，Blogger 網站很容易就能作到這件事，因為後台官方就提供了「翻譯」小工具，可直接安裝在往站上。本篇會說明如何利用這個小工具，經由自製的國旗圖示，點擊後立即將網頁內容翻譯成對應的語言。

(圖片出處: unsplash.com)

一、用 JS 執行翻譯的原理

1. Google 翻譯工具的缺點 Google 翻譯工具使用久了就會覺得麻煩，每次都得從下拉選單中找出想使用的語言，而偏偏選項密密麻麻，得浪費不少時間。 所以對於訪客比較友善的設計會是，將幾種常用的語言獨立出來，例如做成國旗圖案按鈕，放在頁面上顯眼之處，點擊後立即看到效果，可省下訪客不少時間。 為了實現這個目標，我們得找出能夠直接用 JS 執行翻譯的指令為何。 2. 用 JS 執行翻譯 Google 搜尋的結果，我找到這兩篇很有參考價值：

• Adding Google Translate to a web site
• Google Translate翻譯套件實作

簡單說一下原理，方法是利用 JS 操作 Google 翻譯的下拉選單，模擬選取想要的語言後，觸發選單的切換選項動作，讓 Google 翻譯工具自動執行該選項。 3. 找出語言對應的參數 接下來，JS 執行時會用到的語言參數，可參考 Google 翻譯官網「Language support」，以下順便列出常用的翻譯語言參數：

• 英文：en
• 簡中：zh-CN
• 日文：ja
• 韓文：ko
• 法文：fr
• 西班牙：es

二、安裝 Google 翻譯工具

1. Blogger 網站 如果是 Blogger 網站的話比較輕鬆一些，安裝 Blogger 官方提供的翻譯小工具步驟如下：

• 後台 → 版面配置 → 新增小工具 → 翻譯
• 安裝完後，編輯這個小工具，「樣式」可以選擇「縱向」，但切記不可選擇「僅限下拉式選單」，這非常重要！

小工具通常可以放在側邊欄，由於本篇要使用國旗按鈕，所以可以暫時放在側邊欄最下方，訪客看不到也沒關係。 2. 非 Blogger 網站 如果不是 Blogger 網站，那麼請在網站找個地方放 Google 翻譯工具，程式碼如下： <div id="google_translate_element"></div> <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: "zh-TW", autoDisplay: false, layout: google.translate.TranslateElement.InlineLayout.VERTICAL }, "google_translate_element"); } </script> <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

三、安裝程式碼

1. 準備動作 在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。 請到後台「主題」→ "自訂" 按鈕右方的下拉圖示 →「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼： <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script> 可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。 2. 安裝程式碼 國旗按鈕想要放在網站什麼地方，可參考「Blogger 範本各區塊程式碼」，找到自己想擺放的位置。 在後台「主題」→ "自訂" 按鈕右方的下拉圖示 →「編輯 HTML」，游標點進範本區塊，找到你想放的位置後，貼上以下程式碼： <!--國旗翻譯工具--> <div id="flag_translate"> <img class="en" src="https://3.bp.blogspot.com/-lPe1MfSK7zs/UXaYYpJ-lJI/AAAAAAAAGiU/FIBrY3aIhW0/s1600/eng.jpg" alt="英文"> <img class="zh-CN" src="https://4.bp.blogspot.com/-HqR8f67uo9g/UXaVG1JlVEI/AAAAAAAAGhs/9Ak-hJ-UGRA/s1600/cn.jpg" alt="簡中"> <img class="ja" src="https://1.bp.blogspot.com/-kCzI3AnvG1c/UXaYZZ7IBDI/AAAAAAAAGic/bt6V0kD-Ong/s1600/jp.jpg" alt="日文"> </div> <style> #flag_translate img{margin-right: 10px; cursor: pointer;} </style> <script> //<![CDATA[ $("#flag_translate img").click(function() { let className = this.className; let $select = $("#google_translate_element select"); $select.val(className); setTimeout(function() { $select[0].dispatchEvent(new Event("change")); }, 10); }); //]]> </script> <!--Designed by WFU BLOG--> 儲存後即可看到效果。 3. 修改參數 想要自訂參數、圖案的話，請見以下說明：

• 紅字參數：請參考「一、用 JS 執行翻譯的原理」→「3. 找出語言對應的參數」來修改
• 藍字參數：請改為自己的國旗圖案網址

四、補充+展示效果

• 上面三個國旗按鈕，可點擊後看翻譯效果
• 由於不需要操作「翻譯」小工具，那麼側邊欄的這個小工具，也可用 CSS 自行隱藏起來

更多 Google 相關工具：