So bearbeiten Sie HTML im WordPress-Code-Editor (Anfängerhandbuch)

Suchen Sie nach einer einfachen Möglichkeit, HTML auf Ihrer WordPress-Website zu bearbeiten?

HyperText Markup Language oder HTML ist ein Code, der einem Webbrowser mitteilt, wie der Inhalt Ihrer Webseiten angezeigt werden soll. Das Bearbeiten von HTML ist praktisch für erweiterte Anpassungen und die Fehlerbehebung.

In diesem Artikel zeigen wir Ihnen, wie Sie HTML im WordPress-Codeeditor mit verschiedenen Methoden bearbeiten.

So bearbeiten Sie HTML im WordPress-Code-Editor

 So bearbeiten Sie HTML in WordPress Code Editor

Warum sollten Sie HTML in WordPress bearbeiten?

WordPress bietet Tausende von Themes und Plugins, mit denen Sie das Erscheinungsbild Ihrer Website ändern und verschiedene Elemente anpassen können, ohne eine einzige Codezeile zu berühren.

Plugins und Themes haben jedoch ihre Grenzen und bieten möglicherweise nicht genau die Funktionen, nach denen Sie suchen. Infolgedessen können Sie Ihre Website möglicherweise nicht so gestalten, wie Sie es möchten.

Hier ist das Bearbeiten von HTML wirklich nützlich. Mit HTML-Code können Sie problemlos erweiterte Anpassungen vornehmen. Es bietet viel Flexibilität und Kontrolle darüber, wie Ihre Website aussehen und funktionieren wird.

Wenn Sie lernen, wie Sie HTML bearbeiten, können Sie außerdem Fehler auf Ihrer WordPress-Website identifizieren und beheben, wenn Sie keinen Zugriff auf das Dashboard haben.

Hinweis: Wenn Sie HTML nicht bearbeiten möchten, aber dennoch vollständige Anpassungsoptionen wünschen, empfehlen wir die Verwendung eines Drag & Drop-WordPress-Seitenerstellers wie SeedProd.

Nachdem wir das gesagt haben, schauen wir uns verschiedene Möglichkeiten an, HTML in einer WordPress-Website zu bearbeiten.

Wir zeigen Ihnen, wie Sie HTML mit dem Block-Editor und dem klassischen Editor bearbeiten, und wir zeigen Ihnen auch eine einfache Möglichkeit, Code zu Ihrer Website hinzuzufügen. Sie können auf die Links unten klicken, um zu Ihrem bevorzugten Abschnitt zu springen.

  • So bearbeiten Sie HTML im WordPress Block Editor
  • So bearbeiten Sie HTML im WordPress Classic Editor
  • So bearbeiten Sie HTML in WordPress Widgets
  • So bearbeiten Sie HTML im WordPress Theme Editor
  • So bearbeiten Sie HTML in WordPress mit FTP
  • Einfache Möglichkeit, Code in WordPress 7333>

So bearbeiten Sie HTML im WordPress-Blockeditor

Im WordPress-Blockeditor gibt es mehrere Möglichkeiten, den HTML-Code Ihres Beitrags oder Ihrer Seite zu bearbeiten.

Zunächst können Sie einen benutzerdefinierten HTML-Block in Ihrem Inhalt verwenden, um HTML-Code hinzuzufügen.

Um zu beginnen, gehen Sie zu Ihrem WordPress-Dashboard und fügen Sie dann einen neuen Beitrag / eine neue Seite hinzu oder bearbeiten Sie einen vorhandenen Artikel. Klicken Sie danach auf das Pluszeichen (+) in der oberen linken Ecke und fügen Sie einen benutzerdefinierten HTML-Block hinzu.

Hinzufügen eines benutzerdefinierten HTML-Blocks in WordPress

 Hinzufügen eines benutzerdefinierten HTML-Blocks in WordPress

