Acorn

Laravel komponensek WordPress témákban és pluginokban a Roots Acorn segítségével.

Az Acorn egy keretrendszer, amely Laravel komponenseket biztosít WordPress témákhoz és pluginokhoz. A Roots csapat fejleszti, és ez képezi a Sage téma alapját.

Mi az Acorn?

Az Acorn lehetővé teszi, hogy a Laravel ökoszisztéma legjobb részeit használd WordPress projektjeidben:

Blade templating - Laravel Blade template motor
Service Container - Laravel IoC container
Service Providers - Moduláris szolgáltatások regisztrálása
View Composers - Adatok automatikus átadása view-knak
Configuration - Laravel-stílusú konfiguráció
Caching - View és konfiguráció cache
Console Commands - Artisan-szerű CLI parancsok

Előfeltételek

PHP >= 8.1
WordPress >= 5.9
Composer

Telepítés

Composer-rel

composer require roots/acorn

WordPress pluginként

Az Acorn elérhető WordPress pluginként is, amely letölthető a roots.io/acorn oldalról.

Acorn bootolása

Az Acorn-t be kell tölteni a témádban vagy pluginodban. A functions.php fájlban:

<?php

if (! function_exists('\Roots\bootloader')) {
    wp_die(
        __('You need to install Acorn to use this theme.', 'sage'),
        '',
        [
            'link_url' => 'https://roots.io/acorn/docs/installation/',
            'link_text' => __('Acorn Docs: Installation', 'sage'),
        ]
    );
}

\Roots\bootloader()->boot();

Blade Templates

A Blade a Laravel template motorja, amely tiszta és kifejező szintaxist biztosít.

Alapvető szintaxis

{{-- resources/views/partials/header.blade.php --}}

<header class="site-header">
    <nav>
        @if (has_nav_menu('primary_navigation'))
            {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'echo' => false]) !!}
        @endif
    </nav>
</header>

Feltételes megjelenítés

@if ($post->post_type === 'product')
    <span class="badge">Termék</span>
@elseif ($post->post_type === 'post')
    <span class="badge">Bejegyzés</span>
@else
    <span class="badge">Oldal</span>
@endif

Ciklusok

@foreach ($posts as $post)
    <article>
        <h2>{{ $post->post_title }}</h2>
        <p>{{ $post->post_excerpt }}</p>
    </article>
@empty
    <p>Nincs megjeleníthető bejegyzés.</p>
@endforeach

WordPress Loop Blade-del

@while (have_posts())
    @php(the_post())

    <article @php(post_class())>
        <h2>{{ get_the_title() }}</h2>
        {!! get_the_content() !!}
    </article>
@endwhile

Komponensek

{{-- resources/views/components/button.blade.php --}}

@props(['type' => 'primary', 'url' => '#'])

<a href="{{ $url }}" class="btn btn-{{ $type }}">
    {{ $slot }}
</a>

Használata:

<x-button type="secondary" url="/contact">
    Kapcsolat
</x-button>

View Composers

A View Composers lehetővé teszi, hogy adatokat automatikusan adj át a view-knak.

Composer létrehozása

<?php
namespace App\View\Composers;

use Roots\Acorn\View\Composer;

class Post extends Composer
{
    /**
     * Mely view-kra vonatkozzon
     */
    protected static $views = [
        'partials.content',
        'partials.content-*',
    ];

    /**
     * Adatok átadása a view-nak
     */
    public function with()
    {
        return [
            'title' => $this->title(),
            'excerpt' => $this->excerpt(),
            'categories' => $this->categories(),
        ];
    }

    public function title()
    {
        return get_the_title();
    }

    public function excerpt()
    {
        return has_excerpt()
            ? get_the_excerpt()
            : wp_trim_words(get_the_content(), 40);
    }

    public function categories()
    {
        return get_the_category();
    }
}

Composer regisztrálása

<?php
namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class ThemeServiceProvider extends ServiceProvider
{
    public function boot()
    {
        // Composers automatikus betöltése
    }
}

Konfiguráció

Az Acorn Laravel-stílusú konfigurációs fájlokat használ a config/ mappában.

Példa konfiguráció

<?php
return [
    'name' => 'My Theme',
    'version' => '1.0.0',

    'support' => [
        'post-thumbnails',
        'title-tag',
        'html5' => [
            'caption',
            'comment-form',
            'comment-list',
            'gallery',
            'search-form',
        ],
    ],

    'menus' => [
        'primary_navigation' => __('Primary Navigation', 'theme'),
        'footer_navigation' => __('Footer Navigation', 'theme'),
    ],
];

Konfiguráció elérése

$themeName = config('theme.name');
$menus = config('theme.menus');

Console Commands (WP-CLI)

Az Acorn WP-CLI parancsokat biztosít:

# View cache törlése
wp acorn view:clear
# View cache létrehozása
wp acorn view:cache
# Konfiguráció cache
wp acorn config:cache
wp acorn config:clear
# Elérhető parancsok listája
wp acorn list

Service Providers

Saját szolgáltatásokat regisztrálhatsz Service Provider-ekkel:

<?php
namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class CustomServiceProvider extends ServiceProvider
{
    public function register()
    {
        $this->app->singleton('custom.service', function () {
            return new \App\Services\CustomService();
        });
    }

    public function boot()
    {
        // Inicializáció a boot után
    }
}

Regisztráció a config/app.php fájlban:

'providers' => [
    // ...
    App\Providers\CustomServiceProvider::class,
],

Mappastruktúra

Egy tipikus Acorn-alapú téma struktúrája:

theme/
├── app/
│   ├── Providers/           # Service Providers
│   ├── View/
│   │   └── Composers/       # View Composers
│   └── helpers.php          # Helper függvények
├── config/
│   ├── app.php              # Alkalmazás konfiguráció
│   ├── theme.php            # Téma konfiguráció
│   └── view.php             # View konfiguráció
├── resources/
│   ├── views/               # Blade templates
│   │   ├── layouts/
│   │   ├── partials/
│   │   └── components/
│   ├── scripts/             # JavaScript
│   └── styles/              # CSS/SCSS
├── storage/
│   └── framework/
│       ├── cache/
│       └── views/           # Compiled views
├── composer.json
├── functions.php
└── style.css

Acorn + Sage

A Sage téma az Acorn-ra épül, és egy teljes értékű modern WordPress téma fejlesztési környezetet biztosít:

# Sage téma létrehozása
composer create-project roots/sage tema-neve

cd tema-neve

# Függőségek telepítése
composer install
npm install

# Fejlesztés
npm run dev

# Build
npm run build

Cache kezelés

Éles környezetben érdemes cache-elni a view-kat és konfigurációt:

# View cache (Blade templates előfordítása)
wp acorn view:cache
# Konfiguráció cache
wp acorn config:cache
# Minden cache törlése
wp acorn optimize:clear

Hibakeresés

Debug mód

A config/app.php fájlban:

'debug' => WP_DEBUG,

Logolás

use Illuminate\Support\Facades\Log;

Log::info('Információ');
Log::warning('Figyelmeztetés');
Log::error('Hiba', ['context' => $data]);

A logok a storage/logs/ mappában találhatók.