Лаб. работа "Создание статических страниц и структуры сайта"

Цель работы

Научиться создавать и структурировать основной контент сайта, работая с визуальным редактором WordPress и настраивая иерархию страниц.

Задачи

• Создать 3-4 статические страницы: “Главная”, “О компании”, “Услуги”, “Контакты”
• Заполнить страницы текстовым контентом, используя заголовки, списки, цитаты в блочном редакторе
• Настроить иерархию страниц (сделать одну из страниц дочерней для другой)
• Использовать различные блоки Gutenberg для форматирования контента

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

• Работа с редактором контента
• Создание и редактирование страниц
• Иерархическая структура страниц
• Использование блокового редактора Gutenberg
• Форматирование контента

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

Записи (Posts) vs Страницы (Pages)

WordPress использует два основных типа контента:

Записи (Posts)

Характеристики:

• Динамический контент с временными метками (дата, время)
• Включены в ленту записей (RSS)
• Используют таксономии (рубрики, метки)
• Отображаются в архивах по датам
• Предназначены для блога, новостей, статей

Когда использовать:

• Новости и статьи блога
• Обновления компании
• Пресс-релизы
• Обзоры продуктов
• Рецепты, инструкции
• Мероприятия

Страницы (Pages)

Характеристики:

• Статический контент без временных меток
• Не включены в ленту записей
• Имеют иерархическую структуру
• Не используют рубрики и метки
• Могут использовать кастомные шаблоны
• Имеют параметр порядка отображения

Когда использовать:

• Главная страница
• О компании
• Контакты
• Услуги
• Политика конфиденциальности
• Правила использования
• Карта сайта

Визуальный редактор Gutenberg

Gutenberg (Block Editor) — это блочный редактор, представленный в WordPress 5.0:

Основные принципы:

• Контент строится из отдельных блоков
• Каждый блок имеет свои настройки
• Блоки можно перемещать, копировать, удалять
• Поддержка drag-and-drop
• Визуальное предпросмотрение

Типы блоков:

Текстовые:

• Абзац (Paragraph)
• Заголовок (Heading) — H1-H6
• Список (List) — маркированный, нумерованный
• Цитата (Quote)
• Код (Code)
• Преформатированный текст

Медиа:

• Изображение (Image)
• Галерея (Gallery)
• Видео (Video)
• Аудио (Audio)
• Обложка (Cover)
• Файл (File)

Дизайн:

• Кнопка (Button)
• Столбцы (Columns)
• Разделитель (Separator)
• Spacer (пространство)
• Группа (Group)

Виджеты:

• Последние записи
• Последние комментарии
• Архивы
• Категории
• Календарь

Иерархия страниц

Страницы могут иметь родительские и дочерние страницы:

1Главная (родительская)
2  ├─ О компании (дочерняя от Главной)
3  ├─ Услуги (дочерняя от Главной)
4  │   ├─ Веб-разработка (дочерняя от Услуги)
5  │   ├─ Дизайн (дочерняя от Услуги)
6  │   └─ Маркетинг (дочерняя от Услуги)
7  └─ Контакты (дочерняя от Главной)

URL иерархических страниц:

• Главная: http://site.com/glavnaya/
• Услуги: http://site.com/uslugi/
• Веб-разработка: http://site.com/uslugi/web-razrabotka/

Преимущества иерархии:

• Логическая организация контента
• Удобная навигация
• SEO-оптимизированная структура URL
• Понятная структура сайта для пользователей

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

Шаг 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. Заполните основные поля:

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

Используйте блочный редактор для добавления контента:

Блок 1: Заголовок H1

1. Нажмите кнопку “+” или введите “/” в новой строке
2. Выберите “Заголовок”
3. В текст заголовка введите: “Добро пожаловать на наш сайт”

Блок 2: Абзац

1. Добавьте новый блок “Абзац”
2. Введите текст:

1Мы — команда профессионалов, специализирующихся на создании современных веб-ресурсов. Наша цель — помочь вашему бизнесу развиваться в цифровом пространстве.

Блок 3: Список

1. Добавьте блок “Список”
2. Введите элементы списка:

1* Разработка сайтов любой сложности
2* Дизайн и брендинг
3* Маркетинг и продвижение
4* Техническая поддержка

Блок 4: Цитата

1. Добавьте блок “Цитата”
2. Введите текст цитаты:

1Качество — это не действие, это привычка.

