Как подключить Alpha Color Picker Customizer Control?

Question

[Владислав]

Добрый день.

Может кто то пользовался Alpha Color Picker Customizer Control вот ссылка.

Кто разобрался, как его подключить? Несколько часов мучаюсь)

Там нет пошаговой инструкции, я создал класс, подключил js, css добавил контрол на пробу и вот, что выводит.



Хотя должно палитру выводить.

Или напишите каким пикером пользуетесь вы, чтобы он поддерживал RGBA и лицензия MIT

Answer 1

[Владимир Брумер]

создаете класс:

spoiler

if(class_exists('WP_Customize_Control')){
	class Alpha_Color_Control extends WP_Customize_Control{
		public $attributes="";
		public $defaultPalette=array('#000000','#ffffff','#dd3333','#dd9933','#eeee22','#81d742','#1e73be','#8224e3',);
		public function __construct($manager,$id,$args=array(),$options=array()){
			parent::__construct($manager,$id,$args);
			$this->attributes.='data-default-color="'.esc_attr($this->settings['default']->default).'"';
			$this->attributes.='data-alpha="true"';
			$this->attributes.='data-reset-alpha="'.(isset($this->input_attrs['resetalpha'])?$this->input_attrs['resetalpha']:'true').'"';
			$this->attributes.='data-custom-width="0"';}
		public function enqueue(){wp_enqueue_script('alpha',get_template_directory_uri().'/VAB_libs/VAB_functions/js/alpha_color.js',array('wp-color-picker'),'1.0',true);}
		public function to_json(){
			parent::to_json();
			$this->json['colorpickerpalette']=isset($this->input_attrs['palette'])?$this->input_attrs['palette']:$this->defaultPalette;
		}
		public function render_content(){?>
			<div class="wpcolorpicker_alpha_color_control">
				<?php if(!empty($this->label)){?>
					<span class="customize-control-title"><?php echo esc_html($this->label);?></span>
				<?php }
				if(!empty($this->description)){?>
					<span class="customize-control-description"><?php echo esc_html($this->description);?></span>
				<?php }?>
				<input type="text" class="color-picker" id="<?php echo esc_attr($this->id);?>" name="<?php echo esc_attr($this->id);?>" value="<?php echo esc_attr($this->value());?>" class="customize-control-colorpicker-alpha-color" <?php echo $this->attributes;?> <?php $this->link();?> />
			</div><?php	}}}

в коде замените адрес на свой, смотря куда файл в теме кинете (файл скину ниже)

public function enqueue(){wp_enqueue_script('alpha',get_template_directory_uri().'/VAB_libs/VAB_functions/js/wp-color-picker-alpha.js',array('wp-color-picker'),'1.0',true);}

далее код в кастомайзер:

spoiler

add_action('customize_register','action_customize_register');
if(!function_exists('action_customize_register')){function action_customize_register($customizer){
	$customizer->add_setting('VAB_alpha_color',array('default'=>'rgba(209,0,55,0.7)',)); 
	$customizer->add_control(new Alpha_Color_Control($customizer,'VAB_alpha_color',
		 array(
				'label'=>__('Альфа колор пикер','VAB'),
				'description'=>esc_html__('Описание','VAB'),
				'section'=>'title_tagline',
				'input_attrs'=>array('palette'=>array('#000000','#ffffff','#dd3333','#dd9933','#eeee22','#81d742','#1e73be','#8224e3',)),)
	));
}}

пример вывода:

echo '<div style="background:'.get_theme_mod('VAB_alpha_color').';">VAB_alpha_color</div>';

исходники
результат:

spoiler

заменил в классе атрибут значения по умолчанию при сбросе, иначе сбрасывает на начальное значение текущей сессии.

spoiler

строку:

$this->attributes.='data-default-color="'.esc_attr($this->value()).'"';

поменял на:

$this->attributes.='data-default-color="'.esc_attr($this->settings['default']->default).'"';

Comments

[Владислав]

