Как подружить WordPress и Twig

Что такое шаблонизатор?

Шаблонизатор (в web) — программное обеспечение, позволяющее использовать html-шаблоны для генерации конечных html-страниц. Основная цель использования шаблонизаторов — это отделение представления данных от исполняемого кода. Часто это необходимо для обеспечения возможности параллельной работы программиста и дизайнера-верстальщика. Использование шаблонизаторов часто улучшает читаемость кода и внесение изменений во внешний вид, когда проект целиком выполняет один человек.

Wikipedia

Самая важная функция шаблонизатора это именно отделение представления данных от исполняемого кода. Именно этого в темах WordPress не хватает совсем. В файлах шаблонов страниц можно добавить какой угодно код и это сильно соблазняет написать говнокод.

Кроме всего прочего большинство шаблонизаторов сокращают синтаксис кода.

Шаблонизаторы для PHP

На момент написания статьи самые популярные шаблонизаторы для php были:

• Twig (Symfony)
• Blade (Laravel)
• Smarty (просто старый :))

Все они достаточно похожи между собой. Вы можете выбрать тот, который вам нравится больше. Мой выбор пал на Twig.

Установка и подключение twig

В теме устанавливаем twig через composer:

composer require "twig/twig:^2.0" 

Затем в functions.php где-то вначале добавляем

require_once get_template_directory() . '/vendor/autoload.php';

Использование twig-шаблонов

Для удобства я сделал абстактный класс, который дает возможность работать с twig-шаблонами. Данный в конструкторе описывает как должен работать twig и в каких директориях искать шаблоны. Также он имеет единственный публичный метод render, который и подключает сам шаблон.

<?php

use TwigEnvironment;
use TwigErrorLoaderError;
use TwigErrorRuntimeError;
use TwigErrorSyntaxError;
use TwigLoaderFilesystemLoader;
use TwigTwigFunction;

abstract class Twig_Controller {
	protected $environment;
	public function __construct( array $directories ) {
		$loader     = new FilesystemLoader( $directories );
		$this->environment = new Environment( $loader, [
			'debug' => true
		] );
		if ( current_user_can( 'administrator' ) ) {
			$this->twig->addExtension( new DebugExtension() );
		}
	}
	public function render( string $template, array $params ) {
		echo $this->environment->render( $template . '.twig', $params );
	}
}

Теперь для работы с шаблонами нам нужно просто наследовать этот Twig_Controller.

Заменить php-шаблоны на twig-шаблоны

Мы можем для этого использовать два хука template_redirect или template_include. Первый отрабатывает раньше и затем появляются данные в global $wp_query, $post и т.д. Попробуем переопределить шаблоны для всех страниц:

class Controller extends Twig_Controller {
	public function __construct() {
		parent::__construct( [ get_template_directory() . '/views/' ] );
		add_filter( 'template_include', [ $this, 'template_include' ] );
	}

	public function template_include( string $template ) {
		if ( is_page() ) {
			global $post;
			$this->render( 'page', [
				'post' => $post,
			] );
		}
	}
}

Теперь вместо page.php будет подключаться page.twig. Как поменялся синтаксис?

Было:

<?php get_header() ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <div class="entry-header">
            <h1><?php the_title() ?></h1>
            <div class="corner__bottom corner--double"></div>
        </div><!-- .entry-header -->
        <article id="post-{{ post.ID }}" <?php post_class( $class ) ?>>
            <div class="entry-content">
                <?php the_content() ?>
            </div><!-- .entry-content -->
        </article><!-- #post-<?php the_ID() ?> -->
    </main>
</div>
<?php get_footer() ?>

Стало:

{% include 'header.twig' %}
<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <div class="entry-header">
            <h1>{{ post.post_title }}</h1>
        </div><!-- .entry-header -->
        <article id="post-{{ post.ID }}" {% do action('mx_post_class') %}>
            <div class="entry-content">
                {% do filter('the_content', post.post_content ) %}
            </div><!-- .entry-content -->
        </article><!-- #post-{{ post.ID }} -->
    </main>
</div>
{% include 'footer.twig' %}

Особо ничего не изменилось, но теперь данные во вьюшку могут попасть только через наш контроллер. Никаких лишних данных там не будет и соответсвенно основная задача шаблонизаторов выполняется.

Все нужные данные на фронте можно добавить в template_include. Т.к. наш контроллер мы добавили на хук template_include у нас уже есть global $wp_query, $post и остальные «прелести» WordPress’а.

Расширяем Twig под WordPress

Все же для полноценной работы не хватает хуков. Для того чтобы их добавить нужно в twig зарегистрировать необходимые функции.

В Twig_Controller создаем метод register_functions и вызываем его в конце конструктора:

public function register_functions() {
	$this->twig->addFunction( new TwigFunction( 'action', function ( $context ) {
		$args = func_get_args();
		array_shift( $args );
		$args[] = $context;
		call_user_func_array( 'do_action', $args );
	}, array( 'needs_context' => true ) ) );

	$this->twig->addFunction( new TwigFunction( 'filter', function ( $context ) {
		$args = func_get_args();
		array_shift( $args );
		$args[] = $context;
		echo call_user_func_array( 'apply_filters', $args );
		}, array( 'needs_context' => true ) ) );
}

Конфликт версий

Будьте готовы к тому, что версия 1.x.x не совместима с версией 2.x.x. Решить проблему можно путем добавления неймспейсов в twig-шаблон и вынесенем библиотеки из vendor’a. Неймспейсы можно добавить путем утилы: https://github.com/OnTheGoSystems/twig-scoper.