Как изменить шаблон сайта — сменить дизайн без потери контента
Дизайн сайта устарел, а контент жалко терять? Хорошая новость: сменить шаблон можно без потери текстов, изображений и страниц. Но делать это нужно по плану, иначе вместо обновлённого дизайна вы получите сломанный сайт с битыми ссылками, пропавшими меню и упавшим SEO. Разберём процесс для всех популярных платформ.
Смена шаблона WordPress
WordPress — самая гибкая CMS для смены дизайна, но и самая требовательная к подготовке. Вот пошаговый план.
Шаг 1. Выбор темы
В админке Внешний вид → Темы → Добавить. Можно выбирать из официального каталога WordPress (бесплатно) или загрузить премиум-тему (от $30 до $120). При выборе обращайте внимание на: совместимость с версией WordPress, частоту обновлений (тему должны обновлять раз в 1-2 месяца), поддержку популярных плагинов (Elementor, WooCommerce, Yoast SEO), демо-сайт — убедитесь, что стиль подходит.
Шаг 2. Child theme — обязательно
Никогда не редактируйте файлы родительской темы напрямую. При обновлении темы все правки сотрутся. Создайте дочернюю тему (child theme):
/* style.css дочерней темы */
/*
Theme Name: Моя тема (child)
Template: parent-theme-folder
*/
@import url('../parent-theme/style.css');
/* ваши кастомные стили */
Файл functions.php дочерней темы наследует все функции родительской, но позволяет добавлять свои. При обновлении родительской темы ваши изменения сохраняются.
Шаг 3. Настройка после активации
После активации новой темы обязательно проверьте:
— Меню: Внешний вид → Меню — новая тема может не подхватить старые назначения. Создайте меню заново, укажите расположение (верхнее, нижнее, мобильное).
— Виджеты: Внешний вид → Виджеты — позиции сайдбара и подвала часто отличаются. Переназначьте вручную.
— Главная страница: Настройки → Чтение — убедитесь, что выбрана та же статическая страница или лента записей.
— Шорткоды: если на страницах есть шорткоды от плагинов, а плагин отключён — они отобразятся как обычный текст. Проверьте, все ли нужные плагины активны.
Шаг 4. Кастомные типы записей
Если на сайте были кастомные типы записей (отзывы, портфолио, кейсы), новая тема может их не поддерживать. В этом случае либо ищите тему с поддержкой CPT, либо добавляйте поддержку через functions.php дочерней темы.
WordPress Gutenberg блоки тоже могут отображаться по-разному в разных темах. После активации откройте 2-3 страницы с разным контентом и проверьте вёрстку.
Как не потерять SEO при смене шаблона
Смена дизайна — стресс не только для вас, но и для поисковиков. Чтобы не потерять позиции:
— Сохраните URL-структуру. Новая тема не должна менять адреса страниц. Если меняются slug'и — настройте 301 редиректы со старых на новые.
— Проверьте мета-теги. Убедитесь, что title и description выводятся корректно (помогает Yoast SEO или Rank Math).
— Микроразметка. Новая тема может не поддерживать Schema.org разметку. Проверьте через валидатор Яндекса или Google Rich Results Test.
— Скорость загрузки. Новая тема может быть тяжелее старой. Прогоните через PageSpeed Insights до и после.
— Карта сайта. Обновите sitemap.xml — новая тема могла добавить новые типы страниц.
— Мониторьте 404. После смены включите проверку битых ссылок через Screaming Frog или онлайн-сервис.
Смена шаблона на Tilda
В Tilda шаблон — это стартовая точка при создании страницы. Поменять шаблон уже существующей страницы нельзя — придётся создавать новую. Но есть лайфхаки:
— Zero Block. Если изначально страница сделана на Zero Block, вы можете скопировать блоки и перенести их на новую страницу с другим шаблоном.
— Копирование между проектами. В Tilda есть функция «Копировать страницу в другой проект». Перенесите страницу, затем смените шаблон проекта — контент сохранится (но расположение блоков может съехать).
— Экспорт/импорт. Через раздел «Настройки проекта» → «Экспорт» можно сохранить все страницы. Затем создать новый проект с нужным шаблоном и импортировать.
— Лайфхак: сохраните старую страницу как PDF или скриншот и повторите структуру на новом шаблоне. Это manual work, но результат точнее.
Смена дизайна на чистом HTML/CSS
Самый прозрачный, но и самый трудоёмкий вариант. Если сайт свёрстан руками:
— Принцип разделения контента и представления: контент в HTML-файлах, стили в CSS. Замените CSS-файл — и сайт изменит внешний вид без правки HTML. В идеале HTML должен содержать только семантическую разметку, а все визуальные свойства — в CSS.
— Если структура HTML сильно меняется (другое расположение блоков, новая шапка, другой футер) — придётся править каждый HTML-файл. Чтобы в будущем избежать этого, используйте шаблонизаторы: PHP include (если сайт на PHP), Node.js с EJS или Pug, или хотя бы SSI (Server Side Includes) на Nginx.
CSS-рефакторинг: при смене дизайна не обязательно писать CSS с нуля. Используйте CSS custom properties (переменные) — поменяли значения в :root, и цвета, шрифты, отступы обновились на всём сайте:
:root {
--primary: #6c5ce7;
--bg: #ffffff;
--text: #1a1a2e;
--radius: 12px;
--font: 'Inter', sans-serif;
}
/* При смене дизайна меняем только переменные */
:root[data-theme="redesign"] {
--primary: #e74c3c;
--bg: #fafafa;
--radius: 4px;
}
Подготовка staging-среды перед сменой
Самый частый совет, который всё равно игнорируют. Staging (тестовая копия сайта) абсолютно необходима:
— WordPress-хостинги (WP Engine, Kinsta, Beget) дают staging в один клик в панели управления
— Если нет — создайте поддомен типа test.example.ru, скопируйте туда все файлы и базу данных
— На staging активируйте новую тему, настройте, протестируйте все страницы
— Только после успешного тестирования переносите на бой
Что ломается чаще всего и как чинить
| Проблема | Причина | Решение |
|---|---|---|
| Меню пропало | Тема не поддерживает это расположение меню | Назначить меню заново в Внешний вид → Меню |
| Изображения съехали | Другие размеры миниатюр в теме | Перегенерировать миниатюры плагином Regenerate Thumbnails |
| Шорткоды отображаются как текст | Плагин отключён или несовместим | Включить или заменить плагин |
| Скорость упала | Тема «тяжёлая», много скриптов | Оптимизировать через кэширование, CDN, отложить скрипты |
| Адаптив развалился | Тема не адаптивна или плохо свёрстана | Добавить медиа-запросы через дополнительный CSS |
| Хлебные крошки не работают | Тема использует другую разметку или не выводит их | Добавить через functions.php или плагин |
Бэкап: что обязательно сохранить перед сменой
До любого изменения создайте полную резервную копию:
— Файлы: все файлы сайта (через FTP или панель хостинга)
— База данных: экспорт SQL через phpMyAdmin или средства хостинга
— Текущая тема: скачайте папку с темой — пригодится, если придётся откатываться
— Плагины: сохраните список активных плагинов (через плагин WP Tools или просто скриншот)
— Настройки: экспортируйте настройки SEO-плагина, формы, контакты — через встроенные инструменты экспорта
На WordPress можно использовать плагины UpdraftPlus, BackWPup или All-in-One WP Migration для полного бэкапа в один клик.
Перед сменой шаблона — обязательно бэкап. Лучше сделать это на staging-копии сайта. Если нет staging — попросите хостинг. 80% проблем при смене шаблона решаются за 15 минут на staging и за 2 дня на боевом сайте.