Wenn du ein WordPress-Theme installiert hast, es aber nicht ganz richtig für dich ist, fühlst du dich vielleicht frustriert. Es gibt viele Optionen, mit denen du dein WordPress-Themen anpassen kannst.
Die Herausforderung besteht darin, den richtigen Weg zu finden.
In diesem Beitrag führe ich dich durch die Optionen zur Anpassung deines WordPress-Themes, helfe dir zu entscheiden, welches das Richtige für dich ist und zeige dir, wie du es sicher und effizient machst.
Willst du lieber die Video-Version sehen?
Optionen zum Anpassen eines Themes
Bevor wir eintauchen und anfangen, Änderungen an deinem Theme vorzunehmen, lohnt es sich zu verstehen, was die Optionen sind, da sie für verschiedene Situationen geeignet sind.
Hier siehst du eine Übersicht über die dir zur Verfügung stehenden Optionen:
- Wenn du Funktionalität zu deinem Theme hinzufügen möchtest, installiere ein Plugin.
- Verwende den Customizer in deinen WordPress-Admin Bereich, um Schriften, Farben und vielleicht auch das Layout je nach Theme anzupassen.
- Wenn du mit einem Page Builder-Theme arbeitest, nutze dessen Funktionen, um das Design deiner Website anzupassen.
- Wenn du ein Framework-Theme installiert hast, benutze eines der verfügbaren Child-Themes, um deine Website anzupassen, zusammen mit allen möglichen Anpassungsoptionen, die die Admin-Screens besitzen.
- Wenn dein Theme spezifisch für deine Website ist und du es für dich kein Problem ist, bearbeite den Code des Themes direkt.
- Wenn du den Code eines Themes eines Drittanbieters bearbeiten möchtest, erstelle ein Child-Theme.
Wenn du den Code bearbeiten möchtest, hast du eine Reihe von Optionen zur Verfügung, von der Verwendung des Blockeditors über den Customizer bis hin zur Bearbeitung der Dateien. Wir werden sie alle in diesem Beitrag betrachten, aber lasst uns mit der einfachsten Option beginnen: der Installation eines Plugins.
Musst du eigentlich dein Theme anpassen?
Manchmal musst du dein Theme gar nicht anpassen: stattdessen musst du ein Plugin installieren.
Themes bestimmen das Design deiner Website: wie sie aussieht und wie sie Inhalte präsentiert (verwende unser Theme-Detector-Tool, um das zugrunde liegende Theme für ein Design zu identifizieren, das dir gefällt). Plugins fügen zusätzliche Funktionen hinzu.
Wenn sich die Änderungen, die du vornehmen möchtest, auf Funktionalität und nicht auf Design konzentrieren, solltest du ein Plugin selbst installieren. Dies kann ein Plugin sein, das du schreiben musst, eines, das du aus dem Plugin-Verzeichnis herunterlädst oder das du kaufst.
Wenn du die Datei functions.php in deinem Theme bearbeiten möchtest, frag dich selbst:
“Würde ich diese Funktionalität beibehalten wollen, wenn ich in Zukunft die Themes wechseln würde?
Wenn die Antwort ja ist, sollte dieser Code in ein Plugin gehen, nicht in dein Theme.
Gute Beispiele dafür, was du mit einem Plugin anstelle eines Themes verwenden würdest, einschließlich dem Hinzufügen von Widgets, dem Registrieren von benutzerdefinierten Posttypen und Taxonomien, dem Erstellen von benutzerdefinierten Feldern und dem Hinzufügen zusätzlicher Funktionen wie einem Shop oder SEO-Erweiterungen.
Anpassen des WordPress-Themes über die WordPress Admin-Screens
Wenn die Änderungen, die du vornehmen möchtest, designorientiert und relativ einfach sind, kannst du sie vielleicht über die Admin-Screens vornehmen. Der Customizer bietet dir eine Vielzahl von Optionen, um dein Theme zu optimieren: Was dir zur Verfügung steht, hängt von deinem Theme ab. Dort findest du auch den sogenannten Editor. Halte dich aus Gründen, die ich in Kürze beschreiben werde, davon fern.
Anpassen des Themes über den Customizer
Der einfachste Weg, dein WordPress-Theme anzupassen, ist die Verwendung des WordPress Customizer.
Du kannst auf zwei Arten darauf zugreifen:
- Wenn du deine Website betrachtest (wenn du eingeloggt bist), klicke auf den Link Customize in der Adminleiste oben auf dem Bildschirm.
- Klicke in den Admin-Bildschirmen auf Appearance > Customize.
Dadurch gelangt man zum Customizer.
Im obigen Screenshot habe ich ein kostenloses Design namens ColorMag installiert, das viele Anpassungsmöglichkeiten bietet. Es wurde dem Customizer für Designfunktionen Abschnitte hinzugefügt, darunter ein Header-Bild, Social Media, Kategorienfarben und eine Registerkarte Designoptionen, die dich zu noch mehr Registerkarten führt, auf denen du Änderungen am Layout und Design deiner Website vornehmen kannst.
Verschiedene Themen haben unterschiedliche Anpassungsoptionen, aber neuere Themes scheinen immer mehr von ihnen hinzuzufügen. Wenn du ein Theme findest, das dir gefällt, aber nicht ganz richtig für dich ist, wirst du vielleicht feststellen, dass die Anpassung genau das Design und Layout liefert, das du brauchst.
Der Themeeditor (und warum man ihn nicht verwenden sollte)
In deinen Admin-Screens kannst du eine Option namens Theme Editor sehen, die du über Appearance > Theme Editor erhältst.
Dadurch hast du Zugriff auf die Dateien in deinem Theme, so dass du sie direkt bearbeiten kannst.
Nicht.
Selbst wenn du dich beim Schreiben von CSS oder PHP wohl fühlst, ist die Bearbeitung der Dateien in deinem Theme wie diesem eine sehr schlechte Idee, aus zwei Gründen:
- Wenn du ein Theme eines Drittanbieters gekauft oder heruntergeladen hast, gehen alle Änderungen, die du vornimmst, bei der nächsten Aktualisierung des Themes verloren (und du solltest dein Theme aus Sicherheitsgründen aktualisieren).
- Noch wichtiger ist, wenn du eine Änderung vornimmst, die deine Website zerstört, wird sie nicht verfolgt und die vorherige Version der Datei wird nicht geändert. Du könntest die Seite unwiderruflich zerstören.
Wenn du den Code in deinem Theme bearbeiten möchtest, solltest du es mit einem Code-Editor tun (siehst du sich die besten kostenlosen HTML-Editoren an), und du solltest die Dateien in deiner Live-Site nicht bearbeiten, bis du sie auf einer Staging-Site getestet hast. Wenn du ein Theme eines Drittanbieters bearbeiten musst, solltest du dies über ein Child-Theme tun. Mehr zu beiden später in diesem Beitrag.
WordPress weiß, wie unsicher es ist, den Theme-Editor zu verwenden: er gibt dir sogar eine Warnung, wenn du versuchst, darauf zuzugreifen.
Beachte also den Rat von WordPress: Verwende nicht den Themen-Editor!
Verwenden von Page Builders und Frameworks zur Anpassung deines WordPress-Themes
Ein großer Teil der WordPress-Themes verfügt über Anpassungsoptionen, so dass du Änderungen an Design und Layout über den Customizer vornehmen kannst.
Aber einige Themes gehen noch weiter und sind so konzipiert, dass sie erweitert und deutlich angepasst werden können. Diese Themes werden als Theme-Frameworks bezeichnet.
Eine weitere Möglichkeit ist die Verwendung eines Plugins, mit dem du deine Website über eine benutzerfreundliche Oberfläche gestalten kannst: Das nennt man Page Builder.
Verwenden eines Page Builders zur Anpassung des Themes
Page Builder-Plugins wurden entwickelt, um es dir leicht zu machen, das Design deiner Website festzulegen, indem sie eine Schnittstelle verwenden, mit der du sehen kannst, was du bekommst.
Du installierst ein Page Builder-Plugin mit einem kompatiblen Theme und verwendest dann die Optionen, die es dir gibt, um deine Website genau so zu gestalten, wie du es willst.
Einer der bekanntesten Page Builder ist Elementor, aber du kannst dich in unserer Zusammenstellung der Page Builder über einige Alternativen informieren.
Mit den Page Buildern kannst du deine Beiträge und Seiten mit einer Drag-and-Drop-Oberfläche bearbeiten, d.h. du kannst sehen, wie dein Inhalt aussehen wird und kannst jede Seite einzigartig machen.
Unten verwende ich den Elementor Page Builder mit dem Hello Elementor Design, das damit kompatibel ist.
Page Builder geben dir viel Flexibilität beim Layout und Design deiner Seiten. Wenn du an einen Website-Builder wie Wix gewöhnt bist, können sie den Übergang zu WordPress erleichtern. Und wenn du eine WYSIWYG-Schnittstelle für deine WordPress-Inhalte bevorzugst, können sie dir helfen, deine Seiten schnell zu gestalten.
Verwenden eines Theme-Frameworks zur Anpassung des Themes
Eine Alternative zu Page Buildern sind Theme Frameworks. Dies sind Suiten von Themes, die so konzipiert sind, dass sie zusammenwirken. Es gibt ein Parent Theme, das das Framework ist, und eine Auswahl an Child Themes, die du verwenden kannst, um das Parent Theme anzupassen und es so aussehen zu lassen, wie du es willst.
Ein Beispiel für Themen-Framework ist Divi, das über Anpassungsoptionen verfügt, mit deren Hilfe du das Design deines Child Themes noch weiter optimieren kannst, einschließlich einer Drag&Drop-Oberfläche, die denen von Page Buildern ähnelt.
Empfohlene Lektüre: Divi vs Elementor: WordPress Page Builder Plugins Vergleich
Bearbeiten des Codes deines WordPress-Themes
Wenn du CSS und/oder PHP bequem bearbeiten kannst, dann kannst du den Code in deinem Theme bearbeiten, um dein Theme anzupassen.
Dies gibt dir ein Höchstmaß an Kontrolle.
Wenn du dein eigenes Theme bearbeitest, das spezifisch für deine Website ist und speziell für sie entwickelt wurde, dann kannst du direkt Änderungen am Theme vornehmen. Wenn du jedoch mit einem Theme eines Drittanbieters arbeiten und dieses bearbeiten möchten, solltest du ein Child-Theme erstellen, um zu vermeiden, dass deine Änderungen beim nächsten Update des Themes verloren gehen.
Bearbeiten von Themedateien
Der erste Schritt zur Bearbeitung deines WordPress-Themes ist es, zu verstehen, welche Themendateien was steuern und welche du bearbeiten musst.
Das Stylesheet
Jedes WordPress-Theme hat ein Stylesheet, genannt style.css. Es enthält den gesamten Code für die Gestaltung deiner Website: Layout, Schriften, Farben und mehr.
Wenn du beispielsweise die Farben in deinem Design ändern möchtest, würdest du Änderungen am Stylesheet vornehmen. Wenn du eine neue Schriftart hinzufügen möchtest, würdest du das Stylesheet verwenden, um sie auf verschiedene Elemente wie den Fließtext und die Überschriften anzuwenden.
Achte bei der Bearbeitung des Stylesheets auf die Spezifität: Spezifität bedeutet, dass der Code für ein Element nicht immer von dort kommt, wo du denkst, dass es ist. Elemente erben das Styling von anderen Elementen, die in der Hierarchie der Seite über ihnen liegen, es sei denn, du fügst ein Styling hinzu, das spezifisch für das untere Element ist.
Um herauszufinden, was CSS auf welche Elemente der Seite auswirkt, kannst du den Inspektor in deinem Browser verwenden, um das CSS anzuzeigen (in diesem Beispiel Chrome DevTools):
Auf diese Weise kannst du dann ein neues CSS schreiben, das auf einzelne Elemente oder eine Reihe von Elementen oder Klassen auf der Seite ausgerichtet ist.
Wenn dir all dieses Gerede über Elemente, Klassen und Spezifität neu ist, solltest du dich vielleicht davon fernhalten, das CSS deines Themes direkt zu bearbeiten. Zumindest bis du mehr über CSS gelernt hast und wie es funktioniert.
Die Funktionsdatei
Eine weitere Datei, die so ziemlich jedes Theme haben wird, ist die Funktionsdatei (functions.php). Dies ist die Datei, die einen Haufen von Sachen in deinem Theme funktionieren lässt. Darin findest du Code, um Themefunktionen wie Featured Images, Widgets und mehr zu erfassen.
Wenn du in Versuchung gerätst, funktionalen Code zu deinem Theme hinzuzufügen, dann musst du ihn hier hinzufügen. Aber Vorsicht: In den meisten Fällen solltest du wirklich ein Plugin schreiben. Frag dich selbst:
“Würde ich diese Funktionalität beibehalten wollen, wenn ich in Zukunft die Themens wechseln würde?”
Wenn die Antwort ja ist, schreibe ein Plugin, anstatt Code zur Funktionsdatei hinzuzufügen. Plugins müssen nicht groß sein: Es gibt nichts, was dich davon abhält, ein Plugin für ein paar Zeilen Code zu erstellen.
Die Funktionsdatei ist komplett in PHP geschrieben, daher solltest du damit vertraut sein. Kopiere nicht blind Code, den du über eine Google-Suche findest: Nimm dir die Zeit, herauszufinden, was dieser Code tut und ihn zu verstehen. Auf diese Weise ist es weniger wahrscheinlich, dass du Code hinzufügst, der nicht so gut ist, wie er sein sollte.
Die Theme Template Dateien
Die meisten Dateien in einem Theme sind Theme Template Dateien. Dies sind Dateien, die bestimmen, welche Inhalte WordPress auf einer bestimmten Seite ausgibt, und die entsprechend der Vorlagenhierarchie ausgewählt werden.
Wenn du die Art und Weise ändern möchtest, wie Inhalte auf einem bestimmten Posttyp, einer bestimmten Seite oder einem bestimmten Archiv ausgegeben werden, musst du entweder eine dieser Dateien bearbeiten oder eine neue erstellen.
Angenommen, dein Theme hat eine Datei archive.php, die verwendet wird, um Archivseiten für Kategorien und Tags auszugeben. Du möchtest Änderungen an der Ausgabe von Tags vornehmen. Also erstelle eine Datei namens „tag.php“, die auf archive.php mit deinen Optimierungen basiert.
Nochmals, sei vorsichtig beim Bearbeiten der Dateien: Sie könnten deine Website beschädigen. Teste immer zuerst auf einer lokalen Installation mit einem Tool wie DevKinsta und/oder einer Staging Webseite.
Welchen dieser Dateitypen du auch bearbeiten musst, du solltest es richtig machen. Lies den folgenden Abschnitt über bewährte Verfahren, um herauszufinden, wie du deinen Code so bearbeiten kannst, dass er deine Website nicht beschädigt und dir keine Sicherheitsprobleme bereitet.
Anpassen eines Drittanbieter-Themes mit einem Child-Theme
Wenn das Theme, das du auf deiner Website verwendest, von einem Drittanbieter stammt und du den Code bearbeiten möchtest, musst du ein Child-Theme erstellen.
Denn wenn du das Theme direkt bearbeitest und es dann aktualisierst (was du tun solltest), verlierst du alle Änderungen, die du vorgenommen hast.
Das Erstellen eines Child-Themes besteht aus vier Schritten:
- Erstelle einen neuen Ordner in wp-content/themes.
- Erstelle in diesem Ordner ein Stylesheet. Sage WordPress in diesem Stylesheet, dass es sich um ein Child-Theme deines bestehenden Themes handelt.
- Füge Kopien der zu bearbeitenden Dateien zum Child-Theme hinzu und bearbeite sie dort.
- Aktiviere das Child-Theme auf deiner Website.
WordPress verwendet immer eine Datei aus dem Child-Theme, um Inhalte auszugeben, es sei denn, es gibt eine Datei, die in der Hierarchie höher in dem Parent Theme liegt. Wenn es zwei Versionen derselben Datei gibt, wird diejenige aus dem Child-Theme verwendet. Das bedeutet, dass deine neue Datei im Child-Theme diejenige aus dem Parent-Thema überschreibt.
Best Practices für das Anpassen von WordPress-Themes
Du hast also vor, dein Theme anzupassen. Bevor du die Änderungen durchführst, befolge diese Tipps, um sicherzustellen, dass du es sicher machst und dass du deine Website nicht kaputt machst, sie anfällig für Angriffe machst oder deinen Code verlierst.
Wenn möglich, ohne Codeänderung anpassen
Wenn du deine Anpassungen über den Customizer oder an anderer Stelle in dem Admin Bereich vornehmen kannst, ist dies sicherer als das Bearbeiten des Codes.
Bearbeite den Code nur, wenn du mit CSS (für das Stylesheet) und PHP (für andere Themedateien) vertraut bist und du weißt, wie man es sicher macht.
Verwende eine lokale Entwicklungsseite, um deine Änderungen vorzunehmen.
Wenn du den Code in deinem Theme bearbeitest oder ein Child-Theme erstellst, um Änderungen vorzunehmen, solltest du die Entwicklungsarbeit an einer lokalen Installation von WordPress durchführen, bei der dein Theme installiert und dein Inhalt von deiner Live-Site kopiert wird.
Auf diese Weise hast du einen Spiegel deiner Live-Site, um deine Änderungen zu testen. Die Arbeit auf einer lokalen Website hat keine Auswirkungen auf deine Live-Site und kann schneller sein.
Selbst wenn du den Customizer verwendest, kann es hilfreich sein, eine lokale Version deiner Website zum Testen zu verwenden, da du deine Änderungen veröffentlichen und testen kannst, ohne die Live-Site zu beeinträchtigen.
Sobald du die Änderungen an deinem Theme getestet hast, kannst du es auf deine Live-Site hochladen oder, noch besser, du kannst es auf einer Staging-Site testen und es dann auf die Live Seite verschieben.
Versionskontrolle verwenden
Wenn du Änderungen an deinem Theme vornimmst, solltest du die Versionskontrolle verwenden, um deine Änderungen zu verfolgen.
Im einfachsten Fall bedeutet dies, die Versionsnummer des Themes zu ändern und Kopien von beiden Versionen zu behalten. Aber wenn du die Versionskontrolle richtig durchführen willst, musst du einen Dienst wie GitHub verwenden, um deine Änderungen zu verfolgen.
Auf diese Weise kannst du, wenn eine Änderung Probleme verursacht, sie einfach zurücksetzen, ohne manuelle Änderungen vornehmen zu müssen.
Die Versionskontrolle ist noch hilfreicher, wenn du als Teil eines Teams arbeitest, da du sehen kannst, was andere Mitglieder tun. Liest du unbedingt unseren Leitfaden Git vs. Github.
Verwende eine Staging-Site, um deine Änderungen zu testen.
Wenn du Zugang zu einer Staging-Site hast (wie z.B. Kinsta’s kostenlose Staging, das mit allen Plänen geliefert wird), ist es der sicherste Weg, diese zu testen, bevor du die neue Version deines Themes (oder das neue Child-Theme) auf deiner Live-Site aktivierst.
Dies liegt daran, dass jede lokale Website einige Unterschiede zu deiner Live-Site aufweist: Sie befindet sich auf einem anderen Server (einer, der auf deiner lokalen Maschine erstellt wurde), sie kann eine andere Version von PHP oder eines der anderen Tools ausführen, die deine Website ausführen.
Mache eine Kopie deiner Live-Site auf deinem Staging-Server und lade dann dein neues Theme hoch und aktiviere es. Teste deine Website gründlich, um sicherzustellen, dass alles funktioniert, und dann kannst du deine Änderungen auf deine Live-Site übertragen.
Mache dein Theme responsive
Alle Änderungen, die du an deinem Theme vornehmen musst, sollten sowohl auf dem Handy als auch auf dem Desktop funktionieren.
Da immer mehr Menschen über das Mobiltelefon auf das Internet zugreifen und der Mobile-first-Index von Google, ist es jetzt wahrscheinlich wichtiger, dass dein Theme auf dem Handy funktioniert als auf dem Desktop. Daher müssen alle Änderungen, die du an deinem Theme vornimmst, mobilfreundlich oder vorzugsweise mobil first sein, wo dies relevant ist.
Dies gilt vor allem für alle Änderungen, die du an deinem Styling oder Layout vornimmst: Überprüfe, ob das neue Layout auf dem Handy funktioniert und ob du Medienabfragen hinzugefügt hast, so dass sich das Layout an unterschiedliche Bildschirmgrößen anpasst.
Wenn dein Theme nicht responsive ist, wird es sich negativ auf dein Suchmaschinen-Ranking und deine Konversionsraten auswirken.
Wenn du keinen Zugriff auf viele verschiedene mobile Geräte hast, auf denen du testen kannst, kannst du ein Tool wie BrowserStack verwenden, um zu sehen, wie deine Website auf verschiedenen Geräten aussieht. Du kannst auch die Developer-Tools in deinem Browser und die responsive views im Customizer verwenden.
Stelle sicher, dass deine Anpassungen keinen Einfluss auf die Barrierefreiheit haben.
Alle Änderungen an deinem Theme müssen auch für Benutzer mit Behinderungen oder sensorischen Beeinträchtigungen zugänglich sein.
Dabei geht es nicht nur darum, sicherzustellen, dass deine Website mit Screenreadern funktioniert: Andere Aspekte wie Farbschemata und Schriftgrößen sind für eine große Anzahl von Menschen wichtig.
Wenn die Änderungen, die du an deinem Theme vornimmst, darin bestehen, die Farben heller oder den Text kleiner zu machen, denk noch einmal nach: Das könnte es für Leute schwierig machen, deine Seite zu lesen oder mit ihr zu interagieren.
Bevor du irgendwelche Änderungen live durchführst, benutze einen Accessibility-Checker, um deine Website zu testen und sicherzustellen, dass sie keine Personen ausschließt.
Einhaltung der WordPress Programmierstandards für die Codierung
Wenn du den Code in deinem Design bearbeitest oder ein Child-Theme erstellst, musst du sicherstellen, dass dein Code mit den WordPress Programmierstandards übereinstimmt.
Diese Standards existieren, um Konsistenz und Qualität des Codes zu gewährleisten und um zu vermeiden, dass Code ein Chaos ist. Es gibt Standards für PHP, CSS und JavaScript, also nimm dir etwas Zeit, um die für dich relevanten zu überprüfen und sicherzustellen, dass du sie befolgst.
Wenn dein bestehendes WordPress-Theme gut programmiert ist und du jeden neuen Code in einer Weise schreibst, die damit übereinstimmt, bist du auf dem besten Weg, sicherzustellen, dass dein Code konform ist. Stelle sicher, dass du Kommentare zu allen Änderungen, die du am Theme vorgibst, hinzufügst, damit du oder andere wissen, was du getan hast, wenn du in Zukunft wieder an dem Code arbeiten möchtest. Du denkst vielleicht, dass du es nicht vergessen wirst, aber nach ein paar Monaten ist es überraschend leicht zu vergessen, warum du eine Zeile Code bearbeitet hast.
Zusammenfassung
Das Anpassen deines WordPress Themes ist gar nicht so schwierig. Manchmal reicht es aus, den Customizer zu benutzen, um die Schriftarten, Farben oder dein Favicon zu ändern (lies unbedingt unseren ausführlichen Guide über WordPress-Schriftarten). In anderen Fällen musst du ein neues Child-Theme erstellen, um eine neue Vorlagendatei zu einem Theme hinzuzufügen.
Zu den Optionen, die du hast, um dein Theme anzupassen, gehören die Verwendung eines Plugins oder des Customizers, die direkte Bearbeitung des Codes des WordPress-Themes oder die Erstellung eines Child-Themes.
Identifiziere die richtige Option für dich selbst und mache deine Anpassungen sicher, ohne deine Website zu beschädigen.
Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.
Schreibe einen Kommentar