gooddaywp/primera

此包已被废弃且不再维护。未建议替换包。

WordPress的现代化启动主题，使用Laravel的Blade模板引擎。

维护者

详细信息

github.com/gooddaywp/primera

源代码

问题

文档

安装: 20

依赖: 0

建议者: 0

安全: 0

星标: 4

关注者: 3

分支: 0

开放问题: 15

类型:项目

1.0.3 2020-04-14 12:10 UTC

Requires

GPL-3.0-or-later 62086a7206a526c8008db0f0a173521f171bb23c

themewordpresslaravelwpblademixwoocommercebabel

This package is auto-updated.

Last update: 2022-07-01 14:53:09 UTC

README

Primera是一个拥有现代化开发工作流程的WordPress主题。

目录

特性

  • Laravel的Blade模板引擎
  • Laravel的Mix webpack包装器
  • 用于模板数据传递的控制器
  • 通过Babel.js的现代化JavaScript
  • 通过Sass、Less、Stylus或PostCSS的现代化CSS
  • Autoprefixer和Browserlist
  • Browsersync实时更新
  • Composer和NPM包管理器
  • Composer PSR-4自动加载器
  • zip和pot文件的构建脚本
  • 单点Dotenv配置
  • GPL许可

要求

在继续之前，请确保已安装所有依赖项。

安装

下载WordPress，手动或通过终端使用WP CLI。

$ wp core download --path=my-project

然后在终端中打开主题目录。

$ cd my-project/wp-content/themes

如果您还没有安装Composer，请现在安装。然后在终端中运行以下命令。

$ composer create-project gooddaywp/primera my-theme-name

最后，运行以下命令安装所有NPM包。

$ cd my-theme-name && npm install

完成。

快速入门

安装完成后，请按照以下步骤尝试Primera。

  1. 将primeraTextDomain替换为您首选的文本域
  2. 打开.env文件，并根据您的项目调整值
  3. 在终端中运行npm start（在此文件夹内）
  4. 访问终端中显示的localhost URL

Autoprefixer & CSS

由于Autoprefixer PostCSS插件，无需在CSS中编写供应商前缀。Browserlist用于让您通过修改.browserlistrc文件来调整您希望支持的浏览器（使用此指南）。

请记住，Autoprefixer无法帮助旧浏览器理解它们不支持CSS属性。要检查哪个浏览器支持什么，请访问caniuse.com。

Webpack & ES6

Primera 允许您通过 Laravel Mix 和 Webpack 使用所有 ES6 功能。如果您是 ES6 的新手，以下是一些有用的链接，帮助您开始学习。

Mix & NPM 脚本

Primera 使用 Laravel Mix，它是 webpack 的一种包装。Mix 使得设置模块打包和资源编译变得非常简单。其配置文件位于 ./webpack.mix.js。NPM 命令 run 允许您运行 package.json 文件中 "script" 部分下的任何命令。使用以下命令来构建、翻译和开发您的主题。

npm start
运行 npm run watch 的快捷方式。

dev 或 development
渲染所有资源为未压缩状态，且不监视变化。

prod 或 production
渲染所有资源为压缩状态，且不监视变化。

watch
启动 browsersync 并渲染所有资源为未压缩状态。此任务会持续监视您的资源变化，并在检测到变化时刷新浏览器窗口。可以通过键盘快捷键 ctrl+c 退出此任务。

pot
将创建一个包含您的语言目录的 .pot 文件。此文件由 WordPress 用于允许翻译。

zip
在创建包含您的主题的 Zip 文件并将其放置在您在 .env 文件中指定的目录之前，将运行 build 命令。

build
此任务将首先运行 npm prod，然后运行 npm pot，然后复制您使用 .env 指定的文件到 .env 文件中指定的目录。之后，此任务还将创建当前构建的 Zip 文件。

文件夹结构

/app
此文件夹包含模板控制器和主题辅助函数。此文件夹映射到 composer 中的 autoload PSR-4 设置。

/config
配置文件夹提供主题和插件配置示例作为起点。您可以根据需要修改、删除或添加。

/public
此文件夹包含图像、字体以及从源文件夹生成的编译资源（CSS & JS）。您还可以在此存储其他静态资源。

/source
源文件夹包含需要编译的资源（即 CSS、JS）。视图文件夹包含 Blade 模板文件，这些文件也被编译/缓存，并放置在通过 /config/primera.php 指定的目录中。

/tasks
此文件夹包含构建脚本。它们被放置在主题中，而不是 NPM 包中，以便您可以根据项目需求进行修改。

/templates
模板文件夹包含自定义 WordPress 页面模板。

App 文件

在整个主题中，"app" 文件用于处理要应用于主题全局的数据。

/app/Controllers/App.php
此文件为所有 Blade 模板提供全局值。

/source/css/app.css & /source/js/app.js
这些文件编译全局 JS & CSS。

/source/views/app.blade.php
这是主要的模板文件，其他视图都是扩展它的。

控制器、视图和视图脚本

