如何在WordPress中创建封装式可复用组件？

核心实现思路 #

你想要的这种单文件组件模式，完全可以通过自定义主题功能实现，不需要依赖现有框架。核心是拦截模板加载过程，提取组件内的<style>、<template>、<script>标签内容分别处理：

1. 自定义组件加载函数 #

创建get_component()替代原生get_template_part()，用来解析单文件组件：

function get_component($slug, $name = null) {
    $template = locate_template("components/{$slug}" . ($name ? "-{$name}" : "") . ".php");
    if (!$template) return;

    // 读取组件文件内容
    $content = file_get_contents($template);

    // 提取SCSS并注入全局样式
    preg_match('/<style>([\s\S]*?)<\/style>/', $content, $style_matches);
    if (!empty($style_matches[1])) {
        add_action('wp_head', function() use ($style_matches) {
            $css = scss_compile($style_matches[1]);
            echo '<style>' . $css . '</style>';
        });
    }

    // 提取HTML模板并执行PHP逻辑
    preg_match('/<template>([\s\S]*?)<\/template>/', $content, $template_matches);
    if (!empty($template_matches[1])) {
        ob_start();
        eval("?>" . $template_matches[1] . "<?php ");
        echo ob_get_clean();
    }

    // 提取JS并注入页脚
    preg_match('/<script>([\s\S]*?)<\/script>/', $content, $script_matches);
    if (!empty($script_matches[1])) {
        add_action('wp_footer', function() use ($script_matches) {
            echo '<script>' . $script_matches[1] . '</script>';
        });
    }
}

2. 集成SCSS编译功能 #

直接在主题中集成scssphp库实现SCSS编译：

1. 下载scssphp库到主题lib/scssphp目录
2. 在主题functions.php中引入并实现编译函数：

require_once get_template_directory() . '/lib/scssphp/scss.inc.php';

function scss_compile($scss) {
    $compiler = new ScssPhp\ScssPhp\Compiler();
    // 设置SCSS导入路径（可选）
    $compiler->setImportPaths([get_template_directory() . '/scss']);
    return $compiler->compile($scss);
}

3. 组件文件编写规范 #

按照你需要的结构创建组件，比如components/custom-faq-block.php：

<style>
.faq-block {
    background: #f5f5f5;
    padding: 20px;
    &__item {
        margin-bottom: 15px;
        &-title {
            font-size: 18px;
            cursor: pointer;
        }
    }
}
</style>

<template>
<?php
$faqs = get_posts([
    'post_type' => 'faq',
    'posts_per_page' => -1
]);
?>
<div class="faq-block">
    <?php foreach ($faqs as $faq): ?>
        <div class="faq-block__item">
            <h3 class="faq-block__item-title"><?php echo get_the_title($faq); ?></h3>
            <div class="faq-block__item-content"><?php echo get_the_content(null, false, $faq); ?></div>
        </div>
    <?php endforeach; ?>
</div>
</template>

<script>
jQuery(document).ready(function($) {
    $('.faq-block__item-title').click(function() {
        $(this).next('.faq-block__item-content').slideToggle();
    });
});
</script>

4. 加载组件 #

在主题模板中调用自定义函数加载组件：

<?php get_component('custom-faq-block'); ?>

插件替代方案 #

目前没有完全匹配需求的现成插件，但可以通过组合插件实现类似效果：

• 安装WP SCSS插件，它支持编译SCSS内容
• 自定义组件加载逻辑时，提取SCSS内容写入临时文件，再用wp_enqueue_style加载该文件（插件会自动编译）
• 这种方式灵活性不如自定义函数，且需要额外处理临时文件清理

注意事项 #

• 组件内避免编写过于复杂的PHP逻辑，保持职责单一
• 生产环境建议开启CSS缓存，将编译后的CSS保存为静态文件，减少服务器负载
• 注意eval()的安全风险，仅加载自己编写的组件，避免加载未知来源文件

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