WordPress自定义PHP模板页面内容不显示，求技术排查

首先，你的自定义模板内容无法正常显示的核心原因是重复输出了完整的HTML文档结构——WordPress的模板体系是模块化的，get_header()已经帮你输出了<html>、<head>、<body>这些基础标签，你自己再写一遍会导致页面DOM结构混乱，浏览器无法正确解析你的表单内容。

下面是修复后的完整模板代码，同时我会逐一指出你代码里的其他问题：

修复后的模板代码 #

<?php
/**
 * Template Name: ajwa2template
 *
 * Custom template for form page
 *
 * @package personalio
 */

get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

        <?php while ( have_posts() ) : the_post(); ?>

            <div id="page-wrapper">
                <div class="container">
                    <form name="myForm" class="form-horizontal" id="myform" action="#" onsubmit="return submitForm();" method="POST" enctype="multipart/form-data">
                        <div class="panel panel-info">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="col-md-4">Date *</label>
                                            <div class="col-md-6">
                                                <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" required/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="Title" class="col-md-4">Title *</label>
                                            <div class="col-md-6">
                                                <input type="text" class="form-control" id="mobile" name="phone" placeholder="Enter the Title" required/>
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="category" class="col-md-4">select Category *</label>
                                            <div class="col-md-6">
                                                <select name="droplist" id="droplistID">
                                                    <option id = "option1" value="select" selected>Select</option>
                                                    <option id = "option2" value="category 1">category 34</option>
                                                    <option id = "option3" value="category 2">category 2</option>
                                                    <option id = "option4" value="category 3">category 3</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div id="textarea">
                                            <div class="form-group ">
                                                <div class="col-md-6">
                                                    <textarea cols="60" rows="15" placeholder="enter a text "></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="image" class="col-md-4">Select Image </label>
                                            <div class="col-md-6">
                                                <input type="file" class="form-control" name="image">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-md-offset-4" style="margin-bottom: 50px;">
                            <center>
                                <input type="submit" class="btn btn-primary" value="Submit" />
                            </center>
                        </div>
                    </form>
                </div>
            </div>

            <?php
            // 如果你不需要显示页面编辑器里的默认内容，可以删除下面这一行
            // get_template_part( 'template-parts/content', 'page' );

            // 不需要评论功能的话，可以删除以下代码块
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
        endwhile; // End of the loop. ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_sidebar();
get_footer();
?>

<script type="text/javascript">
jQuery(function() {
    jQuery("#textarea").hide()
    jQuery("#droplistID").change(function() {
        jQuery(this).val() == 'select' ? jQuery("#textarea").hide() : jQuery("#textarea").show();
    });
});
</script>

关键修复点说明 #

1. 移除重复HTML结构：删掉了<html>、<head>、<body>标签，依赖get_header()输出基础页面框架，避免DOM结构冲突导致内容无法渲染。
2. 修正表单属性错误：把enctype="multipart/form-datam"改为enctype="multipart/form-data"，多出来的m会导致文件上传失效，也可能影响表单正常提交。
3. 调整脚本位置：把JavaScript代码移到页面底部（get_footer()前后），确保jQuery已加载（WordPress默认已引入jQuery）。
4. 可选内容控制：注释掉了默认页面内容和评论功能的代码，你可以根据需求决定是否保留。

额外优化建议 #

• 规范资源加载：不要直接在模板里写<link>和<script>标签，建议在主题functions.php中用wp_enqueue_style()和wp_enqueue_script()加载Bootstrap资源，避免冲突且符合WordPress规范：

  function ajwa2template_enqueue_assets() {
      // 仅在使用该模板的页面加载资源
      if ( is_page_template( 'ajwa2template.php' ) ) {
          wp_enqueue_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
          wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), '3.3.7', true );
      }
  }
  add_action( 'wp_enqueue_scripts', 'ajwa2template_enqueue_assets' );
  

• 添加表单提交逻辑：当前表单action="#"只是提交到当前页面，你需要在模板中添加PHP代码处理表单数据，否则点击提交后只会刷新页面，没有实际功能。

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