Кастомизация шаблона DLE: сравниваем подходы

Кастомизация DLE редко начинается с пустого файла: обычно нужно сохранить рабочие модули, но заменить визуальный слой — шапку, сетку, карточки публикаций и мобильную версию. Для DLE 17.x есть три практических пути: править штатный шаблон, сделать собственную тему на его основе или собрать разметку почти с нуля. Они дают разный результат по срокам, стоимости поддержки и риску сломать обновление.

Сначала определите границы изменений

Перед правкой шаблона зафиксируйте, что именно меняется. Дизайн главной страницы и страницы статьи — это задача шаблона. Логика авторизации, комментариев, поиска и публикации материалов относится к ядру или модулям DLE. Смешивать эти уровни опасно: визуальную задачу легко превратить в набор правок PHP, которые придётся восстанавливать после каждого обновления.

• Визуальный слой: HTML-шаблоны, CSS, изображения, шрифты и адаптивная сетка.
• Данные: поля новости, категории, автор, дата, рейтинг и комментарии, которые выводятся тегами DLE.
• Поведение: AJAX, формы, поиск, авторизация и сторонние модули.

Шаблон DLE¹ — набор файлов темы, через которые движок формирует страницы. В нём есть HTML-разметка и специальные теги DLE, но сам шаблон не заменяет серверную логику CMS.

Три подхода к кастомизации

1. Править готовую тему напрямую

Это самый быстрый путь для небольшого сайта. Вы открываете файлы активной темы, меняете классы, размеры, цвета и отдельные блоки. Такой вариант разумен, если нужно за вечер привести внешний вид к фирменным цветам, а структура темы уже подходит.

Плюс — минимум времени на старт. Минус — каждое обновление темы или перенос файлов может затереть правки. Если изменения записаны прямо в исходный CSS, через месяц трудно понять, какие строки были добавлены вами, а какие пришли от разработчика темы.

2. Скопировать тему и развивать собственную версию

Это базовый вариант для коммерческого проекта. Сначала сохраните копию исходной темы под новым именем, подключите её в настройках DLE и меняйте уже копию. Оригинал останется точкой сравнения, а обновления можно проверять по файлам до публикации.

Копирование не превращает тему в изолированный пакет. Если вы позже обновите DLE, придётся проверить совместимость тегов, шаблонов модулей и сторонних дополнений. Но риск управляем: изменения находятся в одной теме, а не разбросаны по ядру и папке engine.

3. Собрать тему с нуля

Этот путь оправдан, когда готовая тема навязывает неподходящую структуру: лишние блоки, старую сетку, десятки зависимостей и сложную мобильную версию. Вы оставляете только нужные шаблоны и постепенно добавляете страницы, формы и состояния интерфейса.

Цена — не только время верстки. Нужно отдельно проверить страницу новости, список категорий, поиск, страницу пользователя, форму входа, комментарии, пагинацию и сообщения об ошибках. Если забыть один из сценариев, пользователи увидят пустой экран или неработающую форму.

Если вы не можете за пять минут перечислить файлы, в которых меняли тему, проект уже зависит не от дизайна, а от удачи.

Как организовать работу с копией темы

Для большинства сайтов на DLE 17.x оптимален второй вариант: копия готовой темы плюс отдельный файл собственных стилей. Так вы не переписываете всё сразу и можете откатывать изменения частями.

