Использование jQuery для получения значения кастомизатора

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Определение настроек в Customize API
Шаг 2: Подключение пользовательского JavaScript
Шаг 3: Использование jQuery для отслеживания изменений
Шаг 4: Обновление классов тела страницы
Заключение

Вопрос или проблема

Я пытаюсь использовать jQuery для получения значения параметров темы (настройщика):

    $wp_customize->add_setting( 'header_fixed', array(
        'default'   => true,
    ) );
    $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_fixed', array(
        'label'     => __( 'Включить фиксированную навигацию?', 'theme' ),
        'section'   => 'header_section',
        'settings'  => 'header_fixed',
        'type'      => 'checkbox',
        'priority' => 40,
    ) ) );

Если указанное значение истинно, то элемент заголовка будет иметь фиксированное положение. Если нет, то будет относительное положение (класс будет добавлен или нет с помощью jQuery). Я не очень хорошо разбираюсь в jQuery, поэтому следующее основано на том, что приходит в customizer.js, из _s:

    wp.customize( 'header_fixed', function( value ) {
    value.bind( function( to ) {
        if ( 'true' == to ) {
            $( '#header-inner' ).addClass( 'fixed' );
        }
    } );
} );

Я помещаю это в customizer.js, так как сделать это в другом месте приводит к ошибке: ‘wp’ не определен.

Редактировать* Я подключаю скрипт следующим образом:

function theme_customize_preview_js() {
wp_enqueue_script( 'theme-customizer', get_template_directory_uri() .  '/js/customizer.js', array( 'customize-preview' ) );
} 
add_action( 'customize_preview_init', 'theme_customize_preview_js' );

Редактировать** На данный момент это, кажется, невозможно, поэтому я в конце концов сделал это с помощью PHP:

<?php if ( '' != get_theme_mod( 'header_fixed') ) echo 'fixed'; ?>

Спасибо!

Используйте этот код jQuery из вашего вопроса в предварительном просмотре настрощика для обновления в реальном времени. Ваш транспорт должен быть установлен на ‘postMessage’. На вашем сайте вы можете добавить класс тела в function.php:

function theme_prefix_body_class( $classes ) {

    if ( get_theme_mod('header_fixed', 0 ) == true  ) {

        $classes[] = 'fixed-header';
    }

    return $classes;
}
add_filter( 'body_class', 'theme_prefix_body_class' );

Ответ или решение

Чтобы использовать jQuery для получения значения опции тем (customizer value), заданного в панели настройки WordPress, необходимо правильно настроить процесс передачи данных из кастомайзера в ваш JavaScript файл. Давайте рассмотрим, как это сделать шаг за шагом.

Шаг 1: Определение настроек в Customize API

Вы начали с определения параметра header_fixed в вашем файле функций (functions.php). Это правильно, но важно убедиться, что ваш параметр способен к отправке изменений через postMessage.

Ниже приведен пример, показывающий, как это сделать:

function theme_customize_register( $wp_customize ) {
    $wp_customize->add_setting( 'header_fixed', array(
        'default'   => true,
        'transport' => 'postMessage', // Убедитесь, что это указано
    ) );

    $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_fixed', array(
        'label'     => __( 'Enable fixed navigation?', 'theme' ),
        'section'   => 'header_section',
        'settings'  => 'header_fixed',
        'type'      => 'checkbox',
        'priority'  => 40,
    ) ) );
}
add_action( 'customize_register', 'theme_customize_register' );

Шаг 2: Подключение пользовательского JavaScript

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

function theme_customize_preview_js() {
    wp_enqueue_script( 'theme-customizer', get_template_directory_uri() .  '/js/customizer.js', array( 'customize-preview' ), null, true );
}
add_action( 'customize_preview_init', 'theme_customize_preview_js' );

Шаг 3: Использование jQuery для отслеживания изменений

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

( function( $ ) {
    wp.customize( 'header_fixed', function( value ) {
        value.bind( function( to ) {
            if ( to ) { // Если значение истинно (true)
                $( '#header-inner' ).addClass( 'fixed' );
            } else { // Если значение ложно (false)
                $( '#header-inner' ).removeClass( 'fixed' );
            }
        } );
    } );
} )( jQuery );

Шаг 4: Обновление классов тела страницы

Чтобы улучшить SEO и сделать код более чистым, вы также можете добавить класс fixed-header к элементу <body>, используя следующий код в вашем functions.php:

function theme_prefix_body_class( $classes ) {
    if ( get_theme_mod('header_fixed', 0) ) {
        $classes[] = 'fixed-header';
    }
    return $classes;
}
add_filter( 'body_class', 'theme_prefix_body_class' );

Заключение

С помощью вышеприведенных шагов вы сможете успешно использовать jQuery для получения значения параметра кастомайзера в реальном времени и применить его к вашему заголовку. Убедитесь, что скрипт подключен правильно, и значение обновляется в зависимости от состояния галочки в кастомизере.

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