Лаб. работа “Работа с динамическим контентом”

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

Бизюк Андрей

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

13 апреля 2026 г.

Цель работы

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

Задачи

  • Создать 3-4 записи блога с использованием различных типов блоков
  • Настроить рубрики и метки для организации контента
  • Привязать записи к рубрикам и назначить метки
  • Загрузить изображения в медиабиблиотеку и вставить их в записи
  • Настроить отображение миниатюр записей

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

  • Создание и редактирование записей (Posts)
  • Работа с таксономиями: рубрики (Categories) и метки (Tags)
  • Управление медиабиблиотекой
  • Использование блочного редактора Gutenberg
  • Форматирование контента с медиа-элементами

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

Записи (Posts) — динамический контент

Записи — это основной тип контента для блога, новостей и статей. Ключевые свойства:

  • Имеют дату и время публикации
  • Автоматически отображаются на странице блога в обратном хронологическом порядке
  • Включены в RSS-ленту
  • Используют таксономии (рубрики и метки)
  • Могут иметь несколько авторов

Структура записи:

Элемент Описание
Заголовок Название записи (используется в URL и заголовке H1)
Содержимое Основной текст с блоками Gutenberg
Рубрика Категория записи (обязательно хотя бы одна)
Метки Ключевые слова для перекрёстной классификации
Изображение записи Миниатюра, отображаемая в списках
Отрывок Краткое описание для архивов и результатов поиска

Таксономии WordPress

WordPress предоставляет две встроенные таксономии для организации записей:

Рубрики (Categories)

Иерархическая таксономия:

Блог
  ├── Технологии
  │   ├── Веб-разработка
  │   └── Мобильные приложения
  ├── Бизнес
  │   ├── Маркетинг
  │   └── Электронная коммерция
  └── Обзоры

Особенности:

  • Рубрики могут иметь дочерние и родительские
  • Каждая запись должна принадлежать хотя бы к одной рубрике
  • Рубрика по умолчанию — “Без рубрики” (можно изменить)
  • Рубрики формируют структуру URL: site.com/рубрика/запись/

Метки (Tags)

Неиерархическая таксономия:

Особенности:

  • Метки не имеют иерархии (нет родительских/дочерних)
  • Использование не обязательно
  • Подходят для перекрёстной классификации контента
  • Примеры: “WordPress”, “SEO”, “начинающим”, “кейс”

Разница между рубриками и метками:

Признак Рубрики Метки
Иерархия Да (могут быть вложенными) Нет (все на одном уровне)
Обязательность Да (хотя бы одна) Нет
Назначение Широкая классификация Перекрёстная классификация
Количество Рекомендуется 5-10 Может быть много
URL site.com/category/name/ site.com/tag/name/

Медиабиблиотека

Медиабиблиотека — центральное хранилище всех загруженных файлов:

Поддерживаемые форматы:

  • Изображения: JPG, PNG, GIF, WebP, SVG
  • Видео: MP4, WebM, OGG
  • Аудио: MP3, OGG, WAV
  • Документы: PDF, DOC, DOCX, XLS

Работа с изображениями:

При загрузке изображения WordPress автоматически создаёт несколько размеров:

Размер Значение по умолчанию Назначение
Миниатюра 150×150 px Списки записей, виджеты
Средний 300×300 px Внутри контента
Большой 1024×1024 px Полноценное отображение
Полный размер Оригинал Ссылки на полноразмерное изображение

ALT-текст (альтернативный текст):

  • Описание изображения для экранных дикторов
  • Отображается, если изображение не загрузилось
  • Важен для SEO и доступности (accessibility)
  • Рекомендуется писать для каждого изображения

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

Шаг 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. Создайте следующие рубрики:

