Лаб. работа “Управление навигацией и виджетами”

Системы управления веб-контентом
Практика
Автор

Бизюк Андрей

Дата публикации

13 апреля 2026 г.

Цель работы

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

Задачи

  • Создать и настроить меню навигации (основное, нижнее)
  • Добавить в меню страницы, записи, рубрики и произвольные ссылки
  • Настроить вложенное (выпадающее) меню
  • Работа с виджетами: размещение в сайдбаре и футере
  • Управление комментариями: модерация, настройки

Ключевые навыки

  • Создание и настройка меню навигации
  • Управление вложенными пунктами меню
  • Работа с виджетами и блоками
  • Модерация комментариев

Теоретическая часть

Навигация сайта

Навигация — система элементов, позволяющая пользователям перемещаться по сайту. Качественная навигация:

  • Позволяет найти любую страницу за 2-3 клика
  • Показывает текущее местоположение пользователя
  • Адаптивна для мобильных устройств
  • Интуитивно понятна

Типы навигации в WordPress:

Тип Описание Расположение
Основное меню Главная навигация сайта Шапка (header)
Нижнее меню Дополнительная навигация Подвал (footer)
Боковое меню Дополнительная навигация Сайдбар
Хлебные крошки Путь от главной к текущей странице Над заголовком страницы

Меню WordPress

Внешний вид → Меню — раздел для создания и управления навигационными меню.

Элементы меню:

Тип элемента Описание
Страницы Ссылки на статические страницы сайта
Записи Ссылки на отдельные записи блога
Рубрики Ссылки на архивы рубрик
Произвольные ссылки Любые внешние или внутренние ссылки

Вложенные меню (dropdown/submenu):

Пункты меню можно делать вложенными, перетаскивая их вправо:

Главная
О компании
  ├─ История
  ├─ Команда
  └─ Вакансии
Услуги
  ├─ Веб-разработка
  ├─ Дизайн
  └─ Маркетинг
Блог
Контакты

Настройки пунктов меню:

Настройка Описание
Название навигации Текст, отображаемый в меню
CSS-классы Пользовательские классы для стилизации
Ссылка (URL) Адрес перехода
Атрибут Title Всплывающая подсказка
Цель ссылки Открытие в текущем/новом окне
Описание Описание пункта (не все темы отображают)

Виджеты WordPress

Виджеты — самостоятельные блоки контента с определённым функционалом, которые можно размещать в специально отведённых областях (widget areas).

Расположения виджетов (зависят от темы):

Область Описание
Сайдбар (боковая панель) Блок сбоку от основного контента
Подвал (footer) Нижняя часть сайта
Шапка (header) Верхняя часть сайта
Перед контентом Над основным содержимым
После контента Под основным содержимым

Стандартные виджеты WordPress:

Виджет Описание
Архивы Список архивов по месяцам
Календарь Календарь публикаций
Рубрики Список рубрик с количеством записей
Мета Ссылки: вход, RSS, WordPress.org
Последние записи Список свежих публикаций
Последние комментарии Список свежих комментариев
Страницы Список статических страниц
Поиск Форма поиска
Теги (Облако меток) Облако меток сайта
Текст Произвольный текст или HTML

Блоки vs Виджеты:

Начиная с WordPress 5.8, управление виджетами осуществляется через редактор блоков (Блоки → Виджеты). Это позволяет использовать любые блоки Gutenberg в областях виджетов.

Модерация комментариев

Комментарии — инструмент взаимодействия с аудиторией. WordPress предоставляет инструменты для управления:

  • Ожидающие — комментарии, требующие одобрения
  • Одобренные — опубликованные комментарии
  • Спам — автоматическая фильтрация спама (Akismet)
  • Корзина — удалённые комментарии

Действия с комментариями:

Действие Описание
Одобрить Опубликовать комментарий
Отклонить (спам) Отправить в спам
Переместить в корзину Удалить комментарий
Изменить Редактировать текст комментария
Ответить Добавить ответ администратора

Практическая часть

Шаг 1. Подключение к сайту WordPress на InfinityFree

1.1. Войдите в личный кабинет InfinityFree:

https://infinityfree.com/login/

1.2. Перейдите в панель управления vPanel:

На странице аккаунта нажмите кнопку “Login to vPanel” или перейдите по ссылке vPanel URL из учётных данных, полученных при выполнении лабораторной работы №2.

1.3. Откройте административную панель WordPress:

https://ВАШ-ПОДДОМЕН.epizy.com/wp-admin

Войдите под учётной записью администратора (логин и пароль заданы при установке WordPress в ЛР №2).

Шаг 2. Создание основного меню

2.1. Перейдите в раздел меню:

Внешний вид → Меню

2.2. Создайте новое меню:

  1. Введите название меню: Основное меню
  2. Нажмите кнопку “Создать меню”

