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

Question

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

Answer 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 代码：

1. 转到 WPML → 语言。
2. 向下滚动到语言切换器选项并展开其他 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);
}

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

使用以下步骤：

1. 列出项目
2. 转到 WPML → 语言。
3. 向下滚动到自定义语言切换器并单击启用。
4. 单击“自定义”按钮。
5. 对于语言切换器中包含的内容，选择标记并取消选中其他选项。
6. 单击“保存”。

您可以在 WPML 网站找到完整的文档。

Answer 2

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

.wpml-ls-statics-shortcode_actions li:nth-of-type(1) .wpml-ls-link:after{
    content:"\00a0 \00a0|" !important;
    display:inline-block !important;
}
/*fix padding switcher WPML */
.wpml-ls-legacy-list-horizontal a{
    padding-left:2px !important;
    padding-right:2px !important;
}

Answer 3

用它来显示按钮：

<?php
    do_action('wpml_add_language_selector');
?>

您可以从 管理面板 -> WPML -> 语言 -> 自定义语言切换器 -> 自定义更改其外观。