Название рубрики Ярлык (slug) Родительская Описание
Технологии technologii — Статьи о технологиях и разработке
Бизнес biznes — Бизнес-статьи и аналитика
Обзоры obzory — Обзоры инструментов и сервисов
Веб-разработка web-razrabotka Технологии Статьи о веб-разработке
Маркетинг marketing Бизнес Статьи о цифровом маркетинге

2.3. Для каждой рубрики:

  1. Введите название
  2. Укажите ярлык (автоматически или вручную)
  3. Выберите родительскую рубрику (если нужно)
  4. Введите описание
  5. Нажмите “Добавить новую рубрику”

2.4. Проверьте структуру рубрик:

Убедитесь, что в списке рубрик отображается иерархия:

Без рубрики
Технологии
  Веб-разработка
Бизнес
  Маркетинг
Обзоры

Шаг 3. Создание меток

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

Записи → Метки

3.2. Создайте следующие метки:

Название метки Ярлык (slug) Описание
WordPress wordpress Статьи о WordPress
SEO seo Поисковая оптимизация
Для начинающих dlya-nachinayushchih Пособия для новичков
Плагины plaginy Обзоры плагинов
Тематизация tematizaciya Темы и шаблоны
CMS cms Системы управления контентом

Шаг 4. Создание записи №1

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

Записи → Добавить новую

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

Поле Значение
Заголовок Что такое CMS и зачем она нужна бизнесу

4.3. В правой боковой панели выберите рубрику:

  • Рубрика: Технологии

4.4. Добавьте метки:

  • Метки: CMS, Для начинающих

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

Блок 1: Абзац (введение)

Система управления контентом (CMS) — это программное обеспечение, которое позволяет создавать, редактировать и публиковать контент на веб-сайте без необходимости знания языков программирования.

Блок 2: Заголовок H2

## Почему бизнесу нужна CMS?

Блок 3: Упорядоченный список

1. Экономия времени — сайт можно запустить за дни, а не месяцы
2. Снижение затрат — не нужен штат программистов для обновления контента
3. Масштабируемость — легко добавлять новые страницы и функции
4. SEO-оптимизация — большинство CMS имеют встроенные инструменты для SEO
5. Безопасность — регулярные обновления защищают от уязвимостей

Блок 4: Заголовок H2

## Самые популярные CMS

Блок 5: Таблица

CMS Доля рынка Тип лицензии Назначение
WordPress 43% Open Source Универсальная
Shopify 4.4% SaaS E-commerce
Joomla 2.2% Open Source Универсальная
Drupal 1.6% Open Source Сложные проекты
Wix 2.3% SaaS Конструктор

Блок 6: Заголовок H2

## Как выбрать CMS?

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

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

Блок 8: Абзац

При выборе CMS стоит учитывать: стоимость владения, доступность шаблонов и плагинов, безопасность, сообщество поддержки и возможности масштабирования.

4.6. Установите изображение записи (миниатюру):

  1. В правой боковой панели найдите раздел “Изображение записи”
  2. Нажмите “Выбрать изображение”
  3. Загрузите любое изображение (или выберите из библиотеки)
  4. Заполните ALT-текст: “CMS для бизнеса”
  5. Нажмите “Выбрать”

4.7. Опубликуйте запись, нажав “Опубликовать”

Шаг 5. Создание записи №2

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

Записи → Добавить новую

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

Поле Значение
Заголовок 5 обязательных плагинов для сайта на WordPress

5.3. Выберите рубрику и метки:

  • Рубрика: Технологии → Веб-разработка
  • Метки: WordPress, Плагины

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

Блок 1: Абзац

Плагины расширяют функциональность WordPress без необходимости изменения кода. Рассмотрим пять плагинов, которые должны быть установлены на каждом бизнес-сайте.

Блок 2: Заголовок H2

## 1. Yoast SEO

Блок 3: Столбцы (2 столбца)

Левый столбец:

### Описание
Плагин для поисковой оптимизации сайта. Помогает настраивать мета-теги, генерировать карту сайта и анализировать читабельность контента.

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