2.3. Добавьте страницы в меню:

В разделе “Добавить пункты меню” выберите страницы:

Пункт меню Тип URL
Главная Страница /
О компании Страница /glavnaya/o-kompanii/
Услуги Страница /glavnaya/uslugi/
Блог Произвольная ссылка /
Контакты Страница /glavnaya/kontakty/

Для добавления произвольной ссылки “Блог”:

  1. Раскройте блок “Произвольные ссылки”
  2. В поле “URL” введите: / (главная страница, т.к. записи отображаются на ней)
  3. В поле “Текст ссылки” введите: Блог
  4. Нажмите “Добавить в меню”

2.4. Настройте порядок пунктов:

Перетащите пункты в следующем порядке:

  1. Главная
  2. О компании
  3. Услуги
  4. Блог
  5. Контакты

2.5. Установите отображение в качестве основного меню:

В разделе “Настройки меню” установите галочку:

2.6. Сохраните меню, нажав “Сохранить меню”

Шаг 3. Создание вложенного меню

3.1. Добавьте дочерние пункты для “О компании”:

В разделе “Добавить пункты меню” выберите страницы:

Пункт меню Родительский пункт
Веб-разработка Услуги

Если дочерней страницы нет, добавьте произвольные ссылки:

Для “История” (дочерняя от “О компании”):

  1. Раскройте “Произвольные ссылки”
  2. URL: #
  3. Текст ссылки: История
  4. Нажмите “Добавить в меню”

Для “Команда” (дочерняя от “О компании”):

  1. URL: #
  2. Текст ссылки: Команда
  3. Нажмите “Добавить в меню”

Для “Веб-разработка” (дочерняя от “Услуги”):

  1. URL: /glavnaya/uslugi/web-razrabotka/
  2. Текст ссылки: Веб-разработка
  3. Нажмите “Добавить в меню”

Для “Дизайн” (дочерняя от “Услуги”):

  1. URL: #
  2. Текст ссылки: Дизайн
  3. Нажмите “Добавить в меню”

3.2. Создайте иерархию:

Перетащите пункты вправо, чтобы сделать их вложенными:

Главная
О компании
  ├─ История
  └─ Команда
Услуги
  ├─ Веб-разработка
  └─ Дизайн
Блог
Контакты

Способ перетаскивания:

  1. Наведите на пункт меню “История”
  2. Зажмите левую кнопку мыши
  3. Переместите пункт правее и под “О компании”
  4. Отпустите — пункт должен сдвинуться вправо
  5. Повторите для остальных пунктов

3.3. Сохраните меню

3.4. Проверьте отображение на сайте:

Перейдите на сайт и убедитесь:

  • Основное меню отображается в шапке сайта
  • При наведении на “О компании” появляется выпадающее подменю
  • При наведении на “Услуги” появляется выпадающее подменю

Шаг 4. Создание нижнего меню

4.1. Перейдите:

Внешний вид → Меню

4.2. Создайте новое меню:

  1. Нажмите “создать новое меню” (ссылка сверху)
  2. Введите название: Нижнее меню
  3. Нажмите “Создать меню”

4.3. Добавьте пункты:

Пункт меню Тип URL
Главная Страница /
О компании Страница /glavnaya/o-kompanii/
Контакты Страница /glavnaya/kontakty/
Политика конфиденциальности Произвольная ссылка #
Карта сайта Произвольная ссылка /wp-sitemap.xml

4.4. Установите отображение:

В разделе “Настройки меню” установите галочку:

Примечание: Наличие нижнего расположения зависит от темы. Если в списке нет “Нижнего расположения”, пропустите этот шаг.

4.5. Сохраните меню

Шаг 5. Работа с виджетами

5.1. Перейдите в редактор виджетов:

Внешний вид → Виджеты

Или:

Блоки → Виджеты (в новых версиях WordPress)

5.2. Изучите доступные области виджетов:

Слева в списке отображаются области, доступные в вашей теме. Обычно это:

  • Боковая панель (Sidebar)
  • Подвал (Footer) — может быть разделён на несколько колонок
  • Шапка (Header)

5.3. Настройте боковую панель (Sidebar):

Выберите область “Боковая панель” и добавьте следующие блоки:

Блок 1: Поиск

  1. Нажмите кнопку “+” внутри области виджетов
  2. Найдите и добавьте блок “Поиск”
  3. Сохраните

Блок 2: Рубрики

  1. Добавьте блок “Рубрики”
  2. Настройки:
    • Отображать в виде выпадающего списка: [ ]
    • Показывать количество записей: [X]
    • Показывать иерархию: [X]
  3. Заголовок: “Рубрики”

