API предварительного просмотра темы настраиваемого интерфейса

Содержание

Вопрос или проблема
Ответ или решение
Живая Предпросмотр в API Настройщика Тем (Theme Customizer API Live Preview)
1. Проверьте конфигурацию настроек
2. Проверка JavaScript логики
3. Обеспечение коректного подключения скриптов
4. Проверка соответствующих классов и селекторов
5. Актуализация и тестирование
Заключение

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

У меня есть некоторые проблемы с тем, чтобы текст, который я ввожу в поле, появлялся на странице во время набора (живой предварительный просмотр).

Когда я нажимаю сохранить и обновить, изменения сохраняются, но по какой-то причине они не появляются в процессе набора. Есть идеи, почему живой предварительный просмотр может не работать? Я верю, что делаю все правильно.

functions.php

<?php

function tcx_register_theme_customizer( $wp_customize ) {

  $wp_customize->add_section(
    'tcx_notification_options',
    array(
      'title'     => 'Панель уведомлений',
      'priority'  => 201
    )
  );

  $wp_customize->add_setting(
  'tcx_notification_text',
    array(
      'default'            => 'Бесплатная международная доставка на заказы свыше £100',
      'sanitize_callback'  => 'tcx_sanitize_notification_text',
      'transport'          => 'postMessage'
    )
  );

  $wp_customize->add_control(
  'tcx_notification_text',
    array(
      'section'  => 'tcx_notification_options',
      'label'    => 'Текст уведомления',
      'type'     => 'text'
    )
  );

add_action( 'customize_register', 'tcx_register_theme_customizer' );

function tcx_sanitize_notification_text( $input ) {
  return strip_tags( stripslashes( $input ) );
}

function tcx_customizer_live_preview() {
  wp_enqueue_script(
    'tcx-theme-customizer',
    get_template_directory_uri() . '/library/js/theme-customizer.js',
    array( 'jquery', 'customize-preview' ),
    '1.0.0',
    true
  );
}

add_action( 'customize_preview_init', 'tcx_customizer_live_preview' );

theme-customizer.js

(function( $ ) {
  "use strict";

  wp.customize('tcx_notification_text', function(value) {
    value.bind(function(to) {
      $('.notification-title').text(to);
    });
  });

})( jQuery );

header.php

<strong class="notification-title"><?php echo get_theme_mod( 'tcx_notification_text' ); ?></strong>

Я знаю, что это старая запись, но на случай, если вы все еще ищете ответ:

Добавьте эту строку в вашу функцию tcx_register_theme_customizer:

$wp_customize->get_setting( 'tcx_notification_text' )->transport="postMessage";

Это получает значение из поля и передает его в Javascript для отображения в живом предварительном просмотре.

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

Живая Предпросмотр в API Настройщика Тем (Theme Customizer API Live Preview)

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

1. Проверьте конфигурацию настроек

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

$wp_customize->add_setting(
  'tcx_notification_text',
  array(
    'default'            => 'Free International Shipping on Orders Over £100',
    'sanitize_callback'  => 'tcx_sanitize_notification_text',
    'transport'          => 'postMessage' // Убедитесь, что это правильно
  )
);

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

$wp_customize->get_setting( 'tcx_notification_text' )->transport ="postMessage";

2. Проверка JavaScript логики

В файле theme-customizer.js вы используете следующую логику, которая должна обновлять текст на странице:

(function( $ ) {
  "use strict";

  wp.customize('tcx_notification_text', function(value) {
    value.bind(function(to) {
      $('.notification-title').text(to);
    });
  });

})( jQuery );

Убедитесь, что вы правильно подключили этот файл скрипта и он загружается на странице настройки темы. Проверьте консоль браузера на наличие ошибок JavaScript, которые могут помешать выполнению скрипта.

3. Обеспечение коректного подключения скриптов

Ваша функция, которая добавляет скрипт к настройщику, выглядит следующим образом:

function tcx_customizer_live_preview() {
  wp_enqueue_script(
    'tcx-theme-customizer',
    get_template_directory_uri() . '/library/js/theme-customizer.js',
    array( 'jquery', 'customize-preview' ),
    '1.0.0',
    true
  );
}
add_action( 'customize_preview_init', 'tcx_customizer_live_preview' );

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

4. Проверка соответствующих классов и селекторов

Также убедитесь, что класс .notification-title, который вы используете в JavaScript, правильно привязан к элементу в вашем HTML. В файле header.php вы указали:

<strong class="notification-title"><?php echo get_theme_mod( 'tcx_notification_text' ); ?></strong>

Уберите возможные конфликты с другими элементами на странице, так как это может предотвратить правильное обновление текста.

5. Актуализация и тестирование

После внесения всех изменений, обновите страницу кастомизации темы и попробуйте снова ввести текст в поле. Обратите внимание на возможные кэширования в браузере, которые могут препятствовать новому отображению.

Заключение

Если после всех проверок и изменений проблема все еще существует, возможно, стоит проверить конфликты с другими плагинами или темами. Временами, проблемы с JavaScript могут происходить из-за других скриптов, сталкивающихся с вашим пользовательским кодом. Вам также может пригодиться инструкция по отладке JavaScript ошибок в консоли браузера. Успехов в вашей работе с настройщиком тем WordPress!