HTML in WordPress: Erklärt und Ergänzt

HTML – Noch NIE gehört?

Wie immer fragen wir zuerst einmal Wikipedia:
Die Hypertext Markup Language (HTML, dt. Hypertext-Auszeichnungssprache), oft kurz als Hypertext bezeichnet, ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt.

Wunderbar – und was bedeutet das?
Wenn Sie diese Seite lesen, sehen Sie gleichzeitig das Design der Seite. Text wird in Fettschrift dargestellt. Der hier schräggestellt. Und diseer ist durchgestrichen.
Aber woher weiss mein Browser, wie was dargestellt werden soll?
Dazu dienen die HTML Auszeichnungen (englisch „Tags“). Beispiele:

<strong>Fettschrift</strong>

<h3>HTML Überschrift 3 Auszeichnung</h3>

Die HTML Tags bestehen aus einem Teil, der die Auszeichnung beginnt, s.o. <strong> oder <h3>, und einem die Auszeichnung beendenden Teil, s.o. </strong> oder </h3>. Tags stehen in spitzen Klammern <..> und die End-Tags beginnen mit einem / </..>

HTML Lernen?

Muss ich jetzt HTML Lernen, wenn ich ein mit WordPress Blog eine Website anlegen möchte?

Nicht unbedingt. Zum einen bietet WordPress einen kleinen HTML Editor mit WYSIWIG (= „What you see is what you get – Echtzeitvorschau) Funktion an. Und wenn Sie sich als Autor oder Redakteur die Arbeit an einem WordPress Blog teilen, haben Sie einen „Webmaster“ der die Grundzüge von HTML kennen sollte.

Andererseits fehlt dem WordPress HTML Editor eine Menge an Funktionen. Das läßt sich zwar durch Plug-Ins erweitern, aber selbst dann fehlen noch entscheidende HTML Funktionen, z.B. Tabellen.

Es empfiehlt sich einen kostenlosen open-source HTML Editor einzusetzen. Zu alledem mehr unten.

HTML Funktionen in WordPress Editor

Wenn Sie in WordPress einen Artikel/Seite anlegen oder bearbeiten, finden Sie unterhalb der Überschrift das Feld, in dem Sie Ihren Text eingeben.

WordPress stellt Ihnen zwei Darstellungsarten Ihres Textes zur Verfügung: Visuell und HTML

In der „Visuellen“ Darstellung wird der Text in der endgültigen Formatierung (WYSIWYG) dargestellt. In HTML werden die Tags angezeigt. Entsprechend ist das Angebot an automatischer Textformatierung unterschiedlich.

HTML WordPress Editor

HTML WordPress WYSIWYG Editor

Wenn Sie nicht alle Funktionen sehen, klicken Sie auf die Schaltfläche ganz rechts außen in der ersten Reihe.

HTML in WordPress

HTML in WordPress

Im HTML Modus haben Sie nur eine beschränkte Anzahl von Befehlen, die Sie als Tags einfügen können.

Wenn Sie nur mit Texten und Bildern arbeiten und keine Tabellen verwenden möchten, sollte Ihnen der eingebaute „Visuelle HTML Editor“ für die meisten Arbeiten ausreichen.

OOPS! Mein Javascript ist weg

Die eingeschränkte Funktionalität des WordPress Editor hat aber noch eine nicht ungefährliche Kehrseite. Wenn Sie erweiterte HTML Befehle verwenden, insbesondere Flash oder Java Script einbauen möchten, wird WordPress das beim Wechsel vom HTML in den Visuellen Modus entfernen! Das gilt auch für Doppelte Zeilenschaltung oder mehrere Leerzeichen. WordPress interpretiert dies als „Programmierfehler“ und entfernt die „überflüssigen“ Zeichen und „unverständlichen“ Befehle und Kodezeilen.

Wenn Sie externen HTML Code, Java Script, Flash o.ä. in einem WordPress Beitrag verwenden wollen, müssen Sie den Kode im HTML Modus eingeben. Geben Sie den Kode stattdessen im Visuellen Modus ein, wird er als „Text“ dargestellt und nicht ausgeführt.

So können Sie z.B. keinen doppelten Zeilenabstand verwenden!

