myLinks - массив ссылок (Виджет + Поле)

Виджет myLinks предназначен для создания и отображения набора/массива ссылок.

В комплекте поставляется виджет и поле.

ВИДЖЕТ

Виджет состоит из двух панелей управления:

  • Панель управления дизайном. Тут представлено два варианта отображения ссылок:
    • В виде набора ссылок:
      • Устанавливаются основные классы Bootstrap для обвертки, контейнера, строки, ссылки
      • Можно дополнительно отобразить заголовок виджета внутри контейнера
      • Можно дополнительно отобразить описание виджета внутри контейнера
      • Можно указать классы для иконок, если они будут использоваться в тексте ссылки
      • Можно указать класс для активной ссылки (если URL текущей страницы соответствует URL указанному в ссылке)
      • Можно установить фоновое изображение, оно будет применено к обвертке виджета. Соответствующий класс стиля с фоновым изображением будет добавлен в Head как <style>класс фонового изображения</style>. ВАЖНО! Для изображения используется единственный preset - ORIGINAL. Используйте заведомо оптимизированные изображения.
      • Можно указать очередность вывода информации: заголовка, описания, массива ссылок.
    • В виде DROPDOWN:
      • Можно установить классы для DROPDOWN, кнопки, выпадающего списка
      • Можно установить классы для иконки в кнопке, если используется
      • Можно установить классы для иконок в ссылках, если используются
      • Можно/нужно установить текст по умолчанию, если нет переходов ни по одной из ссылок.
      • Можно использовать иконки по типу {solid%star}
      • ВАЖНО! Этот вариант виджета очень похож вариант виджета МЕНЮ. Отличие в том, что при переходе по ссылке в кнопке будет отображен текст этой ссылки.
    • Так же есть возможность прописать свои стили. Если персональные стили будут включены, то они добавляются в Head как <style>персональные стили</style>
  • Панель управления данными:
    • Если включено отображение заголовка в контейнере виджета, то здесь будет поле для текста заголовка. Если оставить пустым, то будет выведен заголовок виджета, если заполнить, то будет отображен указанный текст.
    • Если включено отображение описания виджета, здесь можно будет HTML поле для текста.
    • По факту эти два текстовых блока можно использовать по любому предназначению. Заголовок - string/h4, Текст - html.
    • Ссылки можно добавлять удалять и сортировать
    • Каждая добавляемая ссылка состоит из трех полей:
      • Заголовок - текст ссылки, можно использовать иконки по типу {solid%star}
      • Атрибуты - здесь вручную прописываете все необходимые атрибуты, кроме class.
      • Адрес ссылки

 

ПОЛЕ

Поле myLinks - публичное, его можно использовать в контенте.

Основные настройки как и у виджета - можно указать все необходимые классы Bootstrap

HTML выводит готовый код в соответствии с указанными настройками/классами.

Если нужно использовать поле как "сквозное" и набор ссылок всегда будет одинаковым:

  1. Заполнить первый раз поле myLinks
  2. Сохранить запись
  3. Снова открыть редактирование записи
  4. Рядом с кнопкой "Добавить ссылку" появится кнопка "JSON"
  5. Нажмите на кнопку, JSON-код массива ссылок будет скопирован
  6. Вставьте результат в "Значение по умолчанию" в настройках поля.

 

ВАЖНО

  • Виджет и поле используют разметку Bootstrap
  • Конечно можно указывать собственные классы, если составили для них таблицы.
  • Виджет и поле больше подходят для верстальщиков и/или вебмастеров, т.к. нужно иметь простейшее понимание как устроена разметка Bootstrap.
  • Если есть предложения по оптимизации php или в целом структуры - пишите, постараемся реализовать.
  • В БД данные хранятся в формате JSON
  • Виджет и поле не работают с языковыми константами. Поддерживается один язык - русский, вписан прямо в код.

Пример 1.1

Самый обычный виджет по умолчанию.

Пример 1.2

Вывод в шаблоне виджета "Прозрачный №2"

Пример 1.3

Вывод в шаблоне виджета "Прозрачный №1"

Пример 1.4

Вывод в шаблоне виджета "Компактный"

Пример 1.5

Стилизованные ссылки-кнопки

Пример 1.6

Стилизованные ссылки-кнопки с иконками

Пример 2.1

Пример 2.2

Пример 2.3

Пример 2.4

Пример 3.1 DROPDOWN

Пример 3.2 DROPDOWN с иконками

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.