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

Цель работы

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

Задачи

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

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

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

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

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

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

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

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

Меню WordPress

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

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

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

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

 1Главная
 2О компании
 3  ├─ История
 4  ├─ Команда
 5  └─ Вакансии
 6Услуги
 7  ├─ Веб-разработка
 8  ├─ Дизайн
 9  └─ Маркетинг
10Блог
11Контакты

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

Виджеты WordPress

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

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

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

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

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

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

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

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

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

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

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

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

1https://infinityfree.com/login/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Основное расположение (Primary Menu / Главное меню)

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Услуги
6  ├─ Веб-разработка
7  └─ Дизайн
8Блог
9Контакты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Нижнее расположение (Footer Menu / Нижнее меню)

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

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. Введите текст:

1О сайте
2
3Данный сайт создан в рамках изучения дисциплины "Системы управления 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Спасибо за ваш комментарий! Мы рады, что информация оказалась полезной.

4. Нажмите “Ответить”
5. Проверьте отображение ответа на сайте

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. Сравнительная таблица виджетов:

6. Вывод — какие навыки получены, роль навигации в пользовательском опыте (0.5-1 страница)
7. Список источников — использованные материалы (минимум 3 источника)

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

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

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

Максимальный балл: 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/

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

 1Основное меню (Primary Menu)
 2├── Главная
 3├── О компании
 4│   ├── История
 5│   ├── Команда
 6│   └── Вакансии
 7├── Услуги
 8│   ├── Веб-разработка
 9│   ├── Дизайн
10│   └── Маркетинг
11├── Блог
12│   ├── Технологии
13│   ├── Бизнес
14│   └── Обзоры
15├── Портфолио
16└── Контакты
17
18Нижнее меню (Footer Menu)
19├── Главная
20├── Карта сайта
21├── Политика конфиденциальности
22└── Контакты

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

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

Подвал (Footer) — 3 колонки