Кафедра ИСиТ УО ВГТУ
  • Специальности
    • Экономика электронного бизнеса
    • Информационные системы
    • Information Control Systems
  • Каталог
  • Сайт кафедры
  • Сервисы
    • GitLab
    • JupyterHub
    • Soft
  1. ЭЭБ
  2. СУВК
  3. Практика
  4. Лаб. работа “Работа с темами оформления”
  • ЭЭБ
    • СУВК
      • Слайды
      • Теория
      • Практика
        • Лаб. работа “Анализ и выбор CMS”
        • Лаб. работа “Развертывание среды и установка CMS с помощью сервиса Segfault”
        • Лаб. работа “Развертывание среды и установка CMS с помощью Docker”
        • Лаб. работа “Развертывание среды и установка CMS на хостинге InfinityFree”
        • Лаб. работа “Базовая настройка сайта на WordPress”
        • Лаб. работа “Создание статических страниц и структуры сайта”
        • Лаб. работа “Работа с динамическим контентом”
        • Лаб. работа “Управление навигацией и виджетами”
        • Лаб. работа “Установка и настройка плагинов”
        • Лаб. работа “Работа с темами оформления”
    • ВТиП
      • Теория
        • Введение в веб технологии
        • Протокол HTTP
        • HTML
        • CSS
        • CSS фреймворки
        • JavaScript
        • jQuery
        • JSON
        • Архитектура и технологии создания веб-приложений
        • React
        • Маршрутизация в React
        • Создание серверных приложений с использованием Express.js
        • REST интерфейс и аутентификация Веб-приложений
        • Современные практики DevOps: от разработки до развертывания
        • Веб-безопасность: защита современных веб-приложений
      • Практика
        • Лаб. работа “Основы HTML и CSS”
        • Лаб. работа “Основы JavaScript”
        • Лаб. работа “Создание веб-приложений с использованием фреймворка Express.js”
        • Лаб. работа “Работа с базами данных в Express.js”
    • СТ
      • Теория
        • Введение в компьютерные сети
        • Топологии сетей
        • Кодирование и мультиплексирование
        • Стеки протоколов
        • Адресация в компьютерных сетях
        • Система доменных имен (DNS)
        • Программирование с использованием сокетов
        • Протокол HTTP
        • Введение в PHP
        • Работа с базами данных в PHP
        • Объектно-ориентированные возможности PHP
      • Практика
        • Программное обеспечение
        • Регистрация в JupyterHub
        • Лаб. работа “Почтовые протоколы”
        • Лаб. работа “Протокол FTP”
        • Лаб. работа “Протокол HTTP”
        • Лаб. работа “Программирование сетевых приложений с использованием сокетов”
        • Лаб. работа “Основы PHP”
        • Лаб работа “Массивы в PHP”

Содержание

  • Цель работы
  • Задачи
  • Ключевые навыки
  • Теоретическая часть
    • Понятие темы (шаблона)
    • Репозиторий тем. Платные и бесплатные темы
    • Кастомайзер (Customizer)
    • Дочерняя тема (Child Theme)
  • Практическая часть
    • Шаг 1. Подключение к сайту WordPress на InfinityFree
    • Шаг 2. Обзор установленных тем и установка новой темы
    • Шаг 3. Настройка темы через Кастомайзер — идентификация сайта, цвета, шрифты
    • Шаг 4. Настройка шапки сайта (логотип, заголовок)
    • Шаг 5. Настройка подвала сайта (виджеты, копирайт)
    • Шаг 6. Настройка главной страницы (если тема поддерживает секции)
    • Шаг 7. Создание дочерней темы (опционально)
  • Дополнительные задания
    • Задание 1. Импорт демо-сайта из Starter Templates
    • Задание 2. Создание нескольких цветовых схем
    • Задание 3. Настройка мобильного отображения
    • Задание 4. Добавление произвольного CSS в дочернюю тему
  • Требования к отчёту
  • Критерии оценки
  • Контрольные вопросы для защиты
  • Возможные проблемы и решения
    • Проблема: Тема не устанавливается из репозитория
    • Проблема: Изменения в Кастомайзере не отображаются
    • Проблема: Логотип не отображается или обрезается
    • Проблема: После обновления родительской темы изменения пропали
    • Проблема: Дочерняя тема не активируется
    • Проблема: Шрифты не загружаются на сайте
  • Рекомендуемые источники
    • Официальная документация
    • Учебные материалы
    • Видеоуроки
  • Приложение А. Пример структуры файлов дочерней темы
  • Приложение Б. Сравнение популярных бесплатных тем WordPress
  1. ЭЭБ
  2. СУВК
  3. Практика
  4. Лаб. работа “Работа с темами оформления”

