README

Ship 是一个基于 Underscores、UnderStrap 和 Sage 等巨头的 WordPress 入门主题。

我们称之为 "Ship"，因为它帮助我们更快地推出优秀的网络体验。这种速度是通过一些关于工具和流程的高度主观决策实现的；如果你想要多样性，可以 fork Ship 来创建自己的，或者使用 Sage。

为什么你应该用 "Ship" 来创建你的下一个 WordPress 主题

它是完全免费的（就像啤酒一样：GPL-2.0）
基于 Bootstrap 4 的 Sass 样式表
移动优先，响应式设计
使用 NPM 来管理依赖关系（再见 Bower！）
包含构建脚本，基于 Laravel Mix （Webpack 的高雅伪装）
自动压缩、连接和版本化 CSS 和 JS
传统 PHP 模板或使用 Laravel Blade 来实现 DRY（需要 PHP 7）
Jetpack 准备就绪
WooCommerce 支持
Contact Form 7 支持
翻译就绪

其他功能，正在开发中

Algolia 准备就绪：管理员和访客的实时搜索
使用 Vue.js 来构建作为单页应用程序的主题
基于 Advanced Custom Fields 的主题构建框架
实时重载
用于生成商业分发的构建脚本

许可证

Ship 在 GPL 版本 2 或（根据您的选择）任何更高版本下发布

支持

如果您需要或可以支持此项目，请前往问题

变更日志

查看变更日志

开始一个新项目

您需要安装 Composer。

打开您的终端
运行 composer create-project withfatpanda/ship "your/theme/path"
回答屏幕上的问题

开发

Ship 想要使您的开发工作尽可能无痛。以下我们快速浏览了几个可能对您来说是新主题的几个话题，包括 依赖管理、构建和 资产加载。

如果您想更快地开始，流程可能如下所示

安装 Composer 和 NPM
使用 composer 创建新的 Ship 项目（您的主题）：composer create-project withfatpanda/ship "path/to/your/project"
安装前端依赖：npm install
启动您的监视器（在您编辑代码的同时在后台构建前端）：npm build watch
将主题的脚本放入 src/js/theme.js
在 src/js/customizer.js 中构建自定义器功能
在 src/sass/theme/_theme.scss 中设计您的主题样式
在 src/sass/custom-editor-style.scss 中设计管理编辑器中的内容样式
完成开发、测试、分发

安装依赖

Ship 的所有 JS 和 CSS 都是建立在一系列核心依赖之上，其中最重要的是 Bootstrap。

您的新构建系统 Laravel Mix 也是一个依赖。

所有这些依赖都通过 NPM 管理。如果您还没有安装 NPM，您需要先安装它。

接下来，从您主题项目的根目录运行 npm install。

您主题的所有依赖都将出现在名为 node_modules/ 的文件夹中。将有很多文件——不要因此而感到恐慌，欢迎来到现代 JavaScript 开发。

一旦您的依赖项已加载，您可以通过运行以下命令进行测试构建：npm run dev。

如果您看到“编译成功...”的消息，则说明一切正常。如果没有，请在此处发布您的问题。

前端源文件

支撑您新主题的 JS 和 CSS 源文件如下——其中还有其他文件，但以下列出的文件与学习这部分相关

├── src
    ├── img
    │   ├── header.jpg
    ├── js
    │   ├── customizer.js
    │   └── theme.js
    └── sass
        ├── theme
        │   ├── _theme.scss
        │   └── _variables.scss
        ├── custom-editor-style.scss
        └── theme.scss

您希望将主题的 JavaScript 放入 src/js/theme.js 并/或将其他代码模块加载到该文件中。

您希望将主题的样式放入 src/sass/theme/_theme.scss 并/或将其他代码模块加载到该文件中。

其他前端源文件

img/header.jpg 是一个示例，以便您知道在哪里放置主题的静态图像；放置在此处的文件将在构建过程中被优化并复制到公共资产中

js/customizer.js 是您可以写入代码以将其加载到自定义器的位置；其中包含一些示例

