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:

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 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:

Gutenberg Custom HTML Block

Gutenberg Custom HTML Block

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:

So bearbeitest du einen einzelnen Block als HTML

So bearbeitest du einen einzelnen Block als HTML

Auf diese Weise kannst du den HTML-Code nur für diesen einzelnen Block bearbeiten:

Beispiel für die Bearbeitung des HTML eines Blocks

Beispiel für die Bearbeitung des HTML eines Blocks

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:

So greifst du auf den vollständigen Code-Editor in Gutenberg zu

So greifst du auf den vollständigen Code-Editor in Gutenberg zu

Denke daran, dass du im vollständigen Code-Editor alle Markups für Blöcke umgehen musst, z. B. <!-- wp:paragraph -->.

Das Bearbeiten von Code in WordPress muss nicht schwierig sein! In dieser einfachen Anleitung erfährst du, wie du HTML, CSS und PHP optimierst. 🤓 Click to Tweet

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 WordPress-HTML im Classic WordPress Editor

So bearbeitest du WordPress-HTML im Classic WordPress Editor

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:

Die Warnung vor dem Zugriff auf den In-Dashboard-Code-Editor

Die Warnung vor dem Zugriff auf den In-Dashboard-Code-Editor

Anschließend kannst du in der rechten Seitenleiste zwischen verschiedenen Themedateien und dem Code-Editor selbst navigieren, um deine eigentlichen Änderungen vorzunehmen:

Der In-Dashboard-WordPress-Code-Editor

Der In-Dashboard-WordPress-Code-Editor

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 bearbeitest du WordPress-HTML via SFTP

So bearbeitest du WordPress-HTML via SFTP

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:

So greifst du auf WordPress Customizer zu

So greifst du auf WordPress Customizer zu

Suche dann im WordPress Customizer nach der Option Additional CSS:

Wo du im WordPress Customizer die Option Additional CSS findest

Wo du im WordPress Customizer die Option Additional CSS findest

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:

Wie man CSS in WordPress Customizer bearbeitet

Wie man CSS in WordPress Customizer bearbeitet

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!

6
Mal geteilt