使用Sage现代化WordPress主题开发

Sage：现代WordPress主题框架

几年前，我们以WordPress主题框架为“根源”。 此后，根已经发展成为一家提供两个强大工具集的公司：鼠尾草和基岩。本文着重于Sage，这是一个利用HTML5样板，Gulp，Bower和Bootstrap的框架，用于简化WordPress主题开发。我们将概述这些工具，安装，自定义和基本的Sage Workflow。

鼠尾草的关键优势：>

使用HTML5样板，Gulp，Bower和Bootstrap等工具进行现代化的WordPress主题开发，从而产生了有效且响应迅速的主题。
• >
>通过强大的构建过程简化资产管理和自动化。
>提供了一个清晰的目录结构，可轻松导航和自定义。
• >为各种主题方面提供了广泛的自定义选项。
通过browsersync。
• 基本工具：

html5样板：

>可提供坚固基础的强大前端模板。

• gulp：用于诸如缩小，串联，图像优化和测试之类的任务的自动化工具。
• 鲍尔：>前端资产的软件包管理器，简化了JavaScript库的包含。
• > browsersync：启用同步的文件更改和跨多个设备的交互。
• 资产构建器＆Wiredep：协助资产收集和依赖注入。
> bootstrap：
• 一个流行的前端框架，用于创建响应式网站。
• >安装： SAGE安装使用Git。 导航到您的WordPress主题目录并在您的终端中执行以下命令（替换为
>用您选择的主题名称）：

>

>或者，从github存储库下载zip文件，提取并将内容复制到WordPress主题目录中的新文件夹。>>> 接下来，通过将此行添加到您的

>文件：>来为开发模式配置WordPress：>

theme-name

主题目录结构：

git clone https://github.com/roots/sage.git theme-name

Sage保持标准的WordPress主题结构，并具有增强功能的添加：

• >核心文件（index.php，functions.php，404.php，等）
）
• lib>目录：包含主题配置和实用程序文件（assets.php，init.php，titles.php）。
• >目录：将SASS/SIMEL文件包含在assets main.css
目录：包含用于主题翻译的
• >文件。lang> sage.pot
>目录：持有基于HTML5样板的模板。
• templates

自定义：

>通过

>文件自定义Sage。 关键自定义点包括：

lib/init.php

标题标签：
• 启用/禁用标题标签修改>。 add_theme_support('title-tag')导航菜单：
使用
• >。注册导航菜单 register_nav_menus()>张贴缩略图：
启用/禁用特色图像，使用
• 。 add_theme_support('post-thumbnails')帖子格式：
使用
• 管理启用的邮政格式 add_theme_support('post-formats') html5标记：
使用
• >。。 add_theme_support('html5')编辑器样式节：
>使用
• 。 侧栏：add_editor_style()>在
函数中使用
• 寄存器侧栏。 register_sidebar()widgets_init()工作流：

Sage的工作流程依赖于Node.js和NPM软件包。使用NPM安装必要的工具：

使用Bower：

使用Bower命令来管理前端软件包：

git clone https://github.com/roots/sage.git theme-name

：搜索包装。

>

：安装软件包。

• bower search <query>：列表已安装的软件包。
• bower install <package>：卸载软件包。
• bower list
使用Gulp：
• bower uninstall <package>>安装Gulp插件：

>运行以编译和优化资产。 提供实时更新。

文件控制构建过程。 根据需要自定义任务和设置

和

。

define('WP_ENV', 'development');

。

gulp结论： gulp watch Sage为WordPress主题开发提供了强大而有效的方法。通过利用现代工具和简化的工作流程，开发人员可以轻松地创建高质量的响应式主题。 本文提供的过程和自定义选项的详细说明应使您能够有效利用SAGE为下一个WordPress主题项目。

以上是使用Sage现代化WordPress主题开发的详细内容。更多信息请关注PHP中文网其他相关文章！