Нашел в чем проблема была. Подключил устаревший файл js, подключил новый и зарабготало.

Только выводит разметку неправильно почему то, заголовок пишет не сверху, а внутри

[Владимир Брумер]

Vladddosss, ну тут либо разметку ковырять в классе созданном, либо css. Я альфа колор пикер, который Вы пытаетесь использовать не особо тестил... вчера пробовал и он работал у меня, но css я не подключал не могу ничего сказать... я другой код выложил в ответе... там вовсе нет css... попробуйте. Вам только путь на файл надо поменять и код кастомайзера на свой перебить... Практически копи паст

[Владимир Брумер]

я кстати код, который выложил, то же ток вчера разбирал, увидев Ваш вопрос... потому и поправки потом делал по сбросу на дефолт
это не совсем альфа колор пикер скорее WPColorPicker Alpha Color - это еще один пользовательский элемент управления цветом, который поддерживает выбор альфа-канала (например, rgba (0,158,39,0.8)). Этот элемент управления использует модифицированную версию скрипта WordPress Color Picker, которая поддерживает выбор альфа-канала. Хотя пользовательский элемент управления Customizer был создан не разраб. вордпресс, все реквизиты для этого измененного сценария WPColorPicker отправляются в Sergio.

[Владислав]

Владимир Брумер, SSMaker.ru/cfa5ce3c Ваш код работает, но это немного другой скрипт они выглядят иначе, но не суть.

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

Я этот использовал ссылка Можете этот попробовать, посмотреть, из-за чего такая разметка?

[Владислав]

Владимир Брумер, нашел, как поправить.

public function render_content() {
		// Process the palette
		if ( is_array( $this->palette ) ) {
			$palette = implode( '|', $this->palette );
		} else {
			// Default to true.
			$palette = ( false === $this->palette || 'false' === $this->palette ) ? 'false' : 'true';
		}
		// Support passing show_opacity as string or boolean. Default to true.
		$show_opacity = ( false === $this->show_opacity || 'false' === $this->show_opacity ) ? 'false' : 'true';
		// Begin the output. ?>
		<label>
			<?php // Output the label and description if they were passed in.
			if ( isset( $this->label ) && '' !== $this->label ) {
				echo '<span class="customize-control-title">' . sanitize_text_field( $this->label ) . '</span>';
			}
			if ( isset( $this->description ) && '' !== $this->description ) {
				echo '<span class="description customize-control-description">' . sanitize_text_field( $this->description ) . '</span>';
			} ?>
			<div> ПРОСТО ИНПУТ ОБЕРНУЛ В ДИВ
			<input class="alpha-color-control" type="text" data-show-opacity="<?php echo $show_opacity; ?>" data-palette="<?php echo esc_attr( $palette ); ?>" data-default-color="<?php echo esc_attr( $this->settings['default']->default ); ?>" <?php $this->link(); ?>  />
			</div>
		</label>
		<?php
	}

Просто input обернул в div и верстка исправилась.

[Владимир Брумер]

Vladddosss, перенесите его перед label из самого label

public function render_content(){
		if(is_array($this->palette)){
			$palette=implode('|',$this->palette);
		}else{
			$palette=(false===$this->palette||'false'===$this->palette)?'false':'true';
		}
		$show_opacity=(false===$this->show_opacity||'false'===$this->show_opacity)?'false':'true';
		
			if(isset($this->label)&&''!==$this->label){
				echo '<span class="customize-control-title">'. sanitize_text_field($this->label).'</span>';
			}
			if(isset($this->description)&&''!==$this->description){
				echo '<span class="description customize-control-description">'.sanitize_text_field($this->description).'</span>';
			}
		?>
		<label>
			<input class="alpha-color-control" type="text" data-show-opacity="<?php echo $show_opacity;?>" data-palette="<?php echo esc_attr($palette);?>" data-default-color="<?php echo esc_attr($this->settings['default']->default);?>" <?php $this->link();?>/>
		</label><?php	}

[Владислав]

Владимир Брумер, Спасибо