WordPress-Theme-Customizer um eigene Farbschemata erweitern

WordPress-Theme-Customizer um eigene Farbschemata erweitern 1

In unserem heutigen Tutorial möchte ich euch eine nützliche Theme-Erweiterung zeigen: Wie erweitere ich den Customizer von WordPress um verschiedene Farbschemata, um diese im Frontend entsprechend auszuwerten.

Diese Implementation wird bereits in unseren Hamburg-Theme eingesetzt, um dem Benutzer von Haus aus drei verschiedene Farbschemata zu liefern. Zusätzlich kann in einem Child-Theme, über den entsprechenden Filter, einfach und schnell ein neues Schema hinzugefügt werden.

Der Theme-Customizer in Aktion:

Für den kompletten Customizer benötigen wir folgende vier Bausteine:

  • Eigene Customizer-Klasse
  • Registrieren des Customizers
  • Farbschema bereitstellen
  • Ausgabe des Farbschemas im Frontend

Eigene Customizer-Klasse definieren

WordPress bietet bereits seit der Version 3.4 mit der Customizer API eine umfangreiche Schnittstelle um das Theme nach Wünschen on the fly zu gestalten. Diese API wollen wir uns heute zu nutze machen und entsprechend erweitern.

Da wir für unsere Farbschemata nicht mit normalen Select-Feldern oder Checkboxen arbeiten wollen, sondern auch die verschiedenen Schemata visuell hervorheben möchten, erstellen wir uns zuerst unsere eigene Customizer-Klasse. Diese Klasse erbt die Basisklasse WP_Customize_Control:

class Marketpress_Customizer_Color_Scheme extends WP_Customize_Control {

	protected $schemes, $default_scheme;

 	/**
	 * Constructor.
	 *
	 * @param	WP_Customize_Manager $manager
	 * @param	String $id
	 * @param	Array $args
	 * @return	Void
	*/
	public function __construct( WP_Customize_Manager $manager, $id, Array $args = array() ) {
		$this->schemes		= $args[ 'schemes' ];
		$this->default_scheme	= $args[ 'default' ];
		parent::__construct( $manager, $id, $args );
	}

	/**
	 * Callback to render the Content in our Customizer-Panel
	 *
	 * @return Void
	*/
	public function render_content() {
		$current = get_theme_mod( $this->id, $this->default_scheme );
		?>
    <?php foreach ( $this->schemes as $key => $values ) { echo ‘

  • ‘; echo $this->get_radio( $key, $values, $current ); echo ‘
  • ‘; } ?>

		<?php
	}

	/**
	 * Generate a radio-button
	 *
	 * @param	String $key
	 * @param	Array $values
	 * @param	String $current
	 *
	 * @return	String $output
	*/
	protected function get_radio( $key, Array $values, $current ) {
		$output = sprintf(
			'',
			"$this->id-$key",
			$values[ 'foreground' ],
			$values[ 'background' ],
			$this->id,
			checked( $key, $current, FALSE ),
			esc_html( $values[ 'label' ] ),
			$key,
			$this->get_link()
		);
		return $output;
	}
}

Innerhalb unseres Konstruktors müssen wir den Konstruktor der geerbten WP_Customize_Control-Klasse aufrufen um die entsprechenden Argumente zu setzen.

Interessant wird es bei der Methode render_content(). Mit dieser überschreiben wir die bereits vorhandene Methode aus der Basisklasse, um die Anzeige entsprechend zu manipulieren. Standardmäßig wird nur Input-Text, -Checkbox, -Radio, Select-Fields und Dropdown-Pages unterstützt. Für unsere neue Methode möchten wir eigene Radio-Buttons mit entsprechender farblicher Hervorhebung, je nach Farbschema, generieren.

Registrieren des Customizers

Um den Customizer auch nutzen zu können, müssen wir diesen registrieren. Hierfür hat WordPress den Hook customize_register bereitgestellt.

add_action( 'customize_register', 'marketpress_register_color_scheme_customizer' );

/**
 * Adding our own colorscheme "burly-wood"
 *
 * @wp-hook 	customize_register
 * @param	WP_Customize_Manager $wp_customize
 * @return	Void
 */