Лаб. работа “Работа с темами оформления”

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

Бизюк Андрей

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

13 апреля 2026 г.

Цель работы

Научиться работать с темами оформления 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 дочерней темы:

<?php
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_uri(), array('parent-style'));
});

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

Шаг 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. Найдите новую тему в репозитории:

  1. Нажмите кнопку “Добавить новую” в верхней части экрана
  2. В строке поиска введите: Astra
  3. Найдите тему “Astra” в результатах (разработчик Brainstorm Force)
  4. Нажмите “Установить”, а затем “Активировать”

Альтернатива: Можно также установить тему OceanWP (разработчик OceanWP) — она также бесплатна и поддерживает кастомизацию.

2.4. Изучите страницу темы после активации:

После активации Astra может отобразиться экран приветствия с предложением:

  • Импортировать готовый сайт (Starter Templates)
  • Установить рекомендуемые плагины
  • Перейти к настройке темы

Закройте этот экран (или перейдите к настройкам), если не планируете импортировать демо-сайт.

2.5. Убедитесь, что тема активирована:

  1. Перейдите: Внешний вид → Темы
  2. Тема Astra должна быть отмечена как “Активна”

Шаг 3. Настройка темы через Кастомайзер — идентификация сайта, цвета, шрифты

3.1. Откройте Кастомайзер:

Внешний вид → Настроить

3.2. Настройте идентификацию сайта:

  1. В левом меню Кастомайзера выберите: Идентификация сайта (Site Identity)
  2. Настройте следующие поля:
Поле Значение
Название сайта Название вашего сайта (например, “Мой блог”)
Редакторский слоган Краткое описание сайта
Логотип Загрузите логотип (см. Шаг 4)
Иконка сайта (Favicon) Загрузите небольшое изображение (512×512 px)
  1. Нажмите “Опубликовать”, чтобы сохранить изменения

3.3. Настройте цвета:

  1. В левом меню Кастомайзера выберите раздел Глобальные (Global) → Цвета (Colors)
  2. В зависимости от версии Astra, настройте:
Параметр Значение
Цвет фона сайта #ffffff (белый) или другой
Текст основного текста #333333 (тёмно-серый)
Цвет ссылок #1e73be (синий) или другой
Цвет заголовков #222222 (тёмный)
  1. В разделе “Палитра” (Palette) можно выбрать одну из предустановленных цветовых схем
  2. Нажмите “Опубликовать”

3.4. Настройте шрифты:

  1. В левом меню выберите: Глобальные → Типографика (Typography)
  2. Настройте шрифт основного текста (Body Font):
Параметр Значение
Семейство шрифта Open Sans (по умолчанию) или другой
Размер шрифта 16 px
Вес шрифта 400 (Normal)
  1. Настройте шрифт заголовков (Headings Font):
Параметр Значение
Семейство шрифтов Montserrat или другой
Размер H1 36 px
Размер H2 28 px
Размер H3 22 px
  1. Нажмите “Опубликовать”

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. Настройте фон шапки:

  1. Нажмите на значок настроек ряда шапки (иконка шестерёнки)
  2. В разделе “Фон” (Background) выберите:
Параметр Значение
Цвет фона #1a1a2e (тёмно-синий) или другой
Цвет текста #ffffff (белый)
  1. Нажмите “Опубликовать”

4.4. Настройте нижнюю границу шапки:

  1. В настройках шапки найдите раздел “Граница” (Border)
  2. Установите нижнюю границу:
Параметр Значение
Ширина 1 px
Цвет #e0e0e0

4.5. Проверьте отображение шапки:

  • Логотип отображается и пропорционально масштабируется
  • Заголовок сайта или меню находится в центре
  • Поиск доступен в правой части
  • На мобильном устройстве (сузьте окно браузера) шапка адаптируется

