README

WordPress模块化组件系统插件。拖放捆绑的模块或您自定义的模块到您的页面布局。

下载插件。

下载一个无需编译或获取依赖项即可立即使用的完整插件。
请点击此处，从最新版本下载full-release.zip。

创建模块

要创建您自己的Modularity模块，您只需创建一个扩展我们的Modularity\Module类的类的插件。

实际上，模块与自定义文章类型相同。但我们添加了一些细节，以便您可以使用它们作为模块。

使用$this->register()方法创建一个非常基本的模块。

以下是一个非常基本的示例模块供您参考

/*
 * Plugin Name: Modularity Article Module
 * Plugin URI: -
 * Description: Article module for Modularity
 * Version: 1.0
 * Author: Modularity
 */

namespace MyArticleModule;

class Article extends \Modularity\Module
{
    public function __construct()
    {
        $id = 'article';
        $nameSingular = 'Article';
        $namePlural = 'Articles';
        $description = 'Outputs a full article with title and content';
        $supports = array('editor'); // All modules automatically supports title
        $icon = '[BASE-64 encoded svg data-uri]';
        $plugin = '/path/to/include-file.php' // CAn also be an array of paths to include 
        $cacheTTL = 60*60*24 //Time to live for fragment cache (stored in persistent object store redis / memcached). 

        $this->register(
            $id,
            $nameSingular,
            $namePlural,
            $description,
            $supports,
            $icon,
            $plugin,
            $cacheTTL
        );
    }
}

new \MyArticleModule\Article;

模块模板

您可以通过将其放在以下位置轻松创建自己的模块模板：/wp-content/themes/[my-theme]/templates/module/。

将模板文件命名为以下模式：modularity-[module-id].php。您可以从Modularity选项页面获取模块的ID。

模块样板

您可以从我们这里下载模块样板。它将是您想要构建的任何自定义模块的好起点。

请在此处下载（尚未提供）

操作参考

Modularity

当Modularity核心加载时运行。通常用于添加自定义模块。

示例

add_action('Modularity', function () {
    // Do your thing
});

Modularity/Module/[MODULE SLUG]/enqueue

仅对指定模块的添加和编辑页面添加js或css。

示例

add_action('Modularity/Module/mod-article/enqueue', function () {
    // Do your thing
});

Modularity/Options/Module

用于向modularity选项页添加选项字段的动作。使用“Modularity/Options/Save”动作来处理添加的选项字段的保存

示例

add_action('Modularity/Options/Module', function () {
    echo '<input type="text">';
});

Modularity/save_block

每当创建或更新文章或页面时都会触发此操作。

示例

add_action('Modularity/save_block', function ($block, $post) {
    // Your code here
});

过滤器参考

Modularity/Module/TemplateVersion3

启用BEM格式化即将推出的版本3视图的预览。这可以在向BEM迈进时使用。

示例

add_filter('Modularity/Module/TemplateVersion3', function(){return true;});

Modularity/Editor/WidthOptions

过滤模块宽度选项

参数

$options      The default width options array ('value' => 'label')

示例

add_filter('Modularity/Editor/WidthOptions', function ($options) {
    // Do your thing
    return $filteredValue;
});

Modularity/Editor/SidebarIncompability

启用主题向侧边栏区域添加特定模块的不兼容性指示器。用户将无法将它们拖放到不支持的区域。此过滤器可能通过排除一些情况来简化主题开发人员的工作。

参数

$moduleSpecification      The default options for the module post object. 

示例

add_filter('Modularity/Editor/WidthOptions', function ($moduleSpecification) {
    
    $moduleSpecification['sidebar_compability'] = array("content-area-top"); 

    return $moduleSpecification;
});

Modularity/Display/BeforeModule

过滤模块侧边栏包装器（之前）

参数

$beforeModule     The value to filter
$args             Arguments of the sidebar (ex: before_widget)
$moduleType       The module's type
$moduleId         The ID of the module

示例

add_filter('Modularity/Display/BeforeModule', function ($beforeModule, $args, $moduleType, $moduleId) {
    // Do your thing
    return $filteredValue;
});

Modularity/Display/AfterModule

过滤模块侧边栏包装器（之后）

参数

$afterModule      The value to filter
$args             Arguments of the sidebar (ex: before_widget)
$moduleType       The module's type
$moduleId         The ID of the module

示例

add_filter('Modularity/Display/AfterModule', function ($afterModule, $args, $moduleType, $moduleId) {
    // Do your thing
    return $filteredValue;
});

Modularity/Module/Container/Sidebars

容器包装器：过滤应支持包含包装器的侧边栏

参数

$sidebars      A array of sidebar id's

Modularity/Module/Container/Modules

容器包装器：过滤应支持包含包装器的模块

参数

$modules      A array of module ids (post-type names)

Modularity/Module/Container/Template

容器包装器：过滤应围绕每个模块包装的html模板

参数

$markup      A string with markup containing {{module-markup}} replacement key

Modularity/Module/TemplatePath & Modularity/Theme/TemplatePath

修改（添加/编辑）查找模块/主题模板的路径。通常用于添加用于查找自定义模块/主题模板的搜索路径。

注意：取消设置路径可能导致显示模块时出现问题。除非您确切知道您在做什么，否则请勿这样做。

参数

$paths      The value to filter

示例

add_filter('Modularity/Module/TemplatePath', function ($paths) {
    return $paths;
});

add_filter('Modularity/Theme/TemplatePath', function ($paths) {
    return $paths;
});

Modularity/Module/Classes

修改模块主元素添加的类列表

参数

$classes      The classes (array)
$moduleType   The module type
$sidebarArgs  The sidebar's args

示例

add_filter('Modularity/Module/Classes', function ($classes, $moduleType, $sidebarArgs) {
    $classes[] = 'example-class';
    return $classes;
});

模块化/显示/标记

模块显示标记

参数

$markup      The markup
$module      The module post

示例

add_filter('Modularity/Display/Markup', function ($markup, $module) {
    return $markup;
});

模块化/显示/[模块短名]/标记

参数

$markup      The markup
$module      The module post

示例

add_filter('Modularity/Display/Markup', function ($markup, $module) {
    return $markup;
});

模块化/核心模板/搜索模板

要查找哪些模板文件

参数

$templates

示例

add_filter('Modularity/CoreTemplatesSearchTemplates', function ($templates) {
    $templates[] = 'my-custom-template';
    return $templates;
});

模块化/模块/帖子/日期

修改帖子模块中显示的发布日期

参数

$date
$postId
$postType

示例

add_filter('Modularity/Module/Posts/Date', function ($date, $postId, $postType) {
    return $date;
});

模块化/模块/帖子/滑块/参数

修改帖子模块中的滑块参数

参数

$args['slider']['slidesPerPage']
$args['slider']['autoSlide']
$args['slider']['showStepper']
$args['slider']['repeatSlide']

示例

add_filter('Modularity/Module/Posts/Slider/Arguments', function ($args) {
    return $args;
});

模块化/编辑器/模块CSS作用域

允许编辑器为模块选择独特的样式（由主题等提供）。向模块包装器添加单个类，以允许CSS样式的作用域。

参数

$scopes - Previously declared scopes. 

示例

add_filter('Modularity/Editor/ModuleCssScope',function($scopes) {
        return array(
            'mod-posts' => array(
                's-buy-card' => __("Make this module sparkle!", 'modularity'),
                's-user-list' => __("A boring user list is what i see", 'modularity')
            )
        );
    });

模块化/显示/视图数据

参数

$viewData - array

示例

add_filter('Modularity/Display/viewData',function($data) {
        //do something
        return $data;
    });

模块化/显示/{模块帖子类型短名}/视图数据

参数

$viewData - array

示例

add_filter("Modularity/Display/mod-posts/viewData", function($data) {
        //do something
        return $data;
    });

模块属性API

某些模块功能可以通过在模块的最外层元素上设置某些属性来获得。

data-module-refresh-interval

创建一个间隔，通过调用REST API通过XHR刷新模块。此属性还需要在相同元素上设置data-module-id属性。

属性值应该是刷新间隔运行的秒数。

示例

<div data-module-id="123" data-module-refresh-interval="60">
    This content will get refreshed every 60 seconds.
</div>

REST API

WordPress REST API通过以下端点进行了扩展。

modularity/v1/modules/{id}

此端点返回特定模块的标记。

• 方法: GET
• 参数
  • id: 要检索的模块的ID。
• 响应: 模块的html标记。

升级

在某些更新中，可能需要运行数据库迁移（将在发布文档中说明）。要在多站网络中运行所有站点的升级操作，请在您站点的文档根目录中运行以下命令。

wp site list --field=url --public=1 --archived=0 --deleted=0 --allow-root | xargs -n1 -I % wp modularity upgrade --url=% --allow-root

或对于单个站点安装

wp modularity upgrade

常量

MODULARITY_DISABLE_FRAGMENT_CACHE

禁用内置的片段缓存意味着每个模块的输出将不会存储为HTML缓存。因此，每次访客重新加载页面时，每个模块都必须重新渲染。然而，只有在您没有启用任何对象缓存（如Redis或Memcached）的情况下，才应考虑此选项。我们强烈建议在您的应用程序中启用片段缓存功能，以提高性能和缓存效率，使模块能够更快地渲染，并减少页面重新加载时重复渲染的需求。

将此定义为true，则缓存将关闭。默认：未定义。

如果启用，每个缓存的模块将以以下格式渲染带有时间戳和缓存ID

与BrowserStack支持测试

此软件与Browserstack的出色工具进行了测试。