Der WordPress Customizer – aller Anfang ist leicht

In diesem Artikel für WordPress Anfänger befassen wir uns mit dem Frontend. WordPress bietet mit dem Customizer die Möglichkeit unseren Blog direkt im sichtbaren Bereich zu bearbeiten und sofort live zu schalten. Das ermöglicht uns eine Live Vorschau unserer gemachten Änderungen.

Über den Menüpunkt Design > Customizer gelangen wir in den Customizer Bereich.

Vom WordPress Backend zum Customizer

Ein anderer Weg zum Customizer, wäre ein Klick oben links auf den Namen der Website. Im oberen Beispiel also auf „Mein Blog“. Dadurch landet man auf dem Frontend des Blogs. Das ist genau die gleiche Ansicht, die auch ein Besucher eurer Webseite erhält. Nur mit dem Unterschied, dass ihr noch die obere Werkzeugleiste zur Verfügung habt, um Änderungen vorzunehmen. Mit einem weiteren Klick auf „Customizer“, seid ihr am Ziel.

Werkzeugleiste Frontend WordPress Blog

Die Möglichkeiten der Formatierung und Bearbeitung der verschieden Themes variiert ziemlich stark. Daher ist auch kein Customizer Bereich wie der andere.

Deshalb ist es auch gar nicht so leicht ein aussagekräftiges Anschauungsbeispiel zu finden. Ich habe mich deswegen für ein WordPress Standard Theme der Twenty-Reihe entschieden. 

Es ging mir dabei nicht um das schönste Design oder den größten und besten Funktionsumfang, sondern um ein sinnvolles Beispiel, mit dem ein WordPress Anfänger eine vernünftiges Basis erhält. Dieses Wissen soll auch bei der Suche nach dem richtigen Theme weiterhelfen.

Der Customizer am Beispiel des Twenty Eleven Themes

Customizer des Twenty Eleven Themes

Der Aufbau des WordPress Customizer ist immer der gleiche. Auf der linken Seite befindet sich das Menü, über das man Anpassungen vornehmen kann. Auf der rechten Seite besteht die Möglichkeit, Elemente wie den Titel oder die Widgets direkt zu bearbeiten. Das funktioniert aber auch genauso gut über das Menü. Unten links hat man außerdem die Option sich seine Website in den unterschiedlichen Formaten Desktop, Tablet und Smartphone zu betrachten.

Falls noch nicht geschehen, solltet ihr für unsere Zwecke als Dummy einen WordPress Beitrag erstellen. Das gleiche gilt für eine statische Seite und eine Kategorie.

Als Tipp: Wenn ihr noch keinen Artikel haben solltet, findet ihr einen Blindtext schnell und kostenlos im Internet.

Website Informationen

Hier könnt ihr den Titel und Slogan eurer Website eintragen, wenn ihr das noch nicht in den WordPress Einstellungen gemacht haben solltet. Interessanter ist hier aber die Einpflege des Website-Icons. Dieses Icon wird Favicon genannt. Dies kann z.B. ein Symbol, euer Logo oder auch nur ein Teil eures Logos sein. Sinn und Zweck ist es, eine Aufmerksamkeit und einen Wiedererkennungswert für eure Website zu schaffen.

Das Favicon erscheint nach der Einpflege z.B. im Browser Tab:

Favicon – Beispiel denizpedia.com

Customizer Layout Einstellungen

Farben

Bei diesem Theme Beispiel beschränkt man sich nur auf wenige Optionen. Aber probiert es einfach mal aus. Natürlich gibt es viele Themes, die hier weitaus mehr Möglichkeiten anbieten.

Layout

Hier wird es interessant. In diesem Layout-Bereich könnt ihr auswählen, ob die Sidebar mit den Widgets links oder rechts sein soll, oder ihr ganz darauf verzichten wollt. Das Design eurer Website würde dadurch nur aus einer einzigen Spalte bestehen. Das Wissen, dass es diese Möglichkeiten gibt, soll euch bei der zukünftigen Suche eures Themes weiterhelfen.

Header-Bild

Da ist ziemlich selbsterklärend. Wichtig ist nur zu erwähnen, dass man sich an die vorgeschriebene Größe halten sollte. Ansonsten kann es passieren, dass das Ergebnis nicht wie gewünscht ist.

Hintergrundbild

Ist jetzt nicht meins, aber kann man machen und kann sicherlich auch hübsch aussehen. Probiert es einfach mal aus. In vielen Themes kann man an dieser Stelle auch die Hintergrundfarbe auswählen. Aber wie gesagt, variiert die Aufteilung von Theme zu Theme sehr stark.

Menü in WordPress erstellen mit dem Customizer

Menüs sind ein wichtiger Bestandteil einer Website und können verschiedene Funktionen erfüllen. In der Regel ist das Hauptmenü auch das Navigationsmenü. Die Navigation sorgt dafür, dass der User sich auf eurer Website zurechtfinden kann. Benutzt man WordPress als Blog, dann hat man aber auch andere Möglichkeiten der Navigation, wie z.B. mit dem Einsatz von Schlagwörtern, Kategorien und anderen Archivseiten. Nutzt man WordPress aber als statische Website, dann sollte ein Hauptmenü zwingend vorhanden sein. Menüs werden aber auch im Header oder Footer verwendet, um wichtige Informationen wie das Impressum und Datenschutzrichtlinien zu hinterlegen. Gerne wird eine Menüleiste auch für die Auflistung der eigenen Social Media Kanäle genutzt.