function marketpress_register_color_scheme_customizer( WP_Customize_Manager $wp_customize ) {

	$schemes	= marketpress_get_color_schemes();
	$section	= 'color_scheme_section';
	$key		= 'color_scheme';
	$title		= __( 'Color scheme', 'marketpress' );
	$section_args	= array (
		'title'    => $title,
		'priority' => 5,
	);

	$wp_customize->add_section(
		$section,
		$section_args
	);

	$wp_customize->add_setting(
		$key,
		array ( 'default' => 'default' )
	);

	$customizer_args = array (
		'label'    => $title,
		'section'  => $section,
		'settings' => $key,
		'schemes'  => $schemes,
		'default'  => 'blue'
	);

	$wp_customize->add_control(
		new Marketpress_Customizer_Color_Scheme(
			$wp_customize,
			'color_scheme',
			$customizer_args
		)
	);
}

Unser Callback bekommt eine Instanz der Klasse WP_Customize_Manager übergeben. Mit dieser Instanz können wir unsere eigenen Sektionen und Kontroll-Elemente definieren.

Zuerst registrieren wir mit der Methode add_section() eine neue Sektion im Customizer-Panel, da wir einen separaten Punkt haben möchten.
Mit der Methode add_setting() können wir eine neue Einstellung registrieren. Der $key ist dabei später zum Laden und Ausgeben der gespeicherten Einstellung wichtig. Der “transport” ist per Default auf “refresh”, also: “Wenn ich hier einen Wert ändere, zeige die Änderung on the fly an”. Der “type” ist per Default auf “theme_mod” gesetzt. Alternative können wir auch “option” wählen um eine eigene Option anzulegen. Da wir aber später per get_theme_mod() auf unser neues Feature zugreifen wollen, belassen wir dies so.

Tipp: Als “type” in der Methode add_setting() kann man auch einen eigenen definieren und später beim Speichern per Filter auf customize_update_{type} eine Speicherroutine dafür festlegen.

Zu guter letzt registrieren wir mit der Methode add_control() unsere neue Klasse mit den hübschen Kontroll-Elementen.

Farbschema bereitstellen

Um verschiedene Farbschemata im Customizer bereitzustellen, brauchen wir die folgende Hilfsfunktion an unterschiedlichen Stellen:

/**
 * Get color schemes.
 *
 * @return-filter	marketpress_get_color_schemes
 * @return			Array
 */
function marketpress_get_color_schemes() {

	$schemes = array (
		'blue' => array (
			'background' => '2CC2E1',
			'foreground' => 'fff',
			'label'      => _x( 'Blue', 'Color scheme picker', 'marketpress' )
		),
		'yellow' => array (
			'background' => 'ffbc00',
			'foreground' => 'fff',
			'label'      => _x( 'Yellow', 'Color scheme picker', 'marketpress' )
		)
	);

	return apply_filters( 'marketpress_get_color_schemes', $schemes );
}

Die Funktion beinhaltet zusätzlich einen Return-Filter um eigene Schemata zu registrieren. Wichtig für die korrekte Darstellung hierbei ist die Definition der folgenden 3 Werte im Schema-Array:

  • Background (Hintergrund)
  • Foreground (Textfarbe)
  • Label (Beschriftung im Customizer)

Der Key ist zugleich auch der Schemaname und wird später in einer Body-Klasse hinzugefügt.

Beispiel-Filter für eigenes Schema

Ein Beispielfilter, um unser eigenes Schema “Burly-Wood” zu registrieren, sieht wie folgt aus:

add_filter( 'marketpress_get_color_schemes', 'marketpress_demo_filter_add_color_scheme' );

/**
 * Adding our own colorschema “burly-wood”
 *
 * @wp-hook 	marketpress_get_color_schemes
 * @param	Array $schemes
 * @return	Array $schemes
 */
function marketpress_demo_filter_add_color_scheme( Array $schemes = array() ) {

	$schemes[ 'burly-wood' ] = array(
		'background' => 'deb887',
		'foreground' => '000000',
		'label'      => _x( 'Burly Wood', 'Color scheme picker', 'marketpress' )
	);

	return $schemes;
}

