WordPress站点中跨页面同属性div能否单独页面分组？

当然可以！针对你不想手动重复div、也不想额外创建大量页面/分类的需求，这里有几个实用的WordPress原生方案，帮你把分散在多个页面的同组div整合到单独页面：

方法1：自定义短代码（最灵活，适合现有页面复用） #

核心思路是把需要重复的div做成可复用的短代码，内容统一存在自定义字段里，然后在任意页面（包括整合页面）调用即可。

1. 先在主题的functions.php里添加短代码函数：

function shared_div_shortcode($atts) {
    // 设置默认属性，支持自定义类名和内容标识
    $atts = shortcode_atts(array(
        'class' => 'shared-content',
        'id' => '',
    ), $atts);
    
    // 从当前页面的自定义字段中获取对应内容
    $div_content = get_post_meta(get_the_ID(), 'div_content_' . $atts['id'], true);
    
    // 输出安全的div内容
    return '<div class="' . esc_attr($atts['class']) . '">' . wpautop($div_content) . '</div>';
}
add_shortcode('shared_div', 'shared_div_shortcode');

2. 在需要插入div的页面，添加自定义字段（比如div_content_about）并填入内容，然后插入短代码：
   [shared_div class="my-shared-class" id="about"]

3. 专门的整合页面：你可以直接在页面内容里列出所有需要的短代码，或者用一段PHP代码循环调用所有相关的自定义字段内容，自动生成分组后的div列表。

方法2：自定义帖子类型+自定义字段（适合独立管理内容单元） #

如果想把这些重复的div作为独立的内容块管理，创建一个自定义帖子类型（CPT）是更好的选择：

1. 在functions.php注册自定义帖子类型：

function register_shared_sections_cpt() {
    $args = array(
        'public' => true,
        'label'  => 'Shared Sections',
        'supports' => array('title', 'editor', 'custom-fields'),
        'show_in_rest' => true, // 支持Gutenberg编辑器
    );
    register_post_type('shared_section', $args);
}
add_action('init', 'register_shared_sections_cpt');

2. 后台会出现“Shared Sections”菜单，每个帖子对应一个div：填写内容，添加自定义字段div_class来标记分组类名。

3. 在其他页面调用：用短代码指定帖子ID即可，比如：

function section_by_id_shortcode($atts) {
    $atts = shortcode_atts(array('id' => ''), $atts);
    $section = get_post($atts['id']);
    if (!$section) return '';
    $div_class = get_post_meta($section->ID, 'div_class', true);
    return '<div class="' . esc_attr($div_class) . '">' . apply_filters('the_content', $section->post_content) . '</div>';
}
add_shortcode('section', 'section_by_id_shortcode');

使用时：[section id="123"]

4. 整合页面：创建一个自定义页面模板，用WP_Query筛选特定类的帖子并输出：

// 整合页面模板的核心代码
$args = array(
    'post_type' => 'shared_section',
    'posts_per_page' => -1,
    'meta_key' => 'div_class',
    'meta_value' => 'my-target-class', // 替换成你的目标类名
);
$sections = new WP_Query($args);
if ($sections->have_posts()) {
    while ($sections->have_posts()) {
        $sections->the_post();
        $div_class = get_post_meta(get_the_ID(), 'div_class', true);
        echo '<div class="' . esc_attr($div_class) . '">' . get_the_content() . '</div>';
    }
    wp_reset_postdata();
}

方法3：WP_Query+DOM解析（无需额外内容类型，直接提取现有页面） #

如果不想改动现有页面结构，也可以直接从所有页面中提取带有特定类的div，在整合页面输出：

在整合页面的自定义模板中添加以下代码：

$args = array(
    'post_type' => 'page',
    'posts_per_page' => -1,
);
$pages = new WP_Query($args);

if ($pages->have_posts()) {
    while ($pages->have_posts()) {
        $pages->the_post();
        $content = get_the_content();
        
        // 使用DOM解析提取目标类的div
        $dom = new DOMDocument();
        @$dom->loadHTML($content); // @符号忽略HTML解析警告
        $xpath = new DOMXPath($dom);
        // 替换成你的目标类名，支持多个类筛选
        $target_divs = $xpath->query('//div[contains(@class, "my-shared-class")]');
        
        if ($target_divs->length > 0) {
            foreach ($target_divs as $div) {
                echo $dom->saveHTML($div);
            }
        }
    }
    wp_reset_postdata();
}

注意：这个方法需要服务器启用PHP的DOM扩展，而且如果页面里的div嵌套复杂，可能需要调整XPath表达式来精准匹配。

方案选择建议 #

• 如果你只是想复用现有页面的div，自定义短代码上手最快，维护成本低；
• 如果你希望把这些div作为独立内容块管理（比如单独编辑、排序），自定义帖子类型是最佳选择；
• 如果你完全不想改动现有页面结构，DOM解析提取可以直接实现需求，但对HTML结构的一致性要求较高。

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