构建基于WooCommerce和WPML的多语言电商网站 - 安装和配置 WPML 插件

优质
小牛编辑
130浏览
2023-12-01

装好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 – 不同语言在不同目录下,例如英文首页是 https://www.xnip.cn ,则简体中文首页url就是 https://www.xnip.cn/zh-hans/
  • A different domain per language – 不同语言在不同域名下,域名要先创建好。
  • Language name added as a parameter – 将语言名称作为参数附加在url后面,例如简体中文首页https://www.xnip.cn?lang=zh-hans

注意:语言名称是可以更改的,例如我想把简体中文改成中文,在后台设置中即可完成,单语言的slug是不可更改的,如果想把zh-hans换成cn,就不那么简单。但也并非不可。

所以,请在添加另一种语言的内容前,想好要用什么样的格式,假设我要使用https://www.xnip.cn/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插件