Предварительный просмотр слайдера диапазона настроек Wordpress не отображается - PullRequest
Новая
       78

Предварительный просмотр слайдера диапазона настроек Wordpress не отображается

0 голосов
/ 09 марта 2020

У меня есть это: 

function cd_customizer_settings( $wp_customize ) {
    $wp_customize->add_setting( 'global_font_size' , array(
        'default'     => 16,
        'transport'   => 'postMessage',
    ) );

    $wp_customize->add_control( new WP_Customize_Range( $wp_customize, 'global_font_size', array(
        'label' =>  'Font Size Menu',
        'settings' => 'global_font_size',
        'min' => 8,
        'max' => 60,
        'step' => 1,
        'section' => 'title_tagline',
    ) ) );

}

А для класса управления Range у меня есть это: 

if( class_exists( 'WP_Customize_Control' ) ) {
    class WP_Customize_Range extends WP_Customize_Control {
        public $type = 'range';

        public function __construct( $manager, $id, $args = array() ) {
            parent::__construct( $manager, $id, $args );
            $defaults = array(
                'min' => 0,
                'max' => 10,
                'step' => 1
            );
            $args = wp_parse_args( $args, $defaults );

            $this->min = $args['min'];
            $this->max = $args['max'];
            $this->step = $args['step'];
        }

        public function render_content() {
        ?>
        <label>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <input class='range-slider' min="<?php echo $this->min ?>" max="<?php echo $this->max ?>" step="<?php echo $this->step ?>" type='range' <?php $this->link(); ?> value="<?php echo esc_attr( $this->value() ); ?>" oninput="jQuery(this).next('input').val( jQuery(this).val() )">
            <input onKeyUp="jQuery(this).prev('input').val( jQuery(this).val() )" type='text' value='<?php echo esc_attr( $this->value() ); ?>'>

        </label>
        <?php
        }
    }
}

Мой предварительный просмотр js код: 


( function( $ ) {

  wp.customize( 'global_font_size', function( value ) {
    value.bind( function( newval ) {
      $( '.menu ul' ).css( 'font-size', newval );
    } );
  } );

} )( jQuery );

Для ввода css у меня есть это: 

add_action( 'wp_head', 'cd_customizer_css');
function cd_customizer_css()
{
    ?>
         <style type="text/css">
             .site-header { background: #<?php echo get_theme_mod('background_color', '#ffffff'); ?>; }
             .container { max-width: <?php echo get_theme_mod('cd_container_width', 1400); ?>px; }
             .menu ul { font-size: <?php echo get_theme_mod('global_font_size', 16); ?>px; }
         </style>
    <?php
}

Проблема в том, что если я скользлю, ничего не происходит, пока я не сделаю что-то еще, что находится на транспортной ссылке sh. Если я изменил транспорт для размера шрифта на refre sh, он работает отлично. Странно, как вы можете видеть в моем добавленном css у меня есть один для моего backgorund цвета, который работает и дает мне предварительный просмотр в реальном времени без refre sh, но это с палитрой цветов.

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

Возможно, сначала я сделал что-то не так в своем коде, я подумал, что, возможно, это был html в js, который нужно изменить. css но единственное, что не показывало вывод диапазона в виде текста на экране.

Буду признателен за любую помощь.

...