### Почему нужен
- Настройка мета-тегов для каждой страницы
- Генерация XML-карты сайта
- Анализ ключевых слов
- Проверка читабельности текста

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

Блок 5: Заголовок H2

## 2. Wordfence Security

Блок 6: Абзац

Комплексное решение для защиты сайта: брандмауэр, сканер вредоносного кода, двухфакторная аутентификация и мониторинг входа.

Блок 7: Заголовок H2

## 3. WPForms Lite

Блок 8: Абзац

Конструктор контактных форм с drag-and-drop интерфейсом. Позволяет создавать формы обратной связи, формы подписки и опросы без программирования.

Блок 9: Заголовок H2

## 4. WP Super Cache

Блок 10: Абзац

Плагин кеширования, который значительно ускоряет загрузку сайта. Создаёт статические HTML-страницы вместо динамической генерации при каждом запросе.

Блок 11: Заголовок H2

## 5. UpdraftPlus

Блок 12: Абзац

Плагин для резервного копирования. Позволяет автоматически создавать бекапы файлов и базы данных с сохранением в облачное хранилище (Google Drive, Dropbox, S3).

Блок 13: Заголовок H2

## Итог

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

Не устанавливайте слишком много плагинов — каждый плагин может замедлить сайт и создать уязвимость. Выбирайте проверенные решения с большим количеством установок и хорошими отзывами.

5.5. Установите изображение записи (миниатюру):

  1. Загрузите изображение или выберите из библиотеки
  2. ALT-текст: “Плагины WordPress”

5.6. Опубликуйте запись

Шаг 6. Создание записи №3

6.1. Создайте новую запись:

Записи → Добавить новую

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

Поле Значение
Заголовок Введение в SEO: как оптимизировать сайт для поисковых систем

6.3. Выберите рубрику и метки:

  • Рубрика: Бизнес → Маркетинг
  • Метки: SEO, Для начинающих

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

Блок 1: Абзац

SEO (Search Engine Optimization) — это комплекс мер по повышению видимости сайта в результатах поисковых систем. Рассмотрим основные принципы SEO-оптимизации.

Блок 2: Заголовок H2

## Основные виды SEO

Блок 3: Маркированный список

- Техническое SEO — оптимизация сервера, скорости загрузки, мобильной адаптации
- On-page SEO — оптимизация контента: заголовки, мета-теги, структура текста
- Off-page SEO — внешние факторы: обратные ссылки, упоминания в соцсетях
- Локальное SEO — оптимизация для регионального поиска

Блок 4: Заголовок H2

## Ключевые элементы on-page SEO

Блок 5: Таблица

Элемент Описание Важность
Title Заголовок страницы в результатах поиска Высокая
Meta Description Краткое описание страницы Средняя
H1-H6 Иерархия заголовков на странице Высокая
ALT-текст Описание изображений Средняя
URL-адрес Понятный и короткий адрес страницы Высокая
Внутренние ссылки Ссылки на другие страницы сайта Высокая

Блок 6: Заголовок H2

## Чеклист SEO-оптимизации страницы

Блок 7: Список (галочками)

- Заголовок H1 содержит ключевой запрос
- URL-адрес короткий и понятный
- Мета-описание не превышает 160 символов
- Текст разбит на заголовки H2-H3
- Изображения имеют ALT-текст
- Есть внутренние ссылки на другие страницы
- Текст содержит минимум 300 слов
- Страница загружается менее чем за 3 секунды

Блок 8: Абзац

SEO — это долгосрочная стратегия. Результаты обычно видны через 3-6 месяцев регулярной работы над контентом и технической оптимизацией сайта.

6.5. Установите изображение записи (миниатюру):

  1. Загрузите изображение или выберите из библиотеки
  2. ALT-текст: “SEO оптимизация сайта”

6.6. Опубликуйте запись

Шаг 7. Работа с медиабиблиотекой

