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

Цель работы

Научиться работать с темами оформления WordPress: устанавливать, настраивать и кастомизировать внешний вид сайта с помощью Кастомайзера, а также создавать дочернюю тему для безопасного внесения изменений.

Задачи

• Изучить установленные темы и установить новую тему из репозитория
• Настроить идентификацию сайта (название, описание, логотип)
• Настроить цветовую схему и шрифты через Кастомайзер
• Настроить шапку и подвал сайта
• Настроить главную страницу (если тема поддерживает секции)
• Создать дочернюю тему (опционально)

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

• Поиск и установка тем из репозитория WordPress
• Настройка внешнего вида через Кастомайзер (Customizer)
• Управление логотипом, цветами и шрифтами
• Настройка шапки и подвала сайта
• Создание дочерней темы (Child Theme)

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

Понятие темы (шаблона)

Тема (Theme) — это набор файлов (шаблонов, стилей, скриптов и изображений), определяющий внешний вид и функциональность сайта WordPress. Тема отвечает за отображение контента, не затрагивая сам контент.

Принцип разделения логики и представления:

WordPress реализует паттерн MVC (Model-View-Controller):

Файловая структура типичной темы:

 1wp-content/themes/my-theme/
 2├── style.css          — основной файл стилей (обязателен)
 3├── index.php          — главный шаблон (обязателен)
 4├── functions.php      — функции темы
 5├── header.php         — шапка сайта
 6├── footer.php         — подвал сайта
 7├── sidebar.php        — боковая панель
 8├── single.php         — шаблон записи
 9├── page.php           — шаблон страницы
10├── archive.php        — шаблон архивов
11├── 404.php            — страница ошибки 404
12├── screenshot.png     — превью темы (1200×900 px)
13└── assets/
14    ├── css/           — дополнительные стили
15    ├── js/            — скрипты
16    └── images/        — изображения темы

Репозиторий тем. Платные и бесплатные темы

Репозиторий тем WordPress — официальный каталог тем на https://wordpress.org/themes/, где каждая тема проходит проверку на безопасность и качество кода.

Классификация тем:

Критерии выбора темы:

• Количество активных установок
• Оценка и количество отзывов
• Дата последнего обновления (не старше 6 месяцев)
• Совместимость с текущей версией WordPress
• Поддержка адаптивного дизайна (responsive)
• Скорость загрузки
• Наличие поддержки от разработчика

Кастомайзер (Customizer)

Кастомайзер — встроенный инструмент WordPress для визуальной настройки внешнего вида сайта с предпросмотром изменений в реальном времени.

Путь к Кастомайзеру:

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

Основные разделы Кастомайзера:

Дочерняя тема (Child Theme)

Дочерняя тема — тема, наследующая функциональность и стили родительской темы, позволяющая безопасно вносить изменения.

Зачем нужна дочерняя тема:

• Изменения не теряются при обновлении родительской темы
• Безопасное редактирование файлов шаблонов
• Возможность переопределения функций родительской темы
• Сохранение кастомных CSS-стилей

Структура дочерней темы:

1wp-content/themes/astra-child/
2├── style.css          — обязательный файл (содержит заголовок темы)
3└── functions.php      — подключение стилей родительской темы

Минимальное содержимое style.css дочерней темы:

 1/*
 2Theme Name: Astra Child
 3Theme URI: https://example.com
 4Description: Дочерняя тема для Astra
 5Author: Ваше Имя
 6Author URI: https://example.com
 7Template: astra
 8Version: 1.0.0
 9License: GNU General Public License v2 or later
10License URI: http://www.gnu.org/licenses/gpl-2.0.html
11Text Domain: astra-child
12*/

Ключевое поле: Template: astra — указывает на папку родительской темы (без пробелов, в нижнем регистре).

Минимальное содержимое functions.php дочерней темы:

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

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

Шаг 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. Изучите установленные темы:

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. Настройте следующие поля:

3. Нажмите “Опубликовать”, чтобы сохранить изменения

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

1. В левом меню Кастомайзера выберите раздел Глобальные (Global) → Цвета (Colors)
2. В зависимости от версии Astra, настройте:

3. В разделе “Палитра” (Palette) можно выбрать одну из предустановленных цветовых схем
4. Нажмите “Опубликовать”

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

1. В левом меню выберите: Глобальные → Типографика (Typography)
2. Настройте шрифт основного текста (Body Font):

3. Настройте шрифт заголовков (Headings Font):

4. Нажмите “Опубликовать”

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) выберите:

3. Нажмите “Опубликовать”

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

1. В настройках шапки найдите раздел “Граница” (Border)
2. Установите нижнюю границу:

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

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

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

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

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

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

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

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

Колонка 1:

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

Колонка 2:

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

Колонка 3:

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

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

1. В нижнем ряду настройте элементы:

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

1. Нажмите на значок настроек ряда подвала
2. В разделе “Фон” выберите:

3. Нажмите “Опубликовать”

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

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

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

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

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

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

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

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

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

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

Колонка 1:

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

Колонка 2:

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

Колонка 3:

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

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

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

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

Блок 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. Заполните поля:

6. Нажмите “Create new Child Theme”
7. После создания нажмите “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. Откройте файл для редактирования и вставьте содержимое:

 1/*
 2Theme Name: Astra Child
 3Theme URI: https://ВАШ-ПОДДОМЕН.epizy.com
 4Description: Дочерняя тема для Astra
 5Author: Ваше Имя
 6Author URI: https://ВАШ-ПОДДОМЕН.epizy.com
 7Template: astra
 8Version: 1.0.0
 9License: GNU General Public License v2 or later
10License URI: http://www.gnu.org/licenses/gpl-2.0.html
11Text Domain: astra-child
12*/

5. Сохраните файл

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

1. Нажмите “New File”
2. Название: functions.php
3. Вставьте содержимое:

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

4. Сохраните файл

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

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

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

1. В Кастомайзере перейдите: Дополнительные CSS (Additional CSS)
2. Добавьте примерный CSS-код:

1.site-description {
2    font-style: italic;
3    color: #666666;
4}

3. Нажмите “Опубликовать”
4. Проверьте, что описание сайта стало курсивным

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

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

 1.entry-content h2 {
 2    border-bottom: 2px solid #1e73be;
 3    padding-bottom: 10px;
 4}
 5
 6.widget-title {
 7    background-color: #f0f0f0;
 8    padding: 10px 15px;
 9    border-left: 4px solid #1e73be;
10}

2. Сохраните файл
3. Проверьте отображение на сайте

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

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

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. Что такое тема 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/

Приложение А. Пример структуры файлов дочерней темы

1wp-content/themes/astra-child/
2├── style.css          — заголовок темы + произвольные стили
3├── functions.php      — подключение стилей родительской темы
4├── screenshot.png     — превью дочерней темы (1200×900 px)
5└── (опционально)
6    ├── header.php     — переопределение шапки
7    ├── footer.php     — переопределение подвала
8    └── single.php     — переопределение шаблона записи

Приложение Б. Сравнение популярных бесплатных тем WordPress

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