WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Создание своего контроллера (поля)

Customizer позволяет легко создавать собственные поля (UI элементы). Давайте создадим поддержку для поля type="range" (диапазон, ползунок, range slider). Такое поле позволяет выбирать значения перетаскиванием ползунка.

Контроллеры из ядра:

Базовые поля:

Базовые поля:

Nav Menu:

Widget:

Image:

Другие:

Для создания нового поля нужно создать класс на основе WP_Customize_Control:

<?php

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 = [
				'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 type="text" value="<?php echo esc_attr( $this->value() ); ?>" onKeyUp="jQuery(this).prev('input').val( jQuery(this).val() )">

			</label>
			<?php
		}
	}

}

Расширяем базовый класс WP_Customize_Control. Объявляем в нём свойство $type и метод render_content(). В методе нужно вывести HTML-элемент (поле формы), в котором нужно использовать методы:

  • $this->value() — текущее значение поля.
  • $this->link() — атрибут name поля.

min, max, step — это произвольно созданные свойства, которые затем можно использовать в классе.

Использование

Теперь пример того, как использовать наш новый контроллер, для создания нового поля.

add_action( 'customize_register', 'my_customize_register' );

function my_customize_register( WP_Customize_Manager $wp_customize ){

	$section = 'section_id';
	$wp_customize->add_section( $section, [
		'title'    => 'My Settings',
		'priority' => 220, // at the bottom of customizer
		//'panel'    => $panel,
	] );

	$wp_customize->add_setting( 'my_range' , array(
		'default'   => 0,
		'transport' => 'postMessage',
	) );

	$wp_customize->add_control( new WP_Customize_Range( $wp_customize, 'my_range', [
		'label'   => 'Мой Рендж',
		'min'     => 10,
		'max'     => 9999,
		'step'    => 10,
		'section' => 'section_id',
	] ) );

}

Обратите внимание, что секция 'section_id' должно быть уже создана. Как это делать смотрите здесь.

Живой просмотр

Все что нужно сделать для поддержки live preview, это обновить поле в HTML новым значением ренджа JavaScript.

wp.customize( 'my_range', function( value ) {
	value.bind( function( newval ) {
		$( '#my_range span' ).html( newval );
	} );
} );

В результате у нас получится нечто подобное:

Комментариев нет
    Здравствуйте, !     Войти . Зарегистрироваться