Während WordPress es Nicht-Programmierern erleichtert, eine Website zu verwalten, wird es wahrscheinlich eine Zeit geben, in der du Code in WordPress bearbeiten möchtest, um ein wenig mehr Kontrolle über das Aussehen oder die Funktionsweise deiner Website zu erhalten.
In diesem Beitrag erfährst du, wie du Code in WordPress auf verschiedene Arten sicher bearbeiten kannst:
- Bearbeiten von WordPress-HTML für einzelne Beiträge oder Seiten
- Bearbeiten des HTML / PHP-Codes deines Themes
- Hinzufügen von benutzerdefiniertem CSS zu deiner Seite
Wenn du bereits weißt, was du tun möchtest, kannst du auf einen der obigen Links klicken, um direkt zu diesem bestimmten Abschnitt zu springen. Ansonsten lasst uns die Bearbeitung beginnen!
So Kannst du WordPress-Code Bearbeiten:
Um mehr Kontrolle darüber zu bekommen, wie deine WordPress-Seite aussieht und funktioniert, kannst du deinen WordPress-Code bearbeiten, um verschiedene Bereiche anzupassen:
- Mit dem neuen Blockeditor und dem klassischen Editor kannst du HTML-Code für einzelne Posts oder Seiten bearbeiten.
- Wenn du den Quellcode deines WordPress-Themes bearbeiten möchtest, verwende ein untergeordnetes Theme.
- Erwäge, ein Plugin zum Verwalten von Codeausschnitten zu verwenden, die du der Datei <head> oder functions.php deines Themes hinzufügst.
- Wenn du nur benutzerdefiniertes CSS hinzufügen möchtest, kannst du den Bereich Additional (Zusätzliches) CSS im WordPress-Customizer oder ein Plugin wie „Simple CSS“ verwenden.
So Bearbeitest du WordPress-HTML für Einzelne Posts / Seiten
Beginnen wir mit der einfachsten Methode zum Bearbeiten von WordPress-HTML: Zugreifen auf den Quellcode für einzelne WordPress-Posts, -Seiten oder andere Post-Typen.
Sie können dies sowohl im neuen WordPress-Blockeditor (Gutenberg) als auch im älteren klassischen TinyMCE-Editor tun.
So Bearbeitest du WordPress-HTML für Einzelne Posts / Seiten
Es gibt einige Möglichkeiten, wie du mit HTML in Gutenberg arbeiten kannst.
Wenn du nur deinen eigenen HTML-Code zu einem Teil des Inhalts hinzufügen möchtest, würde ich empfehlen, nicht den gesamten Quellcode deines Posts zu bearbeiten, da dies die Dinge unnötig kompliziert macht.
Stattdessen kannst du einfach den dedizierten custom (benutzerdefinierten) HTML-Block verwenden und den HTML-Code einfügen, den du dort verwenden möchtest:
Es kann jedoch auch vorkommen, dass du den HTML-Code eines anderen Blocks direkt bearbeiten musst. Wenn du beispielsweise einem Link im Blockeditor ein Nofollow-Tag hinzufügen möchtest, musst du den HTML-Code dieses Blocks bearbeiten.
Es gibt zwei Möglichkeiten, wie du dies tun kannst…
Zunächst kannst du auf die Optionen für einen einzelnen Block klicken und die Option Edit as HTML (Als HTML bearbeiten) auswählen:
Auf diese Weise kannst du den HTML-Code nur für diesen einzelnen Block bearbeiten:
Wenn du den HTML für deinen gesamten Post bearbeiten möchtest, kannst du über die Dropdown-Liste Tools & Optionen auf den Code-Editor zugreifen. Alternativ kannst du auch einfach mit dieser Tastenkombination zwischen Code und visueller Bearbeitung wechseln – Strg + Umschalt + Alt + M:
Denke daran, dass du im vollständigen Code-Editor alle Markups für Blöcke umgehen musst, z. B. <!-- wp:paragraph -->.
So Bearbeitest du WordPress-HTML im Classic Editor (TinyMCE)
Wenn du weiterhin den klassischen WordPress-Editor (TinyMCE) verwendest, kannst du HTML-Code für deinen gesamten Post bearbeiten, indem du auf die Registerkarte Text klickst:
So Bearbeitest du den Quellcode in Deinem WordPress-Theme
Kommen wir nun zu dem größeren Thema, in dem du Code in deinem WordPress-Theme bearbeiten kannst. Die Einsätze sind etwas höher, daher müssen wir einige vorbereitende Fragen abdecken, bevor wir uns mit der Vorgehensweise befassen.
Warum ist der Einsatz höher? Ganz einfach, weil du deine Website beschädigen kannst, wenn du hier etwas vermasselst!
In den letzten Versionen hat es WordPress für dich viel schwieriger gemacht, dies versehentlich zu tun, aber das Bearbeiten des Quellcodes deiner Seite wird immer die Tür für Probleme öffnen, sodass du sicherstellen möchtest, dass du es sicher tust.
Verwende ein Untergeordnetes Theme für Direkte Codebearbeitungen
Wenn du beabsichtigst, den Code in den Dateien deines Themes direkt zu bearbeiten, musst du ein untergeordnetes Theme verwenden, anstatt das übergeordnete Theme zu bearbeiten.
Ohne ein untergeordnetes Theme werden alle von dir vorgenommenen Codeänderungen beim nächsten Aktualisieren deines Themes überschrieben. Wenn du jedoch ein untergeordnetes Theme verwendest, kannst du das übergeordnete Theme umgehend aktualisieren, ohne die Änderungen zu verlieren, die du an deinem untergeordneten Theme vorgenommen haben.
Wenn du mehr über die Vorteile von untergeordneten Themen und das Erstellen eines Themes erfahren möchtest, lies den vollständigen Leitfaden zu untergeordneten WordPress-Themes.
Ziehe die Verwendung eines Plugins in Betracht, Anstatt Code im Untergeordneten Theme zu Bearbeiten
Wenn du beabsichtigst, die Funktionsweise deines Themes zu ändern, musst du wahrscheinlich den Quellcode deines untergeordneten Themes direkt bearbeiten.
Wenn du jedoch aus einem anderen Grund Code in WordPress bearbeiten möchtest – beispielsweise, indem du dem Abschnitt <head> deiner Seite ein Tracking-Skript hinzufügst oder der Datei functions.php deines Themes einen Snippet hinzufügst -, bist du möglicherweise besser dran
Mit den Funktionen Head, Footer and Post Injections kannst du beispielsweise Codefragmente bei Bedarf problemlos einfügen. Und da diese Code-Snippets alle in der Benutzeroberfläche des Plugins getrennt sind, ist es auch in Zukunft einfacher, sie zu verwalten.
Wenn du ein Code-Snippet hinzufügst, das in die Datei functions.php deines untergeordneten Themes eingefügt werden kann, bietet sich das kostenlose Code Snippets-Plugin an.
Zusammenfassend lässt sich sagen, dass du Code in WordPress bearbeiten solltest, um Snippets zu deinen Themes hinzuzufügen…
<head>section- Functions.php file
… dann solltest du ein Plugin verwenden, anstatt die Bearbeitung der Dateien deines Themes zu steuern, da dies die Verwaltung dieser Snippets vereinfacht und sicherstellt, dass sie beim Aktualisieren deines Themes nicht überschrieben werden.
Wenn du weitere Änderungen vornehmen musst, erfährst du, wie du den Quellcode für dein Theme bearbeitest.
Verwende den In-Dashboard-WordPress-Code-Editor
Wenn du vorhast, den Code deines Themes direkt zu bearbeiten, empfehlen wir dringend, dass du zuvor eine Sicherungskopie deiner Website erstellst (entweder deiner gesamten Website oder der Datei, die du bearbeitest).
Sobald du dies getan hast, kannst du auf den Code-Editor für das Dashboard-Theme zugreifen, indem du auf Appearance (Darstellung) → Theme-Editor klickst. In diesem Fall erhältst du von WordPress zunächst eine Warnung, die der oben beschriebenen ähnelt:
Anschließend kannst du in der rechten Seitenleiste zwischen verschiedenen Themedateien und dem Code-Editor selbst navigieren, um deine eigentlichen Änderungen vorzunehmen:
Verwende SFTP, um Code in WordPress zu Bearbeiten
Alternativ zum In-Dashboard-Code-Editor kannst duThemedateien auch über SFTP bearbeiten. Dieser Ansatz bietet zwei Vorteile:
- Du kannst deinen bevorzugten Code-Editor verwenden.
- Wenn du versehentlich etwas kaputtmachst, kannst du das Problem sofort beheben. Im Gegensatz dazu besteht beim Bearbeiten von Code über dein WordPress-Dashboard immer die Möglichkeit, dass du dich von deinem WordPress-Dashboard löst und eine Verbindung über SFTP herstellen musst, um das Problem zu beheben (obwohl dies erneut der Fall ist) weniger wahrscheinlich aufgrund der jüngsten Änderungen).
Hier erfährst du, wie du über FTP eine Verbindung zu deiner Seite herstellst.
Navigiere anschließend zum Ordner deines Themes –… / wp-content / themes / child-theme-name. Suchst du die Datei, die du bearbeiten möchtest, und klickst mit der rechten Maustaste darauf. Die meisten FTP-Programme bieten dir die Möglichkeit, die Datei zu bearbeiten, und laden die Datei automatisch erneut hoch, sobald du deine Änderungen vorgenommen hast.
Es wird jedoch dringend empfohlen, dass du eine Originalversion der Datei auf deinen Desktop herunterlädst, bevor du Änderungen vornimmst. Auf diese Weise kannst du die Originalversion einfach erneut hochladen, wenn du versehentlich etwas kaputt gemacht hast:
So Fügst du Benutzerdefiniertes CSS zu WordPress Hinzu
Wenn du WordPress nur benutzerdefiniertes CSS hinzufügen möchtest, anstatt den HTML- oder PHP-Code von WordPress zu bearbeiten, musst du weder den integrierten Code-Editor noch die SFTP-Methoden verwenden.
Stattdessen kannst du den WordPress-Customizer verwenden. Abgesehen davon, dass dies eine einfachere Option ist, besteht ein weiterer Vorteil dieses Ansatzes darin, dass du eine Vorschau deiner Änderungen in Echtzeit anzeigen kannst.
Um zu beginnen, gehe zu Appearance → Customize (Darstellung → Anpassen) in deinem WordPress-Dashboard:
Suche dann im WordPress Customizer nach der Option Additional CSS:
Dadurch wird ein Code-Editor geöffnet, in dem du das gewünschte CSS hinzufügen kannst. Wenn du CSS hinzufügst, wird die Live-Vorschau deiner Website automatisch entsprechend den folgenden Änderungen aktualisiert:
Eine weitere gute Option zum Hinzufügen von CSS ist das Simple CSS-Plugin von Tom Usborne. Es gibt dir eine ähnliche Option im WordPress Customizer und du kannst einzelnen Posts oder Seiten über eine Meta-Box benutzerdefiniertes CSS hinzufügen.
Wenn du eine Menge benutzerdefiniertes CSS hinzufügen möchtest, wie z. B. Hunderte oder Tausende von Zeilen, kannst du auch ein eigenes benutzerdefiniertes CSS-Stylesheet erstellen und wp_enqueue_scripts verwenden, um es deinem Theme hinzuzufügen.
Zusammenfassung
Wenn du Code in einem einzelnen WordPress-Post oder einer einzelnen WordPress-Seite bearbeiten möchtest, bieten sowohl der neue Blockeditor als auch der klassische Editor Optionen für die direkte Bearbeitung von HTML.
Wenn du jedoch den Quellcode deines WordPress-Themes bearbeiten möchtest, solltest du Folgendes beachten:
- Verwende immer ein untergeordnetes Theme, anstatt Code-Änderungen direkt am übergeordneten Theme vorzunehmen.
- Erwäge, ein Plugin zum Verwalten von Codeausschnitten zu verwenden, die du der Datei <head> oder functions.php hinzufügst, da diese Plugins einen einfacheren, besser verwaltbaren Ansatz bieten können.
Wenn du nach diesen Überlegungen noch direkte Code-Änderungen vornehmen musst, kannst du den Quellcode deines untergeordneten Themes in deinem WordPress-Dashboard bearbeiten, indem du auf Appearance (Aussehen) → Theme-Editor klickst. Du kannst dich auch über SFTP mit deiner Seite verbinden und den Code auf diese Weise bearbeiten.
Wenn du nur benutzerdefiniertes CSS hinzufügen möchtest, musst du den Code deines Themes nicht direkt bearbeiten. Stattdessen kannst du einfach den Bereich Additional CSS (Zusätzliches CSS) im WordPress-Customizer oder ein Plugin wie Simple CSS verwenden.
Noch Fragen zum Bearbeiten von Code in WordPress? Schreib sie unten in die Kommentare!
