abetter/wordpress

更佳的Laravel + Wordpress集成,用于构建非常快的Web应用。

1.6.26 2022-09-01 20:00 UTC

README

Packagist Version Latest Stable Version Total Downloads License

ABetter Wordpress是一个一键式解决方案,可以在Laravel之上使用Wordpress来构建非常快的Web应用,同时仍然使用世界上使用最广泛的CMS来管理内容和翻译。

我们快速Web应用的原理是关注点分离(SoC)和可扩展的静态缓存。我们让Wordpress处理内容后端,而Laravel处理独立的客户端。动态内容相关的API和Web服务也通过Laravel路由。

使用ABetter Toolkit,我们为Laravel/Blade提供了一些新的强大指令,帮助我们尽可能地在独立和可重用组件中分离内容——灵感来自ReactJS/VueJS。

要求

  • PHP 7.2+
  • Imagick 3+
  • MySQL 5.7+
  • Composer 1.6+
  • Laravel 5.8+
  • Deployer 6+
  • Node 10.0+
  • NPM 6.4+

安装

通过Composer

composer create-project --prefer-dist laravel/laravel . "6.*"
composer require abetter/wordpress

Laravel修改

将安装/更新脚本添加到composer.json中

"scripts": {
	"post-install-cmd": [
		"ABetter\\Wordpress\\ComposerScripts::postInstall"
	],
	"post-update-cmd": [
		"ABetter\\Wordpress\\ComposerScripts::postUpdate"
	]
}

注意:该脚本将修改使用全局__()方法进行字符串翻译的任何核心文件,并添加跨框架的解决方案。遗憾的是,Wordpress核心在定义全局__()之前没有检查function_exists,这会破坏未修改的Laravel + Wordpress兼容性。

向app/Http/Kernel.php中添加中间件

protected $middleware = [
	\ABetter\Toolkit\SandboxMiddleware::class,
	\ABetter\Wordpress\Middleware::class,
];

注意:中间件有助于Blade在开发许多嵌套组件时清除视图缓存。

准备工作

  • 使用.loc设置本地主机域名(例如 www.abetter.loc
  • 将主机指向/public
  • 创建本地MySQL数据库

设置Laravel

编辑.env设置

APP_NAME=<name>
APP_VERSION=<version>
APP_KEY=base64:insert/base64/encoded/aes256/encryption/key=
APP_ENV=<sandbox|local|dev|stage|production>
APP_DEBUG=<true|false>
APP_URL=<url>
APP_PROXY=<browsersync-proxy-url>
DB_DATABASE=<database>
DB_USERNAME=<username>
DB_PASSWORD=<password>
WP_THEME=<optional-views-subfolder>
WP_AUTOLOGIN=<optional-autologin-user>
WP_REQUIRELOGIN=<optional-require-login-to-view>

注意:在配合Browsersync开发时,请使用APP_ENV=sandbox。

将路由添加到/routes/web.php中

// ABetter Toolkit services
Route::any('image/{style?}/{path}', '\ABetterToolkitController@handle')->where('path','.*');
Route::any('proxy/{path}', '\ABetterToolkitController@handle')->where('path','.*');
Route::any('browsersync/{event?}/{path}', '\ABetterToolkitController@handle')->where('path','.*');
Route::any('service/{path?}.{type}', '\ABetterToolkitController@handle')->where(['path'=>'.*','type'=>'json']);

// ABetter Wordpress main route
Route::any('{path}', '\ABetterWordpressController@handle')->where('path','^(?!nova-api|nova-vendor|nova|api).*$');

注意:删除根或wp路径的任何其他路由(例如默认欢迎页面)。

将Deployer文件复制到根目录并运行一次设置

cp vendor/abetter/toolkit/deploy/deploy.php deploy.php
dep setuponce local

如有需要,运行审核修复

npm audit fix

注意:仅在全新项目上运行设置一次,因为它将替换/resources和/public中的文件。

测试构建应用

dep build local

设置Wordpress

在浏览器中访问主机(例如 http://www.abetter.loc)并按照安装说明操作。

转到/Appearance/Themes并激活ABetter主题。

转到/Plugins并激活

  • 高级自定义字段。
  • 禁用Gutenberg(完整支持即将推出...)。
  • ... 任何您需要的其他支持的插件。

添加默认页面

<name> : <slug> : <template> : <order>
Start : start : default : -1
News : news : default : 200
Privacy Policy : privacy-policy : default : 200
Search : search : search : 400
403 Forbidden : 403-forbidden : error : 403
404 Not found : 404-not-found : error : 404

转到/Settings/Reading

  • 选择将主页设置为起始页
  • 选择新闻作为文章页面

最后,在浏览器中访问主机

恭喜您的网站上线!

用法

开发

使用npm启动webpack和Browsersync

npm run watch

... 或者如果使用php artisan serve

php artisan serve & npm run watch

注意:使用"php artisan serve"时,您需要修改.env中的APP_PROXY为http://127.0.0.1:8000

组件文件结构

.
├── public                                   # Handled by build script (will be overwritten)
├── routes                                   # Add any development routes to /web.php
├── resources                                #
│   ├── scripts                              # Global scripts in "app.js"
│   ├── styles                               # Global styles in "app.scss"
│   ├── fonts                                # Fonts here (will copy to /public on build)
│   ├── images                               # Images here (will copy to /public on build)
│   ├── videos                               # Videos here (will copy to /public on build)
│   ├── views                                #
│   │   ├── <theme>                          # Subfolder defined in .env / WP_THEME
│   │   │   ├── template.blade.php           # Template file requested in route
│   │   │   │   ├── components               #
│   │   │   │   │   ├── menu                 # Component subfolder:
│   │   │   │   │   │   ├── menu.blade.php   # Template file : @component('components.menu',TRUE)
│   │   │   │   │   │   ├── menu.scss        # Sass file : @style('menu.scss')
│   │   │   │   │   │   ├── menu.js          # Javascript file : @script('menu.js')
...

/vendor/abetter/wordpress/                   # Default components will be used if not overridden!
├── views                                    # (e.g. html head start/end is rendered from here)
│   ├── default                              #
│   │   ├── robots.blade.php                 # Default Robots.txt template
│   │   ├── sitemap.blade.php                # Default Sitemap.xml template
│   │   ├── components                       #
│   │   │   │   ├── html                     # Default HTML head components
│   │   │   │   ├── missing                  # Default debugging for missing components
│   │   │   │   ├── robots                   # Default Robots.txt component
│   │   │   │   ├── sitemap                  # Default Sitemap.xml component
...

注意:如果blade文件与文件夹具有相同的basename,组件名称将自动解析。

注意:组件中链接的JS/Sass文件在开发中将是外部文件以支持Browsersync实时同步,但在Stage/生产环境中将嵌入到HTML源中,以实现更好的缓存。

注意:您可以使用第二个参数为TRUE来自动结束一个@component,以避免编写@endcomponent,例如在不使用任何插槽或嵌套内容时。

部署

(即将推出)

贡献者

Johan Sjöland johan@sjoland.com
高级产品开发人员:ABetter Story Sweden AB。

许可证

MIT许可证。请参阅许可证文件以获取更多信息。