WordPress bietet mehrere Wege zur Erstellung eines Menüs und ihr werdet schnell merken, dass sich das von Theme zu Theme stark unterscheidet, da das jeder Entwickler unterschiedlich handhabt.

Unser Twenty Eleven Theme Beispiel bietet uns jetzt den Fall, dass wir unsere Menüs auf zwei unterschiedliche Arten aufbauen müssen.

Folgendes habe ich vor: Ich möchte zwei Menüs erstellen. Eine Navigation, die ich über den Punkt Menü aufbaue und einen Footer Bereich den ich mit Hilfe eines Widgets kreiere.

Ein WordPress Hauptmenü erstellen

Als erstes wähle ich in der Customizer Navigation den Punkt „Menüs“ aus.

Unter „Position anzeigen“ erfährt man, welche Menüs für das jeweilige Theme vorhanden sind. In unserem Fall existiert nur ein einziges und zwar ein Hauptmenü, das als „Primäres Menü“ bezeichnet wird. Wie schon erwähnt variiert das sehr stark. So existieren auch Themes, die an dieser Stelle Beispielsweise 3 verschiedene Menüs anbieten.

WordPress Menü Customizer

Wir wählen jetzt den Punkt „Neues Menü“ aus. Da es sich hierbei um die Navigation handeln soll, nenne ich das ganze auch genau so. Ihr müsst es des Weiteren als „Primäres Menü“ auswählen, damit WordPress weiß, dass es euer Hauptmenü sein soll.

Danach kann man unter „Einträge hinzufügen“ Menüpunkte anlegen. Für unser Beispiel erstelle ich ein verschachteltes Menü. Dafür füge ich erst eine Kategorie und dann einen entsprechenden Beitrag hinzu.

WordPress Customizer Navigation

Wenn ihr beides ausgewählt habt, bitte auf „Umordnen“ klicken.

WordPress Navi umordnen

Hier kann man sein Menü komfortabel umordnen. Klickt rechts neben dem Beitrag auf den rechten Pfeil, dann verschiebt sich dieser auf die zweite Ebene des Menüs. Das Resultat kann man in der Vorschau begutachten.

Einen Footer Bereich erstellen

Im Footer befinden sich, wie schon erwähnt, gewöhnlich das Impressum und die Datenschutzverordnung. Den Footer erstellen wir mit Hilfe eines Widgets. Legt erst einmal ein neues Menü an, nennt es Footer und fügt eine Seite hinzu. In den Widget Bereich gelangt ihr jetzt entweder unter „Position anzeigen“ oder indem ihr direkt in den Menüpunkt „Widgets“ einsteigt.

Im Twenty Eleven Theme habt ihr nun drei verschiedene Fußzeilen Bereiche. Jeder Bereich steht für eine einzelne Spalte. Also wie viele Spalten haben wir insgesamt zur Verfügung?

Wählt jetzt „Fußzeile, erster Bereich“ aus und fügt das Widget „Navigationsmenü“ hinzu.

WordPress Footer Widget erstellen

Jetzt nur noch das Menü „Footer“ auswählen und abspeichern, fertig ist der Footer.

Footer Widget WordPress

Widgets

Abgesehen von der Erstellung eines Footers, kann man mit Widgets eine Menge anderer Dinge darstellen. Die „letzten Kommentare“, eine Schlagwörter Wolke, einen RSS Feed und viele andere Funktionen kann man mit Hilfe eines Widgets dazufügen. Aber auch dieser Leistungsumfang variiert von Theme zu Theme. Wie man Widget hinzufügt, muss ich an dieser Stelle nicht mehr erklären. Denn die ganze Systematik sollte nach der Erstellung eines Menü klar geworden sein. Klickt auf „Haupt-Seitenleiste“ und spielt ein wenig mit den unterschiedlichen Widgets herum, um für euch zu entscheiden, welche ihr verwenden und in welcher Reihenfolge ihr diese anordnen wollt.

Startseiten-Einstellung

In diesem Bereich legt ihr fest, ob ihr WordPress als einen Blog, mit einem dynamischen Beitrags Feed oder als statische Website verwenden wollt.

Zusätzliches CSS

Falls ihr über ein wenig CSS Knowhow verfügt, dann habt ihr hier die Möglichkeit das CSS des Themes zu manipulieren. Beispielsweise könnt ihr die Schrift vergrößern, falls sie euch zu klein sein sollte.

Tragt einmal spaßeshalber Folgendes ein:

p {
font-size: 22px;
}

Natürlich könnte man das auch über den Editor machen. Der Nachteil dabei wäre allerdings, dass bei einer Aktualisierung des Themes, die gemachten Änderungen auch verschwinden würden. Das Problem hat man nicht, wenn man das CSS an dieser Stelle anpasst.

Fazit

Das war es auch schon. Ich hoffe, dass deutlich geworden ist, wie leicht man einen WordPress Blog erstellen kann. Mit Hilfe des Customizers ist das wirklich sehr schnell gemacht. Ich wünsche euch viel Erfolg, bei der Erstellung eurer eigenen Website!

Gib mir Feedback!
Sending
User Review
0 (0 votes)

Hinterlasse einen Kommentar

avatar
  Abonnieren  
Benachrichtige mich bei