1. Сделайте резервную копию. Сохраните файлы сайта и базу данных до начала работ. Отдельно запишите текущую активную тему и версию DLE. Проверка: вы можете развернуть копию на тестовом домене или локальном сервере.
2. Скопируйте тему. Скопируйте каталог активной темы в новый каталог с понятным именем, например brand-theme. Не меняйте файлы ядра и не переименовывайте служебные теги. Проверка: новая тема появляется в списке доступных тем и открывает главную страницу без PHP-ошибки.
3. Составьте карту страниц. Отметьте, где находятся главная страница, короткая и полная новость, комментарии, поиск, авторизация и профиль пользователя. Проверка: для каждого сценария есть отдельная страница, которую можно открыть в браузере.
4. Вынесите свои стили отдельно. Не смешивайте авторские правила с исходным CSS без необходимости. Добавляйте изменения в отдельный файл, подключённый темой, либо в конец основного файла после проверки способа подключения в вашей версии. Проверка: в инструментах разработчика браузера видно правило из вашего файла.
5. Меняйте разметку небольшими блоками. Сначала шапка и навигация, затем карточка новости, боковая колонка и подвал. После каждого блока проверяйте десктопную и мобильную ширину. Проверка: в консоли браузера нет новых ошибок, а основные ссылки и формы работают.
6. Проверьте обновление на копии. Перед обновлением DLE сравните изменённые файлы с новой версией темы и движка. Проверка: после обновления тестовый сайт открывает минимум одну новость, поиск, комментарии и форму входа.

CSS для отдельного слоя может выглядеть так:

/* DLE 17.x: собственные правила темы */
.site-header {
    background: #111827;
    color: #ffffff;
}

.news-card__title {
    color: #111827;
    font-size: 1.25rem;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .site-header {
        padding: 12px 16px;
    }

    .news-card__title {
        font-size: 1.05rem;
    }
}

Названия классов в примере должны совпадать с вашей HTML-разметкой. Не добавляйте CSS-классы в надежде, что DLE создаст их автоматически: движок выводит свои теги, а классы задаёте вы в шаблоне.

Что обычно ломается

Изменения исчезают после обновления

Причина почти всегда в правке штатной темы или файлов ядра. Храните тему в резервной копии, а изменения — в системе контроля версий или хотя бы в архиве с датой. Обновление сначала проверяйте на копии сайта, а не на рабочем домене.

Стили работают на одной странице, но не на другой

У короткой и полной новости могут быть разные контейнеры и классы. Используйте инструменты разработчика браузера и проверяйте конкретный DOM-элемент, а не только название страницы. Если правило перечёркнуто, его перекрывает более специфичный селектор или стиль, загруженный позже.

После замены разметки пропала функция

Так бывает, если при переписывании удалён тег DLE или скрытый контейнер, который использует модуль. Восстановите исходный фрагмент и возвращайте изменения по одному. Сторонние модули проверяйте отдельно: они могут требовать собственные шаблоны, а не только файлы основной темы.

Мобильная версия выглядит как уменьшенный десктоп

Адаптивность не появляется автоматически после изменения ширины контейнера. Проверьте меню, таблицы, изображения, формы комментариев и длинные заголовки на ширине около 360–390 пикселей. Точную контрольную ширину выбирайте по аналитике сайта, а не только по размеру своего телефона.

Когда какой вариант выбирать

Если нужно изменить цветовую схему, логотип и несколько отступов, прямая правка готовой темы с резервной копией будет достаточной. Если сайт уже получает трафик и должен пережить обновления, выбирайте копию темы и отдельный слой CSS. Если готовая тема мешает структуре страниц, её зависимости устарели или дизайн полностью уникален, собирайте собственную тему, но сначала составьте список всех пользовательских сценариев.

Производительность не следует оценивать только по размеру CSS. Измеряйте время загрузки главной страницы и страницы новости, количество запросов, размер изображений и показатели Core Web Vitals в условиях, близких к реальным. Оптимизация кеширования и серверных настроек — отдельная тема; здесь важна только связь шаблона с количеством ресурсов.

Что делать дальше

Начните с копии активной темы DLE 17.x и соберите таблицу изменений: файл, назначение, дата и причина правки. После каждого заметного блока проверяйте главную страницу, полную новость, поиск, комментарии и мобильное меню. Когда дизайн стабилизируется, добавьте резервное копирование и сравнение файлов в процесс обновления — это дешевле, чем восстанавливать сайт после неудачного релиза.

¹ В DLE термин «шаблон» обычно означает набор файлов оформления и разметки, а не отдельный плагин. Конкретный состав файлов и доступные теги зависят от версии движка и подключённых модулей.