如何使用按钮而不是使用 WPML 的下拉菜单在 2 种语言之间切换？答案

【问题标题】：How to switch between 2 languages with a button and not a dropdown with WPML?如何使用按钮而不是使用 WPML 的下拉菜单在 2 种语言之间切换？
【发布时间】：2022-12-03 07:27:27
【问题描述】：

当您只有两种语言时，使用下拉菜单是很愚蠢的。如果有更多，就有意义。我只想有一个简单的按钮可以切换到其他语言，我在谷歌上找不到任何指南。

【问题讨论】：

标签： wordpress plugins translation wpml code-translation

【解决方案1】：

您需要创建自定义语言切换器。

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

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

完整的 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 → 语言。
向下滚动到自定义语言切换器并单击启用。
单击自定义按钮。
对于要包含在语言切换器中的内容，选择标志并取消选中其他选项。
单击“保存”。
您可以在WPML webiste 找到完整的文档。

【讨论】：

【解决方案2】：

我在这里添加 css 以包含 |切换器中两种语言之间的“管道”

.wpml-ls-statics-shortcode_actions li:nth-of-type(1) .wpml-ls-link:after{
    content:"