如何隐藏Flatsome主题WPML语言切换器的语言名称仅显示旗帜？

方法1：重写主题函数实现 #

WPML提到的engage_header_langs()是Flatsome主题负责渲染头部语言切换器的自定义函数，你可以通过子主题的functions.php重写该函数，移除语言名称输出：

1. 确保你正在使用Flatsome子主题（避免主题更新丢失修改，没有子主题请先创建）
2. 打开子主题目录下的functions.php，添加以下代码：

function engage_header_langs() {
    if ( function_exists( 'icl_get_languages' ) ) {
        $languages = icl_get_languages( 'skip_missing=0&orderby=code' );
        if ( ! empty( $languages ) ) {
            echo '<ul class="header-langs">';
            foreach ( $languages as $l ) {
                echo '<li>';
                // 仅保留旗帜图标，移除语言名称代码
                if ( ! $l['active'] ) {
                    echo '<a href="' . esc_url( $l['url'] ) . '">';
                }
                echo '<img src="' . esc_url( $l['country_flag_url'] ) . '" alt="' . esc_attr( $l['native_name'] ) . '" />';
                if ( ! $l['active'] ) {
                    echo '</a>';
                }
                echo '</li>';
            }
            echo '</ul>';
        }
    }
}

这段代码会覆盖原函数逻辑，只输出旗帜图片，不再显示语言名称。

方法2：用CSS精准隐藏文字 #

如果不想修改PHP代码，可通过自定义CSS隐藏语言名称：

1. 进入WordPress后台「外观」→「自定义」→「附加CSS」
2. 添加以下代码（若初次不生效，用浏览器「检查」工具定位语言名称的具体标签，替换选择器）：

/* 隐藏语言切换器的文字内容 */
.header-langs li span.lang-name,
.header-langs li a:not(img) {
    display: none !important;
}
/* 确保旗帜图标正常显示 */
.header-langs li img {
    display: inline-block !important;
    margin: 0;
}

比如你检查到语言名称在<span class="lang-title">标签里，就把选择器改成.header-langs .lang-title { display: none; }

注意事项 #

• 禁止直接修改主题核心文件，必须用子主题保存自定义代码
• 添加CSS后需清除浏览器缓存，确保样式生效
• 若重写函数后出现异常，删除添加的代码即可恢复原状

内容的提问来源于stack exchange，提问作者MrLoco