Als nächstes geben Sie Ihren benutzerdefinierten HTML-Code in den Block ein. Sie können auch auf die Option ‚Vorschau‘ klicken, um zu überprüfen, ob der HTML-Code ordnungsgemäß funktioniert und wie Ihre Inhalte auf Ihrer Live-Website aussehen.

Benutzerdefinierter HTML-Code im WordPress-Editor

 Benutzerdefinierter HTML-Code im WordPress-Editor

Eine andere Möglichkeit, HTML-Code im WordPress-Blockeditor hinzuzufügen oder zu ändern, besteht darin, den HTML-Code eines bestimmten Blocks zu bearbeiten.

Wählen Sie dazu einfach einen vorhandenen Block in Ihrem Inhalt aus und klicken Sie dann auf das Dreipunktmenü. Klicken Sie anschließend auf die Option ‚Als HTML bearbeiten‘.

Klicken Sie auf die drei Punkte und wählen Sie Als HTML bearbeiten

 Klicken Sie auf die drei Punkte und wählen Sie Als HTML bearbeiten

Sie sehen nun den HTML-Code eines einzelnen Blocks. Gehen Sie weiter und bearbeiten Sie den HTML-Code Ihres Inhalts. Sie können beispielsweise einen Nofollow-Link hinzufügen, den Stil Ihres Textes ändern oder anderen Code hinzufügen.

Bearbeiten Sie den HTML-Code eines einzelnen Blocks

 Bearbeiten Sie den HTML-Code eines einzelnen Blocks

Wenn Sie den HTML-Code Ihres gesamten Beitrags bearbeiten möchten, können Sie den ‚Code Editor‘ im WordPress Block Editor verwenden.

Sie können auf den Code-Editor zugreifen, indem Sie auf die Drei-Punkte-Option in der oberen rechten Ecke klicken. Wählen Sie dann ‚Code Editor‘ aus den Dropdown-Optionen.

Zugriff auf den Code-Editor

 Greifen Sie auf den Code-Editor zu

So bearbeiten Sie HTML im WordPress Classic Editor

Wenn Sie den WordPress Classic Editor verwenden, können Sie den HTML-Code problemlos in der Textansicht bearbeiten.

Um auf die Textansicht zuzugreifen, bearbeiten Sie einfach einen Blogbeitrag oder fügen Sie einen neuen hinzu. Wenn Sie sich im klassischen Editor befinden, klicken Sie auf die Registerkarte ‚Text‘, um den HTML-Code Ihres Artikels anzuzeigen.

Klicken Sie im klassischen Editor auf Text, um HTML zu bearbeiten

 Klicken Sie im klassischen Editor auf Text, um HTML zu bearbeiten

Danach können Sie den HTML-Code Ihres Inhalts bearbeiten. Sie können beispielsweise verschiedene Wörter fett schreiben, um sie hervorzuheben, den kursiven Stil im Text verwenden, Listen erstellen, ein Inhaltsverzeichnis hinzufügen und vieles mehr.

So bearbeiten Sie HTML in WordPress-Widgets

Wussten Sie, dass Sie HTML-Code im Widget-Bereich Ihrer Website hinzufügen und bearbeiten können?

In WordPress können Sie mithilfe eines benutzerdefinierten HTML-Widgets Ihre Seitenleiste, Fußzeile und andere Widget-Bereiche anpassen. Sie können beispielsweise Kontaktformulare, Google Maps, Call-to-Action-Schaltflächen (CTA) und andere Inhalte einbetten.

Sie können beginnen, indem Sie zu Ihrem WordPress-Admin-Panel gehen und dann zu gehen Aussehen “ Widgets. Fügen Sie anschließend ein benutzerdefiniertes HTML-Widget hinzu, indem Sie auf die Schaltfläche ‚Hinzufügen‘ klicken.

Eigenes HTML Widget einfügen

 Fügen Sie ein benutzerdefiniertes HTML-Widget hinzu

