Anleitungen/Inhalte erstellen/Code/Individuelles HTML hinzufügen

Individuelles HTML hinzufügen

Verwende den Individuelles HTML-Block, um HTML-Code während des Bearbeitens hinzuzufügen und in der Vorschau anzuzeigen. Dieser Ratgeber zeigt dir, wie du diesen Block verwendest, um Code zu deiner Website hinzuzufügen.

Vorbereitung

Der Individuelles HTML-Block ist zum Hinzufügen von reinem HTML-Code zu einer einzelnen Seite oder einem Beitrag gedacht. Er ist nicht immer das richtige Werkzeug. Wenn dein Ziel eines der folgenden ist, ist der verlinkte Ratgeber der schnellere Weg:

  • Ein Video, eine Karte, einen Social-Media-Beitrag oder einen Drittanbieter-Dienst (YouTube, Spotify, Instagram, Giphy, Pinterest und viele andere) einbetten: Siehe Inhalte von anderen Plattformen einbetten. Der Einbetten-Block funktioniert in jedem Tarif und unterstützt viele beliebte Dienste ohne individuellen Code.
  • Kontaktdetails, Anmeldungen oder Feedback erfassen: siehe Formularblock. Der Formular-Block erstellt ein funktionierendes Formular ohne HTML.
  • Deiner Website ein CSS-Styling hinzufügen: siehe Individuelles CSS hinzufügen.
  • Code zu den Headern deiner Website hinzufügen (Verifizierungs-Meta-Tags, Drittanbieter-Skripts, die Website-weit geladen werden): siehe Code zu Headern hinzufügen.

Den Individuelles HTML-Block einfügen

Um den Individuelles HTML-Block hinzuzufügen, befolge diese Schritte:

  1. Gehe zum Dashboard deiner Website und wähle die Seite, den Beitrag oder das Template aus, zu der/dem du das HTML hinzufügen möchtest.
  2. Klicke auf das + Block-Inserter-Icon und suche nach „HTML“.
  3. Klicke auf den Individuelles HTML-Block, um ihn zu deinen Inhalten hinzuzufügen.
A box drawn around the Custom HTML block in the block selector.

Eine detaillierte Anleitung zum Hinzufügen von Blöcken findest du hier.

Dein HTML hinzufügen

Nachdem du den Block hinzugefügt hast, befolge diese Schritte, um deinen HTML-Code hinzuzufügen:

  1. Klicke auf HTML bearbeiten.
The HTML block with an Edit HTML button.
  1. Schreibe oder füge deinen HTML-Code links im Editor ein.
    • Während du dein HTML erstellst, siehst du eine Vorschau des Codes auf der rechten Seite.
  2. Wenn du fertig bist, klicke auf den Button Aktualisieren, um deine Änderungen zu speichern.
The HTML editor with code on the left and a preview on the right.

Du siehst das Ergebnis deines HTML-Codes im Editor. Um Änderungen vorzunehmen, klicke auf den Button HTML bearbeiten in der Block-Werkzeugleiste.

Unterstütztes HTML

HTML ist eine Computersprache, die Browsern mitteilt, wie sie Website-Inhalte anzeigen sollen. WordPress.com erlaubt in allen Tarifen die folgenden HTML-Tags:

  • a
  • address
  • abbr
  • acronym
  • area
  • article
  • aside
  • b
  • big
  • blockquote
  • br
  • caption
  • cite
  • class
  • code
  • col
  • del
  • details
  • dd
  • div
  • dl
  • dt
  • em
  • figure
  • figcaption
  • footer
  • font
  • h1, h2, h3, h4, h5, h6
  • header
  • hgroup
  • i
  • img
  • ins
  • kbd
  • li
  • map
  • mark
  • ol
  • p
  • pre
  • q
  • rp
  • rt
  • rtc
  • ruby
  • s
  • section
  • small
  • span
  • strike
  • strong
  • sub
  • summary
  • sup
  • table
  • tbody
  • td
  • tfoot
  • th
  • thead
  • tr
  • tt
  • u
  • ul
  • var

