WordPress-Autoren haben die Möglichkeit, Seiten und Beiträge in einem visuellen Editor oder einem Texteditor zu erstellen. Während der visuelle Editor mit seinen Symbolleistenoptionen und der einfachen Bearbeitungsumgebung recht gute Arbeit leistet, ermöglicht die Verwendung des Texteditors maximale Flexibilität bei der Organisation von Inhalten.

Lassen Sie mich nicht nur erklären, warum Sie den Texteditor (anstelle des visuellen Editors) verwenden möchten, sondern auch, wie einfach die Verwendung sein kann.

Warum bevorzugen Sie den Texteditor?

• Ihre Inhalte machen für Ihre Leser und Suchmaschinen mehr Sinn.
• Sie müssen nur ein paar HTML-Tags kennen, um den Texteditor sehr nützlich zu machen.
• Sie können CSS-Stileigenschaften direkt auf Ihren HTML-Code anwenden.

Was passiert, wenn Sie den visuellen Editor verwenden?

Wenn Sie Ihrem visuellen Editor Kopien, Medien oder Links hinzufügen, fügen Sie Ihrer Seite oder Ihrem Beitrag tatsächlich HTML hinzu. Alles findet unter der Haube statt.

Nicht sicher, was ich meine? Versuch das.

Fügen Sie im visuellen Editor eine Kopie hinzu. Wählen Sie dann die Registerkarte Text. Was Sie sich ansehen werden, ist HTML. Genau wie beim visuellen Editor können Sie Ihren HTML-Code direkt mit dem Texteditor bearbeiten.

Tatsächlich können Sie mit dem Texteditor viel mehr tun als mit dem visuellen Editor. Dies macht das Arbeiten im Textmodus nicht nur produktiver, sondern auch befriedigender. Sie können Ihre Inhalte genauer markieren, was Ihren Lesern zugute kommt und Ihre SEO-Bemühungen steigert.

HTML ist so einfach wie es nur geht. Jede Webseite, einschließlich der von WordPress generierten, verwendet sie.

Das Erlernen von HTML hat Vorteile, die weit über die Verwendung mit WordPress hinausgehen!

Was ist HTML?

Bekannt als die Lingua Franca des Webs, ist HyperText Markup Language (HTML) ein System, das es Autoren ermöglicht, Inhalten Bedeutung zuzuweisen. Mit HTML-Elementen (besser bekannt als Tags) können Sie Inhalte als Absätze, Überschriften, Listen, Links und andere Strukturen definieren.

HTML ist ähnlich wie Grammatik.

Es hat NICHTS damit zu tun, wie eine Webseite aussieht oder wie sie gestaltet ist. Die Frage des Webseitendesigns – Layout, Typografie und Farbe – wird mit CSS (Cascading Style Sheets), der Sprache des Webdesignstils, aufgegriffen.

HTML wird vom World Wide Web Consortium (W3C) entwickelt. Die aktuellste Version ist HTML5.

Die Tags, die Sie am ehesten verwenden

HTML ist ein containerisiertes Markup-System. Für jedes offene Tag gibt es ein passendes schließendes Tag.

Für den wichtigsten Inhalt einer Seite oder eines Abschnitts einer Seite würden Sie beispielsweise ein Überschrift-1-Tag wie dieses verwenden.

<h1>Alles über HTML</h1>
Das offene Tag ist<h1>und der Container ist geschlossen mit</h1>

In ähnlicher Weise wird ein Absatz folgendermaßen markiert:

< p> Vor einigen Jahren schlug ein Kunde und ein guter Freund vor, WordPress zu lernen. Zu der Zeit war ich gegen jede Art von CMS. Ich wusste nicht, dass ich es lieben und vielen Menschen in New Yorker Klassenzimmern und per Webinar beibringen würde.</p>

Alles, was Sie tun müssen, ist, Ihren Inhalt im Texteditor zu schreiben und Ihre Tags hinzuzufügen, entweder während Sie gehen oder nachdem Sie die Kopie eingegeben haben.

Hier finden Sie eine Erklärung der häufigsten Tags, die Sie beim Schreiben von HTML verwenden. Sie sind die Überschrift, Liste, Link, Gruppierung und ein paar verschiedene Tags.

ÜBERSCHRIFTEN-TAGS

<h1></h1>

<h2></h2>

<h3></h3>

• Es gibt auch h4-, h5- und h6-Überschriftentags, die in der Praxis selten verwendet werden.
• Verwenden Sie niemals ein Überschriften-Tag, um die Schriftgröße zu ändern.

LISTEN-TAGS

Sie können 3 Arten von Listen mit HTML erstellen. Die 2 beliebtesten sind geordnete und ungeordnete Listen.

Eine ungeordnete Liste wird verwendet, wenn die Reihenfolge der Elemente nicht wichtig ist.

<ul>

< li>Blumen</li>

< li>Gemüse</li>

< li>Bäume</li>

</ ul>

• blumen
• Gemüse
• Bäume

