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

HyperText Markup Language oder HTML ist ein Code, der einem Browser mitteilt, wie der Inhalt Ihrer Seiten angezeigt werden soll. Die Bearbeitung von HTML ist für die individuelle Anpassung, das Hinzufügen spezifischer Funktionen und die Problembehandlung sehr nützlich.

Bei WPBeginner hören wir oft von Benutzern, die HTML einschüchternd finden, aber die Bearbeitung innerhalb von WordPress ist einfacher, als Sie vielleicht denken.

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 verändern und verschiedene Elemente anpassen können, ohne eine einzige Zeile Code anfassen zu müssen.

Plugins und Themes haben jedoch ihre Grenzen und bieten möglicherweise nicht genau die Funktionen, nach denen Sie suchen. Das kann dazu führen, dass Sie Ihre Website nicht so gestalten können, wie Sie es möchten.

In diesem Fall ist die Bearbeitung von HTML sehr nützlich. Mit Hilfe von HTML-Code können Sie leicht erweiterte Anpassungen vornehmen. Das bietet viel Flexibilität und Kontrolle darüber, wie Ihre Website aussehen und funktionieren wird.

Darüber hinaus kann das Erlernen der HTML-Bearbeitung Ihnen auch dabei helfen, Fehler auf Ihrer WordPress-Website zu erkennen und zu beheben, wenn Sie keinen Zugriff auf das Dashboard haben.

Sehen 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 und wie Sie auf einfache Weise Code zu Ihrer Website hinzufügen können. Sie können auf die Links unten klicken, um zum gewünschten Abschnitt zu springen.

HTML im WordPress-Block-Editor bearbeiten

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 zunächst 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.

Als Nächstes geben Sie 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 bestehenden Block in Ihrem Inhalt aus und klicken Sie dann auf das Menü mit den drei Punkten. Klicken Sie dann 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.

HTML im klassischen WordPress-Editor bearbeiten

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 zum Beispiel 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, CTA-Schaltflächen (Call to Action), Google Maps und andere Inhalte einbetten.

Beginnen Sie damit, indem Sie Ihr WordPress-Administrationspanel aufrufen und dann zu Erscheinungsbild “ Widgets gehen. Danach klicken Sie auf das „Plus“-Symbol in jedem Widget-Bereich, dem Sie HTML-Code hinzufügen möchten.

Die verfügbaren Widget-Bereiche hängen von dem von Ihnen verwendeten WordPress-Theme ab. Sie können es zum Beispiel in der Fußzeile, in der Kopfzeile oder in anderen Bereichen einfügen.

Suchen Sie dann im Menü des Widget-Blocks nach dem Custom HMTL-Widget und klicken Sie darauf, um es automatisch zum Widget-Bereich hinzuzufügen.

Danach können Sie auf Ihr benutzerdefiniertes HTML-Widget klicken und den HTML-Code eingeben. Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Aktualisieren“ in der oberen rechten Ecke des Bildschirms zu klicken.

Sie können nun Ihre Website besuchen, um das Custom 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 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.

Wenn Sie Ihr Thema aktualisieren, gehen außerdem alle Änderungen verloren.

Wenn Sie also erwägen, den HTML-Code mit dem Theme-Editor zu bearbeiten, ist es ratsam, eine Sicherungskopie Ihrer Website zu erstellen, bevor Sie irgendwelche Änderungen vornehmen.

Als Nächstes gehen Sie in Ihrem WordPress-Dashboard auf 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 Themendateien 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 weitere alternative 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 dieser Anleitung verwenden wir FileZilla, einen kostenlosen und benutzerfreundlichen FTP-Client für Windows, Mac und Linux.

Nachdem Sie Ihren FTP-Client ausgewählt haben, müssen Sie sich in den FTP-Server Ihrer Website einloggen. 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 Themen auf Ihrer Website. Wählen Sie nun das Thema aus, das Sie bearbeiten möchten.

Anschließend 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.

Viele FTP-Clients ermöglichen es Ihnen, die Datei anzusehen und zu bearbeiten und sie automatisch hochzuladen, sobald Sie die Änderungen vorgenommen haben. In FileZilla können Sie dies tun, indem Sie auf die Option „Anzeigen/Bearbeiten“ klicken.

Wir empfehlen Ihnen jedoch, die zu bearbeitende Datei auf Ihren Desktop herunterzuladen, bevor Sie irgendwelche Ä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 mit FTP in WordPress.

Einfacher Weg, Code in WordPress hinzuzufügen

Der einfachste Weg, Code in WordPress einzufügen, ist die Verwendung von WPCode, dem besten Code Snippets Plugin auf dem Markt.

Das Team von WPBeginner hat dieses Plugin so entwickelt, dass selbst absolute Anfänger in wenigen Minuten benutzerdefinierten Code zu ihrer Website hinzufügen können. Außerdem gibt es eine Lite-Version des Plugins, die zu 100 % kostenlos zu verwenden ist.

Es hilft, Ihren Code zu organisieren, da er an einem Ort gespeichert ist. Außerdem werden Fehler vermieden, 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 kostenlose WPCode-Plugin auf Ihrer Website installieren und aktivieren. Weitere Details finden Sie in unserer ausführlichen Anleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, können Sie in Ihrem Administrationsbereich zu Code Snippets “ Header & Footer wechseln.

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

Nehmen wir zum Beispiel an, Sie möchten auf Ihrer Website eine Warnleiste anzeigen. Geben Sie einfach den HTML-Code in das Feld „Body“ ein und klicken Sie auf die Schaltfläche „Änderungen speichern“.

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

Mit WPCode ist es einfach zu entscheiden, wo der Code ausgegeben werden soll. Sie können zum Beispiel automatisch einen HTML-Code am Anfang oder Ende jedes Beitrags anzeigen lassen.

Weitere Einzelheiten finden Sie in unserer Anleitung zum Hinzufügen von Kopf- und Fußzeilencode 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 unsere Anleitung zum Hinzufügen von HTML-Formularen in WordPress werfen 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.