在WordPress页面实现按邮编/城市/县跳转外部网站的技术求助

我是非营利组织的网站管理员，需要创建一个可通过二维码访问的WordPress页面：访客输入邮编、城市或县后，跳转到对应的外部AA戒酒会网站。网站由BlueHost托管，基于WordPress搭建。我知道该功能可通过HTML实现，但不确定如何在WordPress中操作。已编写的HTML代码中函数部分无法正常运行，目前仅处理了邮编相关逻辑，还需完善城市、县的处理逻辑，并将代码转为适配WordPress的页面。

原代码（已转译HTML实体）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Find your nearest Meeting </title>
</head>
<body>
<h1><b>Finding your nearest meeting</b></h1>
<p>When leaving your treatment center and going back home, it is importaint to find your nearest AA meeting as soon as possible.<br>
The Area 26 Treatment Committee wants to make this easy for you.  
Please type in your zipcode <b><i>OR</i></b> your city <b><i>OR</i></b> your county in <i><u>one</u></i> of the boxes below.<br>
You will then be directed to the Intergroup meeting webpage that serves that area. 
Here you will be able to locate a meeting and continue your journey in sobrity.<br>
Remeber, <i>We shall be with you in the Fellowship of the Spirit, and you will surely meet some of us as you trudge the
Road of Happy Destiny.</i>
</p>
<br>
<label for="Zipcode">Zipcode:</label>
<input type="text" id="Zipcode" name="Zipcode">
<p id="Zipcode"></p>
<br><br><br>
<label for="City">City:</label>
<input type="text" id="City" name="City">
<p id="City"></p>
<br><br><br>
<label for="County"> County:</label>
<input type="text" id="County" name="County">
<p id="County"></p>
<br><br><br>
<button onclick="myFunction()">Check</button>
<script>
function myFunction()
{
var a=document.getElementById("Zipcode").value;
if(a=="40342") {
document.getElementById("Zipcode").innerHTML="Thank you. You will be directed to the Bluegrass Intergroup’s Meeting page"; 
<a href="https://www.bluegrassintergroup.org/meetings/"> Bluegrass Intergroup Meeting Page</a>;
window.open(https://www.bluegrassintergroup.org/meetings/, ‘newwindow’)
}
else if(a=="40358")
{
document.getElementById("Zipcode").innerHTML="Thank you. You will be directed to the Bluegrass Intergroup’s Meeting page"; 
<a href="https://www.bluegrassintergroup.org/meetings/"> Bluegrass Intergroup Meeting Page</a>;
window.open(https://www.bluegrassintergroup.org/meetings/, ‘newwindow’)
}
else
{
document.getElementById("Zipcode").innerHTML="I'm sorry but we have not found an Intergroup Meeting Page that has meetings in that area. Please go to the Area 26 meeting page for a list of meetings in Kentucky, Southern Indiana and Ohio.";
<a href="https://www.area26.net/wp/?post_type=tsml_meeting"> Area 26 Find A Meeting Page</a>;
window.open(https://www.area26.net/wp/?post_type=tsml_meeting, ‘newwindow’)
</script>

原代码存在以下问题导致功能失效：

• 多个元素使用相同ID（如邮编输入框和提示p标签都用id="Zipcode"），JS无法正确获取目标元素
• JS函数中直接嵌入HTML标签（<a>），不符合语法规范
• window.open的URL未加英文引号，且使用了中文单引号，导致语法错误
• 函数未闭合，缺少}和完整的</script>标签
• 仅实现了邮编逻辑，未处理城市、县的跳转逻辑

1. WordPress页面创建步骤 #

登录WordPress后台：

• 进入「页面」→「新建页面」
• 切换到「代码编辑器」模式（或添加「自定义HTML」区块）
• 将下方修正后的代码粘贴进去，发布页面即可
• 生成该页面的二维码，访客扫码即可访问

2. 修正并完善后的代码 #

<h1><strong>寻找离你最近的戒酒会</strong></h1>
<p>离开治疗中心返家后，尽快找到离你最近的AA戒酒会至关重要。<br>
Area 26治疗委员会希望为你简化这个流程。请在下方的一个输入框中填写你的<strong><em>邮编</em></strong>、<strong><em>城市</em></strong>或<strong><em>县</em></strong>。<br>
提交后你将被引导至对应区域的Intergroup戒酒会页面，在那里你可以找到合适的戒酒会，继续你的康复之旅。<br>
记住：<em>我们将与你同在精神的团契中，当你跋涉在幸福命运的道路上时，你一定会遇见我们中的一些人。</em>
</p>
<br>
<div class="meeting-search-group">
    <label for="zipcode-input">邮编:</label>
    <input type="text" id="zipcode-input" name="Zipcode" placeholder="例如：40342">
    <p id="zipcode-message" class="search-message"></p>
</div>
<br><br>
<div class="meeting-search-group">
    <label for="city-input">城市:</label>
    <input type="text" id="city-input" name="City" placeholder="例如：Lexington">
    <p id="city-message" class="search-message"></p>
</div>
<br><br>
<div class="meeting-search-group">
    <label for="county-input">县:</label>
    <input type="text" id="county-input" name="County" placeholder="例如：Fayette">
    <p id="county-message" class="search-message"></p>
</div>
<br><br>
<button onclick="handleMeetingSearch()">查询</button>

<script>
// 配置区域与对应戒酒会页面的映射，方便后续维护
const areaLinks = {
    // 邮编映射
    zipcodes: {
        "40342": "Bluegrass Intergroup",
        "40358": "Bluegrass Intergroup"
    },
    // 城市映射（示例，可自行添加）
    cities: {
        "LEXINGTON": "Bluegrass Intergroup",
        "LOUISVILLE": "Louisville Intergroup"
    },
    // 县映射（示例，可自行添加）
    counties: {
        "FAYETTE": "Bluegrass Intergroup",
        "JEFFERSON": "Louisville Intergroup"
    },
    // 各Intergroup对应的页面链接
    intergroupUrls: {
        "Bluegrass Intergroup": "https://www.bluegrassintergroup.org/meetings/",
        "Louisville Intergroup": "https://example.com/louisville-meetings/",
        "Area 26": "https://www.area26.net/wp/?post_type=tsml_meeting"
    }
};

function handleMeetingSearch() {
    // 清空所有提示信息
    document.querySelectorAll('.search-message').forEach(el => el.innerHTML = '');
    
    // 获取输入值（去除首尾空格，转为大写统一匹配）
    const zipcode = document.getElementById('zipcode-input').value.trim().toUpperCase();
    const city = document.getElementById('city-input').value.trim().toUpperCase();
    const county = document.getElementById('county-input').value.trim().toUpperCase();
    
    let targetIntergroup = null;
    let inputType = '';

    // 检查邮编输入
    if (zipcode) {
        inputType = 'zipcode';
        targetIntergroup = areaLinks.zipcodes[zipcode];
    } 
    // 检查城市输入
    else if (city) {
        inputType = 'city';
        targetIntergroup = areaLinks.cities[city];
    } 
    // 检查县输入
    else if (county) {
        inputType = 'county';
        targetIntergroup = areaLinks.counties[county];
    } 
    // 无输入提示
    else {
        alert('请填写邮编、城市或县中的一项');
        return;
    }

    // 处理跳转逻辑
    if (targetIntergroup) {
        const url = areaLinks.intergroupUrls[targetIntergroup];
        document.getElementById(`${inputType}-message`).innerHTML = `感谢你的提交，将为你跳转到${targetIntergroup}的戒酒会页面`;
        // 打开新窗口跳转
        window.open(url, '_blank');
    } else {
        document.getElementById(`${inputType}-message`).innerHTML = '抱歉，未找到对应区域的戒酒会页面，请访问Area 26页面查看肯塔基州、印第安纳州南部和俄亥俄州的所有戒酒会列表';
        window.open(areaLinks.intergroupUrls['Area 26'], '_blank');
    }
}
</script>

<style>
/* 简单美化样式，可根据WordPress主题调整 */
.meeting-search-group {
    margin-bottom: 15px;
}
.meeting-search-group label {
    display: inline-block;
    width: 80px;
    font-weight: bold;
}
.meeting-search-group input {
    padding: 8px;
    width: 250px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.search-message {
    margin-top: 5px;
    color: #333;
}
button {
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #006799;
}
</style>

3. 后续扩展建议 #

• 可在areaLinks对象中添加更多邮编、城市、县的映射关系，无需修改核心逻辑
• 若需要更精准的匹配（如支持模糊搜索），可调整字符串匹配逻辑
• 可添加输入验证（如邮编格式校验），提升用户体验
• 若数据量较大，可考虑将映射数据存储在WordPress自定义字段或选项中，方便后台维护

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