Лаб. работа “Работа с темами оформления”
Цель работы
Научиться работать с темами оформления WordPress: устанавливать, настраивать и кастомизировать внешний вид сайта с помощью Кастомайзера, а также создавать дочернюю тему для безопасного внесения изменений.
Задачи
- Изучить установленные темы и установить новую тему из репозитория
- Настроить идентификацию сайта (название, описание, логотип)
- Настроить цветовую схему и шрифты через Кастомайзер
- Настроить шапку и подвал сайта
- Настроить главную страницу (если тема поддерживает секции)
- Создать дочернюю тему (опционально)
Ключевые навыки
- Поиск и установка тем из репозитория WordPress
- Настройка внешнего вида через Кастомайзер (Customizer)
- Управление логотипом, цветами и шрифтами
- Настройка шапки и подвала сайта
- Создание дочерней темы (Child Theme)
Теоретическая часть
Понятие темы (шаблона)
Тема (Theme) — это набор файлов (шаблонов, стилей, скриптов и изображений), определяющий внешний вид и функциональность сайта WordPress. Тема отвечает за отображение контента, не затрагивая сам контент.
Принцип разделения логики и представления:
WordPress реализует паттерн MVC (Model-View-Controller):
| Компонент | Ответственность | Пример |
|---|---|---|
| Модель (Core + БД) | Хранение и управление данными | Записи, страницы, настройки |
| Контроллер (Core) | Обработка запросов, маршрутизация | WordPress API, хуки |
| Представление (Тема) | Отображение данных пользователю | Шаблоны, стили, скрипты |
Файловая структура типичной темы:
wp-content/themes/my-theme/
├── style.css — основной файл стилей (обязателен)
├── index.php — главный шаблон (обязателен)
├── functions.php — функции темы
├── header.php — шапка сайта
├── footer.php — подвал сайта
├── sidebar.php — боковая панель
├── single.php — шаблон записи
├── page.php — шаблон страницы
├── archive.php — шаблон архивов
├── 404.php — страница ошибки 404
├── screenshot.png — превью темы (1200×900 px)
└── assets/
├── css/ — дополнительные стили
├── js/ — скрипты
└── images/ — изображения темы
Репозиторий тем. Платные и бесплатные темы
Репозиторий тем WordPress — официальный каталог тем на https://wordpress.org/themes/, где каждая тема проходит проверку на безопасность и качество кода.
Классификация тем:
| Тип | Описание | Примеры |
|---|---|---|
| Бесплатные (репозиторий) | Проверенные, бесплатные темы | Twenty Twenty-Four, Astra, OceanWP |
| Бесплатные (freemium) | Базовая версия бесплатна, расширенная — платная | Neve, Zakra |
| Премиум (платные) | Полный функционал за деньги | Divi, Ultra, Flatsome |
| Мультипликатор | Позволяют импортировать готовые демо-сайты | Astra Pro, OceanWP, GeneratePress |
Критерии выбора темы:
- Количество активных установок
- Оценка и количество отзывов
- Дата последнего обновления (не старше 6 месяцев)
- Совместимость с текущей версией WordPress
- Поддержка адаптивного дизайна (responsive)
- Скорость загрузки
- Наличие поддержки от разработчика
Кастомайзер (Customizer)
Кастомайзер — встроенный инструмент WordPress для визуальной настройки внешнего вида сайта с предпросмотром изменений в реальном времени.
Путь к Кастомайзеру:
Внешний вид → Настроить
Основные разделы Кастомайзера:
| Раздел | Описание |
|---|---|
| Идентификация сайта | Название, описание, логотип, иконка сайта |
| Цвета | Цветовая схема: основной цвет, цвет фона, цвет ссылок |
| Шрифты | Выбор шрифтов для заголовков и основного текста |
| Фон | Цвет или изображение фона сайта |
| Меню | Управление навигационными меню |
| Виджеты | Управление виджетами в областях темы |
| Главная страница (статичная) | Настройка главной страницы |
| Дополнительные CSS | Произвольные CSS-стили |
Дочерняя тема (Child Theme)
Дочерняя тема — тема, наследующая функциональность и стили родительской темы, позволяющая безопасно вносить изменения.
Зачем нужна дочерняя тема:
- Изменения не теряются при обновлении родительской темы
- Безопасное редактирование файлов шаблонов
- Возможность переопределения функций родительской темы
- Сохранение кастомных CSS-стилей
Структура дочерней темы:
wp-content/themes/astra-child/
├── style.css — обязательный файл (содержит заголовок темы)
└── functions.php — подключение стилей родительской темы
Минимальное содержимое style.css дочерней темы:
/*
Theme Name: Astra Child
Theme URI: https://example.com
Description: Дочерняя тема для Astra
Author: Ваше Имя
Author URI: https://example.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/
Ключевое поле:
Template: astra— указывает на папку родительской темы (без пробелов, в нижнем регистре).
Минимальное содержимое functions.php дочерней темы:
Практическая часть
Шаг 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. Изучите установленные темы:
WordPress по умолчанию устанавливает одну или несколько стандартных тем (Twenty Twenty-Four и др.). Для каждой темы отображается:
- Название и описание
- Скриншот (превью)
- Текущая активная тема (отмечена подписью “Активна”)
- Кнопки “Активировать”, “Настроить”, “Предварительный просмотр”
2.3. Найдите новую тему в репозитории:
- Нажмите кнопку “Добавить новую” в верхней части экрана
- В строке поиска введите: Astra
- Найдите тему “Astra” в результатах (разработчик Brainstorm Force)
- Нажмите “Установить”, а затем “Активировать”
Альтернатива: Можно также установить тему OceanWP (разработчик OceanWP) — она также бесплатна и поддерживает кастомизацию.
2.4. Изучите страницу темы после активации:
После активации Astra может отобразиться экран приветствия с предложением:
- Импортировать готовый сайт (Starter Templates)
- Установить рекомендуемые плагины
- Перейти к настройке темы
Закройте этот экран (или перейдите к настройкам), если не планируете импортировать демо-сайт.
2.5. Убедитесь, что тема активирована:
- Перейдите: Внешний вид → Темы
- Тема Astra должна быть отмечена как “Активна”
Шаг 3. Настройка темы через Кастомайзер — идентификация сайта, цвета, шрифты
3.1. Откройте Кастомайзер:
Внешний вид → Настроить
3.2. Настройте идентификацию сайта:
- В левом меню Кастомайзера выберите: Идентификация сайта (Site Identity)
- Настройте следующие поля:
| Поле | Значение |
|---|---|
| Название сайта | Название вашего сайта (например, “Мой блог”) |
| Редакторский слоган | Краткое описание сайта |
| Логотип | Загрузите логотип (см. Шаг 4) |
| Иконка сайта (Favicon) | Загрузите небольшое изображение (512×512 px) |
- Нажмите “Опубликовать”, чтобы сохранить изменения
3.3. Настройте цвета:
- В левом меню Кастомайзера выберите раздел Глобальные (Global) → Цвета (Colors)
- В зависимости от версии Astra, настройте:
| Параметр | Значение |
|---|---|
| Цвет фона сайта | #ffffff (белый) или другой |
| Текст основного текста | #333333 (тёмно-серый) |
| Цвет ссылок | #1e73be (синий) или другой |
| Цвет заголовков | #222222 (тёмный) |
- В разделе “Палитра” (Palette) можно выбрать одну из предустановленных цветовых схем
- Нажмите “Опубликовать”
3.4. Настройте шрифты:
- В левом меню выберите: Глобальные → Типографика (Typography)
- Настройте шрифт основного текста (Body Font):
| Параметр | Значение |
|---|---|
| Семейство шрифта | Open Sans (по умолчанию) или другой |
| Размер шрифта | 16 px |
| Вес шрифта | 400 (Normal) |
- Настройте шрифт заголовков (Headings Font):
| Параметр | Значение |
|---|---|
| Семейство шрифтов | Montserrat или другой |
| Размер H1 | 36 px |
| Размер H2 | 28 px |
| Размер H3 | 22 px |
- Нажмите “Опубликовать”
3.5. Проверьте изменения на сайте:
В правой части Кастомайзера отображается предпросмотр сайта в реальном времени. Убедитесь, что:
- Название и описание сайта отображаются в шапке
- Цвета применились к тексту, ссылкам и фону
- Шрифты изменились
Шаг 4. Настройка шапки сайта (логотип, заголовок)
4.1. Перейдите к настройке шапки:
Внешний вид → Настроить → Шапка сайта (Header Builder)
В теме Astra шапка настраивается через визуальный конструктор (Header Builder). Отображается макет шапки с тремя рядами (верхний, основной, нижний).
4.2. Настройте основной ряд шапки:
В верхнем ряду (Primary Header) настройте элементы:
Левая часть:
- Убедитесь, что элемент “Логотип сайта” (Site Logo) добавлен
- Если логотип не загружен, нажмите на элемент и загрузите изображение
- Рекомендуемый размер логотипа: 200×60 px (PNG с прозрачным фоном)
Центральная часть:
- Добавьте или убедитесь в наличии элемента “Заголовок сайта” (Site Title)
- Или используйте элемент “Основное меню” (Primary Menu)
Правая часть:
- Добавьте элемент “Поиск” (Search)
- Если есть — добавьте элемент “Кнопка” (Button) с текстом “Связаться”
4.3. Настройте фон шапки:
- Нажмите на значок настроек ряда шапки (иконка шестерёнки)
- В разделе “Фон” (Background) выберите:
| Параметр | Значение |
|---|---|
| Цвет фона | #1a1a2e (тёмно-синий) или другой |
| Цвет текста | #ffffff (белый) |
- Нажмите “Опубликовать”
4.4. Настройте нижнюю границу шапки:
- В настройках шапки найдите раздел “Граница” (Border)
- Установите нижнюю границу:
| Параметр | Значение |
|---|---|
| Ширина | 1 px |
| Цвет | #e0e0e0 |
4.5. Проверьте отображение шапки:
- Логотип отображается и пропорционально масштабируется
- Заголовок сайта или меню находится в центре
- Поиск доступен в правой части
- На мобильном устройстве (сузьте окно браузера) шапка адаптируется
Шаг 5. Настройка подвала сайта (виджеты, копирайт)
5.1. Перейдите к настройке подвала:
Внешний вид → Настроить → Подвал сайта (Footer Builder)
5.2. Настройте ряды подвала:
В теме Astra подвал также состоит из нескольких рядов. Настройте верхний ряд (Footer Widgets):
- Установите количество колонок: 3
- В каждой колонке добавьте виджеты:
Колонка 1:
- Тип виджета: Текст
- Содержимое: название сайта и краткое описание
Колонка 2:
- Тип виджета: Навигация (меню)
- Выберите меню: “Основное меню” (или создайте отдельное “Меню подвала”)
Колонка 3:
- Тип виджета: Текст
- Содержимое: контактная информация (адрес, телефон, email)
5.3. Настройте нижний ряд подвала (Footer Bar):
- В нижнем ряду настройте элементы:
| Позиция | Элемент | Содержимое |
|---|---|---|
| Левая | Текст копирайта | © 2026 Название сайта. Все права защищены. |
| Правая | Текст | Создано на WordPress |
5.4. Настройте фон подвала:
- Нажмите на значок настроек ряда подвала
- В разделе “Фон” выберите:
| Параметр | Значение |
|---|---|
| Цвет фона | #1a1a2e (тёмно-синий) |
| Цвет текста | #cccccc (светло-серый) |
- Нажмите “Опубликовать”
5.5. Проверьте отображение подвала на сайте:
- Три колонки с виджетами отображаются корректно
- Копирайт находится в нижнем ряду
- На мобильных устройствах колонки перестраиваются в одну
Шаг 6. Настройка главной страницы (если тема поддерживает секции)
6.1. Создайте страницу для главной:
- Перейдите: Страницы → Добавить новую
- Заголовок: Главная
- Добавьте содержимое с использованием блоков:
Блок 1: Обложка (Cover)
- Добавьте блок “Обложка”
- Загрузите фоновое изображение
- Заголовок обложки: название сайта
- Текст: “Добро пожаловать на наш сайт”
- Добавьте кнопку “Подробнее” со ссылкой на страницу “О компании”
Блок 2: Заголовок H2
## Наши услуги
Блок 3: Три столбца с колонками
Колонка 1:
### Веб-разработка
Создание современных сайтов и веб-приложений с использованием актуальных технологий.
Колонка 2:
### Дизайн
Разработка уникального дизайна, ориентированного на пользователя и конверсию.
Колонка 3:
### Маркетинг
Комплексное продвижение сайта в поисковых системах и социальных сетях.
Блок 4: Разделитель
Блок 5: Заголовок H2
## Последние записи
Блок 6: Блок “Последние записи”
- Добавьте блок “Последние записи”
- Настройки:
- Количество записей: 3
- Отображать изображение записи: [X]
- Отображать дату: [X]
- Отображать отрывок: [X]
6.2. Опубликуйте страницу
6.3. Настройте отображение главной страницы:
- Перейдите: Настройки → Чтение
- В разделе “Настройки главной страницы” выберите: “Статическая страница”
- Главная страница: выберите созданную страницу “Главная”
- Страница записей: выберите страницу “Блог” (если создана) или оставьте по умолчанию
- Нажмите “Сохранить изменения”
6.4. Проверьте отображение главной страницы:
- Перейдите на сайт:
https://ВАШ-ПОДДОМЕН.epizy.com/ - Обложка отображается с фоновым изображением
- Секции услуг отображаются в три колонки
- Блок последних записей показывает 3 публикации
- На мобильных устройствах колонки перестраиваются вертикально
Шаг 7. Создание дочерней темы (опционально)
Способ А: Через плагин (рекомендуемый для InfinityFree)
7.1. Установите плагин для создания дочерней темы:
- Перейдите: Плагины → Добавить новый
- В поиске введите: Child Theme Configurator
- Нажмите “Установить”, затем “Активировать”
7.2. Создайте дочернюю тему:
- Перейдите: Инструменты → Child Themes
- Выберите родительскую тему: Astra
- Нажмите “Analyze” для анализа
- Выберите опцию: “CREATE a new Child Theme”
- Заполните поля:
| Поле | Значение |
|---|---|
| Name | Astra Child |
| Slug | astra-child |
| Description | Дочерняя тема для Astra |
| Author | Ваше имя |
| Version | 1.0.0 |
- Нажмите “Create new Child Theme”
- После создания нажмите “Activate and Preview”
7.3. Проверьте дочернюю тему:
- Перейдите: Внешний вид → Темы
- В списке должна отображаться дочерняя тема “Astra Child” с пометкой “Дочерняя тема от: Astra”
- Убедитесь, что внешний вид сайта не изменился
Способ Б: Вручную через File Manager InfinityFree
7.4. Откройте File Manager:
- Войдите в vPanel InfinityFree
- Перейдите: Advanced → File Manager (или File Manager)
- Перейдите в папку:
htdocs/wp-content/themes/
7.5. Создайте папку дочерней темы:
- Нажмите “New Folder” (Создать папку)
- Название:
astra-child
7.6. Создайте файл style.css:
- Откройте папку
astra-child - Нажмите “New File” (Создать файл)
- Название:
style.css - Откройте файл для редактирования и вставьте содержимое:
/*
Theme Name: Astra Child
Theme URI: https://ВАШ-ПОДДОМЕН.epizy.com
Description: Дочерняя тема для Astra
Author: Ваше Имя
Author URI: https://ВАШ-ПОДДОМЕН.epizy.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/
- Сохраните файл
7.7. Создайте файл functions.php:
- Нажмите “New File”
- Название:
functions.php - Вставьте содержимое:
- Сохраните файл
7.8. Активируйте дочернюю тему:
- Перейдите в админ-панель WordPress: Внешний вид → Темы
- Найдите “Astra Child” и нажмите “Активировать”
- Проверьте, что сайт отображается корректно
7.9. Добавьте произвольные стили в дочернюю тему:
- В Кастомайзере перейдите: Дополнительные CSS (Additional CSS)
- Добавьте примерный CSS-код:
- Нажмите “Опубликовать”
- Проверьте, что описание сайта стало курсивным
Дополнительные задания
Задание 1. Импорт демо-сайта из Starter Templates
Если установлена тема Astra с плагином Starter Templates:
- Перейдите: Внешний вид → Starter Templates (или Appearance → Starter Templates)
- Просмотрите доступные шаблоны
- Выберите шаблон, подходящий для бизнес-сайта
- Импортируйте шаблон (потребуется установка рекомендуемых плагинов)
- Изучите структуру импортированного сайта
- Замените контент демо-сайта на свой
Задание 2. Создание нескольких цветовых схем
- В Кастомайзере создайте и сохраните цветовую схему “Тёмная тема”
- Сравните отображение сайта с обеими схемами
- Опишите, какая схема лучше подходит для вашего типа контента
Задание 3. Настройка мобильного отображения
- В Кастомайзере нажмите иконку мобильного устройства (внизу панели предпросмотра)
- Настройте отображение шапки для мобильных устройств (боковое меню или гамбургер-меню)
- Проверьте адаптивность всех настроенных секций
- Убедитесь, что текст читабелен на мобильных устройствах без увеличения
Задание 4. Добавление произвольного CSS в дочернюю тему
- В файл
style.cssдочерней темы добавьте стили:
- Сохраните файл
- Проверьте отображение на сайте
Требования к отчёту
Отчёт должен содержать:
- Титульный лист с названием работы, ФИО студента, группы, датой
- Введение — цель и задачи работы (0.5 страницы)
- Теоретическая часть — описание тем WordPress, Кастомайзера и дочерних тем (1-2 страницы)
- Практическая часть — описание выполнения каждого шага:
- Скриншот раздела “Темы” с установленными темами
- Скриншот процесса установки новой темы
- Скриншоты настройки Кастомайзера (цвета, шрифты, логотип)
- Скриншоты шапки сайта до и после настройки
- Скриншоты подвала сайта до и после настройки
- Скриншоты главной страницы (настраиваемые секции)
- Скриншоты создания дочерней темы (если выполнено)
- Сравнительная таблица настроек:
| Элемент | До настройки | После настройки |
|---|---|---|
| … | … | … |
- Вывод — какие навыки получены, роль тем в формировании внешнего вида сайта (0.5-1 страница)
- Список источников — использованные материалы (минимум 3 источника)
Объём отчёта: 6-10 страниц
Формат: PDF или DOCX
Критерии оценки
| Критерий | Баллы | Описание |
|---|---|---|
| Установка темы | 15 | Новая тема установлена и активирована из репозитория |
| Кастомайзер (цвета, шрифты) | 20 | Настроены цвета и шрифты через Кастомайзер |
| Шапка сайта | 20 | Настроена шапка: логотип, заголовок, фон |
| Подвал сайта | 15 | Настроен подвал: виджеты, копирайт, фон |
| Главная страница | 15 | Настроена статическая главная с секциями |
| Дочерняя тема | 10 | Создана дочерняя тема (через плагин или вручную) |
| Отчёт | 5 | Структурированный отчёт со скриншотами |
Максимальный балл: 100
Шкала оценок:
- 90-100: отлично
- 75-89: хорошо
- 60-74: удовлетворительно
- менее 60: неудовлетворительно
Бонус за дополнительные задания: до +20 баллов
Контрольные вопросы для защиты
- Что такое тема WordPress и из каких файлов она состоит?
- В чём заключается принцип разделения логики от представления в WordPress?
- Чем отличаются бесплатные темы от премиумных?
- По каким критериям следует выбирать тему для сайта?
- Что такое Кастомайзер и какие настройки он позволяет изменить?
- Как загрузить и установить логотип сайта?
- Как изменить цветовую схему и шрифты сайта?
- Что такое дочерняя тема и зачем она нужна?
- Какие файлы обязательны для создания дочерней темы?
- Что произойдёт с кастомными изменениями, если обновить родительскую тему без дочерней?
Возможные проблемы и решения
Проблема: Тема не устанавливается из репозитория
Решение:
- Проверьте подключение к интернету
- Убедитесь, что на сервере достаточно свободного места
- Попробуйте установить тему вручную: скачайте архив с wordpress.org и загрузите через Внешний вид → Темы → Добавить → Загрузить тему
- Проверьте права на запись в папку
wp-content/themes/
Проблема: Изменения в Кастомайзере не отображаются
Решение:
- Нажмите кнопку “Опубликовать” для сохранения изменений
- Очистите кэш браузера (Ctrl+F5)
- Проверьте, что кэширующий плагин (если установлен) не мешает
- Отключите плагины кеширования временно для проверки
Проблема: Логотип не отображается или обрезается
Решение:
- Проверьте размер логотипа (рекомендуется PNG с прозрачным фоном, высота 50-80 px)
- В настройках шапки проверьте максимальную ширину логотипа
- Если тема обрезает логотип, увеличьте максимальный размер в настройках темы
Проблема: После обновления родительской темы изменения пропали
Решение:
- Это произошло, потому что изменения вносились напрямую в файлы родительской темы
- Создайте дочернюю тему и перенесите изменения в неё
- В дальнейшем всегда используйте дочернюю тему для кастомизации
Проблема: Дочерняя тема не активируется
Решение:
- Убедитесь, что поле
Templateвstyle.cssуказывает на правильную папку родительской темы - Проверьте, что родительская тема установлена
- Убедитесь, что файлы дочерней темы созданы в правильной папке:
wp-content/themes/astra-child/ - Проверьте права доступа к файлам дочерней темы
Проблема: Шрифты не загружаются на сайте
Решение:
- Некоторые шрифты загружаются из Google Fonts, что может быть недоступно в некоторых регионах
- Выберите системный шрифт (System Font) в настройках типографики
- Проверьте, что в файле
functions.phpдочерней темы не отключена загрузка шрифтов Google
Рекомендуемые источники
Официальная документация
- WordPress Themes: https://wordpress.org/support/article/using-themes/
- WordPress Theme Developer Handbook: https://developer.wordpress.org/themes/
- WordPress Customizer: https://developer.wordpress.org/themes/customize-api/
Учебные материалы
- WordPress.org Learn: https://learn.wordpress.org/
- WPBeginner — How to Install a WordPress Theme: https://www.wpbeginner.com/beginners-guide/how-to-install-a-wordpress-theme/
- Astra Theme Documentation: https://wpastra.com/docs/
Видеоуроки
- WordPress Academy: https://www.youtube.com/@WordPressAcademy
- WP101: https://www.wp101.com/
Приложение А. Пример структуры файлов дочерней темы
wp-content/themes/astra-child/
├── style.css — заголовок темы + произвольные стили
├── functions.php — подключение стилей родительской темы
├── screenshot.png — превью дочерней темы (1200×900 px)
└── (опционально)
├── header.php — переопределение шапки
├── footer.php — переопределение подвала
└── single.php — переопределение шаблона записи
Приложение Б. Сравнение популярных бесплатных тем WordPress
| Тема | Активные установки | Совместимость с Gutenberg | Скорость | Поддержка Starter Templates |
|---|---|---|---|---|
| Astra | 3 000 000+ | Да | Высокая | Да |
| OceanWP | 700 000+ | Да | Высокая | Да |
| GeneratePress | 400 000+ | Да | Очень высокая | Нет (Lite) |
| Neve | 300 000+ | Да | Высокая | Да |
| Twenty Twenty-Four | Стандартная | Да | Высокая | Нет |
Примечание: Количество установок указано ориентировочно и может изменяться. При выборе темы всегда проверяйте актуальные данные в репозитории.