根据URL显示不同短代码的脚本问题求助

原代码存在的核心问题 #

• 变量不匹配：定义了pages变量却使用未声明的url变量
• 前后端代码混用：echo do_shortcode()是WordPress的服务器端PHP函数，不能直接写在客户端<script>的JS代码里
• URL匹配逻辑错误：window.location.href是包含域名的完整URL，直接和/?listing_region=alicante这类路径片段比较永远不会匹配
• 语法错误：if/else语句的大括号未正确配对，嵌套逻辑混乱

修正方案（推荐服务器端PHP处理，适配WordPress场景） #

因为do_shortcode是WordPress的服务器端函数，必须在PHP模板文件中调用，以下是修正后的代码：

<?php
// 获取URL中的listing_region参数
$region = isset($_GET['listing_region']) ? $_GET['listing_region'] : '';

// 根据参数输出对应短代码，用switch替代嵌套if更清晰
switch ($region) {
    case 'alicante':
    case 'barcelona':
        echo do_shortcode('[template id="11570"]');
        break;
    case 'madrid':
        echo do_shortcode('[template id="11571"]');
        break;
    default:
        // 无匹配参数时的默认内容，可自行修改
        echo '默认显示内容';
        break;
}
?>

使用说明：将这段代码插入到WordPress的对应模板文件中（比如page.php、自定义页面模板等），服务器会在页面渲染前根据URL参数输出对应的短代码内容。

若需前端JS处理（仅作参考，无法直接调用do_shortcode） #

如果需要前端动态判断参数并展示内容，需提前准备好短代码渲染后的内容，或通过AJAX请求获取：

<script>
// 封装获取URL参数的工具函数
function getUrlParam(paramName) {
    const params = new URLSearchParams(window.location.search);
    return params.get(paramName);
}

// 获取当前页面的region参数
const region = getUrlParam('listing_region');
// 页面中需要一个容器来承载内容
const contentContainer = document.getElementById('template-content');

// 根据参数切换内容
switch (region) {
    case 'alicante':
    case 'barcelona':
        contentContainer.innerHTML = '<div>这里是ID为11570的模板内容</div>';
        break;
    case 'madrid':
        contentContainer.innerHTML = '<div>这里是ID为11571的模板内容</div>';
        break;
    default:
        contentContainer.innerHTML = '<div>默认展示内容</div>';
        break;
}
</script>

<!-- 页面中添加内容容器 -->
<div id="template-content"></div>

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