WordPress实现站内触发WhatsApp消息按钮（避免跳转）

问题分析 #

你当前用表单提交+wp_redirect的方式会触发页面刷新跳转，体验不好，而且表单的target="_blank"根本不起作用。核心需求是把WhatsApp链接存在functions.php里不暴露在HTML源码中，同时点击按钮直接打开WhatsApp聊天窗口。

解决方案一：PHP函数输出链接（适合模板中使用） #

1. 修改functions.php

添加一个返回WhatsApp链接的函数，把手机号存在这里：

// 获取WhatsApp聊天链接
function get_whatsapp_chat_link() {
    // 替换成你的手机号，记得加国际区号（比如+8613xxxxxxxxx）
    $phone_number = '+8613800138000';
    // 对手机号编码，避免特殊字符问题
    return 'https://api.whatsapp.com/send?phone=' . urlencode($phone_number);
}

2. 修改前端模板（index.php）

删掉原来的表单代码，用a标签或者按钮直接调用函数输出链接：

方式A：用a标签（推荐，符合HTML语义）

<a href="<?php echo esc_url(get_whatsapp_chat_link()); ?>" target="_blank" class="whatsapp" alt="点击通过WhatsApp联系我们">
    <i class="fa-brands fa-whatsapp"></i>
    <span>WhatsApp 联系我们</span>
</a>

方式B：用button标签（如果你一定要按钮样式）

<button type="button" onclick="window.open('<?php echo esc_url(get_whatsapp_chat_link()); ?>', '_blank')" class="whatsapp" alt="点击通过WhatsApp联系我们">
    <i class="fa-brands fa-whatsapp"></i>
    <span>WhatsApp 联系我们</span>
</button>

解决方案二：短代码（适合在文章/页面中灵活调用） #

如果需要在后台编辑文章、页面时插入按钮，用短代码更方便：

1. 修改functions.php

注册一个短代码函数：

// 注册WhatsApp按钮短代码
function whatsapp_chat_button_shortcode($atts) {
    // 替换成你的手机号
    $phone_number = '+8613800138000';
    $link = 'https://api.whatsapp.com/send?phone=' . urlencode($phone_number);
    
    // 支持自定义按钮文本，默认是"WhatsApp 联系我们"
    $atts = shortcode_atts(
        array(
            'text' => 'WhatsApp 联系我们',
        ),
        $atts,
        'whatsapp_button'
    );
    
    ob_start();
    ?>
    <a href="<?php echo esc_url($link); ?>" target="_blank" class="whatsapp" alt="点击通过WhatsApp联系我们">
        <i class="fa-brands fa-whatsapp"></i>
        <span><?php echo esc_html($atts['text']); ?></span>
    </a>
    <?php
    return ob_get_clean();
}
add_shortcode('whatsapp_button', 'whatsapp_chat_button_shortcode');

2. 在文章/页面中使用

直接插入短代码即可，还能自定义按钮文本：

[whatsapp_button text="点击和我们聊天"]

关键注意事项 #

• 手机号必须带国际区号（比如中国是+86），不能有空格、括号等符号
• 用esc_url()和esc_html()是为了符合WordPress安全规范，防止XSS攻击
• 这种方式不会暴露链接在原始HTML源码中（渲染后会显示，但比直接写死在HTML里更隐蔽，减少垃圾信息爬虫抓取的概率）

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