Как создать макет проповеди с использованием настраиваемых полей и динамического содержимого в Divi

Возможность получить доступ к проповедям и послушать их - жизненно важная часть любого церковного веб-сайта. И с выпуском нового пакета макетов церкви Divi я подумал, что было бы полезно показать вам, как вы можете создать макет проповеди, используя динамический контент. Для этого я буду использовать плагин Advanced Custom Fields для создания групповых настраиваемых полей, которые вы можете обновить в бэкэнде своего сообщения. И, используя функцию динамического содержимого Divi, я покажу вам, как вы можете разработать макет, чтобы использовать эти настраиваемые поля для заполнения содержимого вашего сообщения. Как только все будет сказано и сделано, у вас будет красивый макет проповеди с динамическим контентом, который можно обновлять на бэкэнде с помощью интуитивно понятного пользовательского интерфейса настраиваемых полей без необходимости развертывать визуальный конструктор.

Давайте начнем.

Что вам нужно

Для этого урока вам понадобится следующее:

• Тема Divi
• Плагин Advanced Custom Fields
• Макет церковного блога из пакета макетов церкви (доступен в Divi Builder)

Краткий обзор плана проповеди

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

Создание настраиваемых полей с помощью плагина Advanced Custom Fields

Плагин Advanced Custom Fields (ACF) позволяет легко группировать настраиваемые поля вместе для использования в качестве динамического содержимого в ваших сообщениях или страницах. Он поддерживает ряд типов полей (например, средство выбора даты, редактор Wysiwyg и oEmbed), которые упрощают обновление настраиваемых полей. Это чрезвычайно полезно для предоставления клиентам более интуитивно понятного пользовательского интерфейса для обновления своего сайта с использованием настраиваемых полей.

После того, как вы установили и активировали плагин ACF, перейдите на панель управления WordPress и выберите Настраиваемые поля> Добавить новое.

Добавить новую группу полей

Чтобы создать новую группу, дайте новой группе полей название.

В разделе местоположения (или переключателе) измените настройки так, чтобы Тип сообщения был равен «Проект», а не «Публикация». Это в основном указывает плагину отображать эту группу настраиваемых полей только в типе сообщения проекта, встроенном в Divi (вы также можете оставить его как сообщение, если хотите. На ваш выбор).

Затем прокрутите вниз до раздела настроек и обновите следующее:

Позиция: Высокая (после содержания)

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

Добавить настраиваемые поля в группу полей

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

Пользовательское поле динамика

Для первого настраиваемого поля добавим место, где пользователи могут вводить выступающего для проповеди. Чтобы добавить новое поле, нажмите кнопку «Добавить поле» и введите следующее:

Ярлык поля: Спикер
Имя поля: динамик
Тип поля: Выбрать
Варианты выбора (введите каждое в новой строке): старший пастор, помощник пастора, молодежный пастор, приглашенный спикер

Пользовательское поле названия проповеди

Затем добавьте настраиваемое поле для заголовка проповеди.

Ярлык поля: Название проповеди
Имя поля: sermon_title
Тип поля: текст
Текст-заполнитель: Название проповеди

Пользовательское поле даты проповеди

Затем добавьте настраиваемое поле для даты проповеди. Для этого мы установим тип поля выбора даты, чтобы добавление новых дат было легким делом на бэкэнде.

Ярлык поля: Дата проповеди
Имя поля: sermon_date
Тип поля: выбор даты
Формат отображения: F j, Y
Формат возврата: F j, Y
Неделя начинается: понедельник

Пользовательское поле описания проповеди

Затем добавьте настраиваемое поле для описания проповеди. Это позволит пользователям обновлять содержимое сообщения с помощью редактора Wysiwyg без необходимости открывать визуальный конструктор.

Ярлык поля: Описание проповеди
Имя поля: sermon_description
Тип поля: Wysiwyg Editor

Пользовательское поле для встраивания аудио проповеди

Затем добавьте настраиваемое поле для встраивания аудио проповеди, используя тип поля oEmbed. Это позволит нам встроить аудио-встраивание проповеди, просто обновив URL-адрес аудио для встраивания на бэкэнде.

Ярлык поля: Встраивание аудио проповеди
Имя поля: sermon_audio_embed
Тип поля: oEmbed

Пользовательское поле URL аудио проповеди

Затем добавьте настраиваемое поле для URL-адреса аудио проповеди, чтобы мы могли использовать URL-адрес для заполнения ссылки в модуле для создания ссылки для загрузки файла.

Ярлык поля: URL аудио проповеди
Имя поля: sermon_audio_url
Тип поля: URL

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

Создать новый проект

На панели управления WordPress перейдите в раздел «Проекты»> «Добавить новый». Затем введите название проекта, которое также должно совпадать с названием проповеди (но это зависит от вас). Затем щелкните, чтобы использовать Divi Builder. Вы увидите группу настраиваемых полей, отображаемую в верхней части конструктора divi.

Теперь заполните настраиваемые поля информацией о проповеди, относящейся к этой публикации.

Спикер: старший пастор (выбирается из раскрывающегося меню)
Название проповеди: Новое творение (или как хотите)
Дата проповеди: выберите дату из окна выбора даты
Описание проповеди: используйте редактор WYSIWYG, чтобы ввести описание проповеди.
Встраивание аудио проповеди: введите URL-адрес медиафайла, который вы хотите встроить в медиаплеер.
URL-адрес аудио проповеди: введите URL-адрес мультимедийного файла (должен быть zip-файлом, если вы хотите, чтобы он загружался сразу при нажатии)

Затем добавьте изображение для вашего проекта. Это будет изображение, используемое для аудиоплеера макета проповеди.

Добавление нового готового макета для вашего проекта

Теперь щелкните, чтобы использовать Visual Builder.

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

Затем выберите вариант «Выбрать готовый макет». Во всплывающем окне загрузки из библиотеки выберите Пакет макетов церкви, а затем щелкните, чтобы использовать макет страницы церковного блога.

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

Затем удалите модуль блога во втором разделе.

Обновите текстовый модуль «Последние проповеди», чтобы он содержал следующее:

<h3>Description</h3>

Затем продублируйте этот текстовый модуль и обновите содержимое, чтобы сказать «Слушайте сейчас».

Добавление динамического содержимого макета проповеди

Описание проповеди

Теперь мы готовы приступить к созданию динамического аудиоконтента проповеди для нашего раздела. Для начала добавим описание проповеди прямо под текстовым модулем с заголовком «Описание». Для этого добавьте новый текстовый модуль. Наведите указатель мыши на поле ввода содержимого и щелкните значок динамического содержимого.

Затем выберите настраиваемое поле «Описание проповеди» из раскрывающегося списка.

Сохранить настройки.

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

Аудиомодуль и встраивание аудио

Под текстовым модулем с заголовком «Слушайте сейчас» добавьте новый аудиомодуль. Затем обновите текстовое содержимое следующим динамическим содержимым:

Название: Название проповеди (произвольное поле)
Имя исполнителя: Спикер (настраиваемое поле)
Название альбома: Дата проповеди (произвольное поле)

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

Для изображения обложки аудиомодуля добавьте динамическое содержимое, щелкнув значок динамического содержимого при наведении курсора на область предварительного просмотра изображения и выбрав «Лучшее изображение».

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

Чтобы лучше соответствовать дизайну макета, сохраните настройки и скопируйте фон нижней части, щелкнув правой кнопкой мыши текст категории «Фон» в настройках раздела и выбрав «Копировать фон».

Теперь вставьте фон в настройки фона вашего аудиомодуля, открыв настройки аудиомодуля, щелкнув правой кнопкой мыши текст категории фона и выбрав опцию «Вставить фон».

Затем перейдите к настройкам дизайна и обновите следующее:

Ориентация текста: влево
Пользовательское поле: внизу 0 пикселей

Теперь все, что нам осталось для завершения аудиоплеера проповеди, - это встроенный аудиоплеер. В настоящее время блок аудиовхода, встроенный в аудиомодуль, не поддерживает динамический контент (я уверен, что он будет в будущем), поэтому мы собираемся сделать небольшой обходной путь. Мы собираемся создать новый текстовый модуль и добавить аудиофайл, встраиваемый с использованием динамического содержимого. А из-за того, как WordPress распознает шорткод, сгенерированный настраиваемым полем, он будет отображать аудиоплеер по умолчанию.

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

Теперь мы можем разместить наш аудиоплеер внутри аудиомодуля с некоторым настраиваемым отступом. Перейдите на вкладку дизайна и обновите следующее:

Настраиваемое поле (рабочий стол): -40 пикселей сверху, 280 пикселей слева, 60 пикселей справа
Пользовательское поле (планшет): 0 пикселей слева, 0 пикселей справа

Ссылка для скачивания

Иногда пользователям бывает полезно загрузить аудиофайл. Чтобы упростить эту задачу, вы можете добавить ссылку на аудиофайл в свой пост. Для этого мы собираемся использовать динамический контент, чтобы заполнить модуль аннотации заголовком проповеди и URL-адресом аудио.

Добавьте модуль рекламных сообщений под аудиомодуль и обновите содержимое следующим образом:

Название: Название проповеди (произвольное поле)
Значок: см. Снимок экрана
URL ссылки на заголовок: URL аудио проповеди (настраиваемое поле)

Чтобы сделать рекламное объявление более похожим на интерактивную ссылку, обновите следующее:

Цвет значка: rgba (33,50,94,0.86)
Расположение изображения / значка: слева
Стиль шрифта заголовка: U
Цвет подчеркивания заголовка: rgba (33,50,94,0.86)
Цвет текста заголовка: rgba (33,50,94,0.86)
Высота строки заголовка: 2em
Ширина содержимого: 100%

Чтобы сделать ссылку еще более узнаваемой при загрузке, вы можете отредактировать динамическое содержимое заголовка проповеди, которое занимает заголовок рекламного объявления, с дополнительным текстом в поле ввода после, которое гласит «(загрузить)».

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

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

Название: Название проповеди (произвольное поле)
Текст подзаголовка: Спикер (настраиваемое поле)
(Примечание: для динамического содержимого динамика введите «по:» в поле до ввода)
Кнопка №1 Текст ссылки: удалить
Кнопка № 2 Текст ссылки: удалить
Содержание: Дата проповеди (настраиваемое поле)

Теперь перейдите на вкладку дизайна и выньте используемый пользовательский отступ.

Вот окончательный результат.

Теперь все, что вам нужно сделать в будущем, - это сохранить макет в библиотеке Divi, чтобы использовать его для будущих сообщений проповедей. А поскольку у вас есть группа настраиваемых полей, готовая к работе со всеми проектами, вы можете просто обновить информацию о настраиваемых полях в серверной части, даже не открывая Visual Builder.

Кроме того, с проповедями, сохраненными как проекты, вы можете легко создать фильтруемое портфолио для отображения своих проповедей!

Последние мысли

Я надеюсь, что это руководство поможет пролить свет на динамический контент и то, как его можно использовать с плагином Advanced Custom Fields для создания мощного макета проповедей. На то, чтобы все настроить, может потребоваться некоторое время, но вознаграждение определенно того стоит. Конечно, этот же процесс можно использовать для создания всевозможного динамического контента для разных типов сообщений. Дайте мне знать, если у вас есть какие-либо вопросы в комментариях ниже. С нетерпением жду Вашего ответа.

Ваше здоровье!