README

将 Laravel Blade 模板引擎添加到 WordPress 中

WordPlate 的安装（对于基本 WordPress 跳过）

从添加 composer 包开始

composer require starring-jane/wordpress-blade

在主题的 functions.php 中创建一个 WordpressBlade 实例

use StarringJane\WordpressBlade\WordpressBlade;

WordpressBlade::create(
    base_path('resources/views'), // Path to all blade files
    base_path('storage/views/cache'), // Path to blade cache
    base_path('public/themes/janes/components') // Path to component classes (optional, but recommended)
);

创建以下结构

/public
├── /themes
|   └── /theme-name
|       ├── /components
|       |   └── button.php
|       ├── /templates
|       |   ├── 404.php
|       |   ├── front-page.php
|       |   ├── page.php
|       |   └── single.php
|       └── functions.php
|       └── index.php
|       └── style.css
├── /resources
|   └── /views
|       └── /components
|       |   └── button.blade.php
|       └── /pages
|       |   └── page.blade.php
|       └── index.blade.php
└── /storage/cache/views

WordPress 的安装（对于 WordPlate 跳过）

从添加 composer 包开始

composer require starring-jane/wordpress-blade

在 functions.php 中创建一个 WordpressBlade 实例

use StarringJane\WordpressBlade\WordpressBlade;

WordpressBlade::create(
    get_theme_file_path('views'), // Path to all blade files
    get_theme_file_path('cache/views'), // Path to blade cache
    get_theme_file_path('components') // Path to component classes (optional, but recommended)
);

在 composer.json 中自动加载主题命名空间

{
    ...
    "autoload": {
        "psr-4": {
            "ThemeName\\": "wp-content/themes/theme-name"
        }
    },
    ...
}

创建以下结构

/wp-content/themes/theme-name
├── /cache/views
├── /components
|   └── button.php
├── /templates
|   ├── 404.php
|   ├── front-page.php
|   ├── page.php
|   └── single.php
├── /views
|   └── /components
|   |   └── button.blade.php
|   └── /pages
|   |   └── default.blade.php
|   └── index.blade.php
└── functions.php
└── index.php
└── style.css

模板

在 /templates 目录中添加一个页面模板，包含一个组件类，并添加至少一个公共渲染函数

/templates/page.php

<?php

namespace ThemeName;

use StarringJane\WordpressBlade\Component;

class Page extends Component
{
    public function render()
    {
        return $this->view('pages.default', [
            'post' => get_post(),
        ]);
    }
}

现在您可以在 views/pages/default.blade.php 中访问 $post 变量

@extends('layouts.main')

@section('content')
    <h1>{{ $post->post_title }}</h1>
    <div>{!! $post->post_content !!}<div>
@endsection

组件

匿名组件

将组件添加到 views/components

// views/components/button.blade.php
@props([
    'type' => 'default',
])

<button
    {{ $attributes->merge(['class' => 'btn btn-'.$type]) }}
>
    {{ $slot }}
</button>

// views/pages/default.blade.php
<x-button type="primary">
    Click me
</x-button>

类组件

<?php

namespace ThemeName\Components;

use StarringJane\WordpressBlade\Component;

class Button extends Component
{
    public $type;

    public function __construct($type)
    {
        $this->type = $type;
    }

    public function render()
    {
        return $this->view('components.button', [
            'color' => $this->color(),
        ]);
    }

    protected function color()
    {
        return 'red';
    }
}

自定义指令

以下示例创建了一个 @datetime($var) 指令，该指令格式化给定的 $var

<?php

use StarringJane\WordpressBlade\WordpressBlade;

add_action('after_setup_theme', function () {
    WordpressBlade::directive('datetime', function ($expression) {
        return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
    });
});

过滤器

添加页面模板目录

添加 WordPress 应该查找页面模板的目录，从主题基本目录开始

add_filter('wordpress-blade/template-directories', function ($directories) {
    $directories[] = 'controllers';

    return $directories;
});

从 bladerunner 迁移

遵循 此指南 以从 bladerunner 迁移

贡献者

• Laurens Bultynck (laurens@starringjane.com)
• Maxim Vanhove (maxim@starringjane.com)