Startseite » WordPress » Mehrere Colorpicker in den Theme Einstellungen verwenden
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 "";
// Ergänzung für colorpicker
if ($field_class == " color")
echo '';
echo ($desc != '') ? "
$desc" : "";
// Ergänzung für colorpicker
if ($field_class == " color") {
echo '";
}
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.
Ähnliche Artikel
-
SemCodeFix – Plugin und valides XHTML
Zum Anzeigen von Code-Schnippseln in den Beiträgen von WordPress existieren einige Lösungen. Sympathisch sind mir immer die einfachen Dinge, 19. Jun. 2007by tuxlog -
wp-championship ist gerüstet für die Bundesliga Saison 2015/2016
wp-championship ist gerüstet für die Bundesliga Saison 2015/2016. Manuel hat sich wieder die Mühe gemacht die Spieldaten für die 27. Jun. 2015by tuxlog -
Webp Javascript für WordPress – wp-webp-0.7
Webp Javascript für WordPress – wp-webp-0.7 Dominik Homberger hat Anfang des Jahres eine neue Version der libwebp in Javascript 16. Jun. 2008by tuxlog
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.