smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

WordPress: Neuen Color-Picker Iris in einem Plugin nutzen

25. Februar 2013
Stephan
WordPress: Neuen Standard-Color-Picker in einem Plugin einsetzen

Eines der neuen Features von WordPress 3.5 ist der neue standardmäßige Iris Color-Picker zur einfachen Farbauswahl.

Dieser löst den somit „veralteten“ (deprecated) Color-Picker Farbtastic ab. Da ich Farbtastic in meinem WordPress Plugin In Image Ads Manager verwendete, habe ich nun mein Plugin überarbeitet und den neuen Iris Color-Picker eingebunden.

Damit ist natürlich auch der Artikel „WordPress: Farbtastic Color-Picker in Plugin nutzen“ hinfällig. Deshalb möchte ich im Folgenden zeigen, wie ihr den neuen Color-Picker in einem eurer Plugins einbinden und verwenden könnt.

HTML-Grundgerüst

Für den Iris Color-Picker benötigen wir lediglich ein normales input-Eingabefeld:

<input class="colorpicker" name="title-color" type="text" />

Jedem Eingabefeld, dass zur Farbauswahl dienen soll und bei dem der Color-Picker angezeigt werden soll, fügt ihr die Klasse colorpicker hinzu.

CSS & JavaScript für Iris laden

Nun müssen wir die entsprechenden CSS & JavaScript Dateien laden. Dabei könnt ihr die CSS-Datei in eurem Plugin wie folgt einbinden:

wp_enqueue_style( 'wp-color-picker' );

Analog dazu laden wir die JavaScript-Datei, wobei laut wordpress.org folgender Code ausreichen soll:

wp_enqueue_script( 
    'my-script-handle', 
    plugins_url('my-script.js', __FILE__ ), 
    array( 'wp-color-picker' ), 
    false, 
    true 
);

In meinem Fall hat das leider nicht richtig funktioniert. Problem war, dass die jQuery UI Komponenten „draggable“ und „slider“ nicht autmatisch mit eingebunden wurden. Jedoch benötigt der Iris Color-Picker diese Komponenten.

Lösung für mein Problem war dann der folgende Code:

wp_enqueue_script( 'wp-color-picker' );
wp_enqueue_script(
    'my-script-handle', 
    plugins_url('my-script.js', __FILE__ ), 
    array( 'jquery', 'jquery-ui-draggable', 'jquery-ui-slider', 'wp-color-picker' ),
    false,
    true
);

Ich habe also die benötigten JavaScript-Komponenten als Abhängigkeiten für die individuelle JavaScript-Datei meines Plugins mit angegeben.

Iris Color-Picker an input-Felder binden

Hierfür zeige ich euch mal direkt den Code aus meiner Plugin JavaScript-Datei:

jQuery( document ).ready( function ()
{
	initColorPicker();	
} );

function initColorPicker()
{
	jQuery('.colorpicker').iris({
		change: function( event, ui ) {
			var input = jQuery( this );
			var color = ui.color.toString();
			
			input.val( color ).css( 'background', color );
			input.trigger( 'change' );
		},
		palettes: true
	} );
	
	jQuery( '.colorpicker' ).click( function ( event )
	{		
		jQuery( this ).iris( 'toggle' );
	} );
}

Wie zu sehen, benötigen wir keinen komplexen Code, aber trotzdem erkläre ich nochmal einige Zeilen.

Zeile 1 – 4:
Aufruf der initColorPicker-Funktion, sobald das DOM fertig geladen ist.

Zeile 8 – 17:
Wir weisen hier allen input-Feldern mit der Klasse colorpicker den Iris Color-Picker zu.

Beim Aufruf der iris-Funktion können wir zusätzlich ein Objekt mit verschiedenen Optionen mit übergeben.

Die möglichen Optionen und deren Erklärung findet ihr in der Iris Color-Picker Dokumentation.

Im obigen Beispielcode geben wir zwei Optionen an. Als erstes wäre da change, womit wir eine Callback-Funktion angeben können. Dieses Callback wird ausgelöst, sobald der Nutzer eine Farbe im Color-Picker anklickt bzw. auswählt.

In unserem Beispiel weisen wir dem entsprechenden input-Feld daraufhin die ausgewählte Farbe als Hintergrundfarbe zu. Außerdem schreiben wir den Farbwert in das Eingabefeld.

Den zweiten Parameter den wir übergeben, lautet palettes. Der dient dazu eine zusätzliche Farbpalette mit gängigen Farben anzuzeigen.

Zeile 19 – 22:
Sobald bei einem unserer input-Felder ein click-Event ausgelöst wird, zeigen wir den Color-Picker an bzw. blenden ihn wieder aus.

Beispiel:

WordPress: Iris Color-Picker in Aktion

Fazit

Genauso wir der alte Color-Picker Farbtastic lässt sich auch der neue Iris Color-Picker von WordPress sehr leicht in einem Plugin integrieren.

Wie findet ihr den neuen Color-Picker? Habt ihr ihn schon in einem eurer Themes oder Plugins im Einsatz?

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!