Использование движков PHP шаблонов для модернизации разработки тем WordPress

Движки шаблонов — это фантастика! Они делают комплексные языки программирования гораздо легче в плане реализации удобств для ускорения разработки.

WordPress может быть для нас типичным средой разработки для рассмотрения того, как это работает, не только потому, что он использует шаблоны, также из-за его зависимости от PHP. WordPress привлекает издателей контента своим низким барьером вхождения, но знания PHP, которые нужны для низкоуровневой кастомизации часто становятся проблемой для разработчиков которые хотят выйти за рамки базовой темизации.

Содержание

Как работают движки шаблонов
Рассмотрим движки шаблонов WordPress
Jade-PHP
Настройки
Стартовая тема Jade-PHP
Jade
Установка
COMPILER.PHP
PAGE-DATA.PHP
LAYOUT.JADE
FUNCTIONS.PHP
INDEX.PHP
Цикл WordPress в Jade
Стартовая тема Jade
Mustache
Установка
Цикл WordPress в Mustache
Стартовая тема Mustache
Timber
Установка
FUNCTIONS.PHP
INDEX.PHP
Цикл WordPress в Timber
Стартовая тема Timber
Timber + Jade (…Twade?)
The Setup
Цикл WordPress в Timber + Jade
Стартовая тема Timber + Jade
Вариант для Timber + Jade, минус Twig
Итоги

Как работают движки шаблонов

В основном, движки шаблонов это пакеты включенные в проект, которые позволяют нам компилировать один язык в другой.

Давайте рассмотрим простой пример цикла в WordPress на чистом PHP:

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <article>
      <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
      <?php the_excerpt(); ?>
    </article>
  <?php endwhile; ?>
<?php else : ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ) ?></p>
<?php endif; ?>

…и тоже самое, но на Twig:

{% for post in posts %}
  <article>
    <h1>{{post.title}}</h1>
    {{ post.excerpt }}
  </article>
{% else %}
  <p>{{ __('Sorry, no posts matched your criteria.') }}</p>
{% endfor %}

Выглядит гораздо лаконичнее, неправда ли?

Рассмотрим движки шаблонов WordPress

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

Читать также:

Работа с CSS и JavaScript в темах Drupal 8

Jade-PHP

Jade-PHP дает возможность писать PHP в файлах Jade.

Что такое Jade?

Jade это чистый, чувствительный к пробелам синтаксис, который есть шаблонизатором для HTML. Например:

.my-class
  a.btn(href="http://charliejwalter.net/") I'm a link

… компилируется в это:

<div class="my-class">
  <a class="btn" href="http://charliejwalter.net/">I'm a link</a>
</div>

Если Jade сам по себе есть абстракцией над HTML, Jade-PHP позволяет абстрагироваться над PHP в среде HTML, что идеально подходит для разработки тем WordPress.

Настройки

Шаблоны WordPress должны быть написаны и сохранены внутри файлов .jade. Далее с помощью плагна Grunt grunt-jade-php task, мы должны компилировать файлы Jade (.jade) в PHP файлы (.php) как того требует WordPress.

Шаблоны Jade связаны один к одному с фалами шаблонов WordPress. Другими словами, если WordPress имеет файл page.php для шаблона страницы по умолчанию, мы должны добавить файл page.jade в директорию, которую будет обрабатывать задача к Grunt. WordPress будет использовать компилированные PHP файла, как если бы мы писали PHP, собственно сами PHP фалы мы не будем трогать. Круто!

Внимание: PHP файлы должна находится в привычном для WordPress месте.

К недостаткам такого метода следует отнести то, что мы будем компилировать Jade в PHP локально, и когда это случится, Jade-PHP будет создавать полный HTML документ для каждого шаблона, вместо того, чтобы использовать методы WordPress типа get_header() или get_template_part() для повторного использования фрагментов шаблонов. Это не слишком проблематично для поддержки, но с точки зрения производительности, мы будем грузить код, который может быть закеширован.

Одним из вариантов структуры файлов может быть может быть полное разделение исходных и результирующих фалов по директориям в рамках проекта. Папка с компилированными файлами будет как раз тем каталогом, который WordPress будет использовать как тему. В любом случае, файлы которые не должна компилироваться все равно должна быть внутри этой папки. Это можно сделать с помощью пакета grunt-contrib-copy. Это также означает, что мы можем следить за этими фалами и инициировать быструю перезагрузку (с помощью livereload, например), чтобы видеть изменения «на лету»!

