Создаем и настраиваем произвольные поля ACF

Всем привет. В последнее время, выполняя заказы по разработке сайтов на WordPress, я очень часто использую плагин Advanced Custom Fields, который позволяет создавать и выводить произвольные поля. Причем фронт работы и возможности огромные. В данном посте я произведу обзор плагина ACF и рассмотрю несколько вариантов, в которых он может пригодиться.

Создаем произвольные поля ACF

Для начала вам нужно скачать плагин с официального сайта и установить его. Как делать это думаю объяснять не нужно. После активации плагина в меню админки появится дополнительная вкладка «Произвольные поля».

Развернув данную вкладку, мы увидим 3 подменю:

• Произвольные поля – здесь мы и будем производить все основные настрйоки;
• Экспорт – здесь вы сможете экспортировать все ваши настройки и созданные поля, жаль только импортировать их в бесплатной версии вы вряд ли сможете потом;
• Аддоны – дополнительные бесплатные и платные плагины, работающие в совокупности с Advanced Custom Fields.

Итак, давайте посмотрим, что и как нужно делать. Переходим во вкладку «Произвольные поля», сверху видим кнопку «Добавить новую». Нажимаем и попадаем на новую страницу.  Здесь мы видим следующее:

1. Область, в которой задается название группы произвольных полей. Здесь все просто – пишите любое название, какое вам будет удобно.
2. Область, в которой мы и будем создавать произвольные поля. Ее мы рассмотрим подробно чуть ниже.
3. Местоположение – довольно важная область, в которой мы будем определять, где и кому будут доступны или показаны созданные нами произвольные поля. Например, мы можем задать условие, что поля будут отображаться только при добавлении новых записей и только для администраторов. Настройка довольная гибкая и позволяет выставлять практически любые условия, начиная от типов записей, таксономий и заканчивая типам пользователей. Причем условия выставляются по принципу «И» и «ИЛИ». В первом случае, поля будут видны только если все условия были выполнены, а во втором, если одно из условий совпадет.

4. Группа опций, для более тонкой настройки. Здесь задается очередность отображение. Например, если у вас будет несколько блоков с полями, то вы сможете сортировать порядок их отображение. Кроме того, сможете указать позицию расположение, до или после содержания. Грубо говоря вы указываете где будут находиться ваши поля, до визуального редактора, после него или же сбоку. Для примера, я показал, как поля будут отображаться перед редактором записей. Также мы можем выбрать стиль оформления. На скрине выше показан стиль WP metabox. Можете выбирать тот, который вам понравится. В этом же меню, вы сможете указать области, которые вы хотите скрыть там, где будут использоваться произвольные поля. Например, скрыть текстовый редактор или рубрики, чтобы не мешались.

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

С основными настройками, я думаю разобрать будет не сложно. Поэтому давайте рассмотрим принцип добавления произвольных полей на сайт. Каждый раз, добавляя поле, вам нужно будет нажимать на кнопку «Добавить поле». Раскрывается следующее меню. С множеством настроек. Давайте рассмотрим их подробнее.

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

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

Тип поля – плагин ACF позволяет создавать не только текстовые поля, но и:

• Область текста – область для большого текста, например, для описания компании или услуги;
• Номер – поле для ввода только цифр;
• E-mail – поле для указания электронной почты;
• Пароль – поле для ввода пароля;
• Редактор WYSIWYG – текстовый редактор, точно такой же, как при добавлении новых записей;
• Изображения – возможность загрузить картинку или фотографию;
• Файл – поле для загрузки файла на сайт;
• Выбрать – поле input для выбора значения из сворачиваемого списка;
• Чекбокс – чекбокс для выбора одного или нескольких значений;
• Радио-кнопка – кнопка, позволяющая выбрать только одно из доступных значений;
• Истина/ложь – позволяет задавать условие «Да» или «Нет»;
• Ссылка на страницу – выводит список страниц или записей и позволяет выбрать одну из них;
• Объект записи – позволяет выбрать один или несколько объектов из рубрики;
• Взаимоотношения – устанавливает взаимоотношения между записями сайта;
• Таксономия – позволяет выбрать таксономию, например, рубрику или тэги, либо другую, созданную пользователем, таксономию;
• Пользователь – предоставляет на выбор всех пользователей с возможностью сортировки по должности;
• Гугл карта – выводит карту от Гугла по заданным координатам, либо по названию города, улицы и т.д.;
• Выбор даты – позволяет указать дату из календаря, может использоваться, например, для указания даты проведения акции и т.д.;
• Выбор цвета – предлагает на выбор палитру;
• Вкладка – позволяет группировать ваши поля вкладкам, например, вкладка «Контакты» с полями «Имя», «Телефон», «Почта».

