WordPress-Theme-Customizer um eigene Farbschemata erweitern

bwp

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 (Demo) 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

Farbschemata Blue, Yellow und Burly Wood im Customierz
Farbschemata Blue, Yellow und Burly Wood im Customizer

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:

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.

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:

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:

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:

Ü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?

Beitrag teilen

Author Avatar

Hi! Mein Name ist Chris und ich arbeite als leidenschaftlicher Webentwickler im X-Team der Inpsyde GmbH. Meine Spezialgebiete sind die Backend- und Frontendentwicklung. Wenn ich nicht gerade über Barrierefreiheit und Usability diskutiere, bin ich auf Google+ unterwegs. In meiner Freizeit absolviere ich ein Informatikfernstudium, treibe gern und viel Sport, verschlinge ein Buch nach dem Anderen und blogge auf www.chrico.info.

Auch interessant:

woonews19

WooCommerce Wochenrückblick #19: Google Analytics, kostenlose Themes und neue Kennzeichnungspflicht

von Michael Firnkes

Die Shop-Analyse ist wichtig, muss aber rechtlich abgesichert werden. Für WooCommerce gibt es neue Theme-Inspirationen und ein neues German Market. Dies u ...

Weiterlesen
slack-blog

Neues Plugin: Slack Connector - Verbinde WordPress, WooCommerce und Slack

von Michael Firnkes

Anfangs wollten wir lediglich unsere eigenen Slack-Prozesse optimieren. Mit automatisierten Benachrichtigungen aus dem MarketPress-Shop, dem Blog und unser ...

Weiterlesen
woo26

WooCommerce 2.6: Deutlich mehr Versandoptionen, bessere Bestellübersicht

von Michael Firnkes

WooCommerce 2.6 "Zipping Zebra" steht kurz vor der Veröffentlichung, das Release ist für kommenden Dienstag geplant. Wir zeigen dir, was sich für dich ...

Weiterlesen
wp-geburtstag

13 Jahre WordPress - 13 Mal ein WooCommerce- oder Blog-Theme gewinnen

von Michael Firnkes

WordPress wird 13. Und wiederholt seine Erfolgsgeschichte: Mit WooCommerce. Feiere mit und gewinne eines unserer Top-Themes. WordPress hat einen rasante ...

Weiterlesen

Kommentare

30 Kommentare

  1. #1

    Hallo,

    welche Dateien müssen geändert werden?

    • #2

      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. #3

    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!

    • #4

      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. #5

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

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

    meine style.css

  4. #7

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

    ' %6$s’,

  5. #8

  6. #9

    Gnahh. 🙁

  7. #11

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

    .

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

  8. #12

    muss lauten

    Dann klappt es.

  9. #14

    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 … 🙁

  10. #16

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

  11. #18

    Ja, jetzt sehe ich ihn auch! Perfekt. 🙂

  12. #19

    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. #20

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

  14. #21
    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 … 🙂

    • #22

      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

      • #23

        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

      • #24

        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

        [/crayon]

        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

      • #25

        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

      • #26

        das Theme ist ein Child von Hamburg.

  15. #27

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

    ) 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.

    • #28

      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

      • #29

        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 🙂

      • #30

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

        Fallstricke!

        Das

        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 einen Kommentar

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

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