WordPress Customizer: Theme-Optionen definieren und verwenden

Von kulturbanause Team

Globale Informationen wie z. B. Öffnungszeiten können im WordPress-Customizer an zentraler Stelle pflegen. Auf die Informationen kann anschließend im gesamten Theme zugegriffen werden.

Aktualisiert am 8. März 2023

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.

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.

Geschrieben von kulturbanause Team

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.