Als nächstes müssen Sie auswählen, wo Sie das benutzerdefinierte HTML-Widget hinzufügen möchten, und eine Position auswählen. Der Widget-Bereich hängt von dem WordPress-Theme ab, das Sie verwenden. Sie können es beispielsweise Ihrer Fußzeile, Kopfzeile oder anderen Bereichen hinzufügen.

Wählen Sie den Bereich und die Position für Ihr benutzerdefiniertes HTML-Widget

 Wählen Sie den Bereich und die Position für Ihr benutzerdefiniertes HTML-Widget

Sobald Sie den Widget-Bereich und die Position ausgewählt haben, klicken Sie auf die Schaltfläche ‚Widget speichern‘.

Danach können Sie auf Ihr benutzerdefiniertes HTML-Widget klicken, den HTML-Code eingeben und dann auf die Schaltfläche ‚Speichern‘ klicken.

Benutzerdefiniertes HTML eingeben

 Benutzerdefiniertes HTML eingeben

Sie können jetzt Ihre Website besuchen, um das benutzerdefinierte HTML-Widget in Aktion zu sehen.

Benutzerdefinierte HTML-Vorschau

 Benutzerdefinierte HTML-Vorschau

So bearbeiten Sie HTML im WordPress-Theme-Editor

Eine andere Möglichkeit, den HTML-Code Ihrer Website zu bearbeiten, ist der WordPress-Theme-Editor (Code-Editor).

Wir empfehlen jedoch nicht, den Code direkt im Design-Editor zu bearbeiten. Der kleinste Fehler bei der Eingabe von Code kann Ihre Website beschädigen und Sie daran hindern, auf das WordPress-Dashboard zuzugreifen.

Wenn Sie Ihr Thema aktualisieren, gehen alle Ihre Änderungen verloren.

Wenn Sie jedoch erwägen, HTML mit dem Themeneditor zu bearbeiten, ist es eine gute Idee, Ihre Website zu sichern, bevor Sie Änderungen vornehmen.

Als nächstes gehen Sie zu Aussehen “ Theme Editor von Ihrem WordPress Dashboard. Sie sehen jetzt eine Warnmeldung zum direkten Bearbeiten von Themendateien.

Theme Editor Warnung in WordPress

 Theme Editor Warnung in WordPress

Sobald Sie auf die Schaltfläche ‚Ich verstehe‘ klicken, werden Ihre Themendateien und Ihr Code angezeigt. Hier können Sie auswählen, welche Datei Sie bearbeiten möchten, und Ihre Änderungen vornehmen.

WordPress Themeeditor

 WordPress Theme Editor

So bearbeiten Sie HTML in WordPress mit FTP

Eine weitere alternative Methode zum Bearbeiten von HTML in den WordPress Theme-Dateien ist die Verwendung von FTP, auch bekannt als File Transfer Protocol Service.

Dies ist eine Standardfunktion, die mit allen WordPress-Hosting-Konten geliefert wird.

Der Vorteil der Verwendung von FTP anstelle des Code-Editors besteht darin, dass Sie Probleme einfach mit dem FTP-Client beheben können. Auf diese Weise werden Sie nicht aus Ihrem WordPress-Dashboard ausgeschlossen, wenn beim Bearbeiten von HTML etwas kaputt geht.

Um zu starten, müssen Sie zuerst eine FTP-Software auswählen. Wir werden FileZilla in diesem Tutorial verwenden, da es ein kostenloser und benutzerfreundlicher FTP-Client für Windows, Mac und Linux ist.

Nachdem Sie Ihren FTP-Client ausgewählt haben, müssen Sie sich nun beim FTP-Server Ihrer Site anmelden. Sie finden die Anmeldedaten im Dashboard Ihres Hosting-Providers.

Sobald Sie angemeldet sind, sehen Sie verschiedene Ordner und Dateien Ihrer Website in der Spalte ‚Remote Site‘. Gehen Sie weiter und navigieren Sie zu Ihren Themendateien, indem Sie zu wp-content “ theme gehen.

Sie sehen jetzt verschiedene Themen auf Ihrer Website. Wählen Sie das Thema aus, das Sie bearbeiten möchten.

Navigieren Sie im FTP-Client zu Ihren Themendateien

 Navigieren Sie im FTP-Client zu Ihren Themendateien

Als nächstes können Sie mit der rechten Maustaste auf eine Themendatei klicken, um den HTML-Code zu bearbeiten. Wenn Sie beispielsweise Änderungen an der Fußzeile vornehmen möchten, klicken Sie mit der rechten Maustaste auf die Fußzeile.PHP-Datei.

Mit vielen FTP-Clients können Sie die Datei anzeigen und bearbeiten und automatisch hochladen, sobald Sie die Änderungen vorgenommen haben. In FileZilla können Sie dies tun, indem Sie auf die Option ‚Ansicht / Bearbeiten‘ klicken.

Laden Sie Ihre Themendatei herunter und bearbeiten Sie sie

 Laden Sie Ihre Designdatei herunter und bearbeiten Sie sie

Wir empfehlen Ihnen jedoch, die Datei, die Sie bearbeiten möchten, auf Ihren Desktop herunterzuladen, bevor Sie Änderungen vornehmen.

Nachdem Sie den HTML-Code bearbeitet haben, können Sie die Originaldatei ersetzen. Für weitere Informationen empfehlen wir Ihnen, unserer Anleitung zum Verwenden von FTP zum Hochladen von Dateien in WordPress zu folgen.

Einfache Möglichkeit, Code in WordPress hinzuzufügen

Der einfachste Weg, Code zu Ihrem WordPress hinzuzufügen, ist die Verwendung des WordPress-Plugins Kopf- und Fußzeilen einfügen.

Das Team von WPBeginner hat dieses Plugin entwickelt, damit Sie Ihrer Site in wenigen Minuten Code hinzufügen können, und wir haben es zu 100% kostenlos gemacht.

Es hilft auch, Ihren Code zu organisieren, da er an einem Ort gespeichert ist. Außerdem werden Fehler verhindert, die beim manuellen Bearbeiten von Code verursacht werden können.

Ein weiterer Vorteil ist, dass Sie sich keine Sorgen machen müssen, dass Ihr Code gelöscht wird, wenn Sie Ihr Thema aktualisieren oder ändern möchten.

Als erstes müssen Sie das Plugin Kopf- und Fußzeilen einfügen auf Ihrer Website installieren und aktivieren. Weitere Informationen finden Sie in unserem ausführlichen Tutorial zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiv ist, können Sie über Ihr Admin-Panel zur Einstellung “ Kopf- und Fußzeilen einfügen“ wechseln.

Als nächstes können Sie den HTML-Code zu Ihrer Website in den Kopf-, Haupt- und Fußzeilenfeldern hinzufügen.

Angenommen, Sie möchten auf Ihrer Website eine Benachrichtigungsleiste anzeigen. Sie können einfach den HTML-Code in das Feld ‚Scripts in Body‘ eingeben und auf die Schaltfläche Speichern klicken.

Hinzufügen des HTML-Codes mit dem Plugin Kopf- und Fußzeilen einfügen

 Hinzufügen des HTML-Codes mit dem Plugin Kopf- und Fußzeilen einfügen

Außerdem können Sie einen Google Analytics-Tracking-Code und ein Facebook-Pixel in die Kopfzeile oder einen Pinterest-Button in die Fußzeile Ihrer Website einfügen mit dem Plugin.

Weitere Informationen finden Sie in unserer Anleitung zum Hinzufügen von Kopf- und Fußzeilencode in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, HTML im WordPress-Codeeditor zu bearbeiten. Vielleicht möchten Sie sich auch unseren Leitfaden ansehen, wie viel es wirklich kostet, eine WordPress-Website zu erstellen, oder die wichtigsten Gründe, warum Sie WordPress für Ihre Website verwenden sollten.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Leave a Reply

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.