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

В 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 # Tatjana 24.09.2019 20:00
Cпасибо за отличную статью. Joomla постепенно превращается в CCK, в том числе
Ответить | Ответить с цитатой | Цитировать
0 # Сергей С. 01.02.2020 15:35
Здравствуйте. Поправьте: в "Поле "Кнопка скачивания (Download Button)"" во вкладке "Вид при заполнение" немного не тот скрин.
Ответить | Ответить с цитатой | Цитировать
+2 # Wedal 04.02.2020 08:43
Сергей, спасибо, поправил.
Ответить | Ответить с цитатой | Цитировать
+1 # Guest 04.02.2020 19:35
Сколько раз Вы будете апать одну и ту же статью???
Ответить | Ответить с цитатой | Цитировать
-3 # Wedal 06.02.2020 11:43
Что значит "апать"? В заголовке указана дата последнего изменения. Последнее изменение было по комментарию Сергея (см. выше).
Ответить | Ответить с цитатой | Цитировать
-1 # Гость 08.09.2020 16:38
Полезная статья.
Не подскажите, новое доп. поле может ли быть для пользователя только на чтение, а для админа зап/чтение.
Цель - передача админом информации для пользователя в его профиле.
Ответить | Ответить с цитатой | Цитировать
+3 # Wedal 09.09.2020 08:03
Да, может. Вы можете выводить поля не стандартным способом, а сами, в нужных макетах. Для этого нужно отключить стандартное отображение в настройках при создании поля. В далее следовать инструкциям по выводу полей в переопределенном макете:
https://docs.joomla.org/J3.x:Adding_custom_fields/Overrides
Ответить | Ответить с цитатой | Цитировать
-4 # Иван 15.09.2021 10:35
Если добавить поле Фото или лучше Галлерею фото или слайдер.
То это будет бомба и можно использовать как компонент Портфолио;
Я готов буду купить :)

но пока и на этом спасибо. Может пригодится...
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 17.09.2021 06:38
Иван, так поле фото и повторяемое поле с возможностью добавления фото уже есть в стандартном наборе полей Joomla.
Ответить | Ответить с цитатой | Цитировать
0 # Даниил 17.12.2022 02:05
Набрёл через поиск на ваш сайт.

Есть бесплатный аналог — radical multifield. Обладает теми же способностями что и платный ACF. Из минусов - не поддерживает J4.
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 19.12.2022 08:15
Даниил, да, знаю, хорошее расширение. Я бы не сказал, что оно повторяет прямо все способности ACF, но многие - да.

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

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

Это относится не только к Radical multifield, но и к ACF, так что будьте осторожнее с ними и хорошо продумайте момент, описанный выше, прежде чем глубоко интегрировать на свой сайт.
Ответить | Ответить с цитатой | Цитировать
0 # Витвлий 01.03.2023 12:13
А что может быть (и родные поля Джумлы и Advanced Custom Fields) выводятся не активными? Нет возможности заполнить поле.
Ответить | Ответить с цитатой | Цитировать
-1 # Wedal 02.03.2023 06:22
Виталий, выводятся где и под каким пользователем?
Ответить | Ответить с цитатой | Цитировать
+1 # Виталий 02.03.2023 08:01
добавлю поля (при регистрации). К полям, которые идут по умолчанию (имя, логин, мейл, пароль) добавляю свои - и текстовые и с выпадающим списком - все они добавляются, но затемненные, не активные.
Под каким пользователем, Вообще не понял вопрос. В админке, под правами админа конечно. На сайте поля не активны для всех (в форме регистрации)
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 03.03.2023 08:35
Виталий, а после создания пользователя они не становятся активными? Также такое может быть, если в настройках полей выбрана опция только для чтения. Это, конечно, вряд ли, но можете проверить.
Ответить | Ответить с цитатой | Цитировать
+1 # Виталий 03.03.2023 10:42
я обалдел)
Нашел причину. В правах доступа по умолчанию все запрещено было (редактирование поля)
Поставил "разрешено" и все гуд.
Спасибо
Ответить | Ответить с цитатой | Цитировать