控制器类名遵循与 WordPress 相同的层次结构。这意味着，要为 front-page.php WordPress 模板创建控制器，您需要在控制器文件夹中创建一个名为 FrontPage.php 的控制器。此控制器将自动为此模板文件加载。

Primera会告诉WP在views目录中查找对应的Blade模板（又称视图）。模板名称不需要修改。这意味着，front-page.php或front-page.blade.php都可以正常工作。

如果您想使用默认的WordPress模板，只需将其放置在WP主题的根级别。但是，在这种情况下，控制器和Blade模板将无法工作。

Primera还会在您的public文件夹中查找所谓的视图脚本。这意味着与WP模板同名（例如front-page.css）的CSS或JS脚本将自动在首页模板中排队。

要使数据可用于视图，您只需在控制器中创建公共函数。每个函数代表传递给视图的变量。所有函数名都将转换为snake_case。这意味着myCoolFnName将变成my_cool_fn_name。因此，最好在编写控制器中的函数时使用snake case，以避免以后出现混淆。

请参阅soberwp/controller文档以完全了解它们的工作方式。

AJAX动作 & REST路由

您可以根据自己的喜好处理AJAX & REST。然而，Primera提供了一个方便的方式来排队REST路由和AJAX动作。除了控制器的生命周期方法外，Primera还添加了两个额外的生命周期方法（__ajax_actions & __rest_routes），以简化包括REST和AJAX回调。

由于控制器是通过WP的init动作钩子加载的，因此这些方法也是通过这个钩子加载的。然后通过rest_api_init钩子挂载__rest_routes方法。为了将异步代码与控制器中的其他代码分离，提供了一个使用PHP trait的示例。但是，如果您愿意，也可以直接在控制器中编写代码。

请注意，所有AJAX & REST回调都是静态的。控制器不会将静态方法作为数据暴露给视图。如果ajax/rest回调被定义为常规公共函数，它们的die()语句将破坏页面，因为所有公共函数都会自动暴露给相应的视图。将函数定义为静态可以避免这种情况，同时仍然允许函数运行。

Blade模板

Laravel的Blade模板非常容易学习。只需查看文档和/source/views中的演示文件，您就会迅速上手。

自定义Blade指令

Blade模板允许创建自定义指令和组件别名。要查看如何使用此功能的工作示例，请查看/config/primera.php。

composer包primera-lib已添加以下指令，可在Blade模板中使用。

@dump(var)
显示变量的内容。

@dd(var)
显示变量的内容并通过die()退出脚本。

@debug
在页面上显示所有控制器数据。

@code
显示所有可用变量，并用花括号括起来。这对于获取传递给视图的所有数据并在模板文件中分配数据非常有用。

@codeif
与@code相同，但在数据周围有@if语句。

Dotenv配置

在Primera中，.env文件的工作方式略有不同。

.env文件通常用于安全地存储敏感信息，如API密钥，并且也不会提交到版本控制（例如GitHub）。通常，这些.env文件包含特定于应用程序或网站所在环境的特定信息。

在本项目中，.env文件代表一个设置非环境而是项目特定数据的单一点，这些数据可以通过Node.js和PHP一样访问。因此，.env文件也可以并且应该提交到您的版本控制系统。

关于Primera中的.env文件有几个重要事项需要注意。

  • 请不要将其中的敏感信息（例如API密钥）放入其中
  • 由于dotenv NPM包，以下目前不可用
    • 不支持换行，每个值必须写在同一行
    • 嵌套变量目前不可用
  • Primera在PHP中将逗号分隔的字符串转换为数组（例如"one, two, three"变为["one", "two", "three"]）

配置文件夹 & 层次结构

Primera使用composer包Brain\Hierarchy。此包允许您检查主题配置（/config）中的模板层次结构，并为不同的模板加载不同的配置。以下是如何设置此示例。

use Brain\Hierarchy\Hierarchy;
$templates = (new Hierarchy)->getTemplates($GLOBALS['wp_query']);
if (in_array('archive', $templates)) {
    // code for archive.php
}

辅助函数

Primera提供了一些辅助函数，可以让您的生活更加轻松。这些函数可以在/app文件夹中找到。

大多数Laravel的辅助函数在Primera中也是可用的。有关更多信息，请访问文档或查看源代码（./vendor/illuminate/support/helpers.php）。

翻译

由于wp-pot节点模块的工作方式，可翻译的字符串需要在控制器中定义。它不能读取blade文件，因为它不识别blade为PHP。

待办事项

  • 在/source/views/components/comments.blade.php中创建适当的注释示例
  • 添加配置代码以防止从WP.org更新主题
  • 如果不存在构建任务，则Zip任务必须首先运行构建任务
  • 将composer validate --no-check-all --strict添加到构建脚本中，以确保composer json和lock文件相同
  • 为视图创建更有用的起始设置
  • 为共享配置文件找到比.env更好的解决方案，或者使.env更安全
  • 添加替换-in-file节点模块来替换某些字符串，如text-domain（对安装或构建过程很有用）
  • 添加有关使用WooCommerce blade模板的说明
  • 使用WP CLI命令 $ wp i18n make-pot代替NPM模块
  • 添加到PostCSS：http://preset-env.cssdb.org/