WooCommerce

构建基于WooCommerce和WPML的多语言电商网站 – 安装和配置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 – 不同语言在不同目录下,例如英文首页是https://www.solagirl.net,则简体中文首页url就是https://www.solagirl.net/zh-hans/
  • A different domain per language – 不同语言在不同域名下,域名要先创建好。
  • Language name added as a parameter – 将语言名称作为参数附加在url后面,例如简体中文首页https://www.solagirl.net?lang=zh-hans

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

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

38条评论

    1. 第一次发评论要审核,所以没显示。
      url不变的多语言插件我没见过,或许是因为对搜索引擎不友好吧,大部分的做法都是根据浏览器语言跳转到某个url。根据浏览器语言调整站点语言倒是大部分插件都可以,url不变理论上可以实现,不过现成的插件恐怕不好找。

  1. 想问一下博主,有什么不改变URL的多语言插件?我想让我的文章只根据浏览器语言显示不同语言的文章,但是URL都一样,有能实现的插件嘛?

  2. 楼主,请教下,wordpress网站上传了WPML3.1.9.7点启用之后出现下列错误,知道是什么问题吗?换成3.1.5版本一样提示出错:
    gzinflate has been disabled for security reasons in XXXXX/ sitepress-multilingual-cms.3.1.5\lib\icl_api.php on line 724,

    1. 很抱歉,我最近没有使用wpml,也没遇到过这个错误。
      你可以谷歌一下,看看wpml论坛是否有人反映。
      或者直接打开 sitepress-multilingual-cms.3.1.5\lib\icl_api.php第724行,看看输出这个错误的判断是什么,根据判断条件来判定是否为服务器问题。

  3. 貌似wpml和WooCommerce Multilingual 并不兼容,目前测试wpml版本有3.1.8.4和3.2-a3两个版本,WooCommerce Multilingual 有3.4.3BETA和3.6最新版都不可以,wpml安装后正常,但是一旦安装激活
    WooCommerce Multilingual 系统就报错
    s parameter 1 to be string, object given in D:\phpStudy\thaivmall\wp-content\plugins\sitepress-multilingual-cms\inc\wpml-config\wpml-config.class.php on line 252

    Warning: dirname() expects parameter 1 to be string, object given in D:\phpStudy\thaivmall\wp-content\plugins\sitepress-multilingual-cms\inc\wpml-config\wpml-config.class.php on line 252

    Warning: dirname() expects parameter 1 to be string, object given in D:\phpStudy\thaivmall\wp-content\plugins\sitepress-multilingual-cms\inc\wpml-config\wpml-config.class.php on line 254

    1. 翻译主题用语言包就行,不需要wpml。如果主题里的字符串直接没用翻译函数写,那wpml也无能为力。

  4. 请教一个问题,我用wpml设置了中英文站点,但是如何使用不同的logo呢?中文网站使用中文logo,英文版使用另一个logo?纠结中。。。

    1. 哦,搜了一下说可以在WPML String Translation中设置,我只安装了WPML Multilingual CMS,WPML String Translation这个add on能给发一份儿吗?多谢啊

      1. 这个发不了。不过你可以在输出logo之前先判断当前语言啊,这种根本不需要插件的。

  5. 楼主请教一下,我安装了WPML Media插件以后不管是在中文还是英文语言下上传图片到媒体库都会生成几百上千的库文件,看URL都是同一个,而且不显示缩略图,这是怎么回事呢?

      1. WPML Multilingual CMS 版本 3.1.5
        WPML Media 版本 2.1.4
        WooCommerce Multilingual 版本 3.4.3
        WPML Translation Management 版本 1.9.4

        楼主我还想问下是不是正常情况下,默认语言随便切换成哪个,在WooCommerce里面新建商品都可以正常编辑其他语言的详细信息?
        我这里有个奇怪的现象,在中文语言下新建的商品在编辑英文的时候就失去了商品相册和特色图像,在英文语言下新建的商品在编辑中文的时候可以看见商品相册的图像,但是特色图像也没有了。。总觉得是WPNL Media出了问题的样子

        1. 你想把中英文的图片分开管理吗?wpml media就是干这个的,我只在图片非常非常多时用这个。
          使用这个插件时,中文图片在编辑中文产品时上传,英文图片只在编辑英文时上传,这会决定图片属于哪个语言,即中文图片只在中文环境下可以看到。
          中英文产品的文章要独立翻译,要点translate independently那个按钮,防止编辑中文时覆盖英文。
          如果你确定这不是使用问题,最好去wpml论坛获取支持,这收费插件太复杂,除了作者不会有人去修。

  6. Hi Sola,
    不好意思又来请教了,我用Pods新建了一个自定义文章类型(新闻),使用WPML做中英文,WPML语言URL格式配置里面我选择的www.xxx.com/en的结构,默认中文语言,WPML翻译选项里面我也有选择翻译Pods和新建的这个自定义新闻文章类型。
    现在的问题是新建英文新闻,文章链接没有添加/en,导致访问链接404,但是你如果手动给英文文章链接添加/en,访问就没问题,不知道问题出在哪,不知道你有没有经验?

    1. 抱歉我没用pods创建过,自定义文章wpml支持的还可以,建议选排查一下,用代码的方式创建测试custom post type,切换到默认主题看看。

  7. Hi Sola,
    我使用了WPML插件做了个中英文网站,并且做了个随机列表,有没有办法中文语言随机出来的内容没有英文,按照语言分开,没搜索到相关内容,谢谢!

    1. 用wp_query查询就只返回当前语言的内容。用get_posts这种需要将suppress_filters参数设为0

  8. Hi Sola,
    我采用wordpress4.0.1,安装最新的sitepress-multilingual-cms.3.1.8.4,默认语言中文,激活插件没问题,后台设置完后,前台访问/en英文页面出现下面代码报错
    Fatal error: Cannot access empty property in /data/home/hlu026096/htdocs/wp-content/plugins/sitepress-multilingual-cms/sitepress.class.php on line 7964
    我尝试切换wordpress自带主题没有问题,我是自己写的主题找了半天没发现问题,我参照网上资料function.php添加下面代码实现多语话
    add_action('after_setup_theme', 'my_theme_setup');
    function my_theme_setup(){
    load_theme_textdomain('appg', get_template_directory() . '/languages');
    }

    我有尝试删掉自己function.php里面文件,前台还是一样的报错,所以请教下了,希望能帮到我,谢谢!

    1. 搞定了,主题里面放了个语法错误,用插件检查主题代码规范也是个好方法啊,哈哈

  9. 另外我还想问下。可以设置成按ip显示语言吗。
    例如国内打开网站的就直接连接简体中文版。
    外国的一律就连接到英文版本。

    之前有一款插件q做的比较简单。但后来没更新。

  10. 你好。我已经购买了wpml插件。并安装。
    可以请你帮忙设置吗?是一个基于WordPress的中英文购物平台。

  11. 不好意思,楼主,刚才发错站点了。重发一个inquiry.

    关于WP Menue Sync这个插件无法使用,英语是默认语言,其他语言的菜单显示为not translate.请问这是怎么回事?如何解决?

  12. 楼主 我用了wpml后相关的title是空的 然后我利用了如下function islyou_wp_title( $title, $sep ) {
    global $paged, $page;

    if ( is_feed() )
    return $title;

    // Add the site name.
    $title .= get_bloginfo( ‘name’, ‘display’ );

    // Add the site description for the home/front page.
    $site_description = get_bloginfo( ‘description’, ‘display’ );
    if ( $site_description && ( is_home() || is_front_page() ) )
    $title = “$title $sep $site_description”;

    // Add a page number if necessary.
    if ( $paged >= 2 || $page >= 2 )
    $title = “$title $sep ” . sprintf( __( ‘Page %s’, ‘zopo’ ), max( $paged, $page ) );

    return $title;
    }
    add_filter( ‘wp_title’, ‘islyou_wp_title’, 10, 2 );
    但是现在问题是不管什么页面他的标题都是默认语言的,请问你是怎么处理的页面tit了问题?

    1. 抱歉,我不接翻译类的工作。
      事实上,如果你的主题及插件的字符串都支持翻译,你下载Codestyling Localization插件自己翻译一下就行了,很简单的。

  13. wpml有点贵吧。
    美元支付稍稍有点麻烦。
    请教哈你用的是什么主题?
    兼容手机很方便,最近一个项目是关于手机的,学习下

    1. wpml是很贵,而且很麻烦,说实话,如果只是做个中英文站点,内容不多,比较定制话,我真不愿意用wpml。
      我的主题是twentytwelve刚发布时,用这个新主题改的,没写成child theme,因为当时对twentytwelve mobile first的理念不甚了解,还觉得麻烦,就直接改了原主题,现在看来是自己太小白了。
      现在大部分主题都是responsive的,你可以试试用框架打架,比如twitter的bootstrap,有html版,也有wordpress版。

      1. 那共享出来下呗。我只是想试一试。我都是直接复制手动翻译的,暂时还用不着联网翻页

评论已关闭。