├── source
	├── header.jade
	├── index.jade
	├── footer.jade
	├── functions.php
	├── style.css
├── compiled
	├── header.php
	├── index.php
	├── footer.php
	├── functions.php
	├── style.css
├── Gruntfile.coffee
└── package.json

WordPress будет пытаться прочитать директорию source как другую тему, что будет выдавать сообщение об ошибке типа: «Template is missing» поскольку не сможет найти все нужные файлы чтобы построить тему. Не идеально, вы можете настроить процесс деплоя таким образом, чтобы не отправлять эти файлы на сайт.

Также стоить сказать что подсветка синтаксиса Jade-PHP лажает в редакторах Atom, Sublime или TextMate, по крайней мере на момент написания статьи.

<h4.пример цикла=»» wordpress=»» в=»» jade-php<=»» h4=»»>

:php
  if (have_posts()) :
    while (have_posts()) : the_post();
 
      article
        h1: a(href= the_permalink())= the_title()
        != the_excerpt()
 
    endwhile;

Стартовая тема Jade-PHP

Загрузить стартовую тему Jade-PHP для WordPress.

Jade

Создание тем для WordPress мне всегда казалось очень неряшливым процессом, потому что трудно иметь красивый код, совмещая PHP и HTML в одном шаблоне. Но мы можем использовать Jade, чтобы делать это более красиво. Основным отличием от Jade-PHP здесь будет то, что наши файлы темы будут компилироваться на сервере. Это означает, что вам не нужно компилировать шаблоны перед отправкой на сервер, они будут компилироваться на лету по запросу. Плюс — это решает вопрос компиляции шаблонов в HTML документы, что позволяет нам использовать все преимущества Jade при создании шаблонов, как расширение одних шаблонов другими.

Установка

Сначала, нам нужен компилятор Jade для PHP, который мы можем найти в репозитории Jade на GitHub в разделе «Implementations in other languages».

Далее, нужно создать composer.json в каталоге нашей темы:

{
  "require": {
    "path-to-project/jade-php": "*"
  }
}

Теперь можно запустить процесс установки с помощью Composer. Если вы используете Composer глобально, то это будет выглядеть так:

composer install

Или, если Сomposer установлен в проекте локально:

php bin/composer install

Теперь, нам нужны следующие файлы в директории темы:

compiler.php
page-data.php
layout.jade
index.jade
functions.php
index.php

Внимание: Все темы WordPress должны иметь style.css, но мы не упоминаем его в данном и последующем списке файлов, потому, что он не имеет отношения к файлам, которые будут непосредственно нужны движкам шаблонов.

COMPILER.PHP

Этот файл позаботиться о том, чтобы запускать компилятор Jade в любом месте вашего шаблона темы.

<?php
  require_once('vendor/autoload.php');
  use Jade\Jade;
  return new Jade();
?>

PAGE-DATA.PHP

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

<?php
 
$data = array(
  'wp_title' => wp_title('', false),
  'wp_head' => output_buffer_contents(wp_head),
  'wp_footer' => output_buffer_contents(wp_footer),
 
  'template_directory_uri' => get_template_directory_uri(),
  'stylesheet_url' => get_bloginfo('stylesheet_url'),
  'home_url' => esc_url( home_url( '/' ) ),
  'blog_title' => get_bloginfo(),
 
  'pages' => get_pages(),
  'categories' => get_categories('show_count=0&title_li=&hide_empty=0&exclude=1')
);
 
// To compensate for WordPress not providing a url for each post
foreach ( $data['pages'] as $page ) {
  $page->permalink = get_permalink($page->ID);
}
 
// To compensate for WordPress not providing a url for each category
foreach ( $data['categories'] as $category ) {
  $category->link = get_category_link( $category->term_id );
}
 
return $data;
 
?>

LAYOUT.JADE

Использование одного шаблона в другом является основным преимуществом Jade. Это позволяет создать оболочку, которая может быть использована в качестве основного макета для нашего сайта, а потом изменить его, или дополнить.

Это может иметь такой вид:

doctype
html(lang='en')
 
head
  meta(charset="UTF-8")
  title= wp_title('')
  link(rel="stylesheet" type="text/css" href= bloginfo('stylesheet_url') media="screen")
  - wp_head();
 
body
 
  header
    a(href= esc_url( home_url( '/' ) ))= get_bloginfo()
    - get_template_part('nav')
 
  block content
 
  :php
 
    get_sidebar();
    wp_footer();