Eine geordnete Liste wird verwendet, wenn die Reihenfolge der Artikel relevant ist.

<alt>

< li>Kalifornien</li>

< li>/</li>

< li>Oder</li>

</ ol>

1. Kalifornien
2. Texas
3. Florida

( In diesem Beispiel ist die Reihenfolge relevant und wird von den größten Populationen in US-Bundesstaaten bestimmt.)

HINWEIS: Listen können auch verschachtelt werden, um eine Hierarchie von Listenelementen zu erstellen. Dies ist schwierig, wenn Sie den visuellen Editor verwenden.

LINK-TAG

Sie können Text oder ein Bild in einen Link umwandeln, indem Sie den Text oder das Bild in ein beliebiges Anker- (Link-) Tag einfügen. Während die Syntax zum Erstellen eines Links immer dieselbe ist (<a href=“url“>Linktext</a> ), gibt es 2 sehr gebräuchliche Möglichkeiten, dies zu tun.

Verwenden Sie für einen Link zu einer WordPress-Seite:

< a href=“http://domain.com/this-is-the-page-title“>link zu einer WordPress-Seite</a>

Verwenden Sie für einen Link zu einer beliebigen Seite oder Ressource, nicht nur zu einer WordPress-Seite:

< a href=“http://domain.com/about.html“>link zu einer HTML-Seite</ a>

HINWEIS: Es gibt tatsächlich einen dritten Weg. Sie können die spezielle Art und Weise verwenden, wie WordPress Links mit der folgenden Syntax erstellt:

< ein href =“Index.php?page_id=356″>Link zu einer Seite auf Ihrer Website</a

In diesem Fall müssen Sie die Seiten- oder Post-ID der Seite kennen, auf die Sie auf Ihrer Website verlinken. (Jede Seite oder jeder Beitrag hat eine eindeutige ID-Nummer).

GRUPPIEREN VON TAGS

Technisch gesehen gibt es keine „Gruppierung von Tags“, aber es ist der beste Weg, um eine Reihe von HTML-Tags zu beschreiben, die andere Elemente enthalten. Der Zweck dieser Tags besteht darin, die Bedeutung Ihres Inhalts genauer zu beschreiben.

Das <header> -Tag kann beispielsweise verwendet werden, um den Teil Ihrer Seite zu definieren, der führende Informationen wie diese enthält:

< kopfzeile>

< h1>Eine führende Kurslinie</h1>

< img src=“URL der Bilddatei“>

< p> Ein Absatz von Informationen, der der Überschrift und dem Bild folgt und logisch als eine Gruppe von Informationen zusammenhält.</p>

</ header>

Hier sind einige sehr häufige Gruppierungs-Tags

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

ANDERE TAGS
Neben dem Tag finden Sie diese Tags sehr hilfreich, wenn Sie mit dem Texteditor arbeiten.

<img src="url of image file">

<br>

<!-- hidden code or info here -->

<blockquote> or <q>

Während diese Tags werden Sie einen langen Weg, hier sind ein paar Ressourcen, um Ihnen zu helfen.

● Sie benötigen nur 10 HTML-Tags (Tutorial)
● HTML-Elementreferenz in Alpha-Reihenfolge
● HTML-Elementreferenz

Die Regeln

Das Schöne an HTML ist, dass es nur wenige Regeln gibt, die zu befolgen sind und die leicht zu merken sind.

* HTML Ist Case Insensitive

Großbuchstaben, Kleinbuchstaben oder gemischte Groß- und Kleinschreibung – schreiben Sie HTML, wie Sie möchten. Die übliche Praxis ist Kleinbuchstaben.

* Für jedes offene Tag muss ein geschlossenes Tag vorhanden sein

Es gibt Ausnahmen, aber um es wirklich einfach zu machen, gewöhnen Sie sich an, alle offenen Tags zu schließen.

* Tags werden in umgekehrter Reihenfolge geschlossen, in der sie innerhalb eines Blocks geöffnet werden

Dies kann etwas schwierig zu verstehen sein.

<p>Hier ist ein <starker>Absatz mit <a href=“url here“>ein Link</ a></strong> innen und ein Teil des Textes ist hervorgehoben.</p >

Hinweis die auftrag: < p > < starke > < eine > ….</a></stark></p>

* Einige Elemente haben kein schließendes Tag

Tags wie <br> und <img> haben kein schließendes Tag, da es keinen Grund dafür gibt.

* Verwenden Sie HTML korrekt und NICHT zum Formatieren Ihrer Seite

Verwenden Sie beispielsweise keine < – oder> -Tags, wenn Sie eine Liste haben. Oder verwenden Sie keine <table> -Tags, um ein Raster für das Layout zu erstellen.

Die Symbolleiste des Texteditors

Da ich es effizient finde, Code in den Texteditor zu schreiben, verwende ich die Symbolleiste im Allgemeinen nicht. Wenn Sie jedoch mit HTML beginnen, können Sie einige der Tools nützlich finden, um sich selbst HTML beizubringen. Letztendlich werden Sie feststellen, dass es mehr Tags gibt, mit denen Sie Ihren Inhalt richtig markieren können, als die Symbolleiste zulässt.

