WordPress中如何将URL参数传递至跳转的外部链接

方法一：PHP后端处理（推荐，兼容性更强） #

在WordPress页面模板或自定义短代码中直接处理参数拼接：

• 获取当前页面URL中的name参数，同时做安全过滤避免恶意内容
• 动态构造带参数的Typeform跳转链接

示例代码：

<?php
// 读取并过滤name参数
$name_value = isset($_GET['name']) ? sanitize_text_field($_GET['name']) : '';
// 基础Typeform链接
$base_url = 'https://form.typeform.com/to/sxmSCYSc?city=Vilnius';
// 拼接参数（仅当name参数存在时）
$final_url = $name_value ? $base_url . '&name=' . $name_value : $base_url;
?>
<!-- 输出按钮 -->
<a href="<?php echo esc_url($final_url); ?>" class="btn">跳转至表单</a>

说明：sanitize_text_field用于过滤参数内容，esc_url确保生成的URL符合安全规范，避免XSS风险。

方法二：JavaScript前端处理 #

如果无法修改后端模板，可通过前端JS动态修改按钮链接：

1. 先在页面中放置按钮的基础HTML：

<a href="https://form.typeform.com/to/sxmSCYSc?city=Vilnius" id="typeform-jump-btn" class="btn">跳转至表单</a>

2. 添加以下JS代码（可放在页面底部或主题的自定义JS区域）：

// 封装获取URL参数的工具函数
function getQueryParam(key) {
    return new URLSearchParams(window.location.search).get(key);
}

// 页面加载完成后修改按钮链接
document.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementById('typeform-jump-btn');
    const nameParam = getQueryParam('name');
    if (nameParam) {
        btn.href += '&name=' + encodeURIComponent(nameParam);
    }
});

说明：encodeURIComponent用于处理参数中的特殊字符（如空格、中文），保证URL格式正确。

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