README

Loki, WordPress 主题模板

Loki 是基于 Mjolnir 框架的 WordPress 主题模板

如果您认为这种方法不起作用，请打开一个问题并让我们讨论 :)

先决条件

在进一步操作之前，我建议您阅读

Mjolnir 框架的文档。
Laravel Blade
Laravel Mix

需求

本模板的需求包括

PHP 7.1+
Composer

安装

您可以通过 composer 安装框架

composer create-project codebjorn/loki

结构

模板的结构是

|-- app                   // Folder where is stored all Facades,Services,Providers
|   |--Facades            // Folder that stores all facades used to get utilities & services from container
|   |--Providers          // Folder that stores all your providers
|   |--App.php            // Container file
|   |--Helpers.php        // File that store all functions need it for project
|-- assets                // Folder where all builded assets are stored
|-- blocks                // Folder where are stored all Gutenberg blocks
|   |-- <blockFolder>     // Folder with block
|       |-- components    // Folder where are stored all js components for Gutenberg
|       |-- data          // Folder where are stored json files such as attributes
|       |-- view          // Folder where is stored blade files for render
|       |-- index.jsx     // Block configuration file
|   |-- blocks.js         // File where is imported all blocks
|   |-- blocks.php        // File where are registered blocks using Block Facade
|-- config                // Folder where are stored configurations
|-- hooks                 // Folder where is stored all hooks
|   |-- actions.php       // File where are created new action hooks using Action Facade
|   |-- filters.php       // File where are created new filter hooks using Filter Facade
|-- resources             // Folder that stores all js,scss,views elements of theme
|   |-- js                // Folder for js of theme
|   |-- scss              // Folder for scss of theme
|   |-- views             // Folder for blade templates
|-- templates             // Folder where default wordpress templates are stored
|-- vendor                // Composer packages folder
|-- functions.php         // Default WP Functions.php 
|-- webpack.mix.js        //Laravel Mix configuration file

所有工作的方式

将服务添加到钩子

在 app 文件夹中创建一个新的命名空间并添加一个新的 PHP 服务类
使用 app/Providers 文件夹中的 Service Provider 解决此服务，您可以将它添加到 AppServiceProvider.php 或创建一个新的提供者并将其添加到 config/app.php 以加载。更多关于服务提供者的信息
解决服务后，您可以在另一个服务中注入它或在 hooks 文件夹中的钩子中添加它，例如动作钩子

Action::add('wp_enqueue_scripts', [\Namespace\Setup\Enqueues::class, 'front']);
Action::add('admin_enqueue_scripts', [\Namespace\Setup\Enqueues::class, 'admin']);

与 WordPress 模板一起工作

默认情况下，所有 WordPress 模板都存储在 templates 文件夹中，您可以在 config/theme.php 中更改文件夹或禁用此功能。

要使用模板和 Laravel Blade 引擎，我们可以将模板视为一种控制器，它会存储所有所需的数据，但渲染将由模板引擎完成，例如

假设我们想要创建/更新模板 single.php，我们创建一个新的文件 templates/single.php

<?php

$post = \Mjolnir\Utils\Post::current();
$postTitle = $post->getTitle();
$postContent = $post->getContent();

\Loki\Facades\View::render('single', ['title' => $postTitle, 'content' => $postContent]);

我们在 resources/views/single.blade.php 中创建 blade 文件

@extends('layout.app')

@section('content')
    <h1>{{$title}}</h1>
    {!! $content !!}
@endsection

创建 Gutenberg 块

所有块都存储在 blocks 文件夹中。要创建新的块，我们需要

在 blocks 文件夹中创建一个新的文件夹
在您的新的文件夹中创建 index.jsx

import {__} from '@wordpress/i18n';
import {Fragment} from '@wordpress/element';
import Controls from "./components/controls";
import Editor from "./components/editor";
import Inspector from "./components/inspector";
import * as attributes from "./data/attributes.json";

const {registerBlockType} = wp.blocks;

export default registerBlockType('namespace/name', {
    title: __('Name', 'name'),
    attributes: attributes,
    edit: props => {
        return (
            <Fragment>
                <Controls {...props} />
                <Editor {...props} />
                <Inspector {...props} />
            </Fragment>
        );
    },
    save() {
        //gutenberg will save attributes we can use in server-side callback
        return null;
    },
});

在 components 文件夹中创建所有组件

controls.jsx - 块的菜单栏

import {BlockControls} from '@wordpress/block-editor';

function Controls() {
    return (
        <BlockControls>
        </BlockControls>
    );
}

export default Controls;

editor.jsx - 块的主要区域

function Editor({attributes, setAttributes}) {
    console.log(attributes)
    return (
        <div className="name">
            <h1>Hello, {attributes.title}</h1>
        </div>
    );
}

export default Editor;

inspector.jsx - 侧边栏面板

import {__} from '@wordpress/i18n';
import {InspectorControls} from '@wordpress/block-editor';
import {PanelBody, PanelRow} from '@wordpress/components';

function Inspector({attributes, setAttributes}) {
    return (
        <InspectorControls>
            <PanelBody title={__('Name')}>
                <PanelRow>

                </PanelRow>
            </PanelBody>
        </InspectorControls>
    );
}

export default Inspector;

创建 data 文件夹和新属性文件 attributes.json

{
  "classNames": {
    "default": "hero",
    "type": "string"
  },
  "title": {
    "default": "This is title",
    "type": "string"
  }
}

您还可以使用数据文件夹存储和用于您块的任何其他 JSON 文件夹。

创建 view 文件夹，其中将存储您块的 blade 模板，默认的一个是 block.blade.php

<div class="{{$attributes->classNames}}">
 <h1>{{$attributes->title}}</h1>
 @include('hero.view.partials.element')
</div>

将您的块导入主 blocks.js
使用块外观在主 blocks.php 中添加块

\Namespace\Facades\Block::add('namespace', 'name');

测试

//TODO

更新日志

请参阅 CHANGELOG 了解最近更改的信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全性

如果您发现任何与安全相关的问题，请通过电子邮件 quotesun@gmail.com 报告，而不是使用问题跟踪器。

鸣谢

许可证

麻省理工学院许可证（MIT）。请参阅许可证文件获取更多信息。

codebjorn / loki

维护者

详细信息