HTML Plugins

Früher oder später werden Sie feststellen, dass Sie beim Erstellen eines Absatzes im visuellen Editor kein <p> -Tag sehen, das Ihre Kopie umschließt, wenn Sie es im Texteditor sehen. Lass dich davon nicht stören. WordPress generiert weiterhin ein <p> -Tag, wenn die Kopie auf Ihrer Seite angezeigt wird.

Wenn Sie dieses oder andere Probleme mit Ihrem Code haben, möchten Sie vielleicht diese Plugins verwenden.

Immer in HTML bearbeiten

Dies garantiert, dass Ihr Editor beim Erstellen oder Bearbeiten von Seiten- oder Post-Inhalten immer als Texteditor und nicht als visueller Editor geöffnet wird. Dies kann sehr nützlich sein, da WordPress Ihre Tags unter bestimmten Umständen entfernen kann, wenn der visuelle Editor verwendet wird.

Preserve HTML Editor Markup Plus

Wenn Sie Probleme mit dem Entfernen von Tags haben, könnte dies Ihre Lösung sein.

HTML Editor Syntax Highlighter

Dies ist ein wunderbares Plugin, das den langweiligen Texteditor in ein farbcodiertes Füllhorn verwandelt. Es kann auch zu einem schwarzen Hintergrund und größeren Schriftarten wechseln. Es ist am besten, dieses Plugin mit der Vollbild-Option zu verwenden.

HINWEIS: Ich habe nicht zwei oder mehr dieser Plugins gleichzeitig getestet, daher können Inkompatibilitäten bestehen.

Wie Shortcodes ins Bild passen

Shortcodes sind das, was viele Plugins verwenden, um ein Formular hinzuzufügen, Spalten einzurichten oder eine andere Funktion zu einer Seite oder einem Beitrag hinzuzufügen. Es ist eine einfache Möglichkeit, Code wie HTML, Javascript, CSS und PHP hinzuzufügen, ohne etwas über diese Sprachen wissen zu müssen.

Verwenden Sie Shortcodes im Texteditor genauso wie im visuellen Editor.

Für Uneingeweihte mögen Shortcodes wie HTML aussehen, sind es aber nicht.

Sie können entweder einen Shortcode auf diese Weise einfügen, wenn Sie ein Kontaktformular hinzufügen, z. B. mit dem beliebten Contact Form 7-Plugin,

oder Sie können es so für ein Plugin verwenden,

Inhalt für die linke Seite der Spalte

Inhalt für die rechte Seite der Spalte

Dadurch werden zwei Spalten auf einer Seite erstellt.

Dieser Shortcode sieht aus wie HTML mit einem Tag zum Öffnen und Schließen, ist es aber nicht

Hinzufügen von CSS-Stilen mit dem Texteditor

Sie können dem Inhalt, den Sie im Texteditor hinzufügen, CSS-Stileigenschaften zuweisen. Dies ist mit dem visuellen Standardeditor nicht möglich.

Mit dem Texteditor kann dies auf 2 Arten erfolgen.

Eine Möglichkeit besteht darin, einem HTML-Element wie in diesem Beispiel eine ID oder ein Klassenattribut hinzuzufügen:

< p id=“lead“>Dies ist der führende Absatz in meinem Beitrag.</p>

Dann in Ihrem Stil.CSS-Datei würden Sie die Stileigenschaften für #lead hinzufügen. Vielleicht so etwas:

#lead

{font-weight:bold;

text-align:center;

color:#f00;}

Die zweite Möglichkeit besteht darin, Inline-Styling hinzuzufügen. (Der beste Ansatz besteht jedoch darin, HTML und CSS wie im obigen Szenario getrennt zu halten.) Sie können Inline-Styling wie folgt hinzufügen:

< p style=“font-family:arial,helvetica,sans-serif“>Die Schriftart für diesen Absatz ist Arial.</p>

HINWEIS: Dies würde jede Schriftfamilien-Stilregel für diesen Absatz überschreiben, die in einer externen Datei oder im <head> Container der Seite vorhanden sein kann.

Fazit

Der Texteditor gibt Ihnen die vollständige Kontrolle darüber, wie Sie Ihre Seite formatieren oder Inhalte posten möchten. Sie können jedes HTML-Tag verwenden, nicht nur die in der Symbolleiste des Texteditors. Das Ergebnis sind Inhalte, die für Menschen und Suchmaschinenspinnen leichter zu lesen und zu verstehen sind. Es kann ein wenig dauern, bis Sie sich an das Schreiben von HTML gewöhnt haben, aber am Ende werden Sie es sehr befriedigend finden.

Biografie des Autors

Bud Kraus [email protected] ist ein erfahrener WordPress-Lehrer in New York City und unterrichtet WordPress für Einzelpersonen und Gruppen per Webinar. Er arbeitet auch an Websites für kleine Unternehmen. http://joyofwp.com