Вопрос или проблема
Я пытаюсь изменить значение CSS переменной в настройщике и не смог заставить работать живой предпросмотр с использованием ‘postMessage’. Это работает, если я использую вариант ‘refresh’.
Может кто-то, пожалуйста, проверить код и направить меня в нужное направление. Спасибо.
код customizer.php
/**
* Регистрирует настройки и элементы управления в настройщике.
*
* @param WP_Customize_Manager $wp_customize Объект настроек.
*/
function mytheme_customize_register( $wp_customize ) {
$wp_customize->add_setting(
'primary_color',
[
'default' => '#b3000e',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
]
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'primary_color',
[
'label' => __( 'Основной цвет', 'mytheme' ),
'section' => 'mytheme_color_options',
]
)
);
}
add_action( 'customize_register', 'mytheme_customize_register' );
/**
* Это выведет пользовательские настройки WordPress в заголовок активной темы WP.
*
* Используется для хуки: 'wp_head'
*
* @see add_action('wp_head',$func)
* @since MyTheme 1.0
*/
function mytheme_customizer_header_output() {
?>
<style type="text/css">
:root {
--primary: <?php echo esc_attr( get_theme_mod( 'primary_color', '#b3000e' ) ); ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'mytheme_customizer_header_output' );
/**
* Привязывает JS обработчики, чтобы добиться асинхронного обновления предпросмотра настроек темы.
*/
function mytheme_customize_preview_js() {
wp_enqueue_script( 'mytheme-customizer-preview-script', get_stylesheet_directory_uri() . '/assets/js/customizer-preview.js', [ 'jquery', 'customize-preview' ], 1.0, true );
}
add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );
код customizer-preview.js
( function( $ ) {
wp.customize(
'primary_color',
function ( value ) {
value.bind(
function ( to ) {
//$( 'a' ).css( 'color', to );
$( ':root' ).css( '--primary', to );
}
);
}
);
} )( jQuery );
Попробуйте заменить
$( ':root' ).css( '--primary', to );
на
$( ':root' ).get(0).style.setProperty( '--primary', to );
Ответ или решение
Изменение значения CSS переменной в настройках темы с использованием живого предварительного просмотра
Теория
Когда вы пользуетесь "Customizer" в WordPress для настройки параметров темы, вы, безусловно, задумываетесь о том, как сделать так, чтобы изменения применялись в режиме реального времени без необходимости перезагрузки страницы. Существенная часть процесса заключается в правильной реализации JavaScript и CSS, которые взаимодействуют таким образом, чтобы все изменения появлялись на странице моментально.
"PostMessage" – это метод, который позволяет обновлять только те элементы, которые были изменены. Он более эффективен по сравнению с методом "refresh" и дает возможность обеспечить плавный и практически мгновенный отклик при изменении параметров.
Пример
Рассмотрим код, с которым работа ведется. В нем регистрация параметров выполняется через функцию mytheme_customize_register, где задается транспорт "postMessage". Однако в JavaScript-части можно столкнуться с проблемами при попытке изменить CSS-переменные.
Попробуем обновить код в JavaScript:
( function( $ ) {
wp.customize(
'primary_color',
function ( value ) {
value.bind(
function ( to ) {
$( ':root' ).get(0).style.setProperty( '--primary', to );
}
);
}
);
} )( jQuery );Применение
Изменение строки в customizer-preview.js так, чтобы использовать get(0).style.setProperty, как показано выше, позволяет избежать потенциальных проблем с тем, как jQuery обрабатывает CSS-переменные. Это изменение гарантирует, что CSS переменная --primary изменяется напрямую в DOM, что обеспечивает ее обновление в живом предварительном просмотре без перезагрузки страницы.
Таким образом, после внедрения этой небольшой коррекции, когда вы будете изменять цвет в настройщике темы, он будет быстро отражаться в вашем интерфейсе. Это улучшает пользовательское взаимодействие и предоставляет более современные и отзывчивые возможности настройки для пользователей темы.
Имейте в виду, что необходимо также обеспечить наличие корректных зависимостей в скриптах WordPress и соблюдать принципы безопасного кодирования, такие как обеспечение правильной обработки и экранирования данных.