WordPress短代码中直接使用echo输出HTML会导致表单脱离内容流、渲染在页面顶部，正确做法是拼接字符串并return，确保HTML按 shortcode 插入位置内联渲染。
wordpress短代码表单显示异常：为何表单总跳到页面左上角？
在WordPress开发中，短代码（shortcode）的核心契约是：必须返回字符串，而非直接输出（echo/print）。你当前的 show_form() 函数使用了 echo 输出表单HTML，这会绕过WordPress的内容过滤与渲染流程——PHP立即向HTTP响应流写入HTML，导致表单被“提前”输出到页面最上方（通常是
起始处），完全脱离你在文章或页面中插入 [show_form] 的实际位置。正确的实现方式是：将所有HTML拼接为一个字符串，并在函数末尾统一 return。这样WordPress才能将其安全注入到主内容流的对应位置，实现真正的“内联渲染”。
以下是修正后的完整短代码函数（已优化安全性与可读性）：
function show_form() {
$user_id = get_current_user_id();
$output = '';
// 构建表单HTML（不echo！）
$output .= '
';
// 处理表单提交（注意：需校验并转义输入）
if (isset($_GET['send_btn']) && isset($_GET['inches'])) {
$bicep = floatval($_GET['inches']); // 强制转换为浮点数，防止注入
if ($user_id === 0) {
return 'Please log in to record your measurement.
'; } // 更新用户元数据 update_user_meta($user_id, '_bicep_measurement', $bicep); $output = 'Today your bicep is: ' . esc_html($bicep) . ' inches!
'; } return $output; // ✅ 关键：必须return，不能echo } add_shortcode('show_form', 'show_form');⚠️ 重要注意事项：
- 绝不使用 echo 或 print 在短代码函数中输出内容——这是导致错位的根本原因；
- 表单提交后若需反馈信息（如成功提示），也应拼接到 $output 中并 return，而非单独 return 字符串覆盖表单；
- 始终对用户输入做校验（如 floatval()）和输出转义（如 esc_html()），防范XSS与数据异常；
- 建议为表单添加CSS类（如 measurement-form），便于后续用CSS控制样式与布局；
- 若需更健壮的表单处理（如CSRF防护、AJAX提交），应升级为非GET方式 + nonce验证，但当前场景GET+简单校验已满足基础需求。
通过遵循“只返回、不输出”的短代码设计原则，你的表单将精准出现在编辑器中 [show_form] 所在的位置，真正融入页面内容流。