FUNCTIONS.PHP

Большинство тем WordPress используют файл functions.php. в данной ситуации, мы добавляем функцию, чтобы компенсировать недостаток метода get_wp_head():

<?php
 
function output_buffer_contents($function, $args = array()){
  ob_start();
  $function($args);
  $contents = ob_get_contents();
  ob_end_clean();
  return $contents;
}
 
?>

INDEX.PHP

В большинстве тем WordPress — это главный файл для домашней страницы в теме. Вот рабочий пример index.php, который включает компилятор Jade и данные страницы:

$compiler = include('compiler.php');
$data = include('page-data.php');
 
$data['posts'] = array();
 
if ( have_posts() ) :
 
  while ( have_posts() ) : the_post();
 
    array_push($data['posts'], array(
      'permalink' => get_permalink(),
      'title' => get_the_title(),
      'excerpt' => get_the_excerpt()
    ));
 
  endwhile;
 
  $data['next_posts_link'] = get_next_posts_link('Older');
  $data['previous_posts_link'] = get_previous_posts_link('Newer');
 
endif;
 
echo $compiler->render('index', $data);

Здесь использован обычный цикл WordPress, но, вместо того, чтобы рендерить разметку в цикле, мы добавляем свойства в массив posts переменной страницы $data, чтобы Jade мог воспроизводить контент.

Цикл WordPress в Jade

Вот пример цикла WordPress в Jade:

each post in posts
  article
    h1
      a(href= post['permalink'])= post['title']
    != post['excerpt']

Стартовая тема Jade

Загрузить стартовую тему Jade для WordPress.

Mustache

Хочу задать вам вопрос: вы хотите меньше логики в ваших шаблонах? Mustache предлагает подход создания шаблонов без программной логики, что заставляет вас держать логику отдельно от шаблона, а это эффективно улучшает их. Бонзай!

Установка

Установка очень похожа на то, как мы рендерили шаблоны Jade. Компилятор для движка может быть установлен с помощью Composer.

Для начала, давайте создадим файл composer.json в директории темы:

{
  "require": {
    "mustache/mustache": "~2.5"
  }
}

Запускаем установщик Composer, и далее мы можем добавить следующий код в шаблоны WordPress, чтобы убедится, что компилятор работает:

echo $mustache->render('index', $data);

Теперь, когда мы вооружились Mustache, нам нужно добавить mustache-compiler.php файл в директорию темы, чтобы запрашивать его в шаблонах темы:

<?php
 
require_once('vendor/autoload.php');
 
return new Mustache_Engine(array(
   'loader' => new Mustache_Loader_FilesystemLoader(get_template_directory() . '/views')
));
 
?>

Цикл WordPress в Mustache