Ausgabe des Colorschemas im Frontend

Nachdem wir den Customizer erweitert haben und entsprechend die Einstellungen abspeichern, müssen wir diese noch im Frontend ausgeben und unser CSS erweitern. Hierfür nutzen wir in unserem Hamburg-Theme den Hook body_class, um unser Farbschema anschließend entsprechend per CSS gestalten zu können:

add_filter( 'body_class', 'marketpress_filter_body_class_add_colorscheme' );

/**
 * Adding our color scheme to the body-classes
 *
 * @wp-hook	body_class
 * @uses	get_theme_mod, marketpress_get_color_schemes
 * @param	Array $classes
 * @return	Array $classes
 */
function marketpress_filter_body_class_add_colorscheme( Array $classes ) {

	$scheme		= get_theme_mod( 'color_scheme' );
	$schemes	= marketpress_get_color_schemes();

	if ( empty ( $schemes ) || !array_key_exists ( $scheme, $schemes ) ) {
		$scheme = "default";
	}

	$classes[] = "color-scheme-" . $scheme;

	return $classes;
}

Über die WP-Funktion get_theme_mod() (wir haben bei add_setting() den Default-Wert bei “type” gelassen) holen wir unser gespeichertes “color_scheme” (unser $key in add_setting()) und fügen diesen als CSS-Klasse zum Body-Element hinzu.

Fazit

Ich hoffe das Tutorial hat euch gefallen und ihr konntet einen Einblick in die Customizer-API bekommen. Die Farbschema-Erweiterung ist mittlerweile ein geschätztes Standardfeature in unserem Hamburg-Theme geworden. In vielen Kundenprojekten konnten wir schon den Nutzen aus unterschiedlichsten Customizer-Erweiterungen ziehen. Welche Erweiterungen für die Customizer-API nutzt ihr?

Newsletter abonnieren

Das könnte dich auch interessieren

Lokale Installation von WordPress und WooCommerce

Über eine lokale Installation von WordPress auf deinem Computer kannst du WooCommerce testen, Updates einspielen und Anpassungen durchführen - alles r ...

Mehr erfahren

WooCommerce einrichten Teil 1 - Grundeinstellungen & Produkte

Aktualisiert am 14.12.2020 Die Onlineshop-Erweiterung WooCommerce ist ein mächtiges Werkzeug mit unzähligen Einstellungsmöglichkeiten. Der nachfolgen ...

Mehr erfahren

Online-Kurse mit WordPress erstellen und mit WooCommerce verkaufen

Online-Kurse sind zeitgemäß und vermitteln ortsunabhängiges Wissen an Lernende. Über den Verkauf von Online-Kursen mit WooCommerce kannst du dein eigen ...

Mehr erfahren

Kommentare