Jetzt haben Sie sich so viel Mühe gegeben und versucht ein externes Objekt in Ihr Blog einzubauen. Ob es ein YouTube Video, eine Karte von Google, Google Adsense Anzeigen, Amazon Widget und und und sind – WordPress löscht alles, sobald Sie in den Visuellen Modus zurückkehren.

So bleibt Ihnen in diesem Fall nichts anderes übrig, als ausschließlich im HTML Modus zu arbeiten.

HTML-Tip: Gestalten Sie zuerst Ihren Text im Visuellen Modus und fügen Sie dann als letzten Schritt Ihren JS und Flash Kode im HTML Modus ein.

HTML-Editor für WordPress erweitern

Zum Beispiel mit dem WP Insert Plug-In erhalten Sie eine ganze Reihe weiterer HTML Funktionen. Und Ihre JS und Flash Elemente werden auch nicht gelöscht sondern als Rahmen mit Symbol angezeigt.

WP Insert ist ein hilfreiches Plug-In für die erweiterte visuelle HTML Programmierung. Von den übrigen Funktionen sind wir unterschiedlich begeistert:
Anzeigenverwaltung: sehr viele Funktionen aber die Positionierung ist bei manchen WordPress-Themen schwierig.
„Privacy Policy“: nicht verwendet
Seitenverwaltung: hilfreich
Tracking Codes: hilfreich
WYSIWYG-Editor: s.o.
Syntaxe Highlighting: nicht verwendet

HTML Editor Plug-In

HTML Editor Plug-In mit erweiterten Funktionen

Tip – WordPress as HTML-Editor:
Im Rahmen Ihrer SEO und SEM Arbeiten werden Sie immer wieder HTML Texte verwenden müssen. Sie können WordPress als HTML Editor auch für andere Zwecke einsetzen.
Erstellen Sie einen Artikel/Seite. Schreiben und gestalten Sie Ihren Text mit allen Multimedia Elementen. Wechseln Sie in den HTML Modus, markieren Sie den gesamten Text und kopieren Sie ihn in die Zwischenablage.
Jetzt haben Sie HTML Text, den Sie an anderer Stelle einfügen können.

Aus externem HTML-Editor importieren

Auch Sie werden recht bald an die Grenzen der HTML Programmierung in WordPress stoßen. Auch wenn Sie kein Programmierer werden wollen, müssen Sie fremde Hilfe in Anspruch nehmen oder sich Grundkenntnisse in HTML aneignen.

Am einfachtsen ist die visuelle HTML-Programmierung in einem entsprechenden Editor. Sie brauchen nicht Adobe Dreamweaver (TM) oder Microsoft Frontpage (TM) zu kaufen. Für die Gestaltung von WordPress Beiträgen reicht ein kostenloser HTML Editor (open source).

Wir haben gute Erfahrungen mit  NVU gemacht. Es ist nicht erforderlich, in die Tiefen der HTML Programmierung oder Webseitengestaltung einzusteigen.
Machen Sie sich vor allem mit der Verwendung von Tabellen vertraut. Tabellen bieten Ihnen die einfachste Möglichkeit Ihre Texte und Beiträge zu gestalten.

Entwerfen Sie Ihren Beitrag/Seite komplett mit Tabellen, Java Script und Flash in einem externen visuellen Editor, wechseln Sie in den HTML Modus Ihres Editors. Markieren Sie den gesamten Text und kopieren Sie ihn in WordPress (HTML-Modus).
Gehen Sie jetzt nicht zurück in den visuellen Modus (in WordPress). Sie verlieren wieder Ihre JS und Flash Elemente. Speichern Sie den Text und sehen Sie ihn sich mit der „Vorschau“ Funktion an.

Microsoft Office als HTML Editor

Wir raten davon ab, Microsoft Word (TM) oder Microsoft Excel (TM) als HTML Editor zu verwenden. Beide Produkte haben die Unart jedem HTML Tag eine Vielzahl von Formatierungsbefehlen mitzugeben. Dies stößt sich oft mit der Formatierung in WordPress. Alternativ müssen Sie alle überflüssigen Befehle per Hand löschen.

lizenzfreie Fotos, Sprüche, Zitate, Weisheiten, Geburtstag, Hochzeit
Copyright 2016 gaidaphotos.com