有没有办法在 Wordpress 中制作“封装的”可重用组件

Question

我一直在寻找 Wordpress 主题开发的新方法，并遇到了一系列不同的选项，这些选项允许您遵循最多样化的方法，例如“Roots Sage”入门主题或“Themosis Framework”甚至“Flynt” ”。但是这些，尽管它们解决了非常有趣的问题，但并不是我所需要的。

我正在寻找一种方法来创建自定义可扩展和可重用的组件，这些组件将存在于一个 php 文件中，并且其中包含所有逻辑、html 和样式（SCSS、HTML、Javascript 和 PHP）。在现代 javascript 框架中，例如在 Vue 中，我们有一个结构，您可以使用

<script>

<template>

和

<style>

标签将与组件相关的所有内容放在同一个文件中。

你知道我有什么方法可以遵循这些框架的相同原则，例如能够实现这样的目标吗？

custom-faq-block.php

<style>
//here we would have the sass that would need to be compiled in some way.
</style>

<template>
// here we would have the html and for example fetch a custom post type using php
</template>

<script>
//here we would use any jQuery or vanilla javascript to be used in this component
</script>

然后将使用 wordpress 的标准

get_template_part()

函数加载该组件。

这有意义吗？ 你知道我有什么办法可以做到这一点吗？或以某种方式读取我的内联

sass

并将其附加到全局.css样式表的任何扩展？

任何帮助将不胜感激！

非常感谢！

Answer 1

与此同时，我一直在尝试，经过反复试验，我想出了一个小脚本，可以让人们拥有类似于我在第一个问题中提出的结构。我已经为它创建了一个回购协议，但请在下面找到详细说明。我知道这还没有完善，但可能是一些有趣的事情的开始。

---

所以我创建了一个小脚本，它依赖于 Gulp 和 SCSSPHP 来编译组件内部使用的 sass，这些组件在 PHP 文件中定义并且遵循类似 Vue.Js 组件定义样式。

Compomatic 的 Github 回购链接

这将使您拥有这样的东西：

my-component.php

<!-- ##### COMPONENT STYLES ##### -->
<style>
//Here I will define all my sass for the component
#my-component{
   
 h3{
   color:red;
  }

 p{
   font-size: 12px;
  }
}
</style>

<!-- ##### COMPONENT BODY ##### -->
<div id="#my-component">
<h3>Hello!</h3>
<p><?php echo somefunction(foo);?></p>
</div>

<!-- ##### COMPONENT SCRIPTS ##### -->
<script>
//some component specific javascript will be here....
</script>

这些文件应该在您的 wordpress 主题中的

./components

文件夹中创建。

如何使用 - 说明

1 - 确保您的系统中安装了 composer 和 npm。

2 - 转到要安装编译器的 wordpress 主题并运行：

composer require scssphp/scssphp

3 - 将文件

compomatic.php

和

gulpfile.js

复制到主题根目录。此外，创建一个名为

components

的新文件夹，您的组件将存放在该文件夹中。

4 - 在主题的

functions.php

中包含以下行：

require_once(“compomatic.php”)

5- 运行以下命令：

npm init

6 - 运行以下命令：

npm install gulp gulp-phpunit gulp-shell gulp-watch --save-dev

7 - 然后运行

gulp watch

从那里开始，对组件目录的所有更改都将在开发期间触发 sass 编译器。 输出编译后的 css 文件夹以及附加 scss 文件夹（例如您自己的 mixin 集合、变量、一般样式等）应在文件中根据您的喜好进行修改

compomatic.php

.

这些是您可以修改的变量：

/*******************************************
* CUSTOMIZE THESE VARIABLES TO YOUR LIKING *
********************************************/

$output_file  =  './assets/css/test.css';  // Define output file
$output_dir  =  dirname($output_file);  // Get the directory of the output file
$additional_includes  =  './src/scss/test.scss';  //add any additional includes, fo example a set of mixins, variables or general styles...

如何加载组件？

Compomatic 有一个加载组件的辅助函数。 这个辅助函数所做的是获取组件并修剪掉

<style>

标签内的所有内容。这样，这些标签的内容就不会污染 DOM，因为这些样式已经从编译的 css 中提供。

要使用辅助函数，你只需要这样做：

load_component("/components/my-component");

注：

不要忘记将生成的 CSS 文件加入队列。 Comomatic 保存输出文件的默认位置是：

./assets/css/components.css

wp_register_style('components',get_template_directory_uri() .  '/assets/css/components.css',array(),'1.0');
// Enqueue components stylesheet.
wp_enqueue_style('components');