Javascript | WP-Widgets

Farbauswahl im Colorpicker in WordPress Widget aktiviert den Speichern-Button nicht

abstract 2468874 1920

Der in WordPress integrierte Colorpicker Iris sieht keine Transparenzen vor. Die waren in einem umfangreichen individuellem Widget allerdings gefragt. Kein Problem, mit dem wp-color-picker-alpha, mit dem man den orignalen Colorpicker von WordPress einfach überschreibt.

Bindet man die Funktion mit der ansonsten der WordPress Colorpicker aufgerufen wird, an eine Element-Klasse, so erhält man stattdessen den Colorpicker mit einem zusätzlichen Slider für die Transparenz.

In der Beschreibung heißt es, Add class .color-picker and data-alpha="true" in input., denn am Ende der wp-color-picker-alpha.js kommt der Call, der sich auf die Classe color-picker bezieht.

// Auto Call plugin is class is color-picker jQuery( document ).ready( function( $ ) { $( '.color-picker' ).wpColorPicker(); } );

Das bewirkte, dass die Farbwerte in Widgets nicht gespeichert wurden, wenn die Widgets eines bestimmten Themes aktiviert waren, die den Standard-Colorpicker von WordPress aufrufen, und hierfür dieselbe CSS-Klasse (color-picker) für die Farbfelder verwenden (in diesem Fall griff nicht der Alpha-Picker). In neuen Widgets öffnete sich keiner der Colorpicker, weder original, noch Alpha.

Eine andere CSS-Klasse für “meine” Farbfelder zu verwenden und den Aufruf entsprechend zu ändern löste den Konflikt mit den Widgets des Themes. Allerdings wurde bei Farbauswahl der Speichern-Button des Widgets nicht aktiviert (neues Feature seit WordPress 4.9). Nachfolgender Code löste auch das Problem (als eigene Datei angelegt und eingebunden, was allerdings nicht sein muss).

color-picker-handler.js

(function($) { function initColorPicker(widget) { widget.find('.color-picker-alpha').wpColorPicker({ change: _.throttle(function() { // For Customizer $(this).trigger('change'); }, 3000), clear: _.throttle(function() { // For Customizer $(this).trigger('change'); }, 4000) }); } function onFormUpdate(event, widget) { initColorPicker(widget); } /* nach dem Speichern und in neuen Widgets Colorpicker (re-)initialisieren */ $(document).on('widget-added widget-updated', onFormUpdate); /* Colorpicker initialisieren */ $(document).ready(function() { $('#widgets-right .widget:has(.color-picker-alpha)').each(function() { initColorPicker($(this)); }); }); }(jQuery));

Trigger-Lösung gefunden auf gist.github.com/rodica-andronache/54f3ea95bcaf76435e55.

Sollte der Colorpicker dennoch nicht wie erwartet funktionieren, liegt die Ursache sehr wahrscheinlich in einer inkompatiblen Komponente begründet. In einer Testinstallation mit WordPress 5.0 Alpha funktionierte die Initialisierung des Colorpickers bei einem neuen Widget nicht.

Eigene Farbpalette für den Colorpicker übergeben

Ein Nebenschauplatz ist die Definition einer eigenen, auf das Projekt abgestimmten Farbpalette, die dem Skript übergeben werden kann. Hierfür die gewünschten Farben in einem Array definieren.

function flxo_default_color_palettes() { return array( '#ffffff', '#95c11e', '#004a2b', '#7d004d', '#ff6699', '#ad458c', '#999999', '#777777' ); }

Das Array wird mit wp_localize_script() an den Colorpicker übergeben.

wp_register_script( 'wp-color-picker-alpha', PFAD . '/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '', true ); wp_localize_script( 'wp-color-picker-alpha' , 'palette', array( 'colorPalettes' => $this->flxo_default_color_palettes() ) ); wp_enqueue_script( 'flxo-handler', PFAD . '/color-picker-handler.js', array('wp-color-picker-alpha'), '', true )

Abschließend in der Datei wp-color-picker-alpha.ja die Zeile

palettes: self.options.palettes,

suchen und ersetzen durch

palettes: palette.colorPalettes,

.

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.