WordPress如何将后端函数计算结果传递至前端页面？

下面提供两种实用方案，根据你的需求选择即可：

方案一：会话存储+短代码输出（页面刷新后展示） #

适合需要在页面刷新后仍保留结果的场景，核心是将计算结果存入用户会话，再通过短代码在前端调用。

1. 完善子主题functions.php代码 #

// 开启WordPress会话（必须先添加）
add_action('init', 'start_wp_user_session');
function start_wp_user_session() {
    if (!session_id()) {
        session_start();
    }
}

// 你的两数相加函数
function add_two_numbers($a, $b) {
    return $a + $b;
}

// CF7提交时计算并存储结果
add_action('wpcf7_before_send_mail', 'cf7_calculate_and_store_result');
function cf7_calculate_and_store_result($contact_form) {
    $submission = WPCF7_Submission::get_instance();
    if (!$submission) return;

    $posted_data = $submission->get_posted_data();
    // 替换为你CF7表单中实际的数字字段名（比如number1、number2）
    $num1 = isset($posted_data['number1']) ? intval($posted_data['number1']) : 0;
    $num2 = isset($posted_data['number2']) ? intval($posted_data['number2']) : 0;

    $calculation_result = add_two_numbers($num1, $num2);
    // 将结果存入会话
    $_SESSION['cf7_calc_result'] = $calculation_result;
}

// 创建短代码用于前端输出结果
add_shortcode('cf7_show_calc_result', 'display_cf7_calculation_result');
function display_cf7_calculation_result() {
    if (!isset($_SESSION['cf7_calc_result'])) return '';

    $result = $_SESSION['cf7_calc_result'];
    // 可选：输出后清除会话，避免刷新页面重复显示
    // unset($_SESSION['cf7_calc_result']);
    
    return '<div class="cf7-calc-result">计算结果：' . esc_html($result) . '</div>';
}

2. 前端调用 #

• 在WordPress页面/文章编辑器中直接插入短代码：[cf7_show_calc_result]
• 如果是在PHP模板文件中调用，使用：

  echo do_shortcode('[cf7_show_calc_result]');
  

方案二：AJAX无刷新展示（提交后即时显示） #

适合不需要刷新页面，提交表单后立刻展示结果的场景，利用CF7的AJAX提交事件实现。

1. 子主题functions.php代码补充 #

// 你的两数相加函数（同上）
function add_two_numbers($a, $b) {
    return $a + $b;
}

// AJAX处理回调
add_action('wp_ajax_nopriv_cf7_get_calc_result', 'cf7_ajax_return_calculation');
add_action('wp_ajax_cf7_get_calc_result', 'cf7_ajax_return_calculation');
function cf7_ajax_return_calculation() {
    if (!isset($_POST['num1']) || !isset($_POST['num2'])) {
        wp_send_json_error(['msg' => '参数错误']);
    }

    $num1 = intval($_POST['num1']);
    $num2 = intval($_POST['num2']);
    $result = add_two_numbers($num1, $num2);
    wp_send_json_success(['result' => $result]);
}

// 加载自定义JS并本地化AJAX地址
add_action('wp_enqueue_scripts', 'enqueue_cf7_custom_js');
function enqueue_cf7_custom_js() {
    wp_enqueue_script(
        'cf7-custom-script',
        get_stylesheet_directory_uri() . '/js/cf7-custom.js',
        ['jquery'],
        '1.0',
        true
    );
    wp_localize_script('cf7-custom-script', 'wpAjax', [
        'ajaxurl' => admin_url('admin-ajax.php')
    ]);
}

2. 创建自定义JS文件 #

在子主题目录下新建js/cf7-custom.js，写入以下代码：

document.addEventListener('wpcf7submit', function(event) {
    // 替换为你的CF7表单ID（在CF7编辑页面可查看）
    if (event.detail.contactFormId !== '123') return;

    const form = event.target;
    const num1 = form.querySelector('[name="number1"]').value;
    const num2 = form.querySelector('[name="number2"]').value;

    fetch(wpAjax.ajaxurl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `action=cf7_get_calc_result&num1=${num1}&num2=${num2}`
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            // 替换为你页面中用于展示结果的元素选择器
            const resultContainer = document.querySelector('.cf7-result-container');
            if (resultContainer) {
                resultContainer.innerHTML = `计算结果：${data.data.result}`;
            }
        }
    })
    .catch(err => console.error('请求失败：', err));
}, false);

3. 前端添加结果容器 #

在页面的HTML片段中插入一个用于展示结果的容器：

<div class="cf7-result-container"></div>

注意事项 #

• 替换代码中的表单ID、字段名（number1/number2）为你实际使用的名称
• 可根据需求添加输入验证逻辑，确保用户输入的是有效数字
• 会话存储方案中，若需避免结果长期保留，可取消unset($_SESSION['cf7_calc_result'])的注释

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