Themeentwicklung

Customizer (Themeentwicklung Teil 29)

Der Customizer von WordPress erlaubt es das Design im Live Editor auch für ungeübte Anwender anzupassen. Diese Funktionen müssen natürlich in der functions.php des Themes verfügbar gemacht werden.

Theoretisch könnten die Funktionen alle direkt in die functions.php eingetragen werden. Dies würde diese jedoch unübersichtlich werden lassen, da der Code für das customizing sehr umfangreich werden kann. Aus diesem Grund erstelle ich eine customizer.php und lade diese in die functions.php

Die Änderungen können dann im eingeloggten Zustand über „Anpassen“ vorgenommen werden.

Standard Customizing

Von WordPress bereitgestellte Customizing Einträge. Diese generieren automatisch eine passende Sektion inklusive Titel und Beschreibung.

Hintergrund

erlaubt Änderung der Hintergrundfarbe und des Hintergrundbildes.

Standardwerte vergeben

Header

erlaubt die Änderung der Textfarbe im Header und das Hinzufügen eines Header Bildes.

Um die Headergrafik anzuzeigen benötigen wir noch ein img Element

ODER wir lösen dies über ein Pseudo Element

Mehr Code, aber semantisch korrekter, wenn das Bild nur einen gestalterischen Nutzen erfüllt.

Benutzerdefiniertes Customizing

Nachfolgend Beispiele für benutzerdefiniertes Customizing. Dies unterscheidet sich zum Standard dadurch, dass Sektion, Titel, Priorität, Beschreibung usw. manuell angelegt werden müssen.

Mit Sektion sind die klappbaren Bereiche innerhalb der Theme Anpassen Funktion gemeint

screenshot-at-nov-29-18-28-12
Der Code um benutzerdefiniertes Customizing in der oben genannten customizing.php oder der functions.php zu aktivieren ist zwar wie bereits erwähnt umfangreich, jedoch ist dieser nicht schwierig zu verstehen.

Text ausgeben

Um die Eingabe im Anpassen Modus des Designs in einem beliebigen Template anzeigen zu lassen, müssen wir diese via get_option ausgeben. Der Variablenname $mo_test kann natürlich frei vergeben werden.

In diesem Beispiel wird der Typ Text aus der Einstellung mo_setting1 ausgegeben.

Auswahlliste

Nachfolgender Code würde eine Auswahlliste im Customizer ausgeben. Dargestellt ist wieder der gesamte Code. Wir müssen natürlich nicht jedes mal eine neue Sektion erstellen.

Farben

um einen Colorpicker anzeigen zu lassen könnte folgendes Beispiel hilfreich sein. Auch hier gilt selbstverständlich: Ist schon eine Sektion vorhanden muss nur der Einstellungen Block und das Steuerelement neu erzeugt werden.

 

0 Kommentare

Schreibe einen Kommentar

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

drei × 4 =