Brad's Boilerplate WordPress 项目教程

Brad's Boilerplate WordPress 项目教程

brads-boilerplate-wordpress An example starter theme and block-type plugin that use @wordpress/scripts for JS & CSS 项目地址: https://gitcode.com/gh_mirrors/br/brads-boilerplate-wordpress

1、项目的目录结构及介绍

Brad's Boilerplate WordPress 项目包含多个主题和插件的样板文件夹。以下是主要目录结构的介绍：

brads-boilerplate-wordpress/
├── brads-boilerplate-block-plugin-tailwind/
├── brads-boilerplate-block-plugin/
├── brads-boilerplate-theme-tailwind/
├── brads-boilerplate-theme/
├── brads-fse-hybrid-theme/
├── classic-plugin-custom-menu/
├── classic-plugin-settings-menu/
├── interactivity-block-tailwind/
├── interactivity-block/
├── .gitignore
├── LICENSE
└── README.md

目录介绍

• brads-boilerplate-block-plugin-tailwind: 使用 Tailwind CSS 的区块插件样板。
• brads-boilerplate-block-plugin: 区块插件样板。
• brads-boilerplate-theme-tailwind: 使用 Tailwind CSS 的主题样板。
• brads-boilerplate-theme: 传统主题样板，使用 SCSS 和 WordPress 的 React 库。
• brads-fse-hybrid-theme: 全站编辑（FSE）主题样板，使用自定义区块。
• classic-plugin-custom-menu: 经典插件样板，包含自定义菜单。
• classic-plugin-settings-menu: 经典插件样板，包含设置菜单。
• interactivity-block-tailwind: 使用 Tailwind CSS 的交互式区块样板。
• interactivity-block: 交互式区块样板。
• .gitignore: Git 忽略文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文件。

2、项目的启动文件介绍

每个样板文件夹中都包含一个 package.json 文件，用于管理项目的依赖和启动命令。以下是启动文件的介绍：

package.json

{
  "name": "brads-boilerplate-theme",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run build && npm run watch",
    "build": "wp-scripts build",
    "watch": "wp-scripts start"
  },
  "dependencies": {
    "@wordpress/scripts": "^12.0.0"
  }
}

启动命令

• npm install: 安装项目依赖。
• npm run start: 启动开发模式，监听文件变化并自动编译。
• npm run build: 构建生产环境代码。

3、项目的配置文件介绍

.gitignore

# Ignore node_modules
node_modules/

# Ignore build files
build/

# Ignore WordPress core files
wp-config.php
wp-content/uploads/

LICENSE

项目使用 MIT 许可证，允许自由使用、修改和分发代码。

README.md

项目的说明文件，包含项目的概述、安装步骤和使用说明。

# Brad's Boilerplate

This repo contains different theme and plugin boilerplate folders. Here's a quick summary of what makes each one unique.

## Themes

- **brads-boilerplate-theme**: Traditional theme using SCSS and WordPress's React for JS.
- **brads-boilerplate-theme-tailwind**: Same as above, but uses Tailwind CSS.
- **brads-fse-hybrid-theme**: Block theme using custom blocks.

## Plugins

- **brads-boilerplate-block-plugin**: Block plugin boilerplate.
- **brads-boilerplate-block-plugin-tailwind**: Same as above, but uses Tailwind CSS.

## Installation

1. Clone the repo.
2. Navigate to the desired folder.
3. Run `npm install`.
4. Run `npm run start` to start development.

以上是 Brad's Boilerplate WordPress 项目的教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。

brads-boilerplate-wordpress An example starter theme and block-type plugin that use @wordpress/scripts for JS & CSS 项目地址: https://gitcode.com/gh_mirrors/br/brads-boilerplate-wordpress