wordpress 如何在两种语言之间切换一个按钮,而不是一个下拉与WPML?

nqwrtyyt  于 2022-12-03  发布在  WordPress
关注(0)|答案(2)|浏览(186)

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

qgzx9mmu

qgzx9mmu1#

您需要创建自定义语言切换器。
第一步是添加负责在页面上呈现语言切换器的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文件中。
有了前面的代码,我们已经有了一个新的语言切换器添加到我们网站的页脚。现在,是时候自定义它,使它浮动在网站的右下角。您可以使用位置:已修复CSS属性。
使用下列步骤添加CSS代码:
1.转到WPML →语言。
1.向下滚动到"语言切换器“选项并展开”附加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.清单项目
1.转到WPML →语言。
1.向下滚动到“自定义语言切换器”,然后单击“启用”。
1.单击“自定义”按钮。
1.对于“要在语言切换器中包括的内容”,请选择“标志”并取消选中其他选项。
1.按一下“储存”。
您可以在WPML webiste上找到完整的文档。

7dl7o3gd

7dl7o3gd2#

我在这里添加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;
}

相关问题