Добро пожаловать на девятнадцатый урок. Сегодня поговорим про пользовательские типы записей и полей.
Custom Post Type CPT — это пользовательские типы записей в WordPress, которые позволяют создавать уникальные типы контента, отличные от стандартных записей, страниц и медиафайлов. Они могут быть использованы для создания различных типов контента, таких как портфолио, продукты, отзывы, события и многое другое.
Для создания CPT можно использовать плагины, такие как Custom Post Type UI, которые позволяют легко создавать и управлять пользовательскими типами записей без необходимости писать код.
Пользовательские поля — Custom Fields — это дополнительные поля данных, которые можно добавить к CPT. Они позволяют хранить дополнительную информацию о каждом элементе CPT, такую как цены, размер, цвета и т. д.
Плагин Advanced Custom Fields (ACF) предоставляет мощный инструментарий для добавления и настройки пользовательских полей. С его помощью можно создавать различные типы полей, такие как текстовые поля, выпадающие списки, флажки, радиокнопки и многое другое.
Давайте разберём, для чего нужны пользовательские типы записей. Посмотрим на макет. В карточке товаров у нас цена идёт за килограмм, а в данном случае цена идёт за литры. Вы, наверное, заметили, что на прошлом уроке мы не добавляли ни то, ни другое. Это делается при помощи плагина Advanced Custom Fields (ACF).
Давайте посмотрим на ещё один пример. В этом макете, например, используются данные, которые могут меняться для каждой записи. Например, у нас есть экскурсия по Москве и экскурсия по Неве. Могут меняться сезон, время, участники и т. д. Также может поменяться цена.
Давайте посмотрим на наши записи. Например, выберем самую первую — «От Красной площади до Воробьёвых гор». У нас выводится только заголовок, основная информация, изображение записи. Также отрывок небольшой, и всё. Мы здесь никак не можем добавить эти данные, поэтому нам и понадобится плагин для вывода пользовательских полей.
Давайте перейдём в консоль WordPress, «Плагины» — «Добавить плагин». В поиске плагинов давайте введём «ACF». Вот он у нас, самый первый, — Advanced Custom Fields (ACF). Устанавливаем и активируем.
После активации у нас в левой панели появился новый плагин ACF, где есть «Группы полей», «Типы записей», «Таксономия», «Страницы настроек» и «Инструменты». Нам пока ничего не нужно, кроме «Группы полей». Давайте перейдём сюда.
ACF использует «Группы полей» для группировки произвольных полей вместе, а затем присоединения этих полей к экранным формам редактирования. Давайте добавим нашу первую группу полей. Нажимаем «Добавить группу полей» — и сразу же добавим новую группу. Я хочу для начала выводить в товарах массу или объём в карточках. Давайте назовём тогда нашу новую группу полей «Товары».
«Товары».
Далее у нас есть «Тип поля». Выбираем тип поля. Тут выбирается, какой тип поля мы будем использовать: «Текст», «Область текста» и т. д. Можно посмотреть: нажать «Обзор полей» и уже здесь выбирать нужный нам тип поля. Они также разбиты на типы: «Базовый», «Содержимое» и т. д. Выбирается тип, также используется подсказка, для чего это поле нужно. «Простое текстовое поле предназначено для хранения одностраничных значений». Далее: «Простая текстовая область…» И так далее. Очень удобно использовать эти подсказки.
Давайте выберем текстовое поле, так как у нас простой текст. Также здесь можно написать этикетку поля. Или давайте просто пока выберем поле. Или можно написать этикетку поля здесь, чтобы было понятно, для чего нужно. Давайте так, у нас масса или объём — так и напишем: «Масса/объём». Щелкнём на пустое поле, и у нас название поля автоматически заполняется латиницей. «Значение по умолчанию» — не будем ничего добавлять. «Закрыть поле» — программа его свернёт. Давайте свернём.
И далее у нас идут настройки: «Правила местонахождения»: «Показать эту группу полей, если…» — это будет в нашем случае «Тип записи». Оставляем в нашем случае «равно» и выбираем из выпадающего списка «Товар». Добавить можно ещё группу правил, но нам это не нужно.
Теперь можно сохранить изменения. Группа полей опубликована.
Теперь давайте перейдём в «Товары». И посмотрим на какой-нибудь из них. Давайте первый попавшийся. «Помидоры», например. Вот у нас появилось новое поле, «Товары»: «Масса и объём», так, как мы назвали. И теперь можно заполнить это поле. Например, давайте заполним так: «/1 кг». Обновим.
И теперь мы можем в «Товарах», в любом товаре, в группе полей добавлять нужную нам информацию. Давайте посмотрим «Маринованные помидоры». «Один килограмм». Или вот давайте зайдем в «Варенье клубничное». Здесь можно, например, написать уже не «килограмм», а «литр». «/1 литр». И так далее.
Давайте создадим ещё группу полей, например, для экскурсии из этого макета. У нас, как я говорил, есть «Сезон», «Участники», «Время», «Помощь», «Цена». А также у нас в карточках есть, например, «Города»: Москва, Санкт-Петербург.
Создадим новые виды полей: АCF — «Группы полей». Добавим новую группу полей. И так как эта группа будет относиться у нас к экскурсиям, то так и назовём: «Экскурсии». Также можно выбрать тип поля, обзор поля, текст. Выбираем «Текст». А в этикетку поля мы, например, напишем «Сезон». «Выбрать поле». И вот у нас сразу всё заполнилось.
Давайте ещё добавим поле. Теперь создадим «Участники». Также выбираем: «Текст», «Участники». Свернём. Это тоже свернём, чтобы не мешалось.
Добавим ещё одно поле. Например, «Время». Кликаем на пустое место. Ещё одно поле добавим, например «Помощь». На пустое место. И добавим ещё одно поле, это у нас будет «Цена на человека». Давайте так: здесь уже выберем тип поля какой-нибудь другой, из базового, например выберем «Число». «Выбрать поле». Пишем «Цена».
И можно ещё добавить, например, «Город». Давайте так и сделаем: добавим поле. «Город». «Выбрать поле». И я, например, хочу, чтобы у нас город был сверху. Можно просто перетащить.
Далее перейдём в настройки «Правила местонахождения». Так как у нас это относится к рубрике «Экскурсия», давайте выберем «Рубрика записи». Оставляем «равно» и выбираем рубрику, какая у нас есть, — «Экскурсии». Сохраняем изменения. Группа полей опубликована. Теперь можно посмотреть.
Давайте посмотрим. У нас есть запись «От Красной площади до Воробьёвых гор». Давайте обновим эту страницу. И вот у нас появилось поле, относящееся к экскурсиям. Как мы назвали «Экскурсии», здесь оно так и будет называться — «Экскурсии». «Город», «Сезон», «Участники», «Время», «Помощь», «Цена». Теперь можно заполнить эти поля.
Давайте выберем сезон. Скопируем отсюда, вставим. «От Красной площади» — это значит город у нас «Москва», можно заполнить. Также можно добавить «Участники», скопируем «Групповые…». Добавим время.
Давайте для примера поменяем время. Например, не с 12, а сделаем с 11 до 3, а здесь, например, с 15 до 9. Также добавим «Помощь», заполним поле. И можно прописать цену. Давайте не 1300, например, а сделаем какую-нибудь другую, отличную. Например, 900. Сохраним.
И далее добавляем ко всем записям — к «Экскурсии по Неве» и другим экскурсиям. Заполним данные. Вот, я заполнил наши данные для всех экскурсий. Город проставил, сезон, также время немножко изменил, цену поменял, а также поставил тег на перенос на другую строку, так как у нас здесь будет переноситься на другую строку.
Теперь, когда мы заполнили все поля во всех нужных нам записях, перейдём в «Конструктор тем» и создадим одиночную запись. Опять открывается библиотека. Давайте сразу же зададим в настройках: поменяем название. Например, на «Шаблон экскурсий».
Так как у нас это будет для экскурсий, можно задать сразу HTML-тег main, но это не обязательно. Как я говорил ранее: Elementor по умолчанию делает main. Но пусть будет.
Теперь создадим структуру. Давайте сразу сделаем отступы сверху и снизу по 90 пикселей и добавим заголовок записи.
Сразу же HTML-тег поменяем на h2 и в стилях (я уже немножко в глобальных поменял настройки, добавил, вернее) поменяем типографику. Теперь можно добавить сюда, в этот контейнер, ещё один контейнер. Зададим ему горизонтальную раскладку, добавим сопутствующее изображение и добавим ещё один контейнер. Контейнеру также зададим горизонтальную раскладку. Сразу же можно сделать перенос на новую строку — Wrap.
Давайте немножко стилизуем изображение. Добавим скругление углов, снизу в ноль. А сюда, в этот контейнер, мы добавим ещё контейнер. Сделаем у него «во всю ширину» и ширину примерно 47−48 пикселей. Не пикселей, процентов. И продублируем ещё три раза.
Теперь можно добавить вот эти заголовки. Так как они у нас стационарны, у нас меняется только содержимое. Давайте сразу же скопируем. Добавим заголовок, поменяем и добавим HTML-тег. Сразу зададим ему <p> и стилизуем типографику.
Подзаголовок. Давайте ещё так же сделаем для следующих записей. HTML-тег ему зададим <p>. Стиль, типографику подзаголовка. Поменяем текст: «Участники» и т. д.
Можно скопировать и вставить сюда. И сюда. Тут поменяем только содержимое на «Время» и на «Помощь».
Теперь давайте добавим обычный текстовый редактор, для него в динамических тегах выбираем внизу ACF-поле. Нажимая на этот ключ, мы выбираем ключ, по которому у нас будет выбираться здесь. Так у нас сезон, выбираем «Cезон». Вот, у нас подтянулось. Теперь можно так же сделать. Выбираем текстовый редактор, вставляем сюда, нажимаем «Динамические теги», выбираем ACF-поле и по ключу выбираем «Участники».
Можно, опять же, скопировать, вставить, сюда вставить и здесь только поменять ACF-ключи: «Время». И здесь — «Помощь».
Также давайте стилизуем — поменяем цвет, типографику. И можно в «Расширенных» по ширине сделать чуть поменьше, примерно вот так. Давайте здесь скопируем и вставим сюда стиль. «Вставить стиль». Вставим стиль сюда и вставим стиль сюда. Здесь тоже немножко давайте поменяем ширину. И здесь так же.
Вот так. Давайте добавим ещё один контейнер для кнопки. Поставим его в самый низ, но над сопутствующим изображением. Сделаем его во всю ширину. Вот теперь я его добавил правильно.
И теперь можно добавить, например, текстовый редактор. Добавим к нему динамический тег — ACF-поле. По ключу выберем цену и стилизуем. Сделаем цвет и типографику. Давайте теперь добавим ещё один текстовый редактор.
Зададим контейнеру правильное расположение. И теперь здесь, в текстовом редакторе, так как у нас рубль на человека статично, то так и сделаем.
Давайте не визуально, а в тексте пропишем знак рубля. Для этого нажимаем левый Alt и в верхнем цифровом ряду нажимаем восьмёрку. У нас получился знак рубля. Правый Alt, простите, перепутал. Правый Alt и верхняя восьмёрка — знак рубля. Левый Alt и правая раскладка цифровая нам ничего не дадут.
Давайте здесь напишем «рубль» и «на человека». Добавим к значку рубля тег <span>, «закрыть» — и теперь можно в «Расширенных» в «Пользовательских CSS» стилизовать. Давайте также пропишем: selector span. И возьмём отсюда код. Например, базовую типографику вот эту. Скопируем и вставим.
А слово «человека» мы стилизуем обычными стилями. Давайте его по цвету также сделаем и добавим типографику. Возьмём font-weight 700, font-family Montserrat Alterance. Копируем font-size 18, lines-height 20, размер 18, Montserrat, 700, высоту линии — 20.
Так, у нас цифра немножко отличается. Давайте её тоже стилизуем. Сделаем так. У нас сколько? 38 пикселей. Сделаем 38. И давайте ещё в «Расширенных» добавим shrink, чтобы у нас «Рубль на человека» прилипал к этому контейнеру. Пробелы, например, обнулим. По центру. И добавим кнопку теперь.
Кнопке давайте зададим сразу же «на всю ширину». А контейнеру, опять же, зададим Wrap. Далее у нас также стилизуется кнопка. Напишется «Отправить запрос». Это я уже делать не буду.
После того как мы настроили шаблон, добавили нужные поля, вспоминая прошлые уроки, давайте опубликуем. Добавим условия, выберем рубрику… И выберем рубрику «Экскурсии». «Сохранить и закрыть».
Давайте посмотрим теперь на записи. «Все записи». «Экскурсия по Москве-реке на теплоходе». Давайте нажмём «Перейти». И, как видите, у нас подтягивается нужный нам текст и цена.
Давайте вернёмся обратно. Например, вот эту экскурсию по Неве посмотрим. Опять же, цена подтягивается, время, которое я поменял. И всё остальное.
Также давайте посмотрим ещё на один пример. Выйдем в конструктор тем, в карточку товаров. Давайте отредактируем её. Так, белым на белом не видно. Тогда сделаем по-другому немножко. Опять «Конструктор тем». Например, у нас есть «все товары» и «архив овощей», где у нас карточки используются. Давайте выберем какую-нибудь. Так как у нас это шаблон, если здесь меняем что-то, у нас всё в других шаблонах поменяется.
Здесь виднее. Давайте добавим. Например, давайте добавим контейнер. Также в этот контейнер мы поставим цену и добавим ещё какой-нибудь текстовый редактор. Контейнеру опять зададим правильную раскладку расположения, а к текстовому редактору опять добавим динамический тег — ACF-поле. Выбираем по ключу «Товары», «Масса и объём».
Вот у нас подтянулось. Давайте теперь к этой записи сделаем Shrink. «Во всю ширину». Текстовый редактор тоже сделаем «Во всю ширину». Хотя, наверное, нет. Давайте сделаем «Произвольно», здесь «Во всю ширину», а у контейнера мы уберём пробелы. Так, текстовому редактору, опять же, зададим стиль: цвет белый, текст, «Акцент».
Контейнеру зададим выравнивание по центру, наверное. Так, давайте в цене товара что-то ещё поменяем. Отступ снаружи. Например, снизу давайте немножко. Вот так — минусовой зададим, чтобы выровнять. А справа давайте зададим тоже пару пикселей.
Вот так. Чтобы немножко было воздуха. И, как видите, у нас ко всем уже подбирается. Давайте сохраним. Выйдем.
Так, у нас что-то всё сбилось. Давайте обратно сделаем. Сделаем ширину. Давайте всё-таки сделаем его «Во всю ширину». Или нет… Вернее, давайте добавим «По умолчанию» и текстовый редактор. Цену нашу тоже сделаем «По умолчанию». И так как цена товара у нас shrink, у нас теперь будет всё красиво. Обновим, сохраним и выйдем.
У нас в цене товара ко всем подтягиваются килограммы. Давайте посмотрим. В магазине вот, например, помидорки я прописал в граммах. Здесь килограммы, грибное ассорти тоже в граммах прописал. И так далее. Варенье у нас клубничное — литр. Вот таким образом действуют у нас группы полей.
Сегодня мы установили плагин Advanced Custom Fields ACF, добавили группу полей, настроили дополнительные поля для записей. В конструкторе Elementor создали ещё шаблоны, где использовали пользовательские поля.
На этом у меня сегодня всё. Увидимся на следующем уроке. Пока.
1. Установить плагин Advanced Custom Fields (ACF).
2. Добавить группу полей.
3. Добавить типы полей для нужных записей
4. Создать шаблон записей (добавить контент при помощи динамических тегов ACF, стилизовать).
5. Сделать адаптацию под планшет и мобильный телефон.