WordPress Entwickler für Programmierung Ihrer Webprojekte
WordPress Entwickler für Programmierung Ihrer Webprojekte
  • Start
  • Unser Angebot
  • Blog
  • Kontakt
Avatar (Thumbnail) zum Blogeintrag

Eine kurze Einführung in den Customizer

WordPress macht's einfach, Artikel wie diesen zu schreiben, meint: marcel | 15. Januar 2023

Controls Customizer Einstieg Partials Sections Settings Theme-Entwicklung

Wichtige Grundfunktionen des Customizers verstehen und anwenden

Der Customizer ist wichtig um schnelle Designanpassungen an der Website vornehmen zu können.

Dabei geht es beispielsweise um Farbänderungen der Website, Hintergrundbilder zu ändern, den Titel der Website etc. Änderungen werden dabei sofort auf der Website ersichtlich.

 

    Inhalt auf dieser Seite:

  1. Wichtige Grundfunktionen des Customizers verstehen und anwenden
  2. Customizer funktionsfähig machen und Anpassungen vornehmen
  3. Sections, Controls und Settings anlegen
  4. Editier-Symbol hinzufügen

Customizer funktionsfähig machen und Anpassungen vornehmen

Möchte ich den vollen Funktionsumfang des Customizers verwenden, muss ich das natürlich per Code hinzufügen.

Die vorhandenen Customizer-Optionen kann man daher per Code einfach erweitern.

Man hat auch die Möglichkeit bestimmte Menüpunkte komplett zu entfernen, aber auch neue hinzuzufügen.

Wichtig ist es den Grundaufbau zu kennen. In den Settings kann ich Änderungen vornehmen, beispielsweise den Titel ändern. Kurz gesagt: Die Settings dienen zur Eingabe, beispielsweise vom Titel der Website, Controls steuern das UI, und die Sections sind die Menüpunkte des Customizers (wie am Bild oben zu sehen). Ein Panel benötige ich immer dann, wenn man mehrere Sektionen in einem Menüpunkt des Customizers haben möchte.

https://developer.wordpress.org/themes/customize-api/customizer-objects/

Im Front-end Bereich habe ich zudem die Möglichkeit den Stift zum Editieren anzufügen (Partials). Mit Klick darauf komm ich zum ausgewählten Setting. Gemeint ist damit dieses kleine Stift-Symbol:

Telefon+436603100000
E-Mailsouri@wp-entwickler.at
AdresseWP-Entwickler
Safenauer-Straße 62,
8230 Hartberg

Sections, Controls und Settings anlegen

Egal ob bei Sections, Controls oder Settings, man hat direkt die Möglichkeit mit dem vorhandenen Theme Customizer Objekt zu arbeiten (wp_customize).

$wp_customize->add_section(     'title_section',     array(        'title'    => __( 'Titel der Website', 'theme_name' ),        'priority' => 20,     )  );

Mittels add_section gebe ich an, dass ich eine neue Sektion hinzufügen möchte, es folgt die ID der Sektion und Array mit Attributen wie den Titel oder die Priorität. Die Priorität gibt an, wo sich die Sektion im Customizer wiederfinden soll. Die Prioritäten der vorhandenen Sektionen, sowie deren ID, kann aus folgender Tabelle der WordPress Developer Website entnommen werden:

https://developer.wordpress.org/themes/customize-api/customizer-objects/#sections

Eine Sektion benötigt immer ein dazugehöriges Setting, dieses kann ganz einfach so erstellt werden:

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

Es funktioniert auch hier nach dem gleichen Prinzip wie bei add_section, zuerst die ID und dann das Array – in diesem Fall wird das Textfeld einen leeren Standardwert haben. Als Typen können, text, checkbox, textarea, radio, select und dropdown-pages angegeben werden. Der Default-Wert ist text. Deshalb müssen wir das im nachfolgenden Beispiel auch nicht explizit angeben. Möchte man das, kann man einfach den type im Array mit angeben.

$wp_customize->add_control(     new WP_Customize_Control(        $wp_customize,        'title_control',        array(           'label'    => __( 'Titel der Website', 'theme_name' ),           'settings' => 'title_setting',           'section'  => 'title_section',        )     )  );

Als Parameter in der Funktion add_control() übergebe ich  ein neues WP_Customize_Control Objekt, dem ich zuerst das vorhandene  WP_Customize_Manager Objekt übergebe und anschließend wieder die ID und das Array. Im Array auch die dazugehörigen Settings und die Sektion angeben!

Mittels geht get_theme_mod(title_setting);kann ich anschließend den eingegebenen Wert des Users zurück erhalten.

Natürlich kann man auch ein Control-Element selbst erstellen, hierfür ist es notwendig eine eigene Klasse zu schreiben, die von der WP_Customize_Control Klasse abgeleitet wird. Hierbei ist es dann notwendig die Funktion render_content mit den eigenen Bedienelementen zu erweitern.

Editier-Symbol hinzufügen

Der blaue Stift zum Editieren von Bereichen ist für Anwender sehr hilfreich.

Das Symbol kann ich direkt über selective_refresh erstellen, die einzige Besonderheit hier ist das ich im Array angeben kann, wo im Front-End das Symbol erscheinen soll. Ich kann dem Selector ganz einfach den Klassen-Namen zuweisen, bei dem das Symbol erscheinen soll. Zudem ist es wichtig festzulegen, für welches Setting das Symbol festgelegt wird – schließlich möchte der Anwender direkt das editierbare Eingabefeld sehen.

$wp_customize->selective_refresh->add_partial(     'title_partial',     array(        'selector' => '.logo',        'settings' => 'title_setting',     )  );    

Mit diesen Kenntnissen kann man den Customizer nun beliebig erweitern und an die Wünsche des Anwenders spezifisch eingehen!

Weiterführende Links

  • https://codex.wordpress.org/Theme_Customization_API
  • https://developer.wordpress.org/themes/customize-api/customizer-objects/

Navigation

Start Unser Angebot Blog

Impressum & Kontakt

wp-entwickler.at wird betrieben von

  • wp-entwickler Rene Souri
  • UID: ATU60950509
  • Safenauer-Straße 62
  • 8230 Hartberg

Wir lieben WordPress und freuen uns, mit Ihnen ein Projekt entwickeln zu können!

  • Impressum
  • AGB

wp-entwickler.at ist eine indit.at Division