Одной из частых задач при работе с Elementor является добавление пользовательских стилей CSS для тонкой настройки внешнего вида сайта. Однако многие разработчики сталкиваются с проблемой: внесённые изменения пропадают после обновления темы или плагина. В этой статье мы разберём, как правильно добавить собственный CSS в Elementor, чтобы сохранить изменения и сделать их максимально устойчивыми к обновлениям.
Почему нельзя просто вставлять CSS в файлы темы или плагина
Многие начинают с правки CSS прямо в файлах темы или плагина, например, в style.css. Это кажется быстрым решением, но при обновлении темы изменения перезаписываются, и ваша кастомизация теряется. Особенно это актуально для популярных тем и плагинов, которые регулярно обновляются.
Для решения этой проблемы существуют лучшие подходы, которые позволят сохранить ваши стили в целостности вне зависимости от обновлений.
Использование дочерней темы для добавления собственного CSS
Один из классических и надёжных способов — создать дочернюю тему (child theme) и добавить CSS в её style.css. Это гарантирует, что ваши изменения не затронут обновления родительской темы.
Для создания дочерней темы:
- Создайте папку в wp-content/themes, например, mytheme-child.
- Создайте файл style.css с обязательным заголовком:
/*
Theme Name: MyTheme Child
Template: mytheme
*/Где Template — папка вашей родительской темы.
Затем подключите CSS дочерней темы через functions.php дочерней темы:
function wpelementor_enqueue_child_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'wpelementor_enqueue_child_styles');После активации дочерней темы ваши стили будут добавлены поверх стилей родителя и не удалятся при обновлении.
Добавление CSS в Elementor через дочернюю тему
Теперь вы можете писать свои стили в style.css дочерней темы, и они будут применяться на страницах, созданных через Elementor, без риска потери при обновлениях.
Добавление пользовательского CSS через кастомный плагин
Если вы не хотите использовать дочернюю тему, можно создать небольшой плагин, который будет добавлять ваши стили. Это удобно, если вы меняете только стили и не хотите менять тему.
Создайте файл wpelementor-custom-css.php с таким содержимым:
<?php
/*
Plugin Name: WPelementor Custom CSS
Description: Добавляет пользовательские стили для Elementor
Version: 1.0
Author: Ваше имя
*/
function wpelementor_custom_css() {
wp_enqueue_style('wpelementor-custom-css', plugin_dir_url(__FILE__) . 'custom-style.css');
}
add_action('wp_enqueue_scripts', 'wpelementor_custom_css');Создайте файл custom-style.css рядом с плагином и добавляйте туда ваши CSS. После активации плагина стили будут подключены.
Использование встроенного редактора CSS Elementor Pro
Если у вас есть Elementor Pro, можно использовать встроенный редактор пользовательского CSS, который доступен на уровне виджетов, секций или всей страницы. Этот метод удобен, но стили ограничены рамками самого Elementor.
Чтобы добавить глобальный CSS в Elementor Pro:
- Откройте редактор Elementor.
- Внизу слева выберите "Настройки сайта" -> "Пользовательский CSS".
- Добавьте свои стили в открывшемся поле.
Этот CSS будет применяться ко всему сайту, и при обновлении темы изменения сохранятся.
Особенности и ограничения метода
Стили, добавленные в Elementor Pro, применяются через интерфейс плагина, что удобно, но некоторые разработчики предпочитают полностью контролировать стили через файлы или плагины для удобства версионного контроля и деплоя.
Пример функции для добавления кастомного CSS из базы данных
Если вы хотите более гибкий способ, можно хранить CSS в базе данных и добавлять динамически. Пример функции, которую можно добавить в functions.php дочерней темы или плагина:
function wpelementor_add_dynamic_css() {
$custom_css = get_option('wpelementor_custom_css');
if (!empty($custom_css)) {
wp_add_inline_style('elementor-frontend', $custom_css);
}
}
add_action('wp_enqueue_scripts', 'wpelementor_add_dynamic_css', 20);В этом примере CSS берётся из опции wpelementor_custom_css и добавляется к стилям Elementor. Вы можете создать админ-страницу, где редактором вводить CSS, и сохранять его в эту опцию.
Советы по написанию CSS для Elementor
При написании CSS для элементов Elementor учитывайте, что многие стили имеют высокую специфичность, а некоторые элементы используют встроенные стили с !important. Чтобы переопределить такие стили, используйте более специфичные селекторы или !important с осторожностью.
Пример:
.elementor-widget-heading h2 {
color: #ff6600 !important;
}Также используйте инструменты разработчика браузера, чтобы точно определить нужные селекторы.
Заключение
Для надёжного добавления пользовательских CSS в Elementor без риска потери при обновлении лучше всего использовать дочернюю тему или кастомный плагин. Если у вас есть Elementor Pro, встроенный редактор CSS — быстрый вариант, но менее гибкий. Для продвинутых решений можно динамически добавлять CSS из базы данных, что даёт максимум контроля.
Если хотите попробовать готовые решения, обратите внимание на плагин Clearfy Pro, который помогает оптимизировать и кастомизировать сайт, включая работу со стилями.