Шаг 5. Настройка подвала сайта (виджеты, копирайт)

5.1. Перейдите к настройке подвала:

Внешний вид → Настроить → Подвал сайта (Footer Builder)

5.2. Настройте ряды подвала:

В теме Astra подвал также состоит из нескольких рядов. Настройте верхний ряд (Footer Widgets):

  1. Установите количество колонок: 3
  2. В каждой колонке добавьте виджеты:

Колонка 1:

  • Тип виджета: Текст
  • Содержимое: название сайта и краткое описание

Колонка 2:

  • Тип виджета: Навигация (меню)
  • Выберите меню: “Основное меню” (или создайте отдельное “Меню подвала”)

Колонка 3:

  • Тип виджета: Текст
  • Содержимое: контактная информация (адрес, телефон, email)

5.3. Настройте нижний ряд подвала (Footer Bar):

  1. В нижнем ряду настройте элементы:
Позиция Элемент Содержимое
Левая Текст копирайта © 2026 Название сайта. Все права защищены.
Правая Текст Создано на WordPress

5.4. Настройте фон подвала:

  1. Нажмите на значок настроек ряда подвала
  2. В разделе “Фон” выберите:
Параметр Значение
Цвет фона #1a1a2e (тёмно-синий)
Цвет текста #cccccc (светло-серый)
  1. Нажмите “Опубликовать”

5.5. Проверьте отображение подвала на сайте:

  • Три колонки с виджетами отображаются корректно
  • Копирайт находится в нижнем ряду
  • На мобильных устройствах колонки перестраиваются в одну

Шаг 6. Настройка главной страницы (если тема поддерживает секции)

6.1. Создайте страницу для главной:

  1. Перейдите: Страницы → Добавить новую
  2. Заголовок: Главная
  3. Добавьте содержимое с использованием блоков:

Блок 1: Обложка (Cover)

  1. Добавьте блок “Обложка”
  2. Загрузите фоновое изображение
  3. Заголовок обложки: название сайта
  4. Текст: “Добро пожаловать на наш сайт”
  5. Добавьте кнопку “Подробнее” со ссылкой на страницу “О компании”

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

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

Блок 3: Три столбца с колонками

Колонка 1:

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

Колонка 2:

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

Колонка 3:

### Маркетинг
Комплексное продвижение сайта в поисковых системах и социальных сетях.

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

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

## Последние записи

Блок 6: Блок “Последние записи”

  1. Добавьте блок “Последние записи”
  2. Настройки:
    • Количество записей: 3
    • Отображать изображение записи: [X]
    • Отображать дату: [X]
    • Отображать отрывок: [X]

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

6.3. Настройте отображение главной страницы:

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

6.4. Проверьте отображение главной страницы:

  • Перейдите на сайт: https://ВАШ-ПОДДОМЕН.epizy.com/
  • Обложка отображается с фоновым изображением
  • Секции услуг отображаются в три колонки
  • Блок последних записей показывает 3 публикации
  • На мобильных устройствах колонки перестраиваются вертикально

Шаг 7. Создание дочерней темы (опционально)

Способ А: Через плагин (рекомендуемый для InfinityFree)

7.1. Установите плагин для создания дочерней темы:

  1. Перейдите: Плагины → Добавить новый
  2. В поиске введите: Child Theme Configurator
  3. Нажмите “Установить”, затем “Активировать”

7.2. Создайте дочернюю тему:

  1. Перейдите: Инструменты → Child Themes
  2. Выберите родительскую тему: Astra
  3. Нажмите “Analyze” для анализа
  4. Выберите опцию: “CREATE a new Child Theme”
  5. Заполните поля:
Поле Значение
Name Astra Child
Slug astra-child
Description Дочерняя тема для Astra
Author Ваше имя
Version 1.0.0
  1. Нажмите “Create new Child Theme”
  2. После создания нажмите “Activate and Preview”

7.3. Проверьте дочернюю тему:

  1. Перейдите: Внешний вид → Темы
  2. В списке должна отображаться дочерняя тема “Astra Child” с пометкой “Дочерняя тема от: Astra”
  3. Убедитесь, что внешний вид сайта не изменился

Способ Б: Вручную через File Manager InfinityFree