{{#posts}}
<h1><a href="{{permalink}}">{{{title}}}</a></h1>
{{{excerpt}}}
{{/posts}}

Стартовая тема Mustache

Загрузить стартовую тему Mustache для WordPress.

Timber

Предположим, вам нравятся идее описанные в это посте, но процесс установки кажется утомительным. Здесь на сцену выходит Timber.

Timber доступен, как бесплатный плагин для WordPress, что делает данный интерпретатор самым легким для установки из всех, что мы описывали здесь. По сути, Timber сам по себе не является интерпретатором шаблонов, он использует Twig для этого, а сам выступает в роли конфигуратора для записи Twig файлов. Плюс, он может похвастаться наличием библиотеки для интеграции хуков WordPress в Twig делая его таким же мощным, как если бы вы писали просто на PHP в шаблонах WordPress.

И есть даже более детальная статья про Timber на английском языке.

Установка

Загрузите и становите плагин прямо из хранилища плагинов WordPress.

Теперь, нам нужно убедиться, что наш каталог темы содержит следующие файлы:

layout.twig
index.twig
functions.php
index.php
LAYOUT.TWIG

Это будет первичный кусок нашей разметки для сайта, который включает тег и основную разметку сайта. Другими словами, мы можем расширить этим все наши файлы Twig шаблонов и изменить некоторые блоки или части шаблона.

Вот небольшой пример основной разметки сайта:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="UTF-8">
  <title>{{wp_title}}</title>
  <link rel="stylesheet" type="text/css" href="{{theme.link}}/style.css" media="screen">
  {{wp_head}}
</head>
<body>
 
<header>
  {{site.name}}
</header>
 
{% block content %}
{% endblock %}
 
{{wp_footer}}
 
</body>
</html>

Все, что обернуто в двойные фигурные скобки {{ }} — это переменные, которые Timber заполнит скомпилированными данными, полученными от Twig. И, когда мы расширим этим шаблоном другие шаблоны, мы сможем редактировать каждую переменную непосредственно там, где мы используем шаблон.

FUNCTIONS.PHP

Это все тот-же стандартный файл, который есть в темах WordPress. Сюда мы добавляем инструкции для конфигурации Timber, а также определения любых переменных, которые мы будем использовать в шаблонах.

<?php
 
add_filter('timber_context', 'add_to_context');
function add_to_context($data){
 
  $data['menu'] = new TimberMenu();
  $data['categories'] = Timber::get_terms('category', 'show_count=0&title_li=&hide_empty=0&exclude=1');
 
  return $data;
}
 
?>

INDEX.PHP

Опять же, главный файл для домашней страницы в WordPress теме. Нам нужно вызвать переменные, которые мы определил в functions.php, чтобы шаблон знал, что рендерить, когда Timber компилирует Twig файлы в PHP. В данном случае:

<?php
  $context = Timber::get_context();
  $context['pagination'] = Timber::get_pagination();
  Timber::render('index.twig', $context);
?>

Цикл WordPress в Timber

{% for post in posts %}
  <article>
    <h1>{{post.title}}</h1>
    {{post.get_preview}}
  </article>
{% endfor %}

Стартовая тема Timber

Загрузить Timber + Twig стартовую темы для WordPress.

Timber + Jade (…Twade?)

в то время, как Timber включает один интерпретатор шаблонов из «коробки», мы можем настроить его чтобы использовать, сто-то еще вместе с Twig. Может показаться глупым, использовать два интерпретатора шаблонов вместе, но если вам нравятся возможности, которые предлагает Twig, однако вы предпочитаете писать кот в Jade… но, мы можем сделать это!

The Setup

Мы будем использовать стандартную конфигурацию Timber, но локально компилировать Jade в Twig. Люди компилируют Jade в другой синтаксис, используя AngularJS, так почему бы не использовать это вместе с Timber?

Вот, как должна быть структурирована наша папка темы:

├── source
	├── views
		├── header.twade
		├── index.twade
	├── footer.twade
	├── index.php
	├── functions.php
	├── style.styl
├── compiled
	├── views
		├── header.twig
		├── index.twig
	├── footer.twig
	├── index.php
	├── functions.php
	├── style.css
├── Gruntfile.coffee
└── package.json

Еще раз: WordPress загрузить папку source, как собственную тему, если мы не исключим ее во время деплоя.

Видите это смешное расширение .twade? Это просо файлы Jade, которые будут компилироваться (локально с Grunt) в .twig файлы, которые, как вы догадались, будут готовы для того что компилить их в .php файлы на стороне сервера.

Цикл WordPress в Timber + Jade

{% for post in posts %}
h1
  a(href="{{post.permalink}}") {{post.title}}
{{post.get_preview}}
{% endfor %}

Стартовая тема Timber + Jade

Загрузить Timber + Jade стартовую темы для WordPress.

Вариант для Timber + Jade, минус Twig

Как альтернативу методу описанному выше, мы можем пропустить Twig при связке достоинств шаблонов Jade и простоты Timber. Установка такая же, как и для Timber, но с перехватом Timber::render в index.php:

<?php
  $compiler = include 'compiler.php';
  $context = Timber::get_context();
  $context['pagination'] = Timber::get_pagination();
  echo $compiler->render(get_template_directory() . '/views/index.jade', $context);
?>

Это дает нам возможность записать цикл WordPress в таком виде:

each post in posts
  h1
    a(href= post->permalink)!= post->title
  !=post->get_preview

Вот стартовая тема для Timber + Jade в такой связке.

Итоги

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

Сайты, которым нужно много различных представлений в шаблонах, скорее требуют более насыщенные логикой интерпретаторы, как Timber или Jade. Крутые PHP разработчики, наверное, предпочтут Mustache, чтобы иметь возможность держать всю логику на сервере.

Ниже вы найдете список всех стартовых тем, настроенных согласно описанию в этой статье. Вы можете спокойно использовать их в своих проектах, или просто для экспериментов:

Jade-PHP
Jade
Mustache
Timber
Timber + Jade
Timber + Jade (no Twig)

Удачи, в создании тем!

Спонсоры статьи: