如何在WordPress中创建自定义航班搜索表单并对接预订系统API

第一步：梳理API对接核心要求（耗时约2小时） #

• 先通读对方提供的集成文档，优先确认3类关键信息：
  • API请求规则：是GET还是POST请求，身份校验信息（API密钥、Token）是放在请求头还是请求参数里
  • 必传字段：比如出发地编码、目的地编码、出发日期、乘客数量、舱位等级这类必填参数，有没有格式限制
  • 返回规则：返回值是JSON还是XML格式，错误码对应的提示文案，是否有预订页跳转链接返回
• 先用接口测试工具跑1次测试请求，确认接口能正常返回数据，避免后续写代码时反复排查对接问题

第二步：创建航班搜索表单（耗时约4小时） #

二选其一即可，优先选你熟悉的方案：

方案A：自定义短代码实现（无额外插件依赖） #

在当前启用主题的functions.php文件中添加短代码注册逻辑，示例：

// 注册航班搜索表单短代码
add_shortcode('flight_search_form', function() {
    ob_start(); ?>
    <form id="flight-search-form" method="post" action="">
        <div class="form-item">
            <label>出发地</label>
            <input type="text" name="dep_city" required placeholder="例如PEK">
        </div>
        <div class="form-item">
            <label>目的地</label>
            <input type="text" name="arr_city" required placeholder="例如CAN">
        </div>
        <div class="form-item">
            <label>出发日期</label>
            <input type="date" name="dep_date" required>
        </div>
        <!-- 按需添加返程日期、乘客数、舱位等字段 -->
        <button type="submit" name="submit_flight_search">搜索航班</button>
    </form>
    <?php
    return ob_get_clean();
});

完成后在需要放置表单的页面插入短代码[flight_search_form]即可展示表单。

方案B：用现有表单插件生成（速度最快） #

如果站点已经安装Contact Form 7、WPForms这类表单插件，直接通过拖拽生成对应字段即可，无需手写前端表单代码。

第三步：对接API提交逻辑（耗时约6小时） #

同样在functions.php中添加请求处理逻辑，示例：

add_action('init', function() {
    if (isset($_POST['submit_flight_search'])) {
        // 校验并清洗用户输入
        $dep_city = sanitize_text_field($_POST['dep_city']);
        $arr_city = sanitize_text_field($_POST['arr_city']);
        $dep_date = sanitize_text_field($_POST['dep_date']);

        // 按照对方文档要求组装请求参数
        $api_params = [
            'dep' => $dep_city,
            'arr' => $arr_city,
            'date' => $dep_date,
            // 补充其他要求的参数
        ];

        // 用WordPress自带方法发送请求
        $api_response = wp_remote_post('对方提供的API完整地址', [
            'headers' => [
                'Content-Type' => 'application/json',
                // 按要求补充身份校验头，例如 'Authorization' => 'Bearer 你的API密钥'
            ],
            'body' => json_encode($api_params),
            'timeout' => 30,
        ]);

        // 处理返回结果
        if (is_wp_error($api_response)) {
            // 请求错误的用户提示逻辑
            add_action('wp_print_notices', function() {
                echo '<p class="error">航班搜索失败，请稍后重试</p>';
            });
        } else {
            $response_data = json_decode(wp_remote_retrieve_body($api_response), true);
            // 按文档规则解析返回数据：如果是返回航班列表就渲染到页面；如果是返回预订页跳转地址，直接输出header跳转即可
        }
    }
});

第四步：测试适配（耗时约4小时） #

• 覆盖测试3类场景：必填字段为空校验、正常搜索返回、异常情况（无匹配航班、API报错）的用户提示
• 适配移动端表单显示，确保输入操作流畅
• 确认所有API请求都走服务端发送，不要用前端JS直接调用API，避免API密钥泄露

关键提示 #

• 所有用户输入的参数必须做清洗校验，避免注入风险
• 如果对方要求跳转到自有预订系统，无需自己开发航班列表页，拿到返回的跳转链接直接跳转即可，能节省至少一半开发时间

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