README

Toybox 是 WordPress v6+ 和 PHP 8+ 的一款简单块状主题模板。

特性

完全支持 Gutenberg。
基于 OOP 的主题引擎。
支持图像、背景图像、CSS 和 JavaScript 文件延迟加载。
通过 Laravel Mix 简化资产构建系统。
命令行界面。

安装

在您的 wp-content/themes 目录中运行以下命令以下载和安装主题（及其依赖项）

composer create-project toybox/theme toybox --stability=dev --remove-vcs

运行 npm i。

编译资产

Toybox 使用 Laravel Mix 进行资产编译。

要编译资产，请运行 npm run build。

要编译生产构建，请运行 npm run build:prod。这将压缩所有输出文件并省略映射文件。（默认情况下不会删除现有的映射文件）。

要运行监视脚本以在内容更改时重新编译资产，请运行 npm run watch。

延迟加载

Toybox 包含内置的延迟系统以提高性能。

延迟加载图像

要延迟加载图像，将 img 元素的 src 属性与 data-lazy 交换

<img data-lazy="/path/to/image.jpg">

延迟加载背景图像

要延迟加载背景图像，将背景图像 URL 添加到任何非 img 元素的 data-lazy 属性

<div data-lazy="/path/to/image.jpg">
    Content
</div>

延迟加载 CSS

要延迟加载 CSS，将样式表的 URL 添加到任何元素的 data-lazy-css 属性

<div data-lazy-css="/path/to/stylesheet.css"></div>

延迟加载 JS

要延迟加载 JS，将脚本的 URL 添加到任何元素的 data-lazy-js 属性

<div data-lazy-js="/path/to/script.js"></div>

助手函数

Toybox 随带一些主题级别的助手函数

`mix(string $fileName, string|null $manifestPath = null)`

mix() 函数检索给定 CSS/JS 文件的路径，相对于主题的基础目录。这包括 Mix 添加的任何缓存破坏字符串。

`uri(string $fileName)`

uri() 函数获取给定文件相对于主题基础目录的路径。

`slugify($title, $separator = '-')`

slugify() 函数检索字符串的 URL 友好表示形式。

`singularize($value)`

singularize() 函数返回给定单词或短语的单一形式。

`pluralize($value, $count)`

pluralize() 函数返回给定单词或短语的复数形式，如果 $count 不等于 1。

`matchCase($value, $comparison)`

matchCase() 函数尝试匹配两个给定字符串之间的大小写。

`field($fieldName, $postID)`

AFC 的 get_field() 函数的 WordPress 友好替代品。

`repeater($fieldName, $postID, $subFields)`

AFC 的 get_field() 函数的 WordPress 友好替代品，它返回重复器的字段。

`group($fieldName, $postID, $subFields)`

AFC 的 get_field() 函数的 WordPress 友好替代品，它返回组的字段。

`image_url($imageID)`

从附件 ID 获取附件 URL 的函数。

`image_alt($imageID)`

从附件 ID 获取附件 alt 文本的函数。

命令行

Toybox 包含命令行界面。要在命令行中访问 Toybox，请在您的终端客户端中进入主题目录并运行以下命令

php toybox

制作块

您可以使用 make:block 命令创建块。

php toybox make:block "My Block" --without-styles --without-js

这将创建您的块在 /blocks 目录下。

现在块以Blocks v2格式生成。元数据现在被添加到一个名为block.json的文件中，该文件作为生成块的一部分。您可以在[这里](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/)查看该文件的官方WordPress文档。[这里](https://www.advancedcustomfields.com/resources/acf-blocks-with-block-json/)有关于ACF实现的其他信息。

创建短代码

您可以使用make:shortcode命令创建短代码。

php toybox make:shortcode "My Shortcode" --with-styles --with-js

这将创建您的短代码在/shortcodes目录下。

创建文章类型

您可以使用make:post-type命令创建文章类型。

php toybox make:post-type "Services"

这将创建您的文章类型在/post-types目录下。

WebP转换

您可以使用images:convert命令将单个图像或包含图像的路径转换为WebP格式。

php toybox images:convert -p images/image.png

php toybox images:convert -p images

请注意，此命令不会覆盖原始图像 - 它将根据原始源创建一个新图像，并将".webp"扩展名附加到末尾。

处理目录时，它也只会转换以下文件类型：.jpg、.jpeg、.png。

导出块

export:block命令将任何与给定块关联的ACF字段组导出到块的自己的acf-json文件夹中。如果您正在使块可分发，则必须运行此命令。

php toybox export:block "My Block"

代码片段

Toybox包含内置的代码片段功能。代码片段的想法是，它们是您希望作为主题一部分加载的单独代码片段，不需要构建到主题核心中。由于您可能希望在不同钩子或过滤器上使用这些代码片段，因此它们不会在特定的钩子上加载，而是在主题的boot()方法期间加载。

要创建代码片段，请将您的代码放入snippets目录中的一个PHP文件中。请确保使用WordPress的add_action或add_filter（或类似功能）以及适当的优先级，以避免给每个页面加载添加不必要的开销。

toybox / theme

维护者

详细信息