Куда идем?

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

В этой статье я расскажу про дополнительный плагин Advanced Custom Fields, который значительно расширяет количество доступных настраиваемых полей в Joomla.

Advanced Custom Fields – это пакет дополнительных настраиваемых полей Joomla, реализованный с помощью плагина. Он дает возможность использовать такие популярные сервисы, как видеоролики на YouTube, Facebook, Vimeo или HTML5, карты Google, кнопки скачивания и многое другое.

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

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

Отличие бесплатной версии Advanced Custom Fields от PRO

Расширение имеет бесплатную и платную (pro) версию, стоимость которой на данный момент начинается от 19 евро.

В бесплатной версии отсутствуют такие поля как:

  • Загрузчик модулей (Module Loader)
  • Загрузка файла на сервер (File Upload)
  • Пользовательский PHP-код (Custom PHP)

Также Pro версия позволяет включить параметр Publishing Assignments. Тогда на странице редактирования пользовательских полей появится новая вкладка «Назначения публикации». С ее помощью можно отфильтровать поля, отображаемые на сайте по пунктам меню, дате, устройству, URL-адресам, группам пользователей, стране и т.д.

Типы полей и их отображение на сайте

На данный момент расширение Advanced Custom Fields позволяет использовать 25 новых типов полей. Разбиение на основные, мультимедийные и дополнительные условное, просто чтобы не запутаться в большом количестве типов.

Основные поля:

  • Поле ввода Email (Emai)
  • Телефон (Phone)
  • Адрес сайта (URL)
  • Выбор времени (Time Picker)
  • Поле Да/Нет (True / False)

Мультимедийные поля:

  • Google карты (Google Map)
  • Vimeo
  • YouTube
  • Dailymotion
  • Bing Map
  • Facebook видео
  • HTML5 Audio
  • HTML5 Video
  • SoundCloud

Дополнительные поля:

  • Страна (Country)
  • Валюта  (Currency)
  • Кнопка скачивания (Download Button)
  • Загрузка файла на сервер (File Upload) (доступно в Pro версии)
  • Граватар (Gravatar)
  • Фрейм (IFrame)
  • Загрузчик модуля (Module Loader)» (доступно в Pro версии)
  • Пользовательский PHP (Custom PHP (доступно в Pro версии))
  • Индикатор выполнения (Progress Bar)
  • QR-код (QR Code)
  • Запуск чата WhatsApp (WhatsApp Click to Chat)

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

  • Заголовок
  • Тип
  • Имя
  • Название
  • Описание
  • Обязательно для заполнения
  • Значение по умолчанию

Все остальные опции, не описанные выше, будут являться уникальными. Они появятся после того, как вы выберете конкретный тип поля.

Для того, чтобы поле стало доступным для заполнения, необходимо сначала создать его в админке, в разделе нужного типа контента (например, материалов), выбрав Поля –> Создать –> Тип*.

Поле ввода Email (Email)

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

Позволяет:

  • Установить способ отображения адреса электронной почты, будь то текст или ссылка на почту
  • Указать, следует ли защищать адрес электронной почты спам-ботами с помощью сценария маскировки электронной почты Anti-Spam
Вид при создании
Вид при отображении
Вид при заполнении

Поле "Телефон (Phone)"

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

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

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Адрес сайта (URL)"

Позволяет ввести URL-адрес и текст в админке и показать его в виде ссылки на сайте.

Поле предоставляет возможность:

  • Установить текст ссылки по умолчанию
  • Выбрать способ открытия ссылки по умолчанию

В Pro версии добавляются такие возможности, как:

  • Установка пользовательского класса(ов)
  • Указание, будут ли у вашего URL такие атрибуты, как NoFollow, NoReferrer
  • Обрабатывать ли ссылку как загружаемую
  • Добавлять пользовательский код JavaScript
Вид при создании
Вид при отображении
Вид при заполнении

Поле "Выбор времени (Time Picker)"

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

Позволяет установить формат времени.

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Да/Нет (True / False)"

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

Предоставляет способ установки вариантов по умолчанию, а также текст, который будет отображаться для текста Да (True) и Нет (False).

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Google карты (Google Map)"

Позволяет ввести координаты места на карте в админке и показать интерактивную Google-карту на сайте.

Предоставляет возможность выбрать ширину, высоту и масштаб карты Google, которые будут отображаться на вашем сайте.

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Vimeo"

Позволяет ввести URL видеофайла, размещенного на сервисе Vimeo Video в админке и показать Vimeo плеер с этим видеофайлом на сайте.

Позволяет установить фиксированные размеры встроенного видео или задать свои значения по ширине и высоте видео в пикселях или в процентном соотношении.

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

Вид при создании
Вид при отображении
Вид при заполнении

Поле "YouTube"

Позволяет ввести URL-адрес видео YouTube в админке и показать видео YouTube на сайте.

Позволяет установить фиксированные размеры встроенного видео или задать свои значения по ширине и высоте видео в пикселях или в процентном соотношении.

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Facebook видео"

Позволяет ввести URL-адрес видео Facebook в админке и показать видеопроигрыватель Facebook на сайте.

Позволяет выбрать ширину видео.

Pro версия дополнительно позволяет:

  • Разрешить полноэкранный режим
  • Выбрать автоматический запуск видео
  • Include Post (?)
  • Показывать подписи
Вид при создании
Вид при отображении
Вид при заполнении

Поле "HTML5 Audio"

Позволяет в админке выбрать аудиофайл и показать аудиоплеер HTML5 на сайте.

