Intereting Posts
Как скрыть / wp-content / uploads / from URL? Шаблон WordPress, не влияющий на работу, продолжает дефолт по шаблону index.php Частная почта, скрытая от администратора тоже исключить идентификаторы через post__not_in переменная $ args numberposts Вставьте все почтовые идентификаторы в новую таблицу базы данных Использование init hook для register_taxonomy вызывает invalid_taxonomy в wp_insert_term () wp-admin перенаправление на https, запрет входа в систему Загрузчик загрузки файла по умолчанию WP не работает, если он используется в плагине Ограничить категорию / тег Dropdown В blog_id в Multisite Install с глобальными категориями / тегами Резервное копирование базы данных и файлов WordPress Тема поддерживает только одно меню? Жесткое кодированное меню не отображает ссылки wp_update_nav_menu_item Использовать дашикон в пунктах меню? Вторая строка строки из WP Super Edit или TinyMCE Advanced не отображается для 2-го администратора

Редактирование изображения кнопки радиостанции WordPress

У меня возникла проблема с получением переключателей в качестве изображений для сохранения настроек / обновления Customizer при нажатии. Я последовал этому руководству:

Customizer radio image control

Но не воспользоваться. Вот мой код:

functions.php: – создает настройки и элементы управления (разделы создаются в другом месте в файле section.php)

function spiffing_customize_register( $wp_customize ) { // Load the radio image control class. require_once( trailingslashit( get_template_directory() ) . 'functions/control-radio-image.php' ); // Register the radio image control class as a JS control type. $wp_customize->register_control_type( 'Spiffing_Customize_Control_Radio_Image' ); // Add the layout setting. $wp_customize->add_setting( 'layout', array( 'default' => 'fullwidth', 'transport' => 'refresh', 'sanitize_callback' => 'sanitize_key', ) ); // Add the layout control. $wp_customize->add_control( new Spiffing_Customize_Control_Radio_Image( $wp_customize, 'layout', array( 'label' => esc_html__( 'Layout', 'spiffing' ), 'section' => 'layout_options', 'choices' => array( 'boxed' => array( 'label' => esc_html__( 'Boxed', 'spiffing' ), 'url' => '%s/img/boxed.jpg' ), 'fullwidth' => array( 'label' => esc_html__( 'Fullwidth', 'spiffing' ), 'url' => '%s/img/fullwidth.jpg' ) ) ) ) ); } add_action( 'customize_register', 'spiffing_customize_register' ); 

stylesheets-includes.php: – Необходимые скрипты Enqueue

 function theme_style(){ wp_enqueue_script( 'jquery-ui-button'); } add_action( 'wp_enqueue_scripts', 'theme_style'); 

control-radio-image.php – Пользовательский класс управления согласно сообщению

 <?php /** * Radio image customize control. * * @since 1.0.0 * @access public */ class Spiffing_Customize_Control_Radio_Image extends WP_Customize_Control { /** * The type of customize control being rendered. * * @since 1.0.0 * @access public * @var string */ public $type = 'radio-image'; /** * Loads the jQuery UI Button script and custom scripts/styles. * * @since 1.0.0 * @access public * @return void */ public function enqueue() { wp_enqueue_script( 'spiffing-customize-controls', get_template_directory_uri() . '/js/customize-controls.js', array( 'jquery' ) ); wp_enqueue_style( 'spiffing-customize-controls', get_template_directory_uri() . '/css/customize-controls.css' ); } /** * Add custom JSON parameters to use in the JS template. * * @since 1.0.0 * @access public * @return void */ public function to_json() { parent::to_json(); // We need to make sure we have the correct image URL. foreach ( $this->choices as $value => $args ) $this->choices[ $value ]['url'] = esc_url( sprintf( $args['url'], get_template_directory_uri(), get_stylesheet_directory_uri() ) ); $this->json['choices'] = $this->choices; $this->json['link'] = $this->get_link(); $this->json['value'] = $this->value(); $this->json['id'] = $this->id; } /** * Underscore JS template to handle the control's output. * * @since 1.0.0 * @access public * @return void */ public function content_template() { ?> <# if ( ! data.choices ) { return; } #> <# if ( data.label ) { #> <span class="customize-control-title">{{ data.label }}</span> <# } #> <# if ( data.description ) { #> <span class="description customize-control-description">{{{ data.description }}}</span> <# } #> <div class="buttonset"> <# for ( key in data.choices ) { #> <input type="radio" value="{{ key }}" name="_customize-{{ data.type }}-{{ data.id }}" id="{{ data.id }}-{{ key }}" {{{ data.link }}} <# if ( key === data.value ) { #> checked="checked" <# } #> /> <label for="{{ data.id }}-{{ key }}"> <span class="screen-reader-text">{{ data.choices[ key ]['label'] }}</span> <img src="{{ data.choices[ key ]['url'] }}" alt="{{ data.choices[ key ]['label'] }}" /> </label> <# } #> </div><!-- .buttonset --> <?php } } 

customize-controls.js: – Необходимый JQuery

 jQuery( document ).ready( function() { // Use buttonset() for radio images. jQuery( '.customize-control-radio-image .buttonset' ).buttonset(); // Handles setting the new value in the customizer. jQuery( '.customize-control-radio-image input:radio' ).change( function() { // Get the name of the setting. var setting = jQuery( this ).attr( 'data-customize-setting-link' ); // Get the value of the currently-checked radio input. var image = jQuery( this ).val(); // Set the new value. wp.customize( setting, function( obj ) { obj.set( image ); } ); } ); } ); // jQuery( document ).ready 

customize-controls.css – нужен стиль

 .customize-control-radio-image .ui-button { margin: 0; border-radius: 0; border: none; background: transparent; } .customize-control-radio-image .ui-button-text { padding: 0; } .customize-control-radio-image img { box-sizing: border-box; max-width: 100%; height: auto; padding: 1px; border: 4px solid transparent; } .customize-control-radio-image img:hover, .customize-control-radio-image img:focus { border-color: #ddd; } .customize-control-radio-image .ui-state-active img { border-color: #00a0d2; } .customize-control-radio-image input[type="radio"] { visibility: hidden; position: absolute; } 

И если выбран вариант box / option, в голову записывается следующее: – Но, очевидно, он никогда не попадает в эту часть.

 <style type="text/css"> <?php if( get_theme_mod( 'layout' ) === 'boxed' ) { ?> .tg-spiffing-site-container{ width: <?php echo get_theme_mod( 'site_boxed_width'); ?>px; margin-top: 20px; margin-bottom: 20px; box-shadow: 0px 0px 50px #000; } .tg-spiffing-boxed{ width: 100%; } <?php } // end if ?> </style> 

Не совсем уверен, где я здесь ошибся, из того, что я вижу, все должно быть на месте. Все CSS и скрипты выходят без проблем.

Любая помощь будет оценена по достоинству.