Wie man HTML im WordPress Code Editor bearbeitet (Anleitung für Anfänger)

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 auf Ihren Webseiten angezeigt werden soll. Die Bearbeitung von HTML ist für erweiterte Anpassungen und die Behebung von Problemen sehr nützlich.

In diesem Artikel zeigen wir Ihnen, wie Sie HTML im WordPress-Code-Editor mit verschiedenen Methoden bearbeiten können.

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 Zeile Code anzufassen.

Plugins und Themes haben jedoch ihre Grenzen und bieten möglicherweise nicht genau die Funktionen, nach denen Sie suchen. Infolgedessen sind Sie möglicherweise nicht in der Lage, Ihre Website so zu gestalten, wie Sie es wünschen.

In diesem Fall ist die Bearbeitung von HTML sehr nützlich. Mit Hilfe von HTML-Code können Sie problemlos erweiterte Anpassungen vornehmen. Damit haben Sie viel Flexibilität und Kontrolle über Aussehen und Funktion Ihrer Website.

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

Hinweis: Wenn Sie HTML nicht bearbeiten möchten, aber dennoch volle Anpassungsmöglichkeiten wünschen, empfehlen wir Ihnen einen Drag-and-Drop-WordPress-Seitenersteller wie SeedProd.

Schauen wir uns also die verschiedenen 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 können, und wir zeigen Ihnen eine einfache Möglichkeit, Code zu Ihrer Website hinzuzufügen. Sie können auf die Links unten klicken, um zum gewünschten Abschnitt zu springen.

Bearbeiten von HTML im WordPress-Block-Editor

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.

Gehen Sie dazu in Ihr WordPress-Dashboard und fügen Sie einen neuen Beitrag/eine neue Seite hinzu oder bearbeiten Sie einen bestehenden Artikel. Klicken Sie anschließend auf das Pluszeichen (+) in der oberen linken Ecke und fügen Sie einen „Custom HTML“-Block hinzu.

Geben Sie anschließend Ihren benutzerdefinierten HTML-Code in den Block ein. Sie können auch auf die Option „Vorschau“ klicken, um zu prüfen, ob der HTML-Code richtig funktioniert und wie Ihr Inhalt auf Ihrer Live-Website aussehen wird.

Eine weitere Möglichkeit, HTML-Code im WordPress-Block-Editor 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 Menü mit den drei Punkten. Klicken Sie anschließend auf die Option „Als HTML bearbeiten“.

Sie sehen nun den HTML-Code eines einzelnen Blocks. Bearbeiten Sie nun den HTML-Code Ihres Inhalts. Sie können zum Beispiel einen nofollow-Link hinzufügen, den Stil Ihres Textes ändern oder anderen Code hinzufügen.

Wenn Sie den HTML-Code Ihres gesamten Beitrags bearbeiten möchten, können Sie den „Code-Editor“ im WordPress-Blockeditor verwenden.

Sie können den Code-Editor aufrufen, indem Sie auf die drei Punkte in der oberen rechten Ecke klicken. Wählen Sie dann „Code-Editor“ aus den Dropdown-Optionen.

So bearbeiten Sie HTML im klassischen WordPress-Editor

Wenn Sie den klassischen WordPress-Editor verwenden, können Sie den HTML-Code einfach 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.

Danach können Sie den HTML-Code Ihres Inhalts bearbeiten. Sie können z. B. verschiedene Wörter fett drucken, um sie hervorzuheben, den Text kursiv gestalten, Listen erstellen, ein Inhaltsverzeichnis hinzufügen und vieles mehr.

Wie man HTML in WordPress-Widgets bearbeitet

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

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

Beginnen Sie damit, indem Sie zu Ihrem WordPress-Administrationspanel gehen und dann zu Darstellung “ Widgets. Danach fügen Sie ein benutzerdefiniertes HTML-Widget hinzu, indem Sie auf die Schaltfläche „Hinzufügen“ klicken.

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

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.

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

HTML im WordPress-Theme-Editor bearbeiten

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

Wir raten Ihnen jedoch davon ab, den Code direkt im Theme-Editor zu bearbeiten. Der kleinste Fehler bei der Eingabe des Codes kann Ihre Website zerstören und Ihnen den Zugriff auf das WordPress-Dashboard verwehren.

Und wenn Sie Ihr Theme aktualisieren, gehen alle Änderungen verloren.

Wenn Sie also in Erwägung ziehen, den HTML-Code mit dem Theme-Editor zu bearbeiten, ist es eine gute Idee, Ihre Website zu sichern, bevor Sie Änderungen vornehmen.

Als Nächstes gehen Sie in Ihrem WordPress-Dashboard zu Darstellung “ Theme-Editor. Sie sehen nun eine Warnmeldung über die direkte Bearbeitung von Theme-Dateien.

Sobald Sie auf die Schaltfläche „Ich verstehe“ klicken, werden Ihre Theme-Dateien und Ihr Code angezeigt. Von hier aus können Sie die Datei auswählen, die Sie bearbeiten möchten, und Ihre Änderungen vornehmen.

HTML in WordPress mit FTP bearbeiten

Eine andere Methode zur Bearbeitung 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 ausgesperrt, wenn bei der HTML-Bearbeitung etwas nicht funktioniert.

Um zu beginnen, müssen Sie zunächst eine FTP-Software auswählen. In diesem Tutorial werden wir FileZilla 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 Website anmelden. Die Anmeldedaten finden Sie im Dashboard des Control Panels Ihres Hosting-Anbieters.

Sobald Sie eingeloggt sind, sehen Sie verschiedene Ordner und Dateien Ihrer Website in der Spalte „Remote Site“. Navigieren Sie zu den Dateien Ihres Themas, indem Sie zu wp-content “ theme gehen.

Sie sehen nun verschiedene Themes auf Ihrer Website. Wählen Sie das Theme aus, das Sie bearbeiten möchten.

Dann können Sie mit der rechten Maustaste auf eine Themendatei klicken, um den HTML-Code zu bearbeiten. Wenn Sie zum Beispiel Änderungen an der Fußzeile vornehmen möchten, klicken Sie mit der rechten Maustaste auf die Datei footer.php.

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

Wir schlagen jedoch vor, dass Sie die zu bearbeitende Datei auf Ihren Desktop herunterladen, bevor Sie Änderungen vornehmen.

Nachdem Sie den HTML-Code bearbeitet haben, können Sie die Originaldatei ersetzen. Für weitere Details empfehlen wir Ihnen unsere Anleitung zum Hochladen von Dateien in WordPress mit FTP.

Einfacher Weg, Code in WordPress hinzuzufügen

Der einfachste Weg, Code zu Ihrem WordPress hinzuzufügen, ist die Verwendung des WordPress-Plugins Insert Headers and Footers.

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

Es hilft auch, Ihren Code zu organisieren, da er an einem Ort gespeichert wird. Außerdem verhindert es Fehler, die bei der manuellen Bearbeitung von Code auftreten 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.

Als Erstes müssen Sie das Plugin „Insert Headers and Footers “ auf Ihrer Website installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer ausführlichen Anleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, können Sie in Ihrem Administrationsbereich zu Einstellungen “ Kopf- und Fußzeilen ein fügen gehen.

Als Nächstes können Sie den HTML-Code auf Ihrer Website in den Kopf-, Körper- und Fußzeilenfeldern einfügen.

Nehmen wir an, Sie möchten auf Ihrer Website eine Benachrichtigungsleiste anzeigen. Geben Sie einfach den HTML-Code in das Feld „Scripts in Body“ ein und klicken Sie auf die Schaltfläche Speichern.

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

Weitere Details finden Sie in unserer Anleitung zum Hinzufügen von Header- und Footer-Code in WordPress.

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

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.