🎨 «Цвета сайта без программирования: как я сделал настройку темы доступной для всех»
Авторы: Ведерников Сергей & ИИ Дэп
Когда я только начинал работать над своим сайтом, меня постоянно раздражало одно — чтобы изменить цвет шапки или сделать ссылки поярче, приходилось лезть в CSS-файлы. Потом я думал: «А ведь есть же другие люди, которые тоже хотят настраивать свой сайт без страха что-то сломать».
Так родилась идея ModernGrid Colorizer — плагина, который выводит настройки цвета прямо в админку. Главное преимущество этого подхода — тебе не нужно быть разработчиком, чтобы изменить внешний вид сайта.
🎯 Как устроен плагин
В отличие от многих плагинов, которые предлагают лишь пару готовых палитр, наш плагин даёт полный контроль над цветовой схемой. В меню «Внешний вид → Цвета темы» появляется интуитивно понятная страница с цветовыми пикерами.
Плагин работает через CSS-переменные (var()). Это значит, что при сохранении настроек он не перезаписывает файлы темы, а просто подставляет нужные цвета в уже существующие стили. Как это работает на практике:
Ты выбираешь цвет в удобном палитре.
Нажимаешь «Сохранить».
На сайте мгновенно меняются цвета — шапка, подвал, ссылки, кнопки. И всё это без единой правки кода.
💡 Секрет удобства
Я добавил интерактивный превью выбранного цвета: когда ты кликаешь на пикер, рядом сразу показывается сам цвет и его HEX-код. Это особенно удобно, когда ты подбираешь палитру под фирменный стиль бренда.
Ещё одна важная деталь — безопасность. Плагин проверяет права администратора и использует защиту от CSRF-атак. Пользователь не может случайно изменить то, что ему не разрешено.
📦 Для кого это
Для владельцев сайтов, которые хотят менять дизайн без программиста.
Для разработчиков, которые устали править CSS вручную.
Для всех, кто ценит визуальный подход к настройке.
В итоге, ModernGrid Colorizer — это пример того, как можно взять сложную задачу (настройку цветов) и сделать её максимально простой и наглядной. Плагин полностью бесплатный и доступен для использования в любых темах WordPress.
Код плагина:
<?php
/**
* Plugin Name: ModernGrid Colorizer
* Description: Мини-плагин для раскраски шапки, подвала и сайдбаров через настройщик WordPress
* Version: 1.0
* Author: Ведерников Сергей и ИИ Дэп
* Text Domain: moderngrid-colorizer
*/
if (!defined('ABSPATH')) {
exit;
}
class ModernGridColorizer {
public function __construct() {
add_action('customize_register', [$this, 'add_customizer_sections']);
add_action('wp_head', [$this, 'output_custom_css']);
add_action('admin_enqueue_scripts', [$this, 'admin_styles']);
}
/**
* Добавляем секции и контролы в настройщик
*/
public function add_customizer_sections($wp_customize) {
// Секция: Цвета темы
$wp_customize->add_section('moderngrid_colors', [
'title' => '🎨 Цвета темы ModernGrid',
'priority' => 30,
'panel' => 'colors',
]);
// 1. Шапка
$wp_customize->add_setting('header_bg', [
'default' => '#1f2937',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
]);
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_bg', [
'label' => 'Шапка (фон)',
'section' => 'moderngrid_colors',
'settings' => 'header_bg',
]));
$wp_customize->add_setting('header_text_color', [
'default' => '#ffffff',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
]);
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_text_color', [
'label' => 'Шапка (текст)',
'section' => 'moderngrid_colors',
'settings' => 'header_text_color',
]));
// 2. Подвал
$wp_customize->add_setting('footer_bg', [
'default' => '#1f2937',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
]);
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'footer_bg', [
'label' => 'Подвал (фон)',
'section' => 'moderngrid_colors',
'settings' => 'footer_bg',
]));
$wp_customize->add_setting('footer_text_color', [
'default' => '#d1d5db',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
]);
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'footer_text_color', [
'label' => 'Подвал (текст)',
'section' => 'moderngrid_colors',
'settings' => 'footer_text_color',
]));
// 3. Сайдбары
$wp_customize->add_setting('sidebar_bg', [
'default' => '#ffffff',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
]);
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'sidebar_bg', [
'label' => 'Сайдбары (фон)',
'section' => 'moderngrid_colors',
'settings' => 'sidebar_bg',
]));
// 4. Карточки
$wp_customize->add_setting('card_bg', [
'default' => '#ffffff',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
]);
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'card_bg', [
'label' => 'Карточки (фон)',
'section' => 'moderngrid_colors',
'settings' => 'card_bg',
]));
// 5. Акцентный цвет
$wp_customize->add_setting('accent_color', [
'default' => '#3b82f6',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
]);
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'accent_color', [
'label' => 'Акцентный цвет (ссылки, кнопки)',
'section' => 'moderngrid_colors',
'settings' => 'accent_color',
]));
// 6. Фон страницы
$wp_customize->add_setting('page_bg', [
'default' => '#f8fafc',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
]);
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'page_bg', [
'label' => 'Фон страницы',
'section' => 'moderngrid_colors',
'settings' => 'page_bg',
]));
}
/**
* Выводим кастомные CSS-переменные в head
*/
public function output_custom_css() {
$header_bg = get_theme_mod('header_bg', '#1f2937');
$header_text = get_theme_mod('header_text_color', '#ffffff');
$footer_bg = get_theme_mod('footer_bg', '#1f2937');
$footer_text = get_theme_mod('footer_text_color', '#d1d5db');
$sidebar_bg = get_theme_mod('sidebar_bg', '#ffffff');
$card_bg = get_theme_mod('card_bg', '#ffffff');
$accent = get_theme_mod('accent_color', '#3b82f6');
$page_bg = get_theme_mod('page_bg', '#f8fafc');
echo '<style id="moderngrid-custom-colors">';
echo ':root {';
echo '--header-bg: ' . esc_attr($header_bg) . ';';
echo '--header-text: ' . esc_attr($header_text) . ';';
echo '--footer-bg: ' . esc_attr($footer_bg) . ';';
echo '--footer-text: ' . esc_attr($footer_text) . ';';
echo '--sidebar-bg: ' . esc_attr($sidebar_bg) . ';';
echo '--card-bg: ' . esc_attr($card_bg) . ';';
echo '--accent-color: ' . esc_attr($accent) . ';';
echo '--page-bg: ' . esc_attr($page_bg) . ';';
echo '}';
echo '</style>';
}
/**
* Добавляем иконку в меню админки
*/
public function admin_styles() {
echo '<style>
#menu-appearance .wp-menu-image:before {
content: "\\f309";
}
</style>';
}
}
new ModernGridColorizer();
