WordPress站点根据页面语言动态更新下载按钮href的方案咨询

可行解决方案 #

以下两种方案可直接落地，按需选择即可： #

方案1：CSS快速实现（零代码修改成本，优先推荐） #

TranslatePress加载页面时会自动给<body>标签添加当前语言的专属类名，英文页面对应trp-language-en_US，法语页面对应trp-language-fr_FR，直接把下面这段CSS添加到WordPress后台「外观-自定义-额外CSS」中即可生效：

/* 法语页面隐藏英文按钮 */
.trp-language-fr_FR #en_buttons {
    display: none !important;
}
/* 英文页面隐藏法语按钮 */
.trp-language-en_US #fr_buttons {
    display: none !important;
}

你现有的按钮代码不需要做任何调整，添加CSS后清理站点缓存就能看到效果。 #

方案2：PHP自定义短代码实现（无冗余DOM输出，性能更优） #

如果不想页面中输出隐藏的冗余DOM代码，可以通过自定义短代码动态输出对应语言的按钮，把以下代码添加到当前主题的functions.php文件，或者通过Code Snippets插件插入即可：

// 注册多语言下载按钮自定义短代码
add_shortcode('lang_download_buttons', function() {
    // 调用TranslatePress内置函数获取当前语言代码
    $current_lang = trp_get_language();
    ob_start();
    
    if ($current_lang == 'en') {
        // 英文页面输出英文按钮
        ?>
        <div id="en_buttons">
            <div class="buttons">
                <a href="[wpbb post:acf type='file' name='sds_en']" target="_blank"><button class="sds">SDS</button></a>
                <a href="[wpbb post:acf type='file' name='tds_en']" target="_blank"><button class="tds">TDS</button></a>
            </div>
        </div>
        <?php
    } elseif ($current_lang == 'fr') {
        // 法语页面输出法语按钮
        ?>
        <div id="fr_buttons">
            <div class="buttons">
                <a href="[wpbb post:acf type='file' name='sds_fr']" target="_blank"><button class="sds">SDS</button></a>
                <a href="[wpbb post:acf type='file' name='tds_fr']" target="_blank"><button class="tds">TDS</button></a>
            </div>
        </div>
        <?php
    }
    // 解析短代码后返回内容
    return do_shortcode(ob_get_clean());
});

配置完成后，在Beaver Builder中原来放按钮代码的位置，直接替换为短代码[lang_download_buttons]即可，页面只会输出当前语言对应的按钮组。 #

补充说明 #

如果你的TranslatePress自定义过语言标识，可直接在TranslatePress设置页的语言列表中查询对应语言的代码，替换上述判断逻辑中的en/fr字段即可。

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