Um die folgenden Tags hinzuzufügen, benötigst du einen kostenpflichtigen Tarif mit aktivierten Hosting-Funktionen. Erfahre, wie du die Hosting-Funktionen deines Tarifs aktivierst.

embed, frame, iframe, form, input, object, textarea, script, style, link

Weitere Informationen zu den Codetypen, die du zu deiner Website hinzufügen kannst, sowie Alternativen, wenn ein Codetyp nicht unterstützt wird, findest du in unserem Ratgeber zum Hinzufügen von Code zu deiner Website.

Behebung gängiger Problemen

Wenn dein HTML-Code nach dem Speichern nicht wie erwartet angezeigt wird, überprüfe die folgenden gängigen Ursachen.

Code verschwindet nach dem Speichern

WordPress.com filtert bestimmte HTML-Tags aus Sicherheitsgründen. Tags wie iframe, script, style, form, embed und object erfordern einen kostenpflichtigen Tarif mit aktivierten Hosting-Funktionen.

Wenn dein Code nach dem Speichern verschwindet oder teilweise entfernt wird, führe diese Prüfungen in der folgenden Reihenfolge durch:

  1. Überprüfe deinen Tarif. Gehe zum Dashboard deiner Website und wähle Upgrades → Tarife aus. Der Individuelles HTML-Block akzeptiert eingeschränkte Tags nur bei einem kostenpflichtigen Tarif. Wenn du den Kostenlos-Tarif nutzt, führe ein Upgrade auf einen beliebigen kostenpflichtigen Tarif durch, um fortzufahren.
  2. Aktiviere Hosting-Funktionen. Ein kostenpflichtiger Tarif allein reicht nicht aus – Hosting-Funktionen müssen auch aktiv sein. Installiere mindestens ein Plugin auf deiner Website, um deinen Tarif zu aktivieren und individuellen Code zu akzeptieren.
  3. Gib deinen Code erneut ein. Sobald dein Tarif bezahlt ist und Hosting-Funktionen aktiviert sind, füge den Code erneut in den Individuelles HTML-Block ein und speichere.

Wenn dein Code nach der Aktivierung der Hosting-Funktionen immer noch entfernt wird, wird das Tag in diesem Kontext möglicherweise nicht unterstützt, oder der Drittanbieter-Dienst veröffentlicht möglicherweise Einbettungscode, der nicht unterstütztes Markup verwendet. Versuche es stattdessen mit dem Einbetten-Block oder sieh dir unten die Fehlerbehebung für „unerwartete oder ungültige Inhalte“ an.

Inhalte von Drittanbietern ohne individuellen Code einbetten

Wenn du versuchst, Inhalte von einem Drittanbieter-Dienst einzubetten (Videos, Musik, Karten, Beiträge in sozialen Netzwerken, Kalender, Newsletter oder Dokument-Viewer), verwende stattdessen den Einbetten-Block. Der Einbetten-Block funktioniert mit jedem Tarif, erfordert kein HTML und unterstützt Dienste wie YouTube, Vimeo, Spotify, X, Instagram, TikTok und viele andere.

Wenn der Einbetten-Block deinen Dienst nicht auflistet, benötigt der Dienst wahrscheinlich einen Iframe oder ein Skript. Füge den Einbettungscode zu einem Individuelles HTML-Block in einem kostenpflichtigen Tarif mit aktivierten Hosting-Funktionen hinzu.

Fehlerbehebung für „unerwartete oder ungültige Inhalte“

Wenn du eine Meldung siehst, die besagt, dass dein Block unerwarteten oder ungültigen Inhalt enthält, könnte das HTML im Block fehlerhaft sein oder sich geändert haben. Wähle Blockwiederherstellung versuchen aus, damit der Editor das Problem automatisch beheben kann. Wenn der Fehler weiterhin besteht, findest du in unserem Ratgeber zur Behebung von Blockfehlern weitere Optionen.

Copied to clipboard!