Colorpicker in ein WordPress-Theme integrieren

0

In diesem Artikel werde ich erklären, wie Sie mit verhältnismäßig geringem Aufwand einen Colorpicker in ein WordPress-Theme integrieren können. Ein Colorpicker dient dazu, eine Farbauswahl zu treffen. Dabei gibt es verschiedenen Formen, beispielsweise ein Farbrad, das unten dargestellt ist. Hier können der Farbton sowie Sättigung und Helligkeit des zugehörigen Farbtons eingestellt werden.
Anschließend kann der eingestellte Farbwert zum Beispiel als Hintergrundfarbe für ein Element auf der Webseite (Hintergrundfarbe, Header, Footer, usw.) weiterverarbeitet werden.

Beispiel für einen Colorpicker (hier im LB-Projects Theme Version 2.9)

1) Einbau des Colorpickers in das Admin-Panel

Um einen solchen Colorpicker in Ihr Theme zu integrieren, muss der nachstehende Quellcode in die functions.php des Themes eingefügt werden.

Hier wird durch die Funktion mytheme_init_scripts() zunächst ein Script mit dem Namen farbtastic initialisiert. Hierbei handelt es sich um den eigentlichen Colorpicker. Des Weiteren wird in der Funktion das zugehörige Stylesheet für den Colorpicker aktiviert. Sowohl Script als auch Stylesheet sind bereits in WordPress enthalten und müssen nicht separat heruntergeladen werden.

Die nächste Funktion mytheme_admin_page() hat die einfache Aufgabe, eine Seite mit dem Namen “color picker” im Admin-Panel unterhalb des Menüpunkts Design zu generieren. Hier wird später der Colorpicker angezeigt.

Schließlich folgt die Hauptfunktion des Colorpickers mit dem Namen color_picker_option_page(). Innerhalb dieser Funktion wird festgelegt, was auf der zuvor erstellten Admin-Seite angezeigt wird – in diesem Fall also das Farbrad. Deshalb wird zunächst eine Javascript-Funktion eingebunden, die den Colorpicker initialisiert. Anschließend folgt ein Formular, in dem das Farbrad sowie ein Formularfeld für die aktuell ausgewählte Farbe und ein Button zum Abspeichern des Wertes ausgegeben werden.

Wird dieser Button angeklickt, so wird die Funktion color_picker_option_update() aufgerufen, die darunter zu finden ist. Dort wird mithilfe der Funktion update_option der aktuelle Farbwert in die Option color1 geschrieben und steht zur globalen Verwendung innerhalb des Themes zur Verfügung.

<?php

//Farbtastic Colorpicker aktivieren
function mytheme_init_scripts() {
    wp_enqueue_style( 'farbtastic' );
    wp_enqueue_script( 'farbtastic' );
}
add_action('init', 'mytheme_init_scripts');


//Admin-Seite für den Colorpicker erstellen
function mytheme_admin_page() {
	add_theme_page('color picker', 'color picker', 'read', 'color_picker_option', 'color_picker_option_page');
}
add_action('admin_menu', 'mytheme_admin_page');


//Funktionen der Colorpicker-Admin-Seite
function color_picker_option_page() {
	
	//Speicherung des Wertes bei Betätigung des Buttons mit dem Namen "update_options"
	if ( isset($_POST['update_options'])) { color_picker_option_update(); }

	?>
	
	<?php //jQuery-Funktion für die Darstellung des Farbrades ?>
	<script type="text/javascript">
		jQuery(document).ready(function($){
			$('#color_picker_color1').farbtastic('#color1');            
		});
	</script>
	
	<?php //Formular für die Darstellung des Farbrades, Farbfeldes und "Speichern"-Buttons ?>
	<form method="POST" action="">
		<input type="text" id="color1" name="color_picker_color1" value="<?php if( get_option('color1') != "") { echo get_option('color1'); } else { echo '#ffffff'; } ?>" />
		<div id="color_picker_color1"></div>
		<p><input type="submit" name="update_options" value="Update Options" /></p>
	</form>
	
	<?php
}


//Funktion für die Speicherung des Farbwertes
function color_picker_option_update() {
    update_option('color1', esc_html($_POST['color_picker_color1']));
}

?>

2) Verwendung des gespeicherten Farbwertes im Theme

Nun ist der im Colorpicker ausgewählte Farbwert zwar in der Datenbank gespeichert, allerdings hat dies noch keine sichtbaren Auswirkungen auf die Darstellung der Webseite. Um beispielweise die Hintergrundfarbe einer Webseite mithilfe des Colorpickers verändern zu können, muss der Farbwert in den entsprechenden Selektor im Stylesheet geschrieben werden. Dazu wird das HTML-Attribut <style> verwendent. Optimalerweise fügen Sie untenstehendes Codesnippet am Ende des HTML-Headers, den Sie in der header.php Ihres Themes finden, ein. Dadurch werden Eigenschaften in zuvor eingebundenen Stylesheets überschrieben und der Hintergrund erhält die Farbe, die Sie mithilfe des Colorpickers ausgewählt haben. Das Attribut !important stellt zusätzlich sicher, dass der Farbwert des Colorpickers den im Stylesheet festgelegten Wert überschreibt.

<style type="text/css">
    body { background-color: <?php echo get_option('color1') !important; ?>; }
</style>

Wird nun zum Beispiel der Farbwert #aadbfd für ein helles Blau am Colorpicker eingestellt und gespeichert, wird der im Stylesheet festgelegte Wert für die Hintergrundfarbe (hellgrau) überschrieben.

Über den Colorpicker veränderte Hintergrundfarbe

3) Implementierung der Funktion in das LB-Projects Theme

In der kommenden Version 2.9 wird das LB-Projects Theme Optionen für die Einstellung der Hintergrundfarben von Header und Footer bieten. Farbige Akzente wie zum Beispiel Links werden dabei in der gleichen Farbe wie der Footer dargestellt. Auch hier kam der oben vorgestellte Colorpicker farbtastic zum Einsatz.

Colorpicker in der kommenden Version des LB-Projects Themes

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.