3. В поле “Автор цитаты” введите: Аристотель

Блок 5: Кнопка

1. Добавьте блок “Кнопка”
2. В текст кнопки введите: “Связаться с нами”
3. В настройках блока добавьте ссылку на страницу Контакты (или оставьте пустым)

2.4. Опубликуйте страницу:

Нажмите кнопку “Опубликовать” в правом верхнем углу.

Шаг 3. Создание страницы “О компании”

3.1. Создайте новую страницу:

Страницы → Добавить новую

3.2. Заполните поля:

3.3. Добавьте контент:

Блок 1: Заголовок H2 — “О нас”

1## О нас

Блок 2: Абзац

1Компания была основана в 2020 году группой энтузиастов, увлечённых веб-технологиями. За это время мы реализовали более 100 проектов для клиентов из различных сфер бизнеса.

Блок 3: Заголовок H2 — “Наша миссия”

1## Наша миссия

Блок 4: Цитата

1Создавать цифровые продукты, которые решают реальные задачи бизнеса и приносят пользу пользователям.

Блок 5: Заголовок H2 — “Наши ценности”

1## Наши ценности

Блок 6: Список (нумерованный)

11. Качество — мы не идём на компромиссы в качестве работы
22. Надёжность — наши клиенты могут на нас рассчитывать
33. Инновации — мы следим за трендами и используем современные технологии
44. Честность — прозрачное ценообразование и открытость в отношениях

3.4. Опубликуйте страницу.

Шаг 4. Создание страницы “Услуги”

4.1. Создайте новую страницу:

Страницы → Добавить новую

4.2. Заполните поля:

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

Блок 1: Заголовок H2 — “Наши услуги”

1## Наши услуги

Блок 2: Абзац

1Мы предлагаем широкий спектр услуг по разработке и продвижению веб-ресурсов. Выберите то, что нужно вашему бизнесу.

Блок 3: Столбцы

1. Добавьте блок “Столбцы”
2. В настройках выберите 3 столбца
3. В первый столбец добавьте заголовок H3 и текст:

1### Веб-разработка
2Создание сайтов любой сложности: от простых лендингов до крупных интернет-магазинов и порталов.

4. Во второй столбец добавьте заголовок H3 и текст:

1### Дизайн и брендинг
2Разработка уникального дизайна, логотипов и фирменного стиля для вашего бренда.

5. В третий столбец добавьте заголовок H3 и текст:

1### Маркетинг и продвижение
2SEO-оптимизация, контекстная реклама, настройка аналитики и рост конверсии.

Блок 4: Разделитель

Добавьте блок “Разделитель” для визуального отделения контента.

Блок 5: Заголовок H2 — “Почему мы?”

1## Почему выбирают нас?

Блок 6: Абзац

1Мы работаем с 2020 года и имеем богатый опыт в различных сферах бизнеса. Наши клиенты остаются довольными результатами и возвращаются за новыми проектами.

4.4. Опубликуйте страницу.

Шаг 5. Создание страницы “Контакты”

5.1. Создайте новую страницу:

Страницы → Добавить новую

5.2. Заполните поля:

5.3. Добавьте контент:

Блок 1: Заголовок H2 — “Свяжитесь с нами”

1## Свяжитесь с нами

Блок 2: Абзац

1Мы будем рады ответить на ваши вопросы и обсудить возможное сотрудничество. Выберите удобный способ связи.

Блок 3: Столбцы

1. Добавьте блок “Столбцы”
2. В настройках выберите 2 столбца

Первый столбец:

1### Контакты
2
3**Адрес:** г. Минск, ул. Примерная, 123
4**Телефон:** +375 (29) 123-45-67
5**Email:** info@example.com
6**Режим работы:** Пн-Пт: 9:00-18:00

Второй столбец:

1### Социальные сети
2
3* [Facebook](https://facebook.com)
4* [Instagram](https://instagram.com)
5* [LinkedIn](https://linkedin.com)
6* [Telegram](https://telegram.org)

Блок 4: Карта (опционально)

Если у вас есть код карты Google Maps:

1. Добавьте блок “HTML”
2. Вставьте код iframe карты

5.4. Опубликуйте страницу.

Шаг 6. Настройка иерархии страниц

6.1. Откройте список всех страниц:

Страницы → Все страницы

6.2. Сделайте страницу “О компании” дочерней от “Главная”:

1. Наведите курсор на страницу “О компании”
2. Нажмите “Быстрое редактирование”
3. В поле “Родительская страница” выберите “Главная”
4. Нажмите кнопку “Обновить”

Теперь URL страницы “О компании” изменится на:

1http://site.com/glavnaya/o-kompanii/

6.3. Сделайте страницу “Услуги” дочерней от “Главная”:

1. Наведите курсор на страницу “Услуги”
2. Нажмите “Быстрое редактирование”
3. В поле “Родительская страница” выберите “Главная”
4. Нажмите кнопку “Обновить”

URL станет:

1http://site.com/glavnaya/uslugi/

6.4. Сделайте страницу “Контакты” дочерней от “Главная”:

Аналогично предыдущим шагам.

Шаг 7. Создание дочерней страницы для “Услуги”

7.1. Создайте новую страницу:

Страницы → Добавить новую

7.2. Заполните поля:

7.3. Добавьте контент:

 1## Веб-разработка
 2
 3Мы создаём современные, быстрые и удобные веб-сайты, которые решают бизнес-задачи наших клиентов.
 4
 5### Что мы делаем
 6
 7* Лендинги для продвижения продуктов и услуг
 8* Корпоративные сайты для представления бизнеса
 9* Интернет-магазины с интеграцией платёжных систем
10* Порталы и веб-приложения сложной логики
11* Блоги и медиа-ресурсы
12
13### Технологии
14
15Мы используем современные технологии и следуем лучшим практикам разработки:
16
17* WordPress — для быстрого запуска проектов
18* React — для интерактивных интерфейсов
19* Node.js — для серверной части
20* MongoDB и PostgreSQL — для баз данных
21
22### Процесс работы
23
241. Анализ требований и подготовка технического задания
252. Прототипирование и дизайн интерфейса
263. Разработка функционала
274. Тестирование и запуск
285. Техническая поддержка и развитие

7.4. Опубликуйте страницу.

URL страницы будет:

1http://site.com/glavnaya/uslugi/web-razrabotka/

Шаг 8. Настройка порядка отображения страниц

8.1. Откройте список всех страниц:

Страницы → Все страницы

8.2. Отсортируйте страницы по порядку:

1. В меню сверху выберите “Сортировка” → “Порядок”
2. Настройте порядок для каждой страницы через “Быстрое редактирование”:

8.3. Обновите порядок для всех страниц.

Шаг 9. Проверка созданных страниц

9.1. Откройте каждую страницу в браузере:

• Главная: https://ВАШ-ПОДДОМЕН.epizy.com/glavnaya/
• О компании: https://ВАШ-ПОДДОМЕН.epizy.com/glavnaya/o-kompanii/
• Услуги: https://ВАШ-ПОДДОМЕН.epizy.com/glavnaya/uslugi/
• Веб-разработка: https://ВАШ-ПОДДОМЕН.epizy.com/glavnaya/uslugi/web-razrabotka/
• Контакты: https://ВАШ-ПОДДОМЕН.epizy.com/glavnaya/kontakty/

9.2. Проверьте отображение:

• Заголовки H1-H6 отображаются корректно
• Списки (маркированные и нумерованные) форматированы правильно
• Цитаты имеют соответствующий стиль
• Столбцы отображаются корректно (в зависимости от темы)
• Кнопка работает и имеет правильный вид
• Иерархия URL отображается в адресной строке браузера

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

Задание 1. Добавление изображений на страницы

1. Найдите или создайте изображения для каждой страницы
2. Загрузите изображения в медиабиблиотеку
3. Добавьте блок “Изображение” на каждую страницу
4. Заполните альтернативный текст для каждого изображения
5. Опубликуйте обновлённые страницы

Задание 2. Создание галереи на странице “Услуги”

1. Соберите несколько изображений (примеры работ)
2. На странице “Услуги” добавьте блок “Галерея”
3. Настройте галерею: 3 столбца, ссылка на медиафайл
4. Опубликуйте страницу

Задание 3. Использование групп и обложек

1. На странице “О компании” добавьте блок “Обложка” с фоновым изображением
2. Добавьте на обложку текст: “О нас — это мы”
3. Создайте группу блоков с заголовком и текстом
4. Примените фон для группы (цвет или изображение)

Задание 4. Создание дополнительных дочерних страниц

Создайте ещё 2-3 дочерние страницы для “Услуги”:

• Дизайн
• Маркетинг
• Поддержка

Заполните их содержимым, похожим на страницу “Веб-разработка”.

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

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

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

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

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

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

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

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

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

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

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

1. В чём разница между записями (Posts) и страницами (Pages)?
2. Когда лучше использовать записи, а когда — страницы?
3. Что такое Gutenberg и какие у него преимущества?
4. Какие типы блоков существуют в редакторе Gutenberg?
5. Как создать иерархическую структуру страниц?
6. Как влияет иерархия на URL страниц?
7. Зачем нужен параметр порядка отображения страниц?
8. Какие блоки вы использовали при создании страниц?
9. Как добавить изображение на страницу?
10. В чём преимущества блочного подхода к редактированию контента?

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

Проблема: Не сохраняется контент страницы

Решение:

• Проверьте, что вы нажали кнопку “Опубликовать” или “Обновить”
• Проверьте подключение к интернету
• Попробуйте очистить кэш браузера
• Проверьте права доступа к базе данных

Проблема: Блоки не добавляются

Решение:

• Убедитесь, что вы находитесь в режиме редактирования (не предпросмотр)
• Попробуйте добавить блок через кнопку “+” или введя “/”
• Обновите страницу редактора (F5)
• Проверьте, что JavaScript включён в браузере

Проблема: Столбцы отображаются некорректно

Решение:

• Убедитесь, что используете блок “Столбцы”, а не обычные абзацы
• Проверьте настройки количества столбцов
• Просмотрите страницу на мобильном устройстве (адаптивность)
• Протестируйте в разных браузерах

Проблема: Иерархия не работает

Решение:

• Убедитесь, что вы выбрали родительскую страницу через “Быстрое редактирование”
• Проверьте, что URL изменился (должен содержать путь к родительской странице)
• Очистите кэш браузера
• Проверьте настройки постоянных ссылок (должен быть формат “Название записи”)

Проблема: Ссылки в кнопке не работают

Решение:

• Убедитесь, что URL ссылки введён корректно
• Проверьте, что ссылка начинается с http:// или https://
• Попробуйте открыть ссылку в новой вкладке
• Проверьте, что страница, на которую ведёт ссылка, существует и опубликована

Проблема: Страница не отображается на сайте

Решение:

• Убедитесь, что страница опубликована (статус “Опубликован”, а не “Черновик”)
• Проверьте URL страницы
• Попробуйте добавить страницу в меню навигации
• Проверьте, что тема поддерживает отображение страниц

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

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

• WordPress Pages: https://wordpress.org/support/article/pages-screen/
• Gutenberg Block Editor: https://wordpress.org/support/article/wordpress-editor/
• Block Reference: https://developer.wordpress.org/block-editor/reference/block-list/

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

• WordPress.org Learn: https://learn.wordpress.org/
• WPBeginner: https://www.wpbeginner.com/
• WPExplorer: https://www.wpexplorer.com/

Видеоуроки

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

Приложение А. Полный список блоков Gutenberg

Текстовые блоки

• Абзац
• Заголовок
• Список
• Цитата
• Код
• Классический параграф
• Таблица
• Бесплатный HTML

Медиаблоки

• Изображение
• Галерея
• Аудиозапись
• Видеозапись
• Обложка
• Файл
• Медиа и текст

Дизайн

• Кнопки
• Колонки
• Группа
• Ряд
• Стек
• Разделитель
• Интервал
• Спейсер
• Столбцы

Виджеты

• Архивы
• Календарь
• Рубрики
• HTML-код
• Меню
• Мета
• Последние записи
• Последние комментарии
• RSS-лента
• Текст поиска
• Страница поиска
• Текст
• Теги

Темы

• Большой заголовок
• Пост заголовок
• Большое цитата
• Строка

Приложение Б. Структура сайта (пример)

 1Сайт
 2├── Главная
 3│   ├── О компании
 4│   │   ├── История компании
 5│   │   ├── Команда
 6│   │   └── Вакансии
 7│   ├── Услуги
 8│   │   ├── Веб-разработка
 9│   │   │   ├── Лендинги
10│   │   │   ├── Корпоративные сайты
11│   │   │   └── Интернет-магазины
12│   │   ├── Дизайн
13│   │   └── Маркетинг
14│   ├── Портфолио
15│   ├── Блог
16│   │   ├── Новости
17│   │   ├── Статьи
18│   │   └── Кейсы
19│   └── Контакты

Приложение В. Горячие клавиши Gutenberg