7.1. Перейдите в медиабиблиотеку:

Медиафайлы → Библиотека

7.2. Загрузите несколько изображений:

  1. Нажмите “Добавить новый файл мультимедиа”
  2. Выберите 3-5 изображений с компьютера (или скачайте из интернета)
  3. Дождитесь завершения загрузки

7.3. Отредактируйте одно из загруженных изображений:

  1. Нажмите на изображение в библиотеке
  2. Нажмите “Изменить больше деталей”
  3. Заполните следующие поля:
Поле Значение (пример)
Заголовок Баннер сайта
Подпись Главная страница проекта
Описание Изображение для заголовка главной страницы
Альтернативный текст Баннер сайта компании с логотипом
  1. При необходимости обрежьте или измените размер изображения
  2. Нажмите “Обновить медиафайл”

7.4. Изучите отображение файлов:

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

Шаг 8. Проверка отображения записей на сайте

8.1. Перейдите на страницу блога:

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

8.2. Проверьте:

  • Все три записи отображаются на главной странице (или странице блога)
  • Записи отсортированы по дате (новые сверху)
  • Миниатюры отображаются рядом с каждой записью
  • Рубрики и метки отображаются под записями
  • Нажмите на рубрику — откроется страница со всеми записями этой рубрики
  • Нажмите на метку — откроется страница со всеми записями с этой меткой

8.3. Откройте каждую запись:

  • Заголовок H1 соответствует названию записи
  • Таблицы, списки и цитаты отображаются корректно
  • Столбцы выровнены (если тема поддерживает)
  • Изображения загружаются

8.4. Проверьте навигацию по рубрикам:

  • Перейдите: https://ВАШ-ПОДДОМЕН.epizy.com/category/technologii/ — записи рубрики “Технологии”
  • Перейдите: https://ВАШ-ПОДДОМЕН.epizy.com/category/biznes/marketing/ — записи рубрики “Маркетинг”

8.5. Проверьте навигацию по меткам:

  • Перейдите: https://ВАШ-ПОДДОМЕН.epizy.com/tag/seo/ — записи с меткой “SEO”
  • Перейдите: https://ВАШ-ПОДДОМЕН.epizy.com/tag/wordpress/ — записи с меткой “WordPress”

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

Задание 1. Создание четвёртой записи

Создайте запись на свободную тему, используя:

  • Заголовки H1, H2, H3
  • Блок “Медиа и текст” (изображение рядом с текстом)
  • Блок “Кнопка” со ссылкой
  • Блок “Галерея” с несколькими изображениями

Задание 2. Редактирование существующей записи

  1. Откройте любую созданную запись
  2. Добавьте блок “Обложка” (Cover) в начало записи
  3. Вставьте изображение и текст поверх обложки
  4. Обновите запись

Задание 3. Создание вложенных рубрик

Добавьте в структуру рубрик новые вложенные рубрики:

Технологии
  ├── Веб-разработка
  │   ├── Frontend
  │   └── Backend
  └── DevOps

Назначьте записи соответствующим рубрикам.

Задание 4. Управление отрывками (Excerpt)

  1. Откройте любую запись для редактирования
  2. В правой боковой панели найдите раздел “Отрывок”
  3. Напишите краткое описание записи (1-2 предложения)
  4. Обновите запись
  5. Проверьте, что отрывок отображается на странице блога вместо обрезанного текста

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

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

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

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

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

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

