К настоящему времени вы прочитали об основных принципах использования Twig через Timber при создании модульной темы WordPress. Мы также изучили вложение блоков и множественное наследование с помощью Twig на основе принципа DRY. Сегодня мы рассмотрим, как отображать изображения вложений, меню WordPress и пользователей в теме с Twig через плагин Timber.
Изображения в древесине
Изображения являются одним из жизненно важных элементов для любой темы WordPress. В обычной практике кодирования WordPress изображения интегрируются с PHP внутри обычных тегов изображений HTML. Тем не менее, Timber предлагает довольно полный способ обработки тега img (image), который является модульным и чистым.
К полю миниатюр поста прикреплены изображения. Их можно легко получить через файлы Twig с помощью {{ post.thumbnail }} . Это так просто!
использование
Давайте начнем с практического примера. Наш файл single.php выглядит так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<?php
/**
* Single Template
*
* The Template for displaying all single posts.
*
* @since 1.0.0
*/
// Context array
$context = Timber::get_context();
$post = new TimberPost();
$context[‘post’] = $post;
// Timber ender().
Timber::render( ‘single.twig’, $context );
|
Здесь я использовал TimberPost () по вполне очевидным причинам. Это используется в Timber для представления сообщений, полученных из WordPress, что делает их доступными для шаблонов Twig.
Поскольку выбранное изображение прикреплено к данным поста, теперь нам нужно получить его на внешнем интерфейсе. Так что файл Twig для него, single.twig , будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
{# Sinlge Template: `single.twig` #}
{% extends «base.twig» %}
{% block content %}
<div class=»single_content»>
<img src=»{{ post.thumbnail.src }}» />
</div>
{% endblock %}
|
В строке № 9 код {{ post.thumbnail.src }} получает {{ post.thumbnail.src }} (уменьшенное изображение) сообщение и отображает его так:
Вы можете использовать этот синтаксис кода, чтобы получить столько миниатюр изображений, сколько вы хотите.
Есть еще много чего вы можете поэкспериментировать с этими изображениями при использовании Timber. Например, вы также можете изменить их размер:
|
1
|
<img src=»{{ post.thumbnail.src | resize ( 900, 500 ) }}» />
|
Используя функцию resize () , вы можете добавить новые размеры к изображению, где первый параметр — width а второй — height . Если вы хотите пропорционально масштабировать изображение, тогда опустите атрибут height . Теперь синтаксис становится:
|
1
|
<img src=»{{ post.thumbnail.src | resize ( 900 ) }}» />
|
Внешний интерфейс отображает то же изображение, как это:
Если вы хотите узнать больше, попробуйте изображение поваренной книги .
Использование TimberImage()
Рассмотрим сценарий, в котором разработчик хочет получать изображения по идентификатору изображения или отображать внешнее изображение с помощью URL-адреса и т. Д. Для такого расширенного подхода Timber предлагает класс TimberImage() для представления извлекаемых изображений. из WordPress.
использование
Давайте рассмотрим пример для нашего файла single.php , который теперь выглядит следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
<?php
/**
* Single Template
*
* The Template for displaying all single posts.
*
* @since 1.0.0
*/
// Context array
$context = Timber::get_context();
$post = new TimberPost();
$context[‘post’] = $post;
// Using the TimberImage() function
// to retrieve the image via its ID ie 8
$context[‘custom_img’] = new TimberImage( 8 );
// Timber ender().
Timber::render( ‘single.twig’, $context );
|
На этот раз я использую TimberImage() который принимает идентификатор изображения 8 качестве параметра. Остальная часть процедуры кодирования точно такая же. Давайте восстановим это изображение через файл Twig single.twig .
|
1
|
<img src=»{{ custom_img }}» />
|
Значение, хранящееся в элементе $context custom_img, то есть {{ custom_img }} , будет извлекать изображение через его идентификатор для отображения в интерфейсе следующим образом
Чтобы получить изображение через внешний URL-адрес, замените его следующим синтаксисом.
|
1
|
<?php $context[ ‘img’ ] = new TimberImage( ‘http://domain.com/link/image.jpg’ );
|
На этот раз вместо идентификатора изображения есть внешний URL-адрес изображения, который отображается на внешнем интерфейсе следующим образом:
Чтобы изучить некоторые дополнительные функции этой функции, вы можете проверить документацию .
Меню в древесине
Теперь, как бы вы пошли на рендеринг меню WordPress с шаблонами Twig? Это сложно сделать. Но держись! Timber предоставляет вам свой TimberMenu() , который может помочь вам отобразить меню WordPress внутри файлов Twig в виде полного цикла. Давайте посмотрим на это.
использование
Вся концепция извлечения пунктов меню вращается вокруг объекта меню . Есть два способа определения его контекста. Первый — сделать объект меню доступным на каждой странице, добавив его в глобальную функцию get_context (), как я сделал в файле functions .php . Во-вторых, вы можете добавить определенное меню по его идентификатору для определенного шаблона PHP.
Независимо от двух методов, как только меню станет доступным для массива Timber $context , вы можете извлечь из него все пункты меню. Но я предпочитаю определять это глобально. Перейдите в файл functions.php и вставьте следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<?php
/**
* Custom Context
*
* Context data for Timber::get_context() function.
*
* @since 1.0.0
*/
function add_to_context( $data ) {
$data[‘foo’] = ‘bar’;
$data[‘stuff’] = ‘I am a value set in your functions.php file’;
$data[‘notes’] = ‘These values are available everytime you call Timber::get_context();’;
$data[‘menu’] = new TimberMenu();
return $data;
}
add_filter( ‘timber_context’, ‘add_to_context’ );
|
Итак, здесь я определил вызов пользовательской функции add_to_context . Внутри этой функции есть некоторые данные, которые я хочу, чтобы они были доступны в каждом шаблоне PHP через get_context() . В строке # 13 вы можете найти экземпляр TimberMenu () , передаваемый в меню элементов в массиве $data .
Это сделает стандартное меню WordPress доступным для шаблона Twig как объект, через который мы можем пройти. Функция TimberMenu() может принимать такие параметры, как TimberMenu() меню или идентификатор.
Давайте создадим шаблон Twig под названием файл menu.twig .
|
01
02
03
04
05
06
07
08
09
10
11
|
{# Menu Template: `menu.twig` #}
<nav>
<ul class=»main-nav»>
{% for item in menu.get_items %}
<li class=»nav-main-item {{ item.classes | join(‘ ‘) }}»>
<a class=»nav-main-link» href=»{{ item.get_link }}»>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
|
Приведенный выше код запускает цикл внутри этого шаблона Twig. Строка № 5 запускает цикл for для каждого элемента меню и отображает заголовок каждого item меню в неупорядоченном списке. Цикл выполняется до тех пор, пока все пары ключ-значение объекта menu будут перебраны и перечислены во внешнем интерфейсе.
Я пошел дальше и включил шаблон base.twig шаблон base.twig в строке # 11.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
{# Base Template: `base.twig` #}
{% block html_head_container %}
{% include ‘header.twig’ %}
{% endblock %}
<body class=»{{body_class}}»>
{% include «menu.twig» %}
<div class=»wrapper»>
{% block content %}
<!— Add your main content here.
<p>SORRY!
{% endblock %}
</div>
<!— /.wrapper —>
{% include «footer.twig» %}
</body>
</html>
|
Давайте предварительно просмотрим бэкэнд ( Appearance> Menus ) моего демонстрационного веб-сайта, где его меню содержит два родительских элемента и один дочерний элемент.
Итак, давайте посмотрим на страницу поста — поскольку наш single.twig расширяет base.twig , наше меню автоматически появится на этой странице.
Вы можете видеть, что в верхней части нашего отдельного поста есть меню с обоими родительскими элементами внутри.
Как насчет дочерних пунктов меню? Давайте обновим наш файл menu.twig чтобы включить также дочерние элементы.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
{# Menu Template: `menu.twig` #}
<nav>
<ul class=»main-nav»>
{% for item in menu.get_items %}
<li class=»nav-main-item {{ item.classes | join(‘ ‘) }}»>
<a class=»nav-main-link» href=»{{ item.get_link }}»>{{ item.title }}</a>
{% if item.get_children %}
<ul class=»nav-drop»>
{% for child in item.get_children %}
<li class=»nav-drop-item»>
<a href=»{{ child.get_link }}»>{{ child.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
|
Строки с 9 по 23 печатают дочерние пункты меню, если они есть На этот раз внешний интерфейс отображает дочерний элемент нашего первого родителя.
Для более подробной информации о TimberMenu() , проверьте документацию .
Пользователи в Timber
Пользователи могут быть извлечены из базы данных WordPress с TimberUser () класса TimberUser () . Класс принимает идентификатор пользователя или слаг в качестве аргументов для извлечения пользователя.
Поскольку пользователи или авторы блогов связаны с постами WP, я собираюсь использовать код single.php , который теперь выглядит следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?php
/**
* Single Template
*
* The Template for displaying all single posts.
*
* @since 1.0.0
*/
// Context array
$context = Timber::get_context();
$post = new TimberPost();
$context[‘post’] = $post;
// Using the TimberImage() function
// to retrieve the image via its ID ie 8
$context[‘custom_img’] = new TimberImage( 8 );
// Get the user object.
$context[‘user’] = new TimberUser();
// Timber ender().
Timber::render( ‘single.twig’, $context );
|
Строка # 20 инициализирует TimberUser() и получает назначение элементу контекста, то есть user . Давайте отобразим имя автора через шаблон Twig.
Мой шаблон single.twig имеет новую строку кода в конце, в строке # 21.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
{# Sinlge Template: `single.twig` #}
{% extends «base.twig» %}
{% block content %}
<div class=»single_content»>
<img src=»{{ post.thumbnail.src }}» />
{# <img src=»{{ post.thumbnail.src | resize ( 900, 500 ) }}» /> #}
{# <img src=»{{ post.thumbnail.src | resize ( 900 ) }}» /> #}
{# <img src=»{{ custom_img }}» /> #}
<h1>{{ post.title }}</h1>
<p>{{ post.get_content }}</p>
<p>Author: {{ user }} </p>
</div>
{% endblock %}
|
Код извлекает имя автора текущего сообщения и отображает его во внешнем интерфейсе. Вы можете использовать {{ user | print_r }} {{ user | print_r }} чтобы увидеть, что еще доступно в объекте TimberUser.
Чтобы узнать больше об этом классе, обратитесь к документации . Вы можете найти код этого руководства в репозитории GitHub в ветке ImagesMenusUsers .
Вывод
Эта статья завершает всю серию. В этих четырех статьях я изучал, как использовать Timber для интеграции языка шаблонов Twig в тему WordPress.
Окончательный репозиторий для этой серии можно найти на GitHub с ветками для учебника:
- Урок № 2. Начало работы
- Урок № 3: Шпаргалка WordPress
- Урок № 4: TimberImages, TimberMenu и TimberUser
Вы можете обратиться к онлайн-документации Timber для получения дополнительной информации.
Пройдите всю эту серию и примените все объясненные примеры, и я уверен, что вам понравится Twig. Отправьте свои запросы в поле для комментариев ниже. Вы также можете связаться со мной через Twitter .