Представлены все параметры настройки спецификации аудио HTML5: автовоспроизведение, элементы управления, повтор списка воспроизведения, отключение звука, предварительная загрузка.

Вид при создании
Вид при отображении
Вид при заполнении

Поле "HTML5 Video"

Позволяет в админке выбрать видеофайл и показать видеоплеер HTML5 на сайте.

Представлены все параметры настройки спецификации видео HTML5: ширина, высота, автовоспроизведение, элементы управления, повтор списка воспроизведения, отключение звука, предварительная загрузка.

Вид при создании
Вид при отображении
Вид при заполнении

Поле "SoundCloud"

Позволяет ввести трек SoundCloud или ID плейлиста в админке и показать плеер SoundCloud на сайте.

Позволяет выбрать ширину и высоту плеера.

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Страна (Country)"

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

Позволяет выбрать, как будет отражаться страна на сайте: название или код страны, выбрать несколько стран.

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Валюта (Currency)"

Позволяет выбрать валюту из списка в админке и показать код валюты на сайте

Нет

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Кнопка скачивания (Download Button)"

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

Позволяет установить:

  • Каталог для поиска файлов
  • Файлы, которые будут включены в каталог
  • Файлы, которые будут исключены из каталога
  • Текст кнопки
  • CSS-класс кнопки
Вид при создании
Вид при отображении
Вид при заполнении

Поле "Граватар (Gravatar)"

Позволяет ввести адрес электронной почты и показать уникальный аватар с сервиса Gravatar.

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

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Фрейм (IFrame)"

Позволяет ввести URL-адрес в админке и отобразить его во фрейме на сайте..

Позволяет установить высоту фрейма, полосу прокрутки, атрибуты HTML и способ загрузки фрейма.

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Индикатор процента выполнения (Progress Bar)"

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

Позволяет отображать индикатор заполнения, просто заполнив процент. Также можно настроить различные параметры, такие как:

  • Высота индикатора выполнения
  • Цвет панели
  • Будет ли индикатор иметь полосы
  • Будет ли индикатор анимирован
  • Будет ли индикатор иметь закругленные углы и тени
  • Выравнивание текста процента выполнения
Вид при создании
Вид при отображении
Вид при заполнении

Поле "QR код (QR Code)"

Позволяет сгенерировать цветной QR-код для хранения текста, ссылки, адреса электронной почты, номера телефона и многого другого.

Позволяет установить размер изображения QR-кода, основной цвет и цвет фона QR-кода.

Вид при создании
Вид при отображении
Вид при заполнении

Поле "Запуск чата WhatsApp (WhatsApp Click to Chat)"

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

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

Вид при создании
Вид при отображении
Вид при заполнении

Расширение получилось годным. Для разработчиков новые типы полей могут стать хорошим подспорьем в создании качественного сайта, например такого, какие делают ребята из https://totonis.com/. Теперь вы можете легко добавлять к материалам карту, мультимедийный проигрыватель, файлы для скачивания, QR-код на статью, ссылку на чат WhatsApp и многое другое.

Если вы хотите еще лучше разобраться в настраиваемых полях и способах их кастомизации и использования, советую также почитать статьи:

Об авторе
Wedal
(Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.
Добавить комментарий

Комментарии  
1
Cпасибо за отличную статью. Joomla постепенно превращается в CCK, в том числе
0
Здравствуйте. Поправьте: в "Поле "Кнопка скачивания (Download Button)"" во вкладке "Вид при заполнение" немного не тот скрин.
0
Сергей, спасибо, поправил.
0
Сколько раз Вы будете апать одну и ту же статью???
0
Что значит "апать"? В заголовке указана дата последнего изменения. Последнее изменение было по комментарию Сергея (см. выше).
1
Полезная статья.
Не подскажите, новое доп. поле может ли быть для пользователя только на чтение, а для админа зап/чтение.
Цель - передача админом информации для пользователя в его профиле.
1
Да, может. Вы можете выводить поля не стандартным способом, а сами, в нужных макетах. Для этого нужно отключить стандартное отображение в настройках при создании поля. В далее следовать инструкциям по выводу полей в переопределенном макете:
https://docs.joomla.org/J3.x:Adding_custom_fields/Overrides
0
Если добавить поле Фото или лучше Галлерею фото или слайдер.
То это будет бомба и можно использовать как компонент Портфолио;
Я готов буду купить :)

но пока и на этом спасибо. Может пригодится...
0
Иван, так поле фото и повторяемое поле с возможностью добавления фото уже есть в стандартном наборе полей Joomla.
0
Набрёл через поиск на ваш сайт.

Есть бесплатный аналог — radical multifield. Обладает теми же способностями что и платный ACF. Из минусов - не поддерживает J4.
2
Даниил, да, знаю, хорошее расширение. Я бы не сказал, что оно повторяет прямо все способности ACF, но многие - да.

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

У меня был реальный кейс, когда заказчик, на сайте которого использовался Radical multifield, попросил обновления на Joomla 4. Все бы ничего, но Radical multifield не поддерживал на тот момент Joomla 4 от слова "совсем", а у заказчика через него были реализованы десятки или даже сотни галерей изображений в разных статьях. В итоге пришлось долго и мучительно переделывать все эти галереи на стандартное поле Joomla 4. Да, оно совсем не такое удобное и каждое изображение приходится выбирать отдельно, но здесь, сделав работу один раз, мы можем быть более-менее уверены, что ее не придется переделывать полностью в будущем.

Это относится не только к Radical multifield, но и к ACF, так что будьте осторожнее с ними и хорошо продумайте момент, описанный выше, прежде чем глубоко интегрировать на свой сайт.