Критерий Баллы Описание
Создание рубрик 15 Созданы все рубрики с правильной иерархией
Создание меток 10 Созданы все метки
Создание записей 25 Созданы 3 записи с качественным контентом
Использование блоков 15 Использованы различные типы блоков (таблицы, столбцы, цитаты, списки)
Медиабиблиотека 10 Изображения загружены, ALT-текст заполнен
Привязка к таксономиям 10 Записи правильно привязаны к рубрикам и меткам
Отчёт 15 Структурированный отчёт со скриншотами

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

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

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

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

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

  1. В чём разница между записями (Posts) и страницами (Pages)?
  2. Что такое рубрики (Categories) и как они организованы?
  3. Что такое метки (Tags) и в чём их отличие от рубрик?
  4. Как создать иерархическую структуру рубрик?
  5. Зачем нужен ALT-текст для изображений?
  6. Какие размеры изображений автоматически создаёт WordPress?
  7. Что такое миниатюра записи и где она отображается?
  8. Как изменить рубрику по умолчанию “Без рубрики”?
  9. Что такое отрывок (Excerpt) записи?
  10. Как URL записи зависит от её рубрики при настройке постоянных ссылок?

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

Проблема: Запись не отображается на главной странице

Решение:

  • Убедитесь, что запись опубликована (статус “Опубликован”)
  • Проверьте настройки чтения: Настройки → Чтение → “Ваши последние записи”
  • Проверьте, что дата публикации записи корректна
  • Очистите кэш браузера

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

Решение:

  • Убедитесь, что тема поддерживает миниатюры записей
  • Проверьте, что изображение назначено как “Изображение записи” (не просто вставлено в контент)
  • Вставьте в файл functions.php темы: add_theme_support('post-thumbnails');

Проблема: Страница рубрики или метки возвращает ошибку 404

Решение:

  • Проверьте настройки постоянных ссылок: Настройки → Постоянные ссылки
  • Нажмите “Сохранить изменения” в разделе постоянных ссылок (перезаписывает правила)
  • Проверьте, что PHP-сервер поддерживает URL rewriting

Проблема: Изображение не загружается в медиабиблиотеку

Решение:

  • Проверьте размер файла (максимальный размер загрузки определяется настройками PHP)
  • Убедитесь, что формат файла поддерживается (JPG, PNG, GIF, WebP)
  • Проверьте права на запись в папку wp-content/uploads/

Проблема: Рубрики не отображаются в виде иерархии

Решение:

  • Убедитесь, что при создании дочерней рубрики выбрана родительская
  • Проверьте, что в настройках отображения рубрик включён показ иерархии
  • Отредактируйте рубрику и явно укажите родительскую

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

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

  • WordPress Posts: https://wordpress.org/support/article/posts-screen/
  • WordPress Categories: https://wordpress.org/support/article/posts-categories-screen/
  • WordPress Tags: https://wordpress.org/support/article/posts-tags-screen/
  • Media Library: https://wordpress.org/support/article/media-library-screen/

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

  • WordPress.org Learn: https://learn.wordpress.org/
  • WPBeginner — Posts vs Pages: https://www.wpbeginner.com/beginners-guide/whats-the-difference-between-posts-vs-pages-in-wordpress/

Видеоуроки

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

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

Блог
  ├── Новости компании
  │   ├── Пресс-релизы
  │   └── Мероприятия
  ├── Полезные статьи
  │   ├── Обзоры продуктов
  │   ├── Сравнения
  │   └── Руководства
  ├── Кейсы
  │   ├── E-commerce
  │   ├── Корпоративные сайты
  │   └── Лендинги
  └── Интервью

Приложение Б. Теги для произвольной структуры ЧПУ с рубриками

Тег Описание Пример URL
%category% Рубрика записи site.com/technologii/zapis/
%postname% Название записи site.com/zapis/
%post_id% ID записи site.com/123/
%author% Автор записи site.com/admin/zapis/

Пример произвольной структуры с рубрикой:

/%category%/%postname%/ → site.com/technologii/chto-takoe-cms/

Внимание: При использовании %category% в структуре ЧПУ URL записи будет содержать только одну (нижнюю) рубрику из иерархии. Если запись привязана к “Веб-разработка” (дочерняя от “Технологии”), URL будет: site.com/web-razrabotka/zapis/, а не site.com/technologii/web-razrabotka/zapis/.

Наверх