Skip Navigation
主页 » 文档 » 入门指南 » 语言设置 » 自定义语言切换器

自定义语言切换器

Amir
Updated
13 8 月, 2021

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

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

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

遵循以下三个主要步骤:

  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: fixed CSS属性对其进行自定义。

添加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;
}