如何在WordPress顶部菜单标记WooCommerce切换的当前货币

要在顶部栏的货币切换链接中标记当前选中的货币，我们可以通过服务器端PHP判断或者前端JS处理两种方式实现，下面分别给出具体方案：

方案一：PHP服务器端直接标记（推荐） #

这种方式在页面渲染时就直接给当前货币的链接添加特殊样式类，无需依赖JS，对SEO更友好，也不会有页面加载时的样式闪烁问题。

步骤1：修改货币链接的PHP代码 #

利用你已经知道的获取当前货币的方法，在输出每个货币链接时判断是否为当前货币，添加active-currency类：

<?php
// 获取当前激活的货币
global $WOOCS;
$current_currency = $WOOCS->storage->get_val('woocs_current_currency');
?>

<!-- 欧元链接 -->
<a href="#" data-curr="EUR" class="woocs_curr_link <?php echo ($current_currency === 'EUR') ? 'active-currency' : ''; ?>">EUR</a>

<!-- 美元链接（示例） -->
<a href="#" data-curr="USD" class="woocs_curr_link <?php echo ($current_currency === 'USD') ? 'active-currency' : ''; ?>">USD</a>

<!-- 其他货币链接依此类推 -->

步骤2：添加CSS样式突出当前货币 #

在你的主题样式表（style.css）或者自定义CSS中添加样式，让当前货币链接更显眼：

.active-currency {
    font-weight: 700; /* 加粗 */
    color: #2563eb; /* 自定义高亮颜色，比如蓝色 */
    border-bottom: 2px solid #2563eb; /* 底部下划线 */
    /* 可以根据你的主题风格调整样式 */
}

方案二：前端JS动态标记 #

如果你的货币链接是通过JS动态生成的，或者不想修改PHP代码，可以用这种方式，在页面加载后给当前货币的链接添加样式类。

步骤1：传递当前货币到JS #

在你的主题模板文件中，先把当前货币的值传递给前端JS：

<?php
global $WOOCS;
$current_currency = $WOOCS->storage->get_val('woocs_current_currency');
?>

<script>
// 将当前货币值传递给JS，注意用esc_js防止XSS
var currentActiveCurrency = '<?php echo esc_js($current_currency); ?>';
</script>

步骤2：修改原有的jQuery代码 #

在你现有的点击事件代码中，添加初始化逻辑，标记当前货币：

jQuery(function () {
    // 页面加载时标记当前货币
    jQuery('.woocs_curr_link[data-curr="' + currentActiveCurrency + '"]').addClass('active-currency');
    
    // 原有的货币切换点击事件
    jQuery('.woocs_curr_link').click(function () {
        window.location.href = location.protocol + '//' + location.host + location.pathname + '?currency=' + jQuery(this).data('curr');
    });
});

步骤3：添加相同的CSS样式 #

和方案一一样，添加active-currency的CSS样式来突出当前货币。

两种方案都能完美实现你的需求，根据你的实际代码结构选择即可~

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