Mehrere Colorpicker in den Theme Einstellungen verwenden

Nach einigen Jahren in der Plugin Entwicklung, bastle ich gerade an meinem ersten eigenen Theme. Dabei bin ich auf das Problem gestoßen, mehrere Colorpicker auf der Seite mit den Theme Einstellungen einzubauen.

Ausgehend von dem wirklich ausgezeichneten Posting von Sarah Neuber, Using The Settings API (Part 1) habe ich mir erst einmal die grundsätzliche Vorgehensweise beim Bau eine Einstellungsseite für mein Theme angelesen. Dann stand ich vor dem Problem mehrere Colorpicker einzubauen für die Farben der Navigationsleiste etc. und bin auf den Artikel How to add a color picker to your wordpress plugin or theme gestoßen. Von da aus ist es ziemlich einfach mehrere Colorpicker einzubauen. Jedoch sollte man die Vorgehensweise beider Artikel bzw. die Settings API von WordPress verstanden haben, wenn man weiter liest. ;-)

Bei der Definition der Option habe ich die Klasse „color“ für den Typ „text“ erfunden.

// fields for colors	
$options[] = array(
	"section" => "color",
	"id"      => "td_color_bg_nav",
	"title"   => __( 'Background color of navigation bar', 'td' ),
	"desc"    => __( 'Enter the color used for the background of the navigation bar.', 'td' ),
	"type"    => "text",
	"std"     => "#007733",
	"class"   => "color"
	);

Und in der Funktion td_form_field_fn, die Funktion, die aus den Parametern der Optionen HTML macht folgendes ergänzt:

// additional field class. output only if the class is defined in the create_setting arguments
$field_class = ($class != '') ? ' ' . $class : '';
 
// switch html display based on the setting type.	
switch ( $type ) {
    case 'text':
 	$options[$id] = stripslashes($options[$id]);
	$options[$id] = esc_attr( $options[$id]);
	echo "<input class='regular-text$field_class' type='text' id='$id' name='" . $td_option_name . "[$id]' value='$options[$id]' />";
 
        // Ergänzung für colorpicker
	if ($field_class == " color")
		echo '<div id="tdcolorpicker-'.$id.'"></div>';
 
	echo ($desc != '') ? "<br /><span class='description'>$desc</span>" : "";
 
        // Ergänzung für colorpicker
	if ($field_class == " color") {
		echo '<script type="text/javascript">';
		echo '  jQuery(document).ready(function() {';
		echo "  jQuery('#tdcolorpicker-".$id."').hide();";
		echo "  jQuery('#tdcolorpicker-".$id."').farbtastic('#".$id."');";
		echo "  jQuery('#".$id."').click(function() 
                               jQuery('#tdcolorpicker-".$id."').slideToggle()});";
  		echo "});";
		echo "</script>";
	}
		break;
...

Damit wird für jeden Colorpicker das Stückchen Javascript, versehen mit einer eigenen ID hinzugefügt, so dass es keine Kollision mit den Namen und ID’s gibt. Gleichermaßen wird die ID des div-Tags auf die gleiche Weise eindeutig gemacht.

Auf gar keinen Fall sollte man vergessen

// for colorpicker
wp_enqueue_style( 'farbtastic' );
wp_enqueue_script( 'farbtastic' );

der Skriptfunktion aus dem ersten Tutorial zu ergänzen.

So richtig elegant ist es nicht, aber es hat einen Vorteil: Es funktioniert.
Wer eine elegantere Lösung kennt, möge sie uns allen mitteilen.

Kommentar

  1. sodom:

    DANKE … DANKE … Auch wenns schon ne weile her ist,
    ich hab ALLE Beispiele probiert, alle Vorschläge NICHTS GING.

    Das Javascript direkt einzubinden für jedes Feld war die Lösung … und zwar die EINZIGE.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
mehr...
 
ALL-INKL.COM - Webhosting Server Hosting Domain Provider Blogverzeichnis - Blog Verzeichnis bloggerei.de