WordPress短代码技术问询：自定义HTML及支付代码隐藏实现

1. 如何使用WordPress短代码创建自定义HTML？ #

其实搞这个很简单，核心就是把你要输出的HTML封装成一个函数，再注册成短代码就行。我给你一步步拆解：

• 第一步：找个合适的地方写代码——推荐用自定义插件（避免主题更新后代码丢失），或者临时用主题的functions.php文件。
• 第二步：写一个回调函数，函数里直接返回你要的HTML内容：

function my_custom_html_shortcode() {
    // 这里随便写你需要的HTML结构，加样式、嵌套标签都没问题
    return '<div class="custom-card">
                <h4>这是短代码生成的自定义HTML</h4>
                <p>可以放任何你想展示的内容~</p>
            </div>';
}

• 第三步：用add_shortcode()把函数和短代码名绑定：

add_shortcode('my_html', 'my_custom_html_shortcode');

• 第四步：在文章、页面或者小工具里，直接敲[my_html]就能调用，前端会自动渲染你写的HTML。

要是需要动态内容（比如调用文章标题、用户信息），直接在函数里用WordPress的内置函数处理，最后拼接成HTML字符串返回就行。

2. 如何创建[custom_shortcode]隐藏支付代码，调用时显示带PHP的自定义HTML？ #

这个需求刚好适合用短代码封装——既把核心支付逻辑藏在后台，又能通过短代码轻松调用。我给你写个完整的实现方案，顺便提下安全注意事项：

步骤1：封装支付逻辑与HTML到回调函数 #

在自定义插件或functions.php里写函数，把你的支付PHP逻辑和对应HTML整合：

function custom_payment_shortcode() {
    // 这里写你的支付前置逻辑，比如生成唯一订单号、验证用户权限
    $unique_order_id = uniqid('pay_2024_');
    $payment_amount = 199.00;

    // 拼接HTML，注意用WordPress安全函数过滤变量，防止XSS攻击
    $payment_form = '<form action="/handle-payment" method="post" class="payment-form">
                        <input type="hidden" name="order_id" value="' . esc_attr($unique_order_id) . '">
                        <input type="hidden" name="amount" value="' . esc_attr($payment_amount) . '">
                        <div class="pay-info">
                            <p>订单号：' . esc_html($unique_order_id) . '</p>
                            <p>应付金额：¥' . esc_html($payment_amount) . '</p>
                        </div>
                        <button type="submit" class="pay-btn">确认支付</button>
                    </form>';

    // 返回最终渲染的HTML
    return $payment_form;
}

步骤2：注册短代码 #

把上面的函数绑定到你要的短代码名[custom_shortcode]：

add_shortcode('custom_shortcode', 'custom_payment_shortcode');

步骤3：调用短代码 #

现在在文章、页面里插入[custom_shortcode]，前端就会显示带支付逻辑的HTML表单了。

额外提醒 #

• 复杂的支付逻辑（比如和第三方支付接口交互、处理POST请求），建议单独写个PHP文件（比如handle-payment.php），表单action指向这个文件，代码更清晰易维护。
• 所有动态输出的内容一定要用esc_html()、esc_attr()过滤，避免安全漏洞。
• 要是想限制只有登录用户能看到支付表单，在函数开头加个判断：

if (!is_user_logged_in()) {
    return '<p>请先登录才能进行支付操作哦~</p>';
}

内容的提问来源于stack exchange，提问作者Matías Yáñez