WordPress技术咨询：如何在页面模板的div中调用其他页面内容？

作为刚接触WP的新手，你要的「两个相邻div分别展示不同页面内容，且内容同步更新」的效果，核心就是直接调用WordPress数据库里的页面内容——只要后台修改原页面，前端的div内容就会自动同步，不用手动改代码。下面给你两种简单的实现方式，选适合你的来：

方法一：自定义页面模板（适合固定展示某两个页面的场景） #

这是最规范的做法，适合你需要专门一个页面来展示这两个内容的情况：

1. 创建模板文件
   找到你当前使用的主题文件夹（一般在wp-content/themes/你的主题名/），新建一个PHP文件，比如命名为template-dual-pages.php，开头必须加上模板识别注释：

   <?php
   /*
   Template Name: 双页面内容展示
   */
   get_header(); // 加载主题头部
   ?>
   

2. 添加内容调用代码
   在模板文件里，接着上面的代码，添加两个div来调用指定页面的内容。记得把代码里的123和456替换成你实际要展示的页面ID（页面ID可以在WP后台编辑页面时，从地址栏的post=xxx里找到）：

   <div class="dual-pages-wrapper">
     <!-- 第一个页面内容容器 -->
     <div class="single-page-content">
       <?php
       $target_page_1 = get_post(123);
       if ($target_page_1) {
         setup_postdata($target_page_1); // 初始化页面数据
         the_content(); // 输出页面内容（自动解析短代码和格式）
         wp_reset_postdata(); // 重置查询，避免影响后续页面元素
       }
       ?>
     </div>
   
     <!-- 第二个页面内容容器 -->
     <div class="single-page-content">
       <?php
       $target_page_2 = get_post(456);
       if ($target_page_2) {
         setup_postdata($target_page_2);
         the_content();
         wp_reset_postdata();
       }
       ?>
     </div>
   </div>
   
   <?php get_footer(); // 加载主题底部 ?>
   

3. 添加CSS样式让div相邻
   打开主题的style.css文件，添加以下样式（可以根据自己的需求调整间距、宽度等）：

   .dual-pages-wrapper {
     display: flex;
     gap: 2rem; /* 两个div之间的间距 */
     padding: 2rem 4rem;
   }
   .single-page-content {
     flex: 1; /* 两个div平分页面宽度 */
     padding: 1rem;
     border: 1px solid #eee; /* 可选：加个边框区分 */
   }
   

4. 使用模板
   回到WP后台，新建一个页面，在右侧的「页面属性」面板里，找到「模板」选项，选择你刚才创建的「双页面内容展示」模板，发布页面后访问，就能看到效果了！

方法二：短代码（更灵活，适合在任意页面/post里插入） #

如果你不想新建模板，只想在现有页面里插入这两个div内容，用短代码会更方便：

1. 添加短代码函数
   打开主题的functions.php文件，在末尾添加以下代码：

   // 自定义短代码：根据页面ID展示内容
   function show_page_content_by_id($atts) {
     // 设置短代码参数默认值
     $params = shortcode_atts(
       array('id' => ''),
       $atts
     );
   
     // 如果没传页面ID，返回空内容
     if (empty($params['id'])) return '';
   
     // 获取目标页面数据
     $target_page = get_post($params['id']);
     if (!$target_page) return '指定页面不存在';
   
     // 输出页面内容
     setup_postdata($target_page);
     $content = get_the_content();
     wp_reset_postdata();
   
     // 解析短代码里的内容格式和嵌套短代码
     return do_shortcode($content);
   }
   add_shortcode('display_page', 'show_page_content_by_id');
   

2. 在页面编辑器里使用
   新建或编辑你要展示内容的页面，在编辑器里直接写：

   <div class="dual-pages-wrapper">
     <div class="single-page-content">[display_page id="123"]</div>
     <div class="single-page-content">[display_page id="456"]</div>
   </div>
   

   同样，把123和456换成你的页面ID，然后给这个div加上和方法一一样的CSS样式就行。

关键提醒（新手必看） #

• 页面ID别搞错：后台编辑页面时，地址栏里的post=xxx就是页面ID，比如https://你的网站/wp-admin/post.php?post=123&action=edit里的123就是ID；
• 一定要用wp_reset_postdata()：这个函数会重置WP的查询上下文，不然会导致页面后续的内容（比如底部导航、版权信息）出现异常；
• 内容自动同步：不管用哪种方法，你在后台修改那两个目标页面并更新后，前端div里的内容会立刻同步，完全不用改模板或短代码。

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