Инструкция по полю – здесь, для удобства, вы можете сделать небольшое описание того, как нужно пользоваться данным полем.

Обязательно – поставить условие, обязательно ли должно быть заполнено данное поле. Если выбрано «обязательно», то пока поле не будет корректно заполнено, опубликовать запись не получится.

Значение по умолчанию – вы можете указать какое значение должно быть по умолчанию, например, какой цвет будет показываться, либо что будет выводить в поле.

Текст внутри поля – выступает в качестве placeholder в поле input. Данные текст будет отображаться в поле, но исчезать, при попытке что-то ввести в поле.

Добавить в начало и добавить в конец – текст, который будет находиться перед или после поля.

Форматирование – у вас есть возможность указать, будет ли преобразовываться html теги в код или нет.

Ограничение символов – не даст пользователю ввести больше символов, чем ему разрешено.

Условная логика – работает только в совокупности с типом поля Истина/Ложь. Например, у вас на сайте пользователь с помощью произвольных полей может составить свою анкету. Ему задается вопрос, хочет ли он указать свой мобильный телефон. Если он нажимает «Да», то ему показывается поле для ввода телефона. Если он ничего не выбирает, то соответственно и поле телефона не видно. В таком случае, для вопроса, мы задаем тип Истина/Ложь, а для поля ввода телефона выбираем «Условная логика – Да», и указываем, что будет отображаться в том случае, если поле с вопросом выбрано.

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

Кому может пригодиться плагин Advanced Custom Fields

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

1. Сайт знакомств – принцип такой, пользователь регистрируется и добавляет свою анкету. В котором будут такие поля, как имя, возраст, телефон, фотография, описание и т.д. После проверки модератором, анкета попадает на сайт.
2. По точно такому же принципу можно сделать доску объявлений на WordPress. Человек регистрируется, указывает свои контакты, выкладывает несколько фотографий товара и цену, после чего товар публикуется на сайт и становится доступным для просмотра.
3. Есть и более нестандартные варианты. Например, совсем недавно я делал каталог товаров, при добавлении которых, была возможность вставки вот такого переключателей блоков на сайт.

Ну и что здесь такого, скажете вы? А то, что вручную добавлять администратору эти блоки не нужно будет.

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

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

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

Более того, мы пошли дальше, и добавили возможность добавления записей front-end через плагин Advanced Custom Fields. Что это значит? То, что, пользователю совершенно не нужно заходить в админку, а свои услуги он сможет добавлять и редактировать прямо с сайта. И это все позволяет реализовать данный плагин. Реализовали и вот что —  нужная информация (фото мастера или фото салона), берется из произвольный полей и выводится в отдельном каталоге вместе с именем мастера или названием салона. Т.е. посетитель сайта может просмотреть всех мастеров в отдельной категории. А при желании и отфильтровать их с помощью Ajax фильтра на WordPress. Фильтруются практически все параметры, полученные из этих полей. Причем довольно удобно, без перезагрузки страницы.

5. При желании, вы сможете создать каталог продукции на данном движке и с помощью произвольных полей выводить необходимые параметры товара, например, цвет, размер, страну производства и т.д. Т.е. некий упрощенный аналог мощного плагина Woocommerce, только без возможности добавления товара в корзину и оформления заказа.

Надеюсь я смог показать вам, насколько крутой плагин Advanced Custom Fields и сколько он имеет возможности для реализации. А о том, как вывести произвольные поля ACF я расскажу вам в следующем посте. Изучайте плагин, тренируйтесь, пробуйте и вы сможете сделать ваш сайт функциональным и уникальным. Главное практика.