自定义语言切换器

使用 WPML 开发多语言网站时，您可能需要一个自定义语言切换器。了解如何使用简单的 PHP 和 CSS 来实现这一点。

WPML 可以向菜单、小工具、页脚以及使用站点编辑器（以前称为全站编辑）的网站添加语言切换器，并提供完整的自定义选项和内置旗帜。但您的网站可能需要一些更特别的设计。

在本教程中，我们将展示如何添加悬浮语言切换器。悬浮语言切换器不仅美观，还能让客户更方便地以自己的语言浏览您的网站。

请按以下三个主要步骤操作：

添加渲染语言切换器的 PHP 代码
使用 CSS 设置语言切换器的样式
更新语言切换器设置

PHP 部分

第一步是添加负责在页面上渲染语言切换器的 PHP 代码。为此，您需要创建一个函数，添加一个包含语言切换器的 div 容器。我们可以使用 wpml_add_language_selector 动作来渲染语言切换器。

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

完整的 PHP 代码如下所示。

语言切换器 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: fixed CSS 属性来实现这一点。

请按以下步骤添加 CSS 代码：

前往 WPML → 设置 → 语言切换器。
在语言切换器选项卡片中，展开额外的 CSS。

或者，您可以前往外观 → 自定义并单击额外的 CSS 来添加此 CSS 代码。

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

语言切换器样式

/*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);
}

设置部分

最后，您需要调整一些设置，以便语言切换器仅显示旗帜。

请按以下步骤操作：

前往 WPML → 设置 → 语言切换器 → 自定义语言切换器。
向下滚动到自定义语言切换器并单击启用。
单击自定义按钮。
在语言切换器中包含的内容下，保持勾选旗帜，并取消勾选本族语名称、当前语言中的语言名称和当前语言。
单击保存。

大功告成！现在您的网站上应该有了一个美观的自定义语言切换器：

附加内容：垂直悬浮语言切换器

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

为此，只需将前面的 CSS 替换为以下代码：

垂直语言切换器 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;
}