В этой статье разберёмся, как создать динамический скин для WordPress — тему оформления, которая меняется на лету без перезагрузки страницы. Такой подход улучшает пользовательский опыт, позволяя посетителям сайта быстро переключать внешний вид и стили без задержек. Мы рассмотрим практическое решение с использованием AJAX и приведём пример кода.
Что такое динамический скин и зачем он нужен
Динамический скин — это набор стилей и элементов оформления, которые можно подгружать и применять к сайту без полной перезагрузки страницы. Это удобно для сайтов, где важно быстро менять цветовую схему, шрифты или расположение элементов, не прерывая взаимодействие пользователя.
Например, пользователь может переключаться между светлой и тёмной темой, выбирать цвет акцента или менять шрифт — и всё это происходит мгновенно. Это улучшает восприятие и повышает вовлечённость.
Для реализации такой функциональности в WordPress можно использовать AJAX — технологию, которая позволяет обмениваться данными с сервером и обновлять части страницы асинхронно.
Подготовка к созданию динамического скина
Перед началом убедитесь, что у вас есть базовая тема или дочерняя тема, где можно внедрять изменения. Желательно, чтобы тема была минималистичной и поддерживала подключение дополнительных стилей.
Для примера мы создадим простой переключатель между двумя скинами: светлым и тёмным. Каждый скин будет представлен отдельным CSS-файлом.
Создайте в папке темы две CSS-версии оформления:
light-skin.css— для светлого скина;dark-skin.css— для тёмного скина.
В каждом файле определите основные стили для body, заголовков и ссылок с разными цветами.
Реализация AJAX-переключателя скина в WordPress
Для начала добавим в файл functions.php тему обработчик AJAX-запроса и зарегистрируем стили.
function wpskins_register_skins() {
wp_register_style('light-skin', get_template_directory_uri() . '/css/light-skin.css');
wp_register_style('dark-skin', get_template_directory_uri() . '/css/dark-skin.css');
wp_enqueue_style('light-skin'); // По умолчанию светлый
}
add_action('wp_enqueue_scripts', 'wpskins_register_skins');
// Обработчик AJAX
function wpskins_ajax_switch_skin() {
$skin = sanitize_text_field($_POST['skin']);
if (!in_array($skin, ['light', 'dark'])) {
wp_send_json_error('Invalid skin');
}
// Возвращаем URL выбранного css
$css_url = get_template_directory_uri() . '/css/' . $skin . '-skin.css';
wp_send_json_success(['css_url' => $css_url]);
}
add_action('wp_ajax_wpskins_switch_skin', 'wpskins_ajax_switch_skin');
add_action('wp_ajax_nopriv_wpskins_switch_skin', 'wpskins_ajax_switch_skin');
Далее подключим скрипт, который будет отправлять AJAX-запрос при переключении скина и менять подключаемый CSS без перезагрузки.
function wpskins_enqueue_scripts() {
wp_enqueue_script('wpskins-switcher', get_template_directory_uri() . '/js/skin-switcher.js', ['jquery'], null, true);
wp_localize_script('wpskins-switcher', 'wpskins_ajax', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpskins_nonce')
]);
}
add_action('wp_enqueue_scripts', 'wpskins_enqueue_scripts');
Создайте файл js/skin-switcher.js с кодом:
jQuery(document).ready(function($) {
$('#skin-switcher').on('change', function() {
var selectedSkin = $(this).val();
$.post(wpskins_ajax.ajax_url, {
action: 'wpskins_switch_skin',
skin: selectedSkin,
_ajax_nonce: wpskins_ajax.nonce
}, function(response) {
if (response.success) {
// Меняем ссылку на CSS
$('#wpskins-dynamic-style').attr('href', response.data.css_url);
} else {
console.error('Ошибка переключения скина:', response.data);
}
});
});
});
В файле header.php темы добавьте ссылку для подключения динамического стиля с id, чтобы можно было менять href:
<link rel="stylesheet" id="wpskins-dynamic-style" href="<?php echo get_template_directory_uri(); ?>/css/light-skin.css" type="text/css" media="all" />
И добавьте переключатель в нужное место шаблона, например, в header.php:
<select id="skin-switcher" name="skin-switcher">
<option value="light" selected>Светлый скин</option>
<option value="dark">Тёмный скин</option>
</select>
Оптимизация и хранение выбранного скина
Чтобы сохранить выбор пользователя, можно использовать JavaScript localStorage. При загрузке страницы проверяем сохранённый скин и меняем стиль автоматически.
Добавьте в skin-switcher.js следующий код:
jQuery(document).ready(function($) {
var savedSkin = localStorage.getItem('wpskins_skin');
if (savedSkin) {
$('#skin-switcher').val(savedSkin).trigger('change');
}
$('#skin-switcher').on('change', function() {
var selectedSkin = $(this).val();
localStorage.setItem('wpskins_skin', selectedSkin);
$.post(wpskins_ajax.ajax_url, {
action: 'wpskins_switch_skin',
skin: selectedSkin,
_ajax_nonce: wpskins_ajax.nonce
}, function(response) {
if (response.success) {
$('#wpskins-dynamic-style').attr('href', response.data.css_url);
} else {
console.error('Ошибка переключения скина:', response.data);
}
});
});
});
Так пользователь при повторном посещении сайта увидит последний выбранный скин.
Расширение функционала: загрузка пользовательских скинов
Для продвинутых решений можно реализовать загрузку и сохранение пользовательских скинов через админку. Например, добавить возможность загружать CSS-файлы или менять переменные цветов через настройки темы.
Рекомендуется использовать плагины оптимизации и кэширования, например Clearfy Pro, чтобы избежать лишних запросов и ускорить загрузку.
Также можно интегрировать динамические скины с плагином WPGPT для генерации стилей по запросу или Quizle для создания интерактивных тем оформления.
Выводы по созданию динамического скина в WordPress
Динамический скин с помощью AJAX — эффективный способ улучшить UX и дать пользователям возможность быстро менять оформление сайта без перезагрузки. Это полезно для блогов, магазинов и корпоративных сайтов.
Ключевые шаги: хранение стилей в отдельных файлах, AJAX-обработчик в PHP, скрипт переключения на клиенте и сохранение выбора пользователя.
Реализация несложная, но даёт ощутимый прирост удобства и современный вид сайту. Рекомендуется протестировать на разных устройствах и браузерах, а также использовать кэширование для оптимальной производительности.