Skip Navigation
Updated
12 1 月, 2024

在使用WPML开发多语网站时,您可能需要一个自定义语言切换器。 学习如何使用一些简单的PHP和CSS来做到这一点。

通过WPML,您可以将语言切换器添加到菜单、部件、页脚中,还可以使用网站编辑器(以前称为 “全站编辑”)将语言切换器添加到网站中,并提供自定义选项和内置标记。 但您的网站可能需要更特别的东西。

在本教程中,我们将展示如何添加一个浮动语言切换器。 浮动语言切换器看起来很棒,可让您的客户更容易用其各自的语言查看您的网站。

使用浮动语言切换器的网站

遵循以下三个主要步骤:

  1. 添加生成语言切换器的 PHP 代码
  2. 使用 CSS 为语言切换器设计风格
  3. 更新语言切换器设置

PHP部分

第一步是添加负责在页面上呈现语言切换器的 PHP 代码。 为此,您需要创建一个函数,在其中添加一个包含语言切换器的div容器。 我们可以使用 wpml_add_language_selector操作来显示语言切换器。

在本例中,我们希望在页脚显示新的语言切换器,因此我们将新函数与WordPress 自己的wp_footer钩子结合使用。

完整的PHP代码将如下所示。

Language switcher PHP
//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

您可以复制并将其添加到(子)主题的functions.php文件中。

风格化部分

有了前面的代码,我们已经在网站页脚添加了一个新的语言切换器。 现在,是时候对其进行自定义,使其浮动在网站的右下角。 您可以使用position: fixedCSS 属性来做到这一点。

添加CSS代码的步骤如下:

  1. 转到WPML→ 语言
  2. 向下滚动到 语言切换器选项 ,然后展开附加 CSS 部分。

或者,也可以通过 外观 → 自定义 并单击附加 CSS 来添加这些 CSS 代码。

下面示例添加了一些额外的自定义项,如圆角边框和框阴影。 当然,您可以根据需要自定义。

Language Switcher Styling
/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

设置部分

最后,您需要调整一些设置,使语言切换器只显示国旗。

使用以下步骤:

  1. 转到WPML→ 语言
  2. 向下滚动到自定义语言切换器,然后单击启用
  3. 单击 “自定义“按钮。
  4. 对于 “语言切换器中包括哪些内容“,请选择 “国旗“并取消选中其他选项。
  5. 单击保存
Language switcher options
在浮动语言切换器中只显示国旗

大功告成! 您现在应有一个不错的自定义语言切换器出现在网站上:

Horizontal language switcher
前端的语言切换器

额外功能:垂直的浮动语言切换器

您也可以创建一个垂直的语言切换器,如下面屏幕截图所示:

Vertical language switcher
垂直语言切换器

只需将之前的CSS替换为以下代码即可:

Vertical Language Switcher CSS
/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}