如何将自定义块自动同步至WordPress子页面？Gutenberg能否实现？

完全可以用Gutenberg实现这个需求，下面给几个实用的落地思路：

思路一：自定义字段+主题模板逻辑 #

这是最省心的无代码/少代码方案：

• 给父页面添加一个自定义字段（比如命名为parent_banner），把横幅图片的ID或者直接存URL进去。
• 修改主题的页面模板（比如page.php），在页面顶部插入判断逻辑：

  <?php
  // 获取当前页面的父页面ID
  $parent_page_id = wp_get_post_parent_id(get_the_ID());
  if ($parent_page_id) {
      // 从父页面读取横幅图片信息
      $banner_img_id = get_post_meta($parent_page_id, 'parent_banner', true);
      if ($banner_img_id) {
          // 输出横幅，可自定义类名和图片尺寸
          echo '<div class="parent-banner">' . wp_get_attachment_image($banner_img_id, 'full') . '</div>';
      }
  }
  ?>
  

• 子页面无需手动添加任何块，会自动继承父页面的横幅。

思路二：开发自定义Gutenberg继承块 #

如果想在编辑器里直观看到继承的横幅效果，可以开发一个轻量自定义块：

• 块的核心逻辑：编辑器和前端渲染时，自动检测当前页面的父页面，拉取父页面的横幅图片数据。
• 前端渲染用PHP实现（逻辑参考思路一）；编辑器预览可以通过JS请求父页面数据，展示横幅预览。
• 示例PHP渲染逻辑：

  function render_inherited_banner_block($attributes) {
      $parent_id = wp_get_post_parent_id(get_the_ID());
      if (!$parent_id) return '';
      
      // 解析父页面的块，定位你的自定义横幅块
      $parent_blocks = parse_blocks(get_post_field('post_content', $parent_id));
      foreach ($parent_blocks as $block) {
          if ($block['blockName'] === 'your-custom/banner-block') { // 替换成你自定义块的实际名称
              $banner_url = $block['attrs']['imageUrl']; // 替换成你块中存储图片的属性名
              return '<div class="inherited-banner"><img src="' . esc_url($banner_url) . '" alt="继承父页面横幅" /></div>';
          }
      }
      return '<div class="inherited-banner">未找到父页面横幅</div>';
  }
  

• 子页面只需插入这个自定义块，就能自动同步父页面的横幅内容。

思路三：直接解析父页面的Gutenberg块 #

如果不想额外添加自定义字段，也可以直接解析父页面的内容块：

• 用WordPress内置的parse_blocks函数解析父页面的所有块，定位你添加的自定义横幅块，提取图片信息后渲染。
• 把这段逻辑加到主题模板的顶部，子页面会自动显示父页面的横幅，无需任何手动操作。

内容的提问来源于stack exchange，提问作者Paul Ryan Lucero