30 Kommentare

  1. Hallo,

    welche Dateien müssen geändert werden?

    1. Hallo Reinhard,

      vielen Dank für deine Antwort auf den Beitrag. Wie meinst du das mit “welche Dateien müssen geändert werden?”? Möchtest du den Color-Switcher in dein Theme einbauen? Wenn ja, dann musst du neue Dateien mit dem Programm-Code erstellen und diese entsprechend in deiner functions.php inkludieren.

      Viele Grüße,
      Chris

  2. Hallo,

    ich habe das Hamburg Theme aktiv, ein Child Theme ebenso definiert. Nun möchte ich das bestehende Farbset des Color-Switchers ändern und eine vierte Farbe definieren. Welche Datein müssen dazu angepasst werden?

    Vielen Dank!

    1. Guten Morgen Rheinhard,

      ah ok. Wenn du das Hamburg-Theme schon besitzt und dir ein eigenes Child-Theme erstellt hast, dann musst du nur den Demo-Filter in deine functions.php kopieren und entsprechend deine Farben definieren. Anschließend musst du noch deine style.css im Theme um das Farbschema erweitern, denn der Customizer fügt eine CSS-Klasse bei dem body-Tag hinzu (color-scheme-{schema_name}). 🙂

      Viele Grüße,
      Chris

  3. Hi hab auch das Hamburg Theme im Einsatz leider funktioniert der Demo Filter aber nicht 🙁
    Hab dann folgenden Hook verwendet:

    add_filter( 'hamburg-child_color_schemes', 'sportslab_filter_add_color_scheme' );
    
    /**
     * @wp-hook 	theme_color_schemes
     * @param	Array $schemes
     * @return	Array $schemes
     */
    function sportslab_filter_add_color_scheme( Array $schemes = array() ) {
    
    	$schemes[ 'sportslab' ] = array(
    		'background' => '005494',
    		'foreground' => 'fff',
    		'label'      => _x( 'Sportslab', 'Color scheme picker', 'marketpress' )
    	);
    
    	return $schemes;
    }

    Das hat auch funktioniert sodass ich das Schema auswählen kann, leider greift aber mein CSS nicht 🙁

    meine style.css

    /*
    Theme Name: Hamburg Sportslab
    Template: hamburg
    */
    
    @import url("../hamburg/style.css");
    
    /*************** ADD YOUR CUSTOM CSS HERE  ***************/
    
    /* =Color scheme Blue
    ----------------------------------------------- */
    .color-scheme-sportslab [type="submit"],
    .js .color-scheme-sportslab .menu-toggle,
    .color-scheme-sportslab .pagination li:hover a,
    .color-scheme-sportslab .navbar.fixed-top,
    .color-scheme-sportslab .navbar.fixed-top .menu,
    .color-scheme-sportslab .navbar.fixed-top .menu li ul .current-menu-item > a,
    .color-scheme-sportslab .site-nav-primary .menu a:hover,
    .color-scheme-sportslab .site-nav-primary .menu a:focus,
    .color-scheme-sportslab .site-nav-primary .menu > li:hover,
    .color-scheme-sportslab .site-nav-primary .menu > li.focussed,
    .color-scheme-sportslab .site-nav-primary .current-menu-item > a,
    .color-scheme-sportslab .site-nav-primary .menu > .current-menu-ancestor > a,
    .color-scheme-sportslab .site-footer .search-form .search-submit:before,
    .color-scheme-sportslab .flex-carousel .flex-entry .flex-title,
    .color-scheme-sportslab .flex-direction-nav li a:before,
    .color-scheme-sportslab .entry-content .more-link:hover,
    .color-scheme-sportslab .entry-summary .more-link:hover,
    .color-scheme-sportslab .cat-links a:hover,
    .color-scheme-sportslab .tag-links a:hover,
    .color-scheme-sportslab .comments-link a:hover,
    .color-scheme-sportslab[class*="color-scheme-"] .comment-reply-link:hover,
    .color-scheme-sportslab .social-sharing-links a:hover {
    	background-color: #005494;
    }
    .color-scheme-sportslab .navbar.fixed-top .menu ul,
    .color-scheme-sportslab .navbar.fixed-top .menu a:hover,
    .color-scheme-sportslab .navbar.fixed-top .menu a:focus,
    .color-scheme-sportslab .navbar.fixed-top .menu li ul a,
    .color-scheme-sportslab .navbar.fixed-top .menu > li:hover,
    .color-scheme-sportslab .navbar.fixed-top .menu > .focussed,
    .color-scheme-sportslab .navbar.fixed-top .current-menu-item > a,
    .color-scheme-sportslab .site-meta-nav-user .menu > li > a,
    .color-scheme-sportslab .site-nav-primary .menu > li ul a:hover,
    .color-scheme-sportslab .site-nav-primary .menu > li ul li:hover,
    .color-scheme-sportslab .site-nav-primary .menu > li ul .current-menu-item > a,
    .color-scheme-sportslab .mlp_language_box ul li.current a {
    	background-color: #1ba3bf;
    }
    .color-scheme-sportslab a,
    .color-scheme-sportslab .entry-title a:hover,
    .color-scheme-sportslab #reply-title a:hover,
    .color-scheme-sportslab #comments-title a:hover,
    .color-scheme-sportslab .edit-link a:hover,
    .color-scheme-sportslab .entry-meta .date a:hover,
    .color-scheme-sportslab .entry-meta .author a:hover,
    .color-scheme-sportslab .backtotop span:before,
    .color-scheme-sportslab .entry-content ul > li:before,
    .color-scheme-sportslab.woocommerce.single-product .product_meta a:hover {
    	color: #005494;
    }
    .color-scheme-sportslab a:visited {
    	color: #157d92;
    }
    .color-scheme-sportslab .sticky,
    .color-scheme-sportslab .commentlist li.comment.bypostauthor {
    	border-color: #005494;
    }
    @media screen and (min-width: 768px) {
    	.color-scheme-sportslab .site-nav-primary .menu ul {
    		background-color: #005494;
    	}
    }
    1. Guten Morgen kateallen,

      vielen Dank für deine Rückfrage. Hier gibt es viele Ansatzpunkte. Zuerst würde ich folgende 2 Punkte prüfen:

      – Wird das CSS korrekt geladen?
      – Ist die entsprechende Body-Class korrekt gesetzt?

      Ich glaube aber, unsere Supporter im Helpdesk können dir hier bestimmt schneller weiterhelfen. 🙂

      Halt uns auf dem Laufenden!

      Viele Grüße,
      Chris

  4. Im ersten Code-Block ist das Quoting an einer Stelle defekt:

    ' %6$s’,

  5. ' %6$s',
  6. Gnahh. 🙁

    1. genau so fühle ich mich auch 😀 habe die Stelle schon mal angepackt, dafür wurde dann an einer anderen Stelle etwas wieder geändert. 😀 Neuer Versuch..

  7. In Zeile 28 im ersten Code-Block fehlt noch ein startendes

    ?php

    .

    Zudem bekomme ich die Fehlermeldung “Undefined variable: schemes” (beim Versuch mit diesem Code mal testweise _s zu erweitern)

  8. foreach( $schemes as $key => $values ) {

    muss lauten

    foreach( $this->schemes as $key => $values ) {

    Dann klappt es.

    1. @Torsten: Danke für den Hinweis!

  9. Da fehlt aber doch immer noch eine Zeile in der das input mit dem Typ “radio” ausgegeben wird… Ziemlich nerviges Tutorial, wenn es nicht den Zweck erfüllt einen Einstieg in den Customizer zu geben, weil einem ständig Fehler in den Weg fallen … 🙁

    1. Hey Torsten, sorry wegen der Umstände, es hatte wohl leider einige Formatierungsfehler bei der Übertragung des Artikels aus einem (schauder) Google-Doc gegeben. Jetzt müsste aber alles stimmen, oder hast du immer noch ein akutes Problem?

  10. Moin Caspar,
    siehe mein letzter Kommentar. Müsste da nicht noch irgendwo ein input type=radio drin stehen …?

    1. So, Chris hat den Code oben noch mal aktualisiert. Jetzt müsste es passen. Sorry für die Umstände und viel Erfolg!

  11. Ja, jetzt sehe ich ihn auch! Perfekt. 🙂

  12. Eine letzte Frage: Im ersten Code-Block steht in Zeile 58 der Funktionsaufruf get_link. Diese Funktion scheint zu fehlen, denn die WP-Funktion, die seit WP 2.1 deprecated ist, ist es ja sicher nicht. Ich versuche nur dieses Beispiel zum Laufen zu bekommen …

  13. Mein Fehler, ist ja in der WP-Klasse definiert. Hatte einen Fehler in meinem Code. Jetzt läuft es! 🙂

  14. Sebastian Schmid

    Hallo,

    habt ihr ein funktionierendes Codebeispiel, mit dem ich das für ein Child Theme machen kann?

    Also einfach einen Codeblock, den ich in die funktions.php reinkopieren kann … 🙂

    1. Hallo Sebastian,

      vielen Dank für deinen Kommentar.

      Im Prinzip ist der ganze Code von oben schon der von dir gesuchte “Code-Block”, es fehlt aber dann immer noch die Anpassung des CSS, welche von Theme zu Theme ja unterschiedlich ist.

      Viele Grüße,
      Chris

      1. ich hab’s probiert, und es geht nicht. Wenn ich den Code-Block in die functions.php des Child-Theme gebe, scheint die Farbe nicht auf.

        Es wäre super, wenn ihr das probieren und eine funktionierende Version, d.h. genau ein Code-Block, den man in die functions.php des Child-Themes gibt, hier veröffentlichen könntet.

        lg,
        Sebastian

      2. Hallo Sebastian,

        “geht nicht” gibt’s nicht. Bitte gib uns mehr Informationen darüber, was du gemacht hast, was das Ergebnis ist (eventuelle Fehler) und z.B. welches Theme du verwendest.

        Optimal wäre es, wenn du die Klasse und die Funktion in eine eigene Datei (z.B.: inc/customizer.php) auslagerst. Die Action

        add_action( 'customize_register', 'marketpress_register_color_scheme_customizer' );

        sollte nach dem Inkludieren der Datei und im Callback von after_setup_theme aufgerufen werden. An dieser sind alle benötigen Klassen und Funktionen geladen damit der Code reibungslos funktioniert.

        Viele Grüße,
        Chris

      3. ok.

        Ich hab’ die letzten 2 Code-Blöcke (marketpress_demo_filter_add_color_scheme und marketpress_filter_body_class_add_colorscheme, jeweils incl add_action) in die functions.php des Child Theme kopiert.

        Die Fehlermeldung ist hier:

        $schemes= marketpress_get_color_schemes();

        Fatal error: Call to undefined function marketpress_get_color_schemes() in /homepages/30/d557693664/htdocs/clickandbuilds/Whaleprinted/wp-content/themes/hue/functions.php on line 79

        lg,
        Sebastian

      4. das Theme ist ein Child von Hamburg.

  15. so, ich hab’ jetzt testweise den drittletzten Codeblock von dieser Seite hier (

    marketpress_get_color_schemes() 

    ) auch reinkopiert. Keine Fehlermeldung mehr, eigentlich sinnlose Aktion (warum sollte ich erst die get_color_schemes überschreiben, und dann mittels Filter bearbeiten? Da kann ich das neue Theme auch gleich reinschreiben…), aber es geht trotzdem nicht; immer noch erscheinen nur Blau, Gelb und Dunkel. Burlywood ist auch jetzt nicht zu sehen.

    1. Hallo Sebastian,

      dieser Beitrag ist ein Tutorial und beschreibt, wie man den Customizer entsprechend ins Theme einbaut. Der Filter ist für den nächsten Schritt gedacht, wenn User diese Funktionalität in Ihr Themen einbauen, dann möchten diese ja auch eine API haben um z.B. in einem Child-Theme die Farbschemen zu erweitern.

      Wenn du eh das Hamburg Theme von uns verwendest, brauchst du auch nicht diesen Code aus den Beitrag, da Hamburg ja bereits einen Color Switcher mit liefert.

      Viele Grüße,
      Chris

      1. genau 🙂

        und wie genau kann ich jetzt zum Hamburg Color Switcher eine Farbe hinzufügen, wenn ich ein Child Theme verwende?

        Sorry für die großangelegte Verwirrung 🙂

      2. so, ich hab’s geschafft! Mein Child-Theme liegt im Verzeichnis “hue”.

        add_filter( 'hue_color_schemes', 'hue_filter_add_color_scheme' );
        
        /**
         * Adding our own colorschema “burly-wood”
         *
         * @wp-hook 	marketpress_get_color_schemes
         * @param	Array $schemes
         * @return	Array $schemes
         */
        function hue_filter_add_color_scheme( Array $schemes = array() ) {
        
        	$schemes[ 'burly-wood' ] = array(
        		'background' => 'deb887',
        		'foreground' => '000000',
        		'label'      => _x( 'Burly Wood', 'Color scheme picker', 'marketpress' )
        	);
        
        	return $schemes;
        }
        

        Fallstricke!

        add_filter( 'marketpress_get_color_schemes', 'marketpress_demo_filter_add_color_scheme' );
        

        Das

        marketpress

        ist hier durch den Child-Theme-Verzeichnis-Namen zu ersetzen.
        und “marketpress_get_color_schemes” ist falsch – es müsste “marketpress_color_schemes” heißen.

        Jetzt ist Burly Wood endlich sichtbar 🙂

Schreibe eine Antwort an Christian Brückner Antwort abbrechen

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

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>