Блок 3: Последние записи

  1. Добавьте блок “Последние записи”
  2. Настройки:
    • Количество записей: 3
    • Отображать дату публикации: [X]
    • Отображать изображение записи: [X]
  3. Заголовок: “Свежие статьи”

Блок 4: Облако меток

  1. Добавьте блок “Облако меток” (или “Теги”)
  2. Заголовок: “Теги”

Блок 5: Текст (произвольный)

  1. Добавьте блок “Текст” (или “Параграф”)
  2. Введите текст:
О сайте

Данный сайт создан в рамках изучения дисциплины "Системы управления web-контентом". Здесь публикуются материалы по работе с CMS WordPress.

5.4. Настройте нижнюю область (Footer):

Если тема поддерживает виджеты в подвале, добавьте в соответствующие области:

Колонка 1:

  • Блок “Текст” с названием сайта и кратким описанием

Колонка 2:

  • Блок “Рубрики” — список рубрик

Колонка 3:

  • Блок “Последние записи” — 3 последние записи

5.5. Сохраните изменения

Шаг 6. Модерация комментариев

6.1. Перейдите в раздел комментариев:

Комментарии

6.2. Изучите список комментариев:

Убедитесь, что в списке есть хотя бы один комментарий (созданный в ЛР №3). Если нет, создайте тестовый комментарий.

6.3. Одобрите комментарий:

  1. Наведите курсор на комментарий в списке
  2. Нажмите “Одобрить”
  3. Убедитесь, что комментарий появился на сайте под соответствующей записью

6.4. Отправьте комментарий в спам:

Если есть подозрительные комментарии:

  1. Наведите курсор на комментарий
  2. Нажмите “Спам”
  3. Проверьте, что комментарий перемещён в раздел “Спам”

6.5. Ответьте на комментарий:

  1. Наведите курсор на одобренный комментарий
  2. Нажмите “Ответить”
  3. Введите текст ответа:
Спасибо за ваш комментарий! Мы рады, что информация оказалась полезной.
  1. Нажмите “Ответить”
  2. Проверьте отображение ответа на сайте

6.6. Измените комментарий:

  1. Наведите курсор на комментарий
  2. Нажмите “Изменить”
  3. Отредактируйте текст комментария (например, исправьте опечатку)
  4. Нажмите “Обновить”

Шаг 7. Проверка навигации и виджетов на сайте

7.1. Проверьте основное меню:

  • Все пункты меню отображаются в шапке
  • Ссылки ведут на правильные страницы
  • Вложенные пункты появляются при наведении (или клике на мобильных)
  • Текущая страница подсвечивается в меню

7.2. Проверьте нижнее меню:

  • Меню отображается в подвале сайта
  • Все ссылки работают

7.3. Проверьте боковую панель:

  • Виджет поиска отображается и работает
  • Рубрики отображаются с количеством записей
  • Последние записи показываются корректно
  • Облако меток отображается

7.4. Проверьте комментарии:

  • Одобренные комментарии отображаются под записями
  • Ответ администратора виден
  • Форма добавления комментария работает

Дополнительные задания

Задание 1. Добавление рубрик в меню

Добавьте в основное меню рубрику “Технологии” как отдельный пункт. Для этого:

  1. В редакторе меню раскройте “Рубрики”
  2. Выберите рубрику “Технологии”
  3. Добавьте в меню
  4. Добавьте дочерние рубрики “Веб-разработка” и “Маркетинг” как вложенные пункты

Задание 2. Кастомизация CSS-классов пунктов меню

  1. В разделе “Настройки экрана” (верхний правый угол) включите “CSS-классы”
  2. Откройте любой пункт меню для редактирования
  3. В поле “CSS-классы” введите: highlight
  4. Сохраните меню
  5. Добавьте стили через Дополнительные стили в Кастомайзере

Задание 3. Создание меню для мобильных устройств

  1. Проверьте, как меню отображается на мобильном устройстве (сузьте окно браузера)
  2. Если тема поддерживает мобильное меню, настройте его отдельно
  3. Убедитесь, что вложенное меню доступно на мобильных устройствах

Задание 4. Удаление виджета “Приветствие”

  1. Перейдите в редактор виджетов
  2. Найдите и удалите стандартный виджет “Приветствие” (если он есть)
  3. Проверьте, что сайдбар стал компактнее

Требования к отчёту

Отчёт должен содержать:

  1. Титульный лист с названием работы, ФИО студента, группы, датой
  2. Введение — цель и задачи работы (0.5 страницы)
  3. Теоретическая часть — описание навигации, меню и виджетов WordPress (1-2 страницы)
  4. Практическая часть — описание выполнения каждого шага:
    • Схема основного меню (иерархия пунктов)
    • Скриншоты создания меню в админ-панели
    • Скриншоты вложенного (выпадающего) меню на сайте
    • Список виджетов в сайдбаре
    • Скриншоты виджетов на сайте
    • Скриншоты модерации комментариев
  5. Сравнительная таблица виджетов:
