60 Minuten GRATIS Webdesign-Workshop

Mit Geschäftsführer & Webdesign-Profi Oliver Pfeil

ᐅ WordPress HTML Code einfügen + bearbeiten (Quelltext)

Heute zeige ich dir, wie du einen WordPress HTML Quellcode einfügen und bearbeiten kannst. WordPress bietet dir dazu verschiedene Möglichkeiten, die wir uns hier ansehen werden.

Bestimmte Inhalte (beispielsweise Videos) bindet man mit einem externen Code in den Quelltext von WordPress ein. Zudem kannst du bei Bedarf den WordPress HTML Code bearbeiten.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

WordPress Quellcode bearbeiten

Mit deinem WordPress Editor kannst du den Quellcode bearbeiten. Je nachdem, welchen Editor du verwendest, ist die Vorgehensweise etwas anders.

In diesem Artikel zeige ich dir die Vorgehensweise für folgende beiden Editoren:

  • Gutenberg Editor
  • Classic Editor

Visueller-Modus
Das ist die Editoransicht, in der du alle Formatierungen über die zur Verfügung stehenden Buttons setzen kannst.

Text-Modus
In dieser Ansicht kannst du den HTML-Code deiner Seite anzeigen, einfügen oder bearbeiten.

WordPress HTML Code mit dem Gutenberg Editor einfügen

Das Einfügen von WordPress HTML Code funktioniert sehr einfach. Öffne dazu den entsprechenden Beitrag, in den du den Quelltext einbinden möchtest.

  1. Klicke links oben auf das Plus-Symbol (+) und suche nach dem Element HTML.
  2. Wähle dieses Element jetzt aus.
  3. In dieses Element kannst du jetzt deinen Code einbinden.

WordPress HTML Code einfügen

Das kann beispielsweise der Einbettungscode von einem YouTube Video sein. Zusätzlich hast du die Möglichkeit, dir eine Vorschau anzeigen zu lassen. Darüber kannst du prüfen, ob der HTML-Code korrekt funktioniert. Falls nicht, kannst du diesen jederzeit bearbeiten.

WordPress HTML einbinden

Bitte prüfe nach dem Speichern noch mal, ob der Quellcode korrekt funktioniert. Öffne dazu deine Website und sehe dir das live an.

WordPress HTML Code mit dem Classic Editor bearbeiten

Auch mit dem alten Classic Editor kannst du den HTML-Code bearbeiten. Dir steht dazu ein Visueller und ein Text-Modus zur Verfügung. Wenn du in den Text-Modus gewechselt bist, kannst du den WordPress HTML Code einfügen und bearbeiten.

Falls du mit dieser Vorgehensweise noch nicht sehr vertraut bist, solltest du vorher den Inhalt dieser Seite kopieren und z. B. in einem Textverarbeitungsprogramm speichern, damit er dir bei einem Fehler nicht verloren geht.

Rechts oben (siehe Screenshot) kannst du in den Text-Modus (HTML-Quellcode) wechseln.

WordPress HTML bearbeiten

  1. Öffne die Seite oder den Beitrag, den du bearbeiten möchtest.
  2. Klicke rechts oben im Editor auf „Text“.
  3. Füge den Quellcode an der gewünschten Stelle ein.

Anschließend kannst du wieder in die visuelle Ansicht wechseln, die Änderung aktualisieren und das Ergebnis ansehen. Wichtig: Teste und überprüfe, ob das Einfügen des WordPress HTML Codes funktioniert hat.

YouTube Video via HTML Code einbinden

Auf diese Weise kannst du zum Beispiel sehr einfach ein YouTube-Video mit dem Einbettungscode in WordPress einfügen. Prüfe nach dem Speichern bitte immer das Ergebnis auf der entsprechenden Seite.

Nicht jeder HTML-Code wird immer korrekt eingebunden. Manchmal kommt es vor, dass der Quellcode in WordPress verändert und der Inhalt nicht korrekt dargestellt wird. PHP-Code wird in der Regel ausgeklammert und funktioniert somit nicht. Dabei handelt es sich um eine Sicherheitseinstellung, dass kein ungewünschter Schadcode eingebunden werden kann.

WordPress HTML – Plugin nutzen

Wenn du Probleme damit hast, den HTML-Code in WordPress einzufügen, kannst du diesen alternativ mit einem Plugin einbinden. Das ist natürlich etwas umständlicher, funktioniert aber sehr zuverlässig.

Die meiner Meinung nach einfachere Lösung ist es, ein Plugin zu nutzen. Mit einem Shortcode kannst du dann den HTML- oder PHP-Code einbinden. Folgendes Plugin kann ich dir empfehlen: PHP Code Snippets

HTML-Code in Widgets einbinden

Bei Widgets ist es ähnlich wie bei Seiten und Beiträgen. Einfachen HTML-Code kannst du im WordPress-Backend mit dem Widget „Text“ einfach einbinden. Über ein Widget kannst du deinen Besuchern zusätzliche Inhalte bereitstellen.

Sehr beliebt ist die Einbindung eines Newsletterformulars in einem Widget, um E-Mail Marketing zu betreiben.

Weitere Möglichkeiten

Jetzt weißt du, wie du in WordPress HTML Code einfügen kannst. Die Gründe dafür und die daraus resultierenden Möglichkeiten sind gigantisch. Ein paar Beispiele möchte ich dir noch kurz aufzählen:

WordPress ist eine Lösung, mit der du so ziemlich alle Anforderungen umsetzen kannst. In folgendem Artikel zeige ich dir beliebte WordPress-Plugins vor, die du einmal ansehen solltest. Damit kannst du den Funktionsumfang deiner Website erweitern.

Link: Geniale WordPress-Plugins

FAQ: Häufige Fragen

Im Folgenden beantworte ich dir häufig gestellte Fragen rund um das Thema WordPress HTML Code.

Kann ich in WordPress den HTML-Code bearbeiten?

Ja! Du kannst den HTML-Code in WordPress sehr einfach bearbeiten. Das funktioniert sowohl mit dem neuen Gutenberg Editor als auch mit dem alten klassischen Editor.

Wie kann ich den HTML-Code im Guttenberg Editor bearbeiten?

Das Bearbeiten de WordPress HTML-Codes ist sehr einfach. Für den neuen Gutenberg Editor steht dir dazu ein extra HTML-Element zur Verfügung. Wähle dieses aus und füge deinen Quellcode direkt ein. An dieser Stelle kannst du den Code natürlich auch bearbeiten.

Wie kann ich den HTML-Code im klassischen Editor bearbeiten?

Für den alten klassischen Editor steht dir dazu die Funktion Visuell und Text zur Verfügung. Klicke auf Text und du siehst den kompletten WordPress Quellcode der entsprechenden Seite oder Beitrag. An dieser Stelle kannst den WordPress Quellcode einfügen & bearbeiten.

Was ist der Unterschied zwischen HTML und CSS?

HTML besteht aus Tags und damit kannst du Inhalte formatieren, damit sie von Google besser verstanden werden. Zudem kannst du mit HTML bestimmte Elemente auf deiner Website einbinden. CSS ist für das Design deiner Website mitverantwortlich. Via CSS erfolgt die Design-Formatierung deines Designs.

Deine perfekte Website. In Rekordzeit.

60 Minuten Webdesign-Seminar mit Experte Oliver Pfeil

60 Minuten Webdesign-Seminar mit Experte Oliver Pfeil