跳过导航
首页 » WPML文档 » 入门指南 » 语言设置 » 如何在WordPress网站上添加语言切换器 » 自定义语言切换器

自定义语言切换器

Amir
已更新
22 5 月, 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;
}