Виджет Область Назначение
… … …
  1. Вывод — какие навыки получены, роль навигации в пользовательском опыте (0.5-1 страница)
  2. Список источников — использованные материалы (минимум 3 источника)

Объём отчёта: 6-10 страниц

Формат: PDF или DOCX

Критерии оценки

Критерий Баллы Описание
Основное меню 20 Создано основное меню с правильными пунктами
Вложенное меню 20 Настроено выпадающее подменю
Нижнее меню 10 Создано нижнее меню (если тема поддерживает)
Виджеты сайдбара 20 Добавлены и настроены виджеты в боковой панели
Модерация комментариев 15 Комментарии одобрены, отредактированы, на которые даны ответы
Отчёт 15 Структурированный отчёт со скриншотами

Максимальный балл: 100

Шкала оценок:

  • 90-100: отлично
  • 75-89: хорошо
  • 60-74: удовлетворительно
  • менее 60: неудовлетворительно

Бонус за дополнительные задания: до +20 баллов

Контрольные вопросы для защиты

  1. Для чего нужно меню навигации на сайте?
  2. Какие типы элементов можно добавить в меню WordPress?
  3. Как создать вложенное (выпадающее) меню?
  4. Что такое виджеты и где они размещаются?
  5. Какие стандартные виджеты доступны в WordPress?
  6. Чем отличаются виджеты от блоков Gutenberg?
  7. Как изменить порядок пунктов в меню?
  8. Что такое CSS-классы пунктов меню и зачем они нужны?
  9. Какие действия можно выполнять с комментариями в WordPress?
  10. Как включить/отключить комментарии для отдельных записей и страниц?

Возможные проблемы и решения

Проблема: Меню не отображается на сайте

Решение:

  • Убедитесь, что меню назначено на расположение (Основное меню)
  • Проверьте, что тема поддерживает меню в данном расположении
  • Перейдите: Внешний вид → Настроить → Меню и проверьте назначение
  • Очистите кэш браузера

Проблема: Вложенное меню не работает

Решение:

  • Убедитесь, что пункты сдвинуты вправо относительно родительского (отступ в интерфейсе)
  • Проверьте, что тема поддерживает выпадающие меню
  • На мобильных устройствах вложенное меню может отображаться как аккордеон

Проблема: Виджеты не отображаются на сайте

Решение:

  • Убедитесь, что тема имеет области для виджетов
  • Проверьте, что виджеты добавлены в правильную область
  • Некоторые страницы (например, страницы с полной шириной) могут не отображать сайдбар

Проблема: Не могу добавить виджет “Рубрики” или “Последние записи”

Решение:

  • В новых версиях WordPress виджеты управляются через редактор блоков
  • Перейдите: Внешний вид → Виджеты (или Блоки → Виджеты)
  • Используйте кнопку “+” для добавления блоков-виджетов

Проблема: Нижнее расположение меню отсутствует

Решение:

  • Это зависит от темы — не все темы поддерживают нижнее меню
  • Проверьте: Внешний вид → Меню → Настройки меню → Расположения
  • Если расположения нет, добавьте виджет “Навигация” в область виджетов подвала

Рекомендуемые источники

Официальная документация

  • WordPress Menus: https://wordpress.org/support/article/menus-screen/
  • WordPress Widgets: https://wordpress.org/support/article/widgets-screen/
  • WordPress Comments: https://wordpress.org/support/article/comments-screen/

Учебные материалы

  • WordPress.org Learn: https://learn.wordpress.org/
  • WPBeginner — Navigation Menus: https://www.wpbeginner.com/wp-tutorials/how-to-add-navigation-menu-in-wordpress-beginners-guide/

Видеоуроки

  • WordPress Academy: https://www.youtube.com/@WordPressAcademy
  • WP101: https://www.wp101.com/

Приложение А. Пример полной структуры навигации

Основное меню (Primary Menu)
├── Главная
├── О компании
│   ├── История
│   ├── Команда
│   └── Вакансии
├── Услуги
│   ├── Веб-разработка
│   ├── Дизайн
│   └── Маркетинг
├── Блог
│   ├── Технологии
│   ├── Бизнес
│   └── Обзоры
├── Портфолио
└── Контакты

Нижнее меню (Footer Menu)
├── Главная
├── Карта сайта
├── Политика конфиденциальности
└── Контакты

Приложение Б. Пример настройки виджетов для бизнес-сайта

Боковая панель (Sidebar)

Порядок Виджет Настройки
1 Поиск Стандартный
2 О компании Текст с кратким описанием и логотипом
3 Рубрики Иерархия, с количеством записей
4 Последние записи 3 записи, с миниатюрами
5 Облако меток Стандартное
Наверх