7.4. Откройте File Manager:

  1. Войдите в vPanel InfinityFree
  2. Перейдите: Advanced → File Manager (или File Manager)
  3. Перейдите в папку: htdocs/wp-content/themes/

7.5. Создайте папку дочерней темы:

  1. Нажмите “New Folder” (Создать папку)
  2. Название: astra-child

7.6. Создайте файл style.css:

  1. Откройте папку astra-child
  2. Нажмите “New File” (Создать файл)
  3. Название: style.css
  4. Откройте файл для редактирования и вставьте содержимое:
/*
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
*/
  1. Сохраните файл

7.7. Создайте файл functions.php:

  1. Нажмите “New File”
  2. Название: functions.php
  3. Вставьте содержимое:
<?php
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_uri(), array('parent-style'));
});
  1. Сохраните файл

7.8. Активируйте дочернюю тему:

  1. Перейдите в админ-панель WordPress: Внешний вид → Темы
  2. Найдите “Astra Child” и нажмите “Активировать”
  3. Проверьте, что сайт отображается корректно

7.9. Добавьте произвольные стили в дочернюю тему:

  1. В Кастомайзере перейдите: Дополнительные CSS (Additional CSS)
  2. Добавьте примерный CSS-код:
.site-description {
    font-style: italic;
    color: #666666;
}
  1. Нажмите “Опубликовать”
  2. Проверьте, что описание сайта стало курсивным

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

Задание 1. Импорт демо-сайта из Starter Templates

Если установлена тема Astra с плагином Starter Templates:

  1. Перейдите: Внешний вид → Starter Templates (или Appearance → Starter Templates)
  2. Просмотрите доступные шаблоны
  3. Выберите шаблон, подходящий для бизнес-сайта
  4. Импортируйте шаблон (потребуется установка рекомендуемых плагинов)
  5. Изучите структуру импортированного сайта
  6. Замените контент демо-сайта на свой

Задание 2. Создание нескольких цветовых схем

  1. В Кастомайзере создайте и сохраните цветовую схему “Тёмная тема”
  2. Сравните отображение сайта с обеими схемами
  3. Опишите, какая схема лучше подходит для вашего типа контента

Задание 3. Настройка мобильного отображения

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

Задание 4. Добавление произвольного CSS в дочернюю тему

  1. В файл style.css дочерней темы добавьте стили:
.entry-content h2 {
    border-bottom: 2px solid #1e73be;
    padding-bottom: 10px;
}

.widget-title {
    background-color: #f0f0f0;
    padding: 10px 15px;
    border-left: 4px solid #1e73be;
}
  1. Сохраните файл
  2. Проверьте отображение на сайте

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

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

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

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

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


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

Критерий Баллы Описание
Установка темы 15 Новая тема установлена и активирована из репозитория
Кастомайзер (цвета, шрифты) 20 Настроены цвета и шрифты через Кастомайзер
Шапка сайта 20 Настроена шапка: логотип, заголовок, фон
Подвал сайта 15 Настроен подвал: виджеты, копирайт, фон
Главная страница 15 Настроена статическая главная с секциями
Дочерняя тема 10 Создана дочерняя тема (через плагин или вручную)
Отчёт 5 Структурированный отчёт со скриншотами

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

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

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

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


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

  1. Что такое тема WordPress и из каких файлов она состоит?
  2. В чём заключается принцип разделения логики от представления в WordPress?
  3. Чем отличаются бесплатные темы от премиумных?
  4. По каким критериям следует выбирать тему для сайта?
  5. Что такое Кастомайзер и какие настройки он позволяет изменить?
  6. Как загрузить и установить логотип сайта?
  7. Как изменить цветовую схему и шрифты сайта?
  8. Что такое дочерняя тема и зачем она нужна?
  9. Какие файлы обязательны для создания дочерней темы?
  10. Что произойдёт с кастомными изменениями, если обновить родительскую тему без дочерней?

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

Проблема: Тема не устанавливается из репозитория

Решение:

  • Проверьте подключение к интернету
  • Убедитесь, что на сервере достаточно свободного места
  • Попробуйте установить тему вручную: скачайте архив с 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 Стандартная Да Высокая Нет

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

Наверх
Лаб. работа “Установка и настройка плагинов”
ВТиП