構建一個基於 WordPress 的多語言電子商務方案多種多樣,本文要介紹的是基於 WooCommerce(WordPress 電子商務外掛,免費) 和 WPML(WordPress 多語言外掛,付費) 的多語言網站構建方法。

使用哪些外掛

搭建一箇中英文,英文為預設語言的電子商務網站。

主幹是 WordPress,在此基礎上的要用到的外掛如下:

  • WooCommerce
  • WPML Multilingual CMS – WPML 多語言 CMS(核心外掛)
  • WPML String Translation – WPML 字串翻譯 (Add-on 外掛)
  • WPML Translation Management – WPML 翻譯管理 (Add-on 外掛)
  • WooCommerce Multilingual – 使 WooCommerce 支援 WPML 的外掛,可使網店價格自動在多幣種間切換

WooCommerce 和 WooCommerce Multilingual 為免費外掛,可在 WordPress.org 下載,WPML 核心外掛及 Add-on 外掛為付費外掛,需要每年支付一次費用才能持續獲得升級支援,WooCommerce Multilingual 外掛需要 WPML Translation Management 的支援,因此需要購買 79 美元一年的 package 。

測試主題

使用預設主題 Twenty Twelve 作為測試主題

測試環境

使用 windows 7 + wampserver 2.0g

Apache 版本:2.2.11

PHP 版本: 5.2.9-1

MySql 版本:5.1.32

搭建步驟

  • 建立 wamp 測試環境
  • 安裝 WooCommerce 和測試資料
  • 安裝和配置 WPML 外掛
  • 使 WooCommerce 和 WPML 協同工作

裝好 WordPress,配置好 WooCommerce 並新增資料 (或者匯入測試資料) 後,就可以開始多語言化了。使用的外掛是 WPML 多語言外掛。

安裝 WPML 多語言外掛

需要用到 WPML 的核心外掛和兩個附加外掛。

  • WPML Multilingual CMS – WPML 多語言 CMS(核心外掛,資料夾名稱為 sitepress-multilingual-cms)
  • WPML String Translation – WPML 字串翻譯 (Add-on 外掛)
  • WPML Translation Management – WPML 翻譯管理 (Add-on 外掛)

透過 Plugins->Add New->upload 將三個外掛上傳並安裝啟用。

配置 WPML

啟用後,點選頁面頂部的 「No thanks, I will configure myself」按鈕進入配置介面。

首先,選擇網站預設語言,如果網站已經有內容,請選擇當前內容所使用的語言,點選 Next 按鈕繼續。

接下來,選擇要支援的其它語言。例如,我要做中英文網站,所以勾選 Chinese (Simplified),點選 Next 按鈕繼續。

最後一步是一些基本設定:

Language switcher widget – 設定多語言切換按鈕的樣式以及顯示位置,預設在 sidebar 中顯示。 Language switcher style 的設定可以根據個人喜好來進行,我的設定偏好如下:

language-switcher-settings

在右側會顯示一個預覽視窗,按照上面設定,預覽介面如下所示

language-switcher-preview

顯示語言切換按鈕的方式有四種:

  • 在 sidebar 中顯示,你可以在 Appearance->Widgets 中找到 Language Selector 小工具,拖拽到 sidebar 中即可。
  • 在 footer 中顯示,勾選 Show language switcher in footer
  • 在導航欄中顯示,選中 Language switcher widget 的配置中的 Display the language switcher in the WP Menu 中選擇一個選單。
  • 在任意位置顯示,只需要將<?php do_action('icl_language_selector'); ?> 這句 php 程式碼複製到主題中即可。

點選 Finish 按鈕完成設定。

設定管理介面語言

管理介面的語言預設是剛剛選中的 Default Language,如果你想更換語言,有兩種方法

方法一:訪問 WPML->Language,找到 Admin language,設定語言即可,更改會應用給所有管理員。

admin-language方法二:不想影響其它管理員?那就到自己的 profile 頁面,找到 WPML language settings,選擇語言,更改只針對當前登入的管理員使用者。

profile-wpml

URL 格式設定

每種語言應該使用什麼樣的 URL 格式,在 WPML->Language 中的 Language URL Format 中設定,支援三種格式:

  • Different languages in directories – 不同語言在不同目錄下,例如英文首頁是 http://www.solagirl.net,則簡體中文首頁 url 就是 http://www.solagirl.net/zh-hans/
  • A different domain per language – 不同語言在不同域名下,域名要先建立好。
  • Language name added as a parameter – 將語言名稱作為引數附加在 url 後面,例如簡體中文首頁 http://www.solagirl.net?lang=zh-hans

注意:語言名稱是可以更改的,例如我想把簡體中文改成中文,在後臺設定中即可完成,單語言的 slug 是不可更改的,如果想把 zh-hans 換成 cn,就不那麼簡單。但也並非不可。

所以,請在新增另一種語言的內容前,想好要用什麼樣的格式,假設我要使用 http://www.solagirl.net/cn/這種格式,方法如下:

訪問 WPML->Language,點選 Edit Language 連結。

edit-language-link

點選 Add Language,新增新語言,設定如下 (下圖是已經新增好的,新新增看圖下注釋)

edit-language

  • Language name: Chinese
  • Translation (new) : 中文
  • Translation (English): Chinese
  • Flat: zh-hans.png/Use flag from WPML
  • Default locale: zh_CN
  • Encode URLs: No
  • Language tag: zh-CN

點選儲存完成新增,然後刪除原來的 Chinese(Simplified) 語言,其實就是用新建立的語言替代了 WPML 預設定義的語言。

設定同步選項

安裝 WooCommerce 後會產生 product 等 custom post type,要想翻譯它們,需要設定一下 WPML 的同步選項。

訪問 WPML->Translation Management->Multilingual Content Setup,一直向下拉捲軸會看到兩行提示

You haven't set your synchronization preferences for these custom posts: Products, Variations, Orders, Coupons. Default value was selected.

You haven't set your synchronization preferences for these taxonomies: Tags, Product Categories, Product Tags, Shipping Classes, Tags. Default value was selected.

這兩條提示告訴我們應該設定一下是否要翻譯自定義文章型別和自定義分類,按照需要設定一下,儲存。

multi-content

Theme and plugins localization

設定如何翻譯主題和外掛。

第一項設定主題翻譯方式,兩個選項,一個要是使用 WPML 完成翻譯,需要 WPML String Translation 外掛支援。如果不裝這個外掛,就選第二項,直接使用主題自帶的語言包,如果沒有語言包可以自己翻譯一下,推薦使用Codestyling Localization外掛。

theme-localization

選擇第一項後,應點選 Scan the theme for strings 掃描主題待翻譯字串,然後到 WPML->String Translation 下編輯翻譯。

用 WPML 翻譯外掛同樣可以使用外掛自帶語言包或者 WPML String Translation 外掛,使用後者的方式為在底部外掛列表選擇要翻譯的外掛,點選 Scan the selected plugins for strings,然後到 WPML->String Translation 下編輯翻譯。

如果你安裝了 WPML String Translation 外掛,並且有主題和外掛的語言包,可以先將語言包放好,選擇 Translate by WPML,然後掃描主題,這樣就可以用 WPML 來隨時修改翻譯的文字了。

建立 WooCommerce 標準頁面中文版

WooCommerce 的標準頁面目前只有英文版,需要建立中文版才能正常使用,所以訪問 Pages->All pages,會看到每個頁面後面都有一個加號,點選加號就可以建立中文版,編輯方式跟編輯一篇新文章類似,輸入標題,點選 Copy content from English 按鈕將內容複製過來。

WooCommerce 核心頁面的內容都是 shortcode,所以直接複製即可。其它頁面,應自己填寫對應的翻譯。

注意當填寫中文標題時,slug 會自動用標題填充,若不喜歡連結中有中文,請手動修改一下。

下圖為建立 Cart 頁面中文版的截圖,將所有頁面一一建立。

cart

至此,關於 WPML 的配置基本結束,但網站還不能正常運轉,產品頁面目前還不能翻譯成其它語言,也沒有多幣種支援,要讓 WooCommerce 與 WPML 相容,還需要安裝 WooCommerce Multilingual 外掛,具體內容將在下一篇文章中介紹。

翻譯商品頁面

訪問 Products 頁面,按照上面的方法建立產品的中文翻譯,以便測試。

翻譯配送和支付方式

配送和支付方式的翻譯要依靠 WPML String Translation 外掛完成,該外掛的作用有兩個:

  • 建立和編輯語言包檔案 (.po, .mo)
  • 翻譯 wp_options 表中的內容

而配送和支付方式的文字就儲存在 wp_options 中。

首先,設定自動掃描需要翻譯的 options 選項,找到 String Translation 介面中的 Auto register strings for translation,勾選第二項。

auto-register

然後,加幾個商品到購物車,結賬,一直訪問到出現付款方式的頁面。這個自動註冊的工作原理是一旦有 get_option() 函式呼叫,就會自動記錄字串,所以要實際的訪問一下。

接下來,回到 String Translation 介面,點選 Select strings within context 的下拉選單,就會發現 textdomain 多了一下,找到 woocommerce,就能看到配送和付款方式的字串,將其一一翻譯,點選 Save 的同時選中 Translation is complete 。

woo-string

出於效能考慮,翻譯完成後,應將 Auto register strings for translation 設定為 Disable 。

關於語言包

至少需要三個語言包:

  • 主題語言包
  • WooCommerce 中文語言包,上傳至 wp-content/languages/woocommerce 目錄下,這樣外掛升級時不會丟失
  • WordPress 中文語言包,上傳至 wp-content/languages 目錄下

至此,網站就可以在中英文之間切換了。如果你只打算支援一種貨幣,那就基本完成了,剩下的事就是新增內容。如果你需要多幣種支援,那還要安裝 WooCommerce Multilingual 外掛