Теперь мы понимаем, что Twig — вместе с плагином WordPress Timber — может помочь разработчикам писать модульный код при разработке тем WordPress. При таком модульном подходе вы можете обрабатывать логику и уровень представления вашего веб-приложения отдельно. Давайте перейдем к чуть более техническому материалу: созданию шаблонов Twig, преобразованию HTML в файлы Twig и способам визуализации логики или данных с помощью шаблонов Twig.
Установить древесину
Прежде всего, я собираюсь установить Timber — плагин WordPress, который помогает интегрировать шаблонизатор Twig с WP. Итак, давайте сделаем это.
- Войдите в свою панель управления WordPress.
- Перейти к плагинам> Добавить новый .
- Ищите плагин Timber .
- Установите и активируйте плагин.
После установки Timber вы можете начать разбивать файлы шаблона на данные и просматривать файлы.
Создание шаблона ветки
Прежде чем мы начнем создавать шаблоны Twig, я предполагаю, что у вас есть какая-то локальная настройка WordPress. Для этого конкретного урока мои настройки:
- Установка локального WP (я использую DesktopServer от ServerPress).
- Плагин Timber установлен и активирован.
- Необязательно: Любая базовая / начальная тема (я использую свою собственную, т.е. аккуратную ).
UpStatement также разработал тему «Timber Starter Theme» .
Давайте начнем. Я хочу отобразить приветственное сообщение в верхней части моей домашней страницы. Как бы я поступил без Твиг? Возможно, я бы включил HTML-код в PHP-файл и повторил приветственное сообщение, как я сделал в приведенном ниже примере кода. Мой файл index.php выглядит примерно так.
|
1
2
3
4
5
6
7
8
9
|
<?php
/**
* Homepage
*/
get_header();
<div> <?php echo «Welcome to my blog!»;
<?php get_footer();
|
Теперь домашняя страница моей локальной установки WordPress отображает приветственное сообщение прямо вверху. Вот скриншот.
проблема
Проблема этого подхода в том, что мы смешиваем данные / логику с представлением. Чем сложнее становится этот файл, тем сложнее его поддерживать, не говоря уже о том, чтобы понять — например, если вы добавляете цикл WordPress после этого кода с несколькими аргументами, а затем фильтруете и разбиваете на страницы после этого. Добавьте к этому, что PHP внутри HTML выглядит не очень хорошо, когда вы заканчиваете с некоторой логикой.
Модульный подход
Чтобы сделать его более модульным, мы можем думать о нашем контенте на главной странице в виде блоков или компонентов. По умолчанию может быть два полных: сообщения от The_Loop и нумерация страниц. Поскольку теперь мы хотим добавить еще один компонент вверху, то есть приветственное сообщение, давайте создадим файл Twig для этого компонента.
Откройте новый пустой файл в редакторе и скопируйте и вставьте следующие строки кода.
|
1
2
3
4
|
<!— Welcome Template —>
<section class=»welcome_message»>
<h2>Welcome to my website!</h2>
</section>
|
Создайте новую папку в корне вашей темы под названием views и сохраните этот файл с расширением .twig . Например, я сохранил файл как welcome.twig .
Визуализация шаблона ветки
Timber предоставляет нам несколько полезных функций, одной из которых является функция рендеринга. Вы можете назвать это так:
|
1
|
Timber::render();
|
Эта функция может принимать до четырех аргументов. Поскольку это выходит за рамки данной статьи, вы можете прочитать об этом в документации по Timber . Этой функции мы можем передать имя любого файла Twig, который присутствует в папке views вашей темы.
Давайте создадим приветственное сообщение в файле index.php .
|
01
02
03
04
05
06
07
08
09
10
|
<?php
/**
* Homepage
*/
get_header();
// Timber Render.
Timber::render( ‘welcome.twig’ );
get_footer();
|
Timber welcome.twig файл welcome.twig , загружает HTML и отображает новый измененный слой представления во внешнем интерфейсе следующим образом:
Функция render() принимает аргумент welcome.twig качестве аргумента, но автоматически читает этот файл, если шаблоны веток находятся в папке с именем views .
Если вы хотите использовать произвольное имя / путь для папки, вам нужно будет указать путь к этой папке. Например, я создал папку ветки в корне моей темы и добавил ее в аргумент функции рендеринга.
|
1
|
<?php Timber::render(‘twig/welcome.twig’);
|
Официальный порядок загрузки
Timber сначала просматривает дочернюю тему, а затем возвращается к родительской теме (аналогично логике WordPress). Официальный порядок загрузки:
- Пользовательские места
- Каталог вызова PHP-скрипта (но не темы)
- Детская тема
- Родительская тема
- Каталог вызова PHP скрипта (включая тему)
Пункт 2 вставлен над другими, так что если вы используете Timber в плагине, он будет использовать файлы веток в каталоге плагина.
Итак, теперь в файле index.php нет HTML, и он рендерит шаблон Twig.
Теперь давайте отправим некоторые динамические данные из index.php в файл welcome.twig и отобразим их с помощью Timber.
Отправка данных по дереву в файлы веток
Чтобы отправить данные из файла PHP в файл Twig, вам нужно определить массив контекста. Функция рендеринга берет массив данных, чтобы предоставить шаблонам Twig некоторый контекст. Давайте назовем массив $context , который является ассоциативным массивом, то есть он принимает пары ключ-значение.
Давайте добавим пару ключ-значение, которая будет динамическим приветственным сообщением, которое наш PHP-файл отправит в файл Twig.
Файл данных
Мой файл index.php теперь выглядит так.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<?php
/**
* Homepage
*/
get_header();
// Context array.
$context = array();
// Dynamic message.
$var = ‘Dynamic Message’;
// Dynamic data.
$context[‘the_message’] = $var;
// Render twig file with the give $context array.
Timber::render( ‘welcome.twig’, $context );
get_footer();
|
Итак, внутри файла index.php я определил пустой массив $context в строке # 8. Затем в строке № 11 я создал переменную $var со значением 'Dynamic Message' . В строке # 14 я создал ключ the_message равный $var .
В строке № 17 я вызвал функцию рендеринга с файлом welcome.twig , но на этот раз он принимает дополнительный аргумент, то есть массив $context . Этот новый аргумент фактически содержит данные, которые Timber отправит из файла PHP в файл Twig.
Итак, мы определили массив контекста и добавили динамическое сообщение (вы можете показать разное сообщение разным пользователям, добавив к нему какую-то логику, например, отображение имени текущего пользователя).
Файл шаблона
Теперь нам нужно использовать эти данные, т.е. the_message , в файле Twig. Мы можем отобразить переменную внутри нашего шаблона Twig, поместив вокруг нее двойные скобки. Например, чтобы отобразить $ var в файле ветки, мы можем написать {{ var }} . Это именно то, что я сделал.
|
1
2
3
4
|
<!— Message Template —>
<section class=»message»>
<h2>{{ the_message }}</h2>
</section>
|
Значение the_message будет напечатано внутри тегов h2. Я знаю, это так просто, и код выглядит довольно чисто.
Это оно! Сохраните код и просмотрите динамическое приветственное сообщение на внешнем интерфейсе. Вот последний скриншот.
Вывод
Подводя итог, теперь вы можете использовать файл PHP для кодирования логики и предоставления данных в шаблон Twig, который содержит HTML и отображает переменные или функции Twig в двойных скобках.
Этот модульный подход может привести к созданию отдельного файла шаблона для каждого компонента в вашей теме WordPress. Подумайте о наличии компонента message.twig, который вы могли бы использовать в любом месте темы для отображения любого сообщения, которое вы хотите, любое количество раз.
Это была базовая реализация Twig с Timber. Тем не менее, в следующих двух статьях я напишу о Timber WordPress Cheatsheet, управлении изображениями с помощью Timber и создании меню без использования функции сумасшедшего бродяги.
Если у вас есть какие-либо вопросы, разместите их в комментариях ниже или обратитесь в Twitter . Вы также можете взглянуть на мой код темы в этом репозитории GitHub .