WordPress(WPML)如何替换导航栏元素并插入语言切换器简码

下面提供两种可落地的实现方案，优先推荐PHP方案，稳定性和兼容性更好。

方案1：PHP实现（推荐） #

• 操作前先开启WordPress子主题，所有自定义代码写到子主题的functions.php文件中，避免后续主题更新覆盖自定义内容
• 步骤：
  1. 确认主题导航左上角社交链接的挂载钩子，绝大多数正规开发的主题都会给导航区域预留自定义钩子，可以查看主题开发文档，或者搜索主题源码里社交链接输出的add_action挂载规则
  2. 用以下代码先移除原社交链接的输出，再挂载WPML语言切换器：

add_action( 'after_setup_theme', 'custom_replace_social_with_wpml' );
function custom_replace_social_with_wpml() {
    // 把下方两个参数替换为你主题实际的导航钩子名、原社交链接输出函数名
    remove_action( 'theme_top_nav_left_hook', 'theme_output_top_social_links', 10 );
    // 挂载WPML语言切换器
    add_action( 'theme_top_nav_left_hook', function() {
        if ( function_exists( 'wpml_add_language_selector' ) ) {
            do_action('wpml_add_language_selector');
        }
    }, 10 );
}

3. 如果找不到对应的主题钩子，可以直接修改主题的导航模板文件（通常为header.php、template-parts/header/top-nav.php这类路径），找到原有社交链接的输出代码段，直接替换为：

<?php 
if ( function_exists( 'wpml_add_language_selector' ) ) {
    do_action('wpml_add_language_selector');
}
?>

方案2：JavaScript实现 #

无需修改主题核心代码，适合临时调试或者不方便改PHP的场景：

• 首先通过浏览器审查元素，定位到导航左上角社交链接的唯一CSS选择器，例如类名为.nav-top-social、id为top-left-social
• 把以下JS代码添加到主题自定义JS文件，或者WordPress自定义器的「自定义JS」模块中：

document.addEventListener('DOMContentLoaded', function() {
    // 替换为你站点实际的社交链接容器选择器
    const targetEl = document.querySelector('.nav-top-social');
    if (!targetEl || !window.customWpmlSelector) return;
    // 清空原有社交链接内容，插入语言切换器
    targetEl.innerHTML = window.customWpmlSelector;
});

• 配套把以下代码添加到子主题functions.php中，提前输出WPML切换器的HTML内容到前端JS变量：

add_action( 'wp_head', 'custom_output_wpml_selector_to_js' );
function custom_output_wpml_selector_to_js() {
    if ( !function_exists( 'wpml_add_language_selector' ) ) return;
    ob_start();
    do_action('wpml_add_language_selector');
    $selector_html = ob_get_clean();
    echo sprintf( '<script>window.customWpmlSelector = %s;</script>', json_encode( $selector_html ) );
}

注意事项 #

• 操作前建议备份站点文件和数据库，避免操作失误导致站点异常
• 语言切换器的样式可以通过自定义CSS调整，适配导航栏的尺寸和风格

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