Создание своих шаблонов для вывода постов в Elementor

Обращаю внимание на то, что у вас должен быть Elementor Pro

Меня, как и многих других, кто хоть раз выводил записи с помощью виджета Posts в Elementor, не устраивал крайне скудный выбор шаблонов. Если в случае с выводом записей ещё можно смирится с этим, то при выводе кастомных типов записей часто встает необходимость вывода специфической информации в списке записей.

Как-то мне понадобилось вывести типы записей для недвижимости. Там и площадь, и адрес и многое другое. Кроме этого, на одном сайте встала необходимость вывода значка наличия видео в новости. Задача весьма не тривиальная. Тут помог другой плагин: Ele Conditions. У этого плагина существуют более продвинутые и удобные аналоги. К примеру Dynamic Conditions. Об этих плагинах поговорим чуть позже.

А вот и сам пример работы обоих плагинов.

В правом верхнем углу превью можно заметить значок, который отсутствует у одной публикации. Именно в этой публикации отсутствует видеосюжет. При желании этот значок можно сделать так, что при клике по нему будет всплывать окно с просмотром видео. Круто же? Несомненно!

Плагин Elementor Custom Skin

Ссылка на плагин: https://wordpress.org/plugins/ele-custom-skin/

Именно этот плагин решит нашу задачу вывода записей с использованием нашего шаблона. После его установки и активации в разделе «Конструктор тем» появится тип шаблона «Loop» и «Custom Grid».

Из этих двух нам понадобится «Loop». Для теста создадим шаблон, добавим в него изображение, заголовок и сохраним. Для этого жмем «ДОБАВИТЬ НОВЫЙ LOOP». Во всплывшем окне указываем название шаблона и жмем «Создать шаблон».

Добавляем картинку и заголовок.

Сохраняем шаблон. Условие не добавляем, просто жмем «Сохранить и закрыть». Далее переходим в шаблон, в котором необходимо вывести записи используя наш новый шаблон. Выбираем виджет Posts или добавляем, если он не добавлен. В поле обложка выбираем Custom, а в появившемся поле ниже выбираем из списка наш шаблон.

Как выдите я специально не добавлял динамическое заполнение полей для наглядности. Теперь мне необходимо вернуться в шаблон «Loop» и сделать для изображения и заголовка динамическое заполнение.

Скрытие или появление элемента по условию

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

Самым простым в использовании плагином является Dynamic Conditions. Он не требует колупаться в коде. Для самых распространенных задач его вполне достаточно. Что касаемо Ele Conditions, то его есть смысл использовать когда необходимо выполнять какие-то нестандартные вычисления.

Усьтанавливаем Dynamic Conditions и активируем. Затем переходим к редактированию шаблона «Loop» для вывода записей. Там выбираем нужный элемент. У меня этот элемент пока просто заголовок. При помощи Advanced Custom Fields я добавил поле «Дата выхода» для записи.

В редакторе выбираем элемент, затем идем во вкладку «Расширенные», там раскрываем вкладку Dynamic Conditions и выбираем необходимые параметры.

Добавляю к одной из записей дату выхода и в итоге получаю вот такой результат.

Как видите у одной записи два заголовка. Все довольно просто.