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

Цель работы

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

Задачи

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

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

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

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

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

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

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

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

Таксономии WordPress

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

Рубрики (Categories)

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

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

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

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

Метки (Tags)

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 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. Введите название
2. Укажите ярлык (автоматически или вручную)
3. Выберите родительскую рубрику (если нужно)
4. Введите описание
5. Нажмите “Добавить новую рубрику”

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

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

1Без рубрики
2Технологии
3  Веб-разработка
4Бизнес
5  Маркетинг
6Обзоры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11. Экономия времени — сайт можно запустить за дни, а не месяцы
22. Снижение затрат — не нужен штат программистов для обновления контента
33. Масштабируемость — легко добавлять новые страницы и функции
44. SEO-оптимизация — большинство CMS имеют встроенные инструменты для SEO
55. Безопасность — регулярные обновления защищают от уязвимостей

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

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

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

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

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

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

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

Блок 8: Абзац

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

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

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

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

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

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

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

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

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

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

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

Блок 1: Абзац

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

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

1## 1. Yoast SEO

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

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

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

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

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

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

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

1## 2. Wordfence Security

Блок 6: Абзац

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

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

1## 3. WPForms Lite

Блок 8: Абзац

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

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

1## 4. WP Super Cache

Блок 10: Абзац

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

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

1## 5. UpdraftPlus

Блок 12: Абзац

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

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

1## Итог

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

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

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

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

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

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

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

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

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

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

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

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

Блок 1: Абзац

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

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

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

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

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

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

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

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

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

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

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

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

Блок 8: Абзац

1SEO — это долгосрочная стратегия. Результаты обычно видны через 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. Заполните следующие поля:

4. При необходимости обрежьте или измените размер изображения
5. Нажмите “Обновить медиафайл”

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

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

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

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

1https://ВАШ-ПОДДОМЕН.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. Создание вложенных рубрик

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

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

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

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

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

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

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

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. В чём разница между записями (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/

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

 1Блог
 2  ├── Новости компании
 3  │   ├── Пресс-релизы
 4  │   └── Мероприятия
 5  ├── Полезные статьи
 6  │   ├── Обзоры продуктов
 7  │   ├── Сравнения
 8  │   └── Руководства
 9  ├── Кейсы
10  │   ├── E-commerce
11  │   ├── Корпоративные сайты
12  │   └── Лендинги
13  └── Интервью

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

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

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

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