js/theme.js 是您可以写入代码以将其加载到主题每个视图的位置

sass/theme/_theme.scss 是您可以写入影响 Bootstrap 样式以及您主题样式的 SCSS 的位置

sass/theme/_variables.scss 是您可以设置变量以影响 Bootstrap 的样式以及您主题的位置

sass/custom-editor-style.scss 是您可以写入生成在 TinyMCE 内加载的样式表的 SCSS 的位置；默认情况下，它只加载主题的主样式表，并为 <body> 标签添加一些填充

sass/theme.scss 将所有特定于主题的 SCSS 代码与 Bootstrap、Font Awesome 以及来自 Underscores 和 UnderStrap 项目的部分魔法结合起来

构建

构建前端代码只需在命令行中运行 NPM 脚本。只需打开您的终端，切换到主题项目的根目录，并运行以下任何命令

npm run dev 这将构建未压缩的 JS 和 CSS，并在完成构建后使用开发环境设置

npm run watch 使用此命令进行活跃的开发会话——它将构建未压缩的 JS 和 CSS 开发版本，并将开始“监视”您的原始源文件，每次您进行更改时都会将其重新编译到构建输出中

npm run hot 即将推出：实时重新加载；基本上与 watch 命令类似，但任何对原始源文件（包括 PHP 文件）的更改都会导致浏览器自动刷新

npm run production 这将构建压缩并带有版本的 JS 和 CSS，以便分发

npm run dist 这个命令会构建出你的JS和CSS的发行版副本，就像 production 命令一样；然后，这个命令会在 dist/ 中创建一个干净的主题副本，可以无需所有开发内容（构建配置文件、原始JS和Sass代码）即可发货。

你的构建源文件

运行上述任何前端构建脚本都会在项目的根目录下的 assets/ 文件夹中生成并放置文件

├── assets
    ├── css
    │   ├── custom-editor-style.css
    │   ├── custom-editor-style.css.map
    │   ├── theme.css
    │   └── theme.css.map
    ├── fonts
    │   └── ... all the fonts extracted during the build
    ├── img
    │   └── ... all the images from src/img
    ├── js
    │   ├── customizer.js
    │   ├── customizer.js.map
    │   ├── theme.js
    │   └── theme.js.map
    └── mix-manifest.json

这些编译文件与原始源文件之间的关系应该是相当直接的（提示：它们的名称都是一样的），但需要注意的是 mix-manifest.json 文件。

mix-manifest.json 文件，在每个构建过程中自动生成，为你的编译文件建立版本，即 版本控制。当使用资产加载（见下文）时，文件版本号将自动附加到它们的URL上——这有助于强制这些资源从访客的浏览器中过期，从而保持你的主题体验最新。

加载资产

当通过PHP加载主题资产时，使用全局函数 asset($path)，其中 $path 是相对于主题的资产文件夹的路径。例如，调用 asset('css/theme.css') 将生成主题主要样式表的URL。有关上下文中的示例，请参阅脚本 src/php/inc/enqueue.php。

实时重载

即将推出。

Sass：语法优美的样式表

如果你没有使用CSS预处理器来构建你的样式表，你正在浪费很多时间。如果你只使用过LESS，那么跃迁到Sass相当直接，就像我们一样，我们认为你会发现Sass更健壮且支持更好。更多关于Sass的信息在这里。

ES6和CommonJS

更多细节即将推出。

定制你的构建

你的前端构建由NPM和Laravel Mix（Webpack）提供支持。上述构建部分中描述的构建命令可以在你的 package.json 文件中的 scripts 部分找到。它们最终都通过Laravel Mix调用了Webpack构建。

Laravel Mix可以通过编辑 webpack.mix.js 进行配置。你可以用于自动化构建的大多数函数都在这个配置文件中列出。你也可以在这里阅读Mix的文档这里。

右对齐样式？

只需在主题根文件夹中添加一个名为 rtl.css 的新文件。根据此描述在此文件中添加所有对齐方式：https://codex.wordpress.org/Right_to_Left_Language_Support

单页应用主题