kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

WordPress Customizer: Theme-Optionen definieren und verwenden

Seit WordPress 3.4 besteht die Möglichkeit, Theme-Optionen über den Customizer festzulegen. Neben dem Einfügen des eigenen Logos kann der Customizer um weitere hilfreiche Funktionen erweitert werden. Sobald die folgende Funktion integriert wurde, hat ein Backend-User die Möglichkeit, Inhalte einmalig zu erstellen und mehrfach auf der Seite zu verwenden. Wir zeigen euch, wie die Funktion eingebaut, mit Inhalt befüllt und im Theme verwendet wird.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Customizer-Option registrieren

In unserem Beispiel werden wir dem Theme ein Feld für die Öffnungszeiten hinzufügen. Um im Customizer auf die Einstellungen zugreifen zu können, müssen wir zunächst eine eigene Funktion anlegen und registrieren. Kopiert dazu den folgenden Code in eure functions.php:

function kb_customizer_options($wp_customize) {
// Hier folgt der Code 
} 

add_action('customize_register', 'kb_customizer_options');

Im nächsten Schritt, werden wir in der Funktion die Option »Öffnungszeiten« registrieren. Hierfür ersetzen wir den Kommentar »//Hier folgt der Code« mit dem folgenden Code:

$wp_customize->add_setting('options_opening_hours', array( 'default' => 'Montag bis Freitag<br> 09:00 - 17:30 Uhr' ));

Nun haben wir die Option options_opening_hours erfolgreich registriert. Bei der Registrierung besteht die Möglichkeit, dem Array Parameter zu übergeben. In diesem Fall haben wir einen Default-Wert gewählt, der ausgegeben wird, wenn kein anderer Wert hinterlegt wurde.

Verwendung im Theme

Auf die registrierte Option können wir nun im Theme zugreifen. Kopiert hierfür einfach folgenden Code in euer Template – in unserem Beispiel ist dies die index.php:

<?php echo get_theme_mod('options_opening_hours'); ?>

Mit der Funktion get_theme_mod(""); und dem entsprechenden Parameter können wir im Template auf die jeweilige Einstellung des Customizer zugreifen. Achtet bitte darauf, dass der Parameter in den Klammern identisch mit dem Parameter der Option, die wir im vorherigen Schritt registriert haben, ist. – In unserem Fall options_opening_hours.

Wenn ihr alles richtig gemacht habt, sollte eure Ausgabe im Frontend so aussehen:

An dieser Stelle wird jetzt der Standard-Wert ausgegeben, da wir noch keinen anderen Wert hinterlegt haben. Unser Ziel ist es, die Einstellung über den Customizer zu bearbeiten. Um dies zu tun, werden wir im nächsten Schritt diese Eingabefelder erstellen.

Bearbeitung im Customizer aktivieren

Um die Einstellung nun über den Customizer bearbeiten zu können, müssen wir dem Ganzen noch ein Eingabefeld hinzufügen und zuordnen. Mit dem folgenden Code-Snippet wird das Eingabefeld »Öffnungszeiten« hinzugefügt:

$wp_customize->add_control('options_opening_hours', array( 
  'label' => __('Öffnungszeiten', 'kb'), 
  'type' => 'text', 
  'section' => 'title_tagline', 
  'input_attrs' => array( 
    'placeholder' => 'Montag bis Freitag<br> 10:00 - 16:00 Uhr', ), 
));

Der Parameter hinter add_control muss hier dem Namen der Einstellung, wie wir ihn im ersten Schritt definiert haben, entsprechen.

In diesem Code-Snippet haben wir die Möglichkeit einige Dinge, wie zum Beispiel eine Beschriftung für die Benennung des Input-Feldes, um was für einen Feldtyp es sich handelt und ggf. noch einen Platzhalter-Text festzulegen.

Ist der letzte Schritt richtig umgesetzt, findet ihr im Customizer unter »Website-Informationen« einen neuen Punkt, der sich »Öffnungszeiten« nennt.

Das neue Textfeld unter »Öffnungszeiten« könnt Ihr nun mit eurem Inhalt befüllen und nach dem klick auf »Veröffentlichen« im Frontend ansehen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.