Для демонстрации будет использована базовая тема из репозитория WordPress «Twenty Twenty-One» и готовая верстка Таблицы цен которая была заимствована с интернет-сообщества «CodePen».
Не спроста была выбрана именно эта задача, потому как она имеет вложенные массивы и начинающим пользователям CF кажется, что данная задача "супер сложная", а для некоторых даже не достижимая. И по этому многие опускают руки и делают выбор в пользу плагина ACF и платного дополнения ACF Pro.
Создать на сайте отдельный блок с таблицей цен так, чтоб пользователь мог редактировать этот блок из админки, не влезая в код шаблона.
Для чистоты примера и без возни с версткой новой темы будем использовать дочернюю на основе «Twenty Twenty-One». Чтоб не дублировать как создается дочерняя тема я рассказывал тут: Создание дочерней темы, за исключением того, что тему будем использовать другую, но особой разницы нет, делается аналогично.
Когда дочерняя тема активирована, создаём в корне один файл price.php он нам понадобиться для вывода нашего блока. Объявим в нем заголовок, чтоб его можно было выбрать в качестве шаблона страницы:
Далее в админке создаём новую страницу именуем её как Цены и выбираем нужный нам шаблон.
Код страницы может отличаться и пишется конкретно под неё, но в данной теме я использовал именно этот код:
Я поправил немного стили из примера, чтоб они вписались в данную тему:
Далее нам нужно занести кусочек верстки в наш код страницы, только тот который нужен для вывода в цикле.
Именно этот кусок нам и понадобиться для реализации. Как видим из примера верстки одной позиции, в нем присутствует: ссылка на изображение, заголовок, перечисление пунктов прайса, цена и кнопка с ссылкой.
В данном примере, будет использован свой отдельный плагин Carbon Fields.
Предположим, что у вас создан отдельный плагин, подключен и активирован Carbon Fields, потому как дальше будем работать именно с ним. Я буду работать в главном файле плагина, но вы можете использовать любой другой файл в зависимости от вашей задачи и реализации его подключения.
После у нас появиться метабокс при редактировании страницы Цены
Всё бы ничего можно и так работать, но всё же, давайте немного сделаем по удобнее для пользователя.
Для этого будем использовать функцию CF set_width() которая устанавливает ширину поля в процентном соотношении.
А так же для удобства воспользуемся функцией CF set_required() которая в свою очередь делает поле обязательным, а так же проверяет и выводит сообщение об ошибке.
В итоге, у нас получиться так:
Ну вот так уже на много лучше, согласны?
Теперь давайте все поля заполним и приступим к выводу на фронт.
Вот и всё, если вы делали как в примере, то у вас в итоге должны получиться файлы price.php и my-carbon-fields.php
Дело в том, что когда добавляется дополнительный мета-бокс в редактор гутенберг, то мета-бокс прижимается к низу.
Исправляется это следующим образом, добавить можно либо в код плагина, либо в файл functions.php текущей темы.
Думаю так всем будет комфортнее работать 😉
)
