README

无装饰的WordPress启动主题 - Gutenberg已就绪！

Lean主题是由开发者为开发者制作的WordPress启动主题。

它专注于快速开发，遵循最佳开发实践。

一些关键特性

Gutenberg就绪
使用Parcel轻松配置以构建开发和生产环境
ES6 JavaScript
TailwindCSS
SASS预处理器
MVC编码架构
可重用前端组件（遵循Atomic Design方法
辅助函数以轻松创建自定义文章类型、分类和端点
ACF集成
PHP、JS和SASS代码检查器
Composer和NPM用于管理依赖项

内容

LEAN主题

先决条件

要使用此主题，您需要以下内容

PHP 7.1或更高版本
Composer
Node.js
Yarn
高级自定义字段 WP插件v5.8.1或更高版本

Composer应全局安装。

安装

下载或克隆主题

转到主题路径并输入

composer install

开发和生产构建命令

该主题使用composer作为PHP库的依赖项管理器，NPM用于JavaScript库，Webpack用于构建SASS和JS文件。

生产构建命令

composer build

此命令将安装NPM依赖项，并运行Webpack生产配置，这将获取针对生产服务器优化的JS和CSS文件。

开发命令

cd frontend
yarn start

此命令将运行Webpack开发配置，这将启动一个监视器，在您保存文件时编译SASS和JS文件。

它还将启用源映射以方便调试。

最佳实践

Lean主题鼓励您使用代码检查器（PHP、JS和CSS）来使用最佳实践。这有助于维护一致的代码风格，使其变得干净，并且减少了出现错误或安全风险的可能性。它将帮助您检测代码中的错误，并提供解决问题的提示。

代码检查器命令

PHP代码检查器使用WordPress手册中指定的WordPress编码标准。以下命令应在提交更改之前手动运行，并添加到您的持续集成构建配置中。

JS代码检查器使用ESLint，而SCSS代码检查器使用SCSS Lint。

composer lint

Codacy

Codacy 是一个自动化代码审查和代码分析的工具。

如果您使用这个工具，可以将 .codacy.yml 文件移动到项目的根目录。这将告诉 Codacy 只审查您的应用的相关文件。它还会告诉 Codacy 下载 PHP、JS 和 SCSS 代码检查器的配置文件，以便使用这些规则。

前端组件

Lean 主题遵循原子设计方法来开发模块化前端。

在 frontend/components 目录下方有 4 个目录，分别称为原子、分子、组织和模板，您可以在这里添加所有的原子元素。

原子

原子是物质的基本构建块。

应用于网页界面，原子是我们的 HTML 标签，例如表单标签、输入或按钮。

每个原子的样式表必须添加到 atoms 目录下的 _style.scss 中。

分子

分子是由原子结合在一起的一组，是化合物的最小基本单位。

一个分子可能是一个包括表单标签和输入错误显示的输入。它们本身通常不太有用，但将它们组合成一个表单，现在我们就有了一些东西！

每个分子的样式表必须添加到 molecules 目录下的 _style.scss 中。

组织

组织体是由分子组合在一起形成的相对复杂、独特的界面部分。

例如，英雄是一个组织体。

每个组织体的样式表必须添加到 organism 目录下的 _style.scss 中。

模板

模板主要由组织体组合而成。包含内容的模板是一个 page。

每个模板的样式表必须添加到 template 目录下的 _style.scss 中。

加载Atomic元素

Lean 主题使用 Loader 模块来渲染原子元素。

Load::element_type( ‘element_folder/element_php_file’, element_arguments[] );

要使用它，首先在文件开头添加其命名空间。

<?php
use Lean\Load; 

// Example of loading an organism located in patterns/organisms/hero/hero.php
Load::organism( 
	'hero/hero', [
      'bg_image_url' => $bg_image_url,
      'show_header' => true,
    ]
);

// Example of loading an atom located in patterns/atoms/buttons/button.php
Load::atom( 
	'buttons/button', [
      'label' => $label,
      'link' => $url,
    ]
);

Gutenberg配置

Lean 主题为块（如字体大小和颜色设置）提供了预配置的 Gutenberg 选项。

这些设置在 Backend/WP/Gutenberg/Editor.php 中更改。

自定义字体大小

编辑器侧边栏中的字体大小选项可以自定义。通过添加短名称和字体大小设置样式，在 frontend/components/atoms/gutenberg/_typography.scss 中。字体大小选择器选项也可以完全删除。

自定义颜色

要编辑用户可以选择的颜色，请将颜色添加到 frontend/components/atoms/gutenberg/_colors.scss 中。颜色调色板选项也可以完全删除。

允许的块

允许在 Gutenberg 编辑器中使用的块也可以进行配置。区分可以按页面或帖子类型进行。

自定义块

有关如何创建自定义块的信息，请参阅 Gutenberg 块子部分。

扩展编辑器

Lean 主题已预置并准备好使用 JS 构建系统来自定义 Gutenberg 编辑器。

例如，您可以为核心块添加自定义字段。

转到 backend/WP/Gutenberg/js 并运行

yarn start

有关如何扩展 Gutenberg 编辑器的更多信息：https://developer.wordpress.org/block-editor/

辅助函数

TODO：向主题添加辅助函数

资产

在这里可以存储前端静态文件夹及其子文件夹内的任何静态文件。

图片

所有图像都放置在这里，通常如果有不依赖于变化的静态图像并且来自设计，可以放置在这里。

网络字体

此目录用于放置默认情况下不可用的任何自定义网络字体。

图标

SVG 图标放在这里。

CSS

Lean 主题已集成 TailwindCSS 和 SASS。

风格指南

Lean 主题自带自定义样式指南。更多信息请见此处：https://github.com/wearenolte/lean-theme-styleguide

JavaScript

添加新的JS函数/行为

首先，您需要在更合适的地方创建一个新文件。例如，我们想要为按钮的点击事件创建一个监听器，以便每次点击按钮时都向 body 添加一个类。

在这种情况下，创建一个新的原子（atom）很有意义，例如在 atoms/buttons/toggle-button-listener.js 中创建一个。

// Everything inside of this file is going to be local to the scope of this file
const targetButtonClassName = '.js-button';
const toggleClassName = '.button-is-active';

function myMainAction() {
  const buttons = searchButtons();
  buttons.forEach( attachEvent );
}

function queryTheDOM() {
  return Array.from( document.querySelectorAll( targetButtonClassName ) ) ;
}

function attachEvent( node ) {
  node.addEventListener( 'click', clickListener );
}

function clickListener() {
  document.body.classList.toggle( toggleClassName );
}

export default myMainAction;

如您所见，示例中有几个函数，但只有 myMainAction 函数被导出给外部世界。目前，除非在 main.js 中的 onReady 函数内明确指定，否则这段 JS 不会执行。此函数内部的所有内容都将在 DOM 准备就绪后执行。

因此，按照上面的示例，您需要在 main.js 中添加以下两行：

import myMainAction from './atoms/buttons/toggle-button-listener';

// inside of onReady
function onReady() {
  // other functions before
  myMainAction();
}

注意：代码已被转换（transpiled），因此可以在不支持 import 或 export 的浏览器中执行。

从NPM添加外部包

在您自己的模块中，您可以从 node_modules 中导入文件。您只需确保在 package.json 中添加依赖项。

语法与 import action from 'package-name'; 非常相似；

例如，要添加 flatpickr，需要在终端中运行以下命令：

yarn add flatpickr

要使用该包，您只需要添加以下内容：

import Flatpickr from 'flatpickr';

// Usage example
function init() {
  const node = document.querySelector('.flatpickr');
  const instance = new Flatpickr( node );
}

export default init;

模型和控制器

特定于您的项目的模块应放在 backend 目录中。我们鼓励您遵循单一职责原则，以便每个模块仅尝试解决一个责任，例如，Widgets/Widgets.php 仅尝试解决 Widget 渲染问题。

如果类的路径在 Backend.php 中设置，则每个类的 init() 方法都将自动调用。

要创建一个新模块：

1 - 创建一个新目录，例如：

MyModule/MyModule.php

2 - 检查 `Backend.php` 中是否设置了 MyModule 路径；

3 - 在新类中添加相应的命名空间；

4 - Lean 主题加载器将检查可选的 init() 方法，确保您的此方法具有以下可见性和作用域：

public static

您模块的样板代码应该是这样的：

<?php 
namespace Lean\Backend\MyModule;

class MyModule {
  public static function init() {
    // This code is executed automatically by the loader.
  }
}

您还可以直接在 src 文件夹的顶层创建单个类。这些原则也适用于 init 函数。这对于简单的辅助函数或 WordPress 插件回调很有用。

创建自定义文章类型

要创建自定义文章类型（Custom Post Type），Lean 主题依赖于另一个名为 WP-CPT 的 PHP 库，该库与主题一起安装。

首先创建一个模块，如前所述，并添加相应的代码。

发票 CPT 的示例：

在 backend/WP/CPT/Invoices/Invoices.php 中的代码

<?php 
namespace Lean\Backend\WP\CPT\Invoices;
use Lean\Cpt;


class Invoices {
  const TYPE = 'invoices';

  public static function init() {
    // This code is executed automatically by the loader.
    add_action( 'init', [ __CLASS__, 'register_cpt' ] );
  }
  
  public static function register_cpt() {
    $invoices = new Cpt(
    	[
          'singular' => 'Invoice',
          'plural' => 'Invoices',
          'post_type' => self::TYPE,
          'slug' => 'invoice',
          'supports' => [
            'title',
          ],
          'args' => [
            'menu_icon' => 'dashicons-media-text',
          ],
        ]
    );
    
    $invoices->init();
  }
}

创建端点

在 Backend/WP/Endpoints 文件夹中创建一个类，并在 Backend/WP/Endpoints/Api.php 中初始化它

内置端点

http://[site-url]/wp-json/lean/v1/posts

主题钩子

动作

可用于与此主题一起使用的钩子和过滤器的列表。

lean/before_header

在主 <header> 标签之前和 <body> 标签之后执行的动作。如果您想在网站上添加任何其他标签之前添加某些内容，这将很有用。

lean/after_header

在主 </header> 标签之后执行的动作。如果您想在渲染完标题后添加某些内容，这将很有用。

lean/before_footer

在主 <footer> 标签之前执行的动作。要在添加页面的最后一个标签之前添加某些内容，这将很有用。

lean/after_footer

在关闭 </body> 标签之前和 `tg` 之后执行的动作。要在网站的末尾添加某些内容，这将很有用。

过滤器

以下是可用于在任何时候更改主题设置和选项的可用过滤器集合。

lean/acf_path

使用此过滤器，您可以更改ACF文件的存储位置，默认情况下将ACF组保存到主题所在的acf目录中。

lean/acf_use_custom_location

默认设置为true，使用此过滤器可以取消ACF字段自动保存到lean/acf_path。

贡献

请阅读CONTRIBUTING.md以了解我们的行为准则以及向我们提交pull请求的过程的详细信息。

致谢

感谢以下人员

变更日志

请阅读CHANGELOG.md，该文件将在将新版本发送到master分支时记录项目的更改。

许可

MIT

moxie-lean / lean-theme

维护者

详细信息