如何修复语言切换器的样式和 CSS 问题

某些具有自定义菜单生成器的主题可能无法正确显示 WPML 语言切换器。在此，我们提供了与语言切换器样式相关问题的故障排除步骤。

为了方便起见，如果您需要进行高级自定义，我们还详细说明了 WPML 菜单语言切换器中使用的 CSS。

如何对下拉菜单和菜单语言切换器的显示问题进行故障排除

与所有调试过程一样，需要执行一些初始步骤来检测是否有因素干扰语言切换器的正确渲染。

1. 临时添加一个页脚语言切换器，它的 CSS 非常简单，几乎可以在任何网站上使用。
2. 临时删除所有自定义 CSS，并使用具有默认设置的 WPML 语言切换器
3. 使用浏览器的 CSS 调试器，查看是否存在明显的 CSS 冲突。如果找到原因，您可以在 WPML → 语言页面的语言切换器选项部分覆盖 CSS 样式。在此处，单击额外的 CSS 链接。

如果主题和 WPML 之间存在问题，WPML 支持团队将与我们的兼容性团队和主题作者合作，为您提供适当的解决方案。

每种语言的 CSS 类

以下是每种语言的 CSS 类列表：

• wpml-ls-slot-{slug}：例如“wpml-ls-slot-sidebar-1”。
• wpml-ls-item。
• wpml-ls-item-{language_code}：例如“wpml-ls-item-en”。
• wpml-ls-current-language：仅适用于当前语言项。
• wpml-ls-menu-item：仅适用于菜单中的语言切换器。
• wpml-ls-first-item：用于定位列表的第一个语言项。
• wpml-ls-last-item：用于定位列表的最后一个语言项）

如果需要更改每种语言的 CSS 类，WPML 提供了 wpml_ls_model_language_css_classes 过滤器钩子。

例如，假设您需要为每种语言添加一个 my-custom-item-class 类。在这种情况下，您可以将如下代码添加到主题的 functions.php 文件中：

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

语言切换器包装器 CSS 类

以下是语言切换器包装器的 CSS 类列表：

• wpml-ls
• wpml-ls-{group}-{slug}：例如“wpml-ls-statics-footer”。
• wpml-ls-{template-slug}：例如“wpml-ls-legacy-dropdown-click”。
• wpml-ls-rtl：适用于 RTL 语言。
• wpml-ls-touch-device：为手机和平板设备添加的类。

在下表中，我们展示了如何根据 {group} 和 {slug} 构建 CSS 类：

如前所述，如果您需要为语言切换器包装器添加自定义 CSS 类，可以使用我们的 wpml_ls_model_css_classes 过滤器钩子。在主题的 functions.php 文件中添加如下代码，将添加一个 my-custom-wrapper-class CSS 类：

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

注意：WPML 仅为菜单中的语言切换器选项注入部分元素。因此，它没有任何包装器类。

使用 CSS 自定义语言切换器

我们可以轻松地在 WPML → 语言页面的语言切换器选项部分添加一些自定义 CSS 样式。在此处，单击额外的 CSS 链接。

示例 1：以粗体显示当前语言

.wpml-ls-current-language {
font-weight: bold;
}

示例 2：仅更改页脚中语言切换器的字体大小

.wpml-ls-statics-footer {
    font-size: 18px;
}

示例 3：在最后一个语言项之后向右侧添加一些边距

.wpml-ls-last-item {
    margin-right: 10px;
}

您还可以组合选择器以实现更好的定位。

示例 4：为页脚语言切换器中的当前语言添加粗体文本

.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

示例 5：固定菜单中语言切换器的宽度

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}