構建一個基於 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 插件