Закрыто Полное руководство: Как создать виджет на форуме XenForo

[Venksu]

Полное руководство: Как создать виджет на форуме XenForo (для версии 2.2 и выше)​

Что такое виджет (Widget)?​

Виджет в XenForo — это блок контента (например, список новых тем, календарь, HTML-код, последние сообщения), который можно разместить в специальных областях вашего форума: в шапке (header), подвале (footer), сайдбаре (sidebar), на главной странице или в любом другом месте, поддерживаемом вашим стилем (темой).

---

Часть 1: Подготовка и доступ к панели виджетов​

Шаг 1: Войдите в панель администратора (ACP)

• На вашем форуме найдите ссылку "Войти" или "Авторизоваться".
• Войдите в аккаунт, который имеет права администратора.
• После входа в правом верхнем углу вы увидите ваше имя и аватар. Нажмите на него и в выпадающем меню выберите "Панель управления" (Control Panel).
  • Что вы увидите: Откроется интерфейс администратора XenForo с меню слева.

Шаг 2: Перейдите в раздел виджетов

• В левом меню найдите и нажмите на раздел "Внешний вид" (Appearance).
• В раскрывшемся подменю нажмите на пункт "Виджеты" (Widgets).
  • Что вы увидите: Откроется главная страница управления виджетами. Вы увидите список уже существующих виджетов (если они есть) и кнопку "Добавить виджет" вверху справа.

---

Часть 2: Создание нового виджета​

Шаг 3: Создайте новый виджет

• Нажмите на синюю кнопку "Добавить виджет" (Add widget)вверху справа.
  • Что вы увидите: Откроется страница с большим количеством настроек. Не пугайтесь, мы разберем основные.

Шаг 4: Настройка основных параметров виджета

1. Заголовок виджета (Widget title):
   • Введите название, которое будет отображаться в заголовке виджета (например, "Новые сообщения", "Наша статистика", "Полезные ссылки").
   • Совет: Если вы не хотите показывать заголовок, просто оставьте поле пустым.
2. Определения виджетов (Widget definitions) - САМОЕ ВАЖНОЕ ПОЛЕ:
   • Это выпадающий список с типом контента для вашего виджета.
   • Нажмите на список и выберите подходящий вариант. Например:
     • Новые сообщения (New posts) — будет показывать список последних сообщений/тем.
     • Новые темы (New threads) — покажет список последних созданных тем.
     • Разговоры в тренде (Trending content) — популярный контент.
     • HTML — самый гибкий вариант. Позволяет вставить любой HTML-код, текст, изображения, iframe (например, для интеграции ВКонтакте, Discord-виджета).
     • Статистика форума (Forum statistics) — показывает количество пользователей, сообщений, тем.
   • Выбор зависит от вашей цели. Для примера выберем "Новые сообщения".
3. Позиции виджета (Widget positions):
   • Здесь вы определяете, где на форуме будет отображаться ваш виджет.
   • Нажмите на выпадающий список "Выбрать положение" (Choose position).
   • Появится огромный список всех возможных позиций, сгруппированных по шаблонам (template). Самые популярные:
     • forum_list — позиции на главной странице форума(список разделов).
       • forum_list_sidebar — боковая колонка (сайдбар) на главной.
       • forum_list_below_nodes — под списком разделов.
     • thread_view— позиции внутри темы (ветки).
       • thread_view_sidebar — боковая колонка внутри темы.
     • sidebar — общий сайдбар (часто доступен на многих страницах).
     • footer — подвал сайта.
   • Для примера выберем forum_list_sidebar, чтобы виджет отображался в боковой колонке на главной странице.
4. Параметры отображения (Display options):
   • "Показывать виджет в выбранных положениях автоматически" (Display widget automatically in the chosen positions) — оставьте включенным. Это означает, что виджет появится автоматически во всех выбранных позициях.
   • Поля для ввода "Положения" (Position) и "Порядок" (Order) — вы можете задать точный порядок (число). Чем меньше число, тем выше будет виджет относительно других виджетов в той же позиции.

Шаг 5: Настройка выбранного типа виджета (например, "Новые сообщения")

• После выбора типа виджета, под основными настройками появятся дополнительные поля, уникальные для этого типа.
• Для "Новые сообщения" это может быть:
  • Ограничение (Limit): Сколько сообщений показывать (например, 10).
  • Максимальная длина (Max length): Сколько символов показывать в превью.
  • Фильтр по разделам (Filter by forums): Можно выбрать, из каких конкретно разделов показывать сообщения.

Шаг 6: Дополнительные настройки (опционально)

• Прокрутите страницу вниз. Вы увидите разделы:
  • "Критерии отображения" (Display criteria): Очень мощный инструмент. Здесь вы можете настроить, когда и комупоказывать виджет.
    • Например: "Показывать только зарегистрированным пользователям", "Показывать только на определенных страницах", "Показывать только на устройствах мобильных/десктопных".
  • "Параметры оформления" (Style properties): Здесь можно переопределить цвета, отступы, рамки для конкретного виджета.

Шаг 7: Сохранение

• После заполнения всех необходимых полей прокрутите страницу вниз или вверх и нажмите большую синюю кнопку "Сохранить и выйти" (Save and exit).

---

Часть 3: Проверка и управление виджетами​

Шаг 8: Проверка на форуме

• Откройте главную страницу вашего форума в новой вкладке.
• Обновите страницу.
• В выбранной вами позиции (в нашем примере — боковая колонка на главной) должен появиться ваш новый виджет с заданным заголовком и контентом.

Шаг 9: Управление созданными виджетами

• Вернитесь в раздел Внешний вид → Виджеты.
• Вы увидите список всех виджетов. Здесь вы можете:
  • Включить/Выключить виджет с помощью переключателя.
  • Редактировать его (иконка карандаша).
  • Удалить (иконка корзины).
  • Изменять порядок перетаскиванием (иконка из шести точек слева).

---

Краткий пример: Создание HTML-виджета для баннера​

1. ACP → Внешний вид → Виджеты → Добавить виджет.
2. Заголовок: "Наш партнер" (или оставить пустым).
3. Определения: Выберите HTML.
4. Позиции: Выберите, например, forum_list_sidebar.
5. В появившемся большом текстовом поле "HTML" вставьте ваш код:
   
   html
   <a href="https://ваш-сайт.ru">
   <img src="https://ваш-сайт.ru/path/to/banner.jpg" alt="Описание" style="width: 100%; max-width: 300px; border-radius: 5px;">
   </a>
   <p style="text-align: center; font-size: 12px;">Реклама нашего партнера</p>
6. Настройте критерии отображения, если нужно.
7. Нажмите "Сохранить и выйти".

Готово! Баннер появится в боковой колонке.

Если у вас старая версия XenForo (1.x) или установлены аддоны для виджетов (например, Widget Framework), процесс может отличаться. Но для стандартного XenForo 2.x это исчерпывающая инструкция.

Важно: информация взята с просторов интернета (половина от себя)