Formatierung von Blog-Beiträgen und grundlegendes HTML

Für die Formatierung von Blog-Beiträgen muss man nicht viel HTML kennen, aber es ist auf jeden Fall hilfreich!

Wenn Sie wollen, dass Ihr Blog ernst genommen wird, müssen Sie die Formatierung Ihrer Blog-Beiträge beherrschen.

Das bedeutet auch, dass Sie einige grundlegende HTML-Tricks lernen müssen, um Ihre Artikel interessant und konsistent zu gestalten.

Nun keine Sorge, ich sage nicht, dass Sie ein Programmierer oder so etwas werden müssen, um attraktive und uninformierte Blogposts zu erstellen, aber das Erlernen einiger grundlegender Fähigkeiten wird Ihnen sehr helfen.

WordPress ist ein CMS (Content Management System) und als solches erfordert es nicht, dass Sie alles selbst programmieren.

Dafür gibt es Tools.

Der meiste Code ist versteckt, um zu verhindern, dass etwas kaputt geht, und es gibt einen WYSIWYG-Editor (What You See is What You Get) zum Schreiben und Formatieren von Blogbeiträgen und Seiten.

Wenn du WordPress schon eine Weile benutzt, dann wirst du wissen, dass es oben rechts im Content-Editor eine Registerkarte „Visuell“ und „Text“ gibt, mit der du zwischen der gestylten Version deines Beitrags und dem Roh-HTML umschalten kannst.

Für die Neulinge.

Visual = WordPress Visual Editor

Text = WordPress HTML Editor / Raw Text

Die meisten Anfänger sind überwältigt und erschrocken, wenn sie zum ersten Mal das rohe HTML auf dem Text-Tab sehen und kehren schnell wieder zurück.

Das muss aber nicht sein, und Sie werden ein viel besserer Blogger, wenn Sie sich die Zeit nehmen, sich an das Arbeiten und Bearbeiten in diesem Modus zu gewöhnen.

Mit ein wenig Übung können Sie einige der Grundlagen leicht beherrschen, die Syntax ist eigentlich recht logisch.

Syntax (Computer Definition): Die Struktur von Anweisungen in einer Computersprache.

Was ist HTML?

HTML steht für Hypertext Markup Language und ist die Programmiersprache, die zur Erstellung von Webseiten und Anwendungen verwendet wird.

HTML ermöglicht es Ihnen, grundlegende Funktionen zu erstellen, die Sie dann mit CSS (Cascading Style Sheets) gestalten können.

Es wurde 1990 von Tim Berners-Lee entwickelt, einem persönlichen Helden von mir, dem auch die Erfindung des Internets zugeschrieben wird, aber ich werde Ihnen nicht alles über HTML und die Geschichte beibringen, aber wenn Sie neugierig sind, können Sie auf Wikipedia weiter lesen.

Wir wollen uns hier nur ansehen, wie sich HTML auf das Schreiben und Bearbeiten von WordPress-Beiträgen und -Seiten bezieht.

Wenn Sie im WordPress-Editor auf der Registerkarte „Text“ einen unbekannten Code sehen, handelt es sich um HTML, und in einigen Fällen kann er auch einige CSS-Inline-Stile enthalten.

HTML-Beispiel

<h2>This is a title</h2>

Die rot hervorgehobenen Teile sind HTML, und in diesem Beispiel sehen Sie ein öffnendes h2-Titeltag am Anfang und ein schließendes h2-Titeltag am Ende.

Beachten Sie den einzigen Unterschied, dass das schließende Tag einen Backslash vor dem Namen des Tags hat? So können Sie schnell erkennen, wann Ihr HTML-Tag geöffnet und geschlossen wurde.

Dies ist ein großartiger Tipp, um Fehler oder fehlerhaftes HTML zu erkennen.

HTML mit Inline-CSS-Beispiel

<h2 style="color:red;">This is a title</h2>

Im obigen Beispiel haben wir dasselbe h2 verwendet, allerdings haben wir dieses Mal HTML verwendet, um ein Stück CSS aufzurufen, um die Farbe in Rot zu ändern. Beachten Sie, dass der einzige Teil, der tatsächlich CSS ist, rot hervorgehoben ist.

In der Regel werden Sie nicht viel Inline-CSS sehen, da es am besten ist, Ihre HTML-Elemente mit externen CSS-Dateien zu stylen, dies ist die typische Art und Weise, wie WordPress-Themes Stile automatisch auf Ihre Blog-Seite anwenden.

Ich persönlich rate davon ab, HTML-Elemente im WordPress-Editor inline zu stylen, aber es ist wichtig, sich dessen bewusst zu sein, für den Fall, dass Sie jemals Code bearbeiten oder bereinigen müssen, der seinen Weg aus anderen Quellen wie einem Plugin oder durch Kopieren und Einfügen aus einer anderen Quelle gefunden hat.

Natürlich werden Sie davon profitieren, dass Sie in der Lage sind, Dinge zu bereinigen, wenn Gremlins (kein technischer Begriff) ihren Weg in Ihre Inhalte finden.

So lassen Sie uns schauen, wie man HTML zu WordPress-Beiträgen und -Seiten hinzufügt und was Sie wissen müssen.

WordPress Basic HTML Essentials

Wenn Sie HTML hinzufügen, um Ihren Inhalt zu gestalten, müssen Sie daran denken, Ihren Inhalt mit den entsprechenden öffnenden und schließenden Tags zu umschließen.

Beispiel:

<p>Paragraphs should be wrapped with p tags</p>

Es gibt Beispiele für nützliche HTML-Elemente, die keinen schließenden Tag benötigen, da sie selbstschließend sind.

Ein Beispiel ist der Zeilenumbruch <br>, der ohne einen schließenden Tag funktioniert, da Zeilenumbrüche keinen Inhalt enthalten können und sollen.

Überschriften Tags & Unterüberschriften

Es gibt verschiedene Arten von Überschriften in einem WordPress Beitrag, zuerst haben Sie die Überschrift des Beitrags, dies ist eine <h1> und dann haben Sie die Möglichkeit, Überschriften zu Ihrem Inhalt hinzuzufügen, um Ihre Gedanken zu gruppieren.

Diese reichen von h1 (Überschrift 1) bis hin zu h6 (Überschrift 6), und Ihr Theme wird sie in der Regel so gestalten, dass sie die richtige Größe haben.

Da Ihr Seiten- oder Beitragstitel automatisch eine h1 ist, sollten Sie es vermeiden, diese in Ihrem Inhalt zu verwenden, da alle anderen Instanzen mit dem Haupttitel konkurrieren, der der Name Ihres Beitrags ist.

Befolgen Sie stattdessen den semantisch korrekten Ordnungsprozess und gehen Sie beim ersten Mal, wenn Sie eine Abschnittsüberschrift verwenden müssen, zum h2-Titel über.

Während Sie diese einfach über das Dropdown-Menü oben links im WYSIWYG-Editor einstellen können, ist es hilfreich zu wissen, wie sie im HTML-Format funktionieren, damit Sie eventuelle Fehler korrigieren können.

Hier sind einige Beispiele

<h1>This is a heading 1, you won't need to use me in your content</h1>
<h2>This is a heading 2, I'm very useful, you can use me to organize your articles into sections.</h2>
<h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3>
<h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>

Hoffentlich beginnen Sie, hier ein Muster in der HTML-Syntax zu erkennen.

Alle HTML-Elemente beginnen mit einem öffnenden <

Sie schließen auch mit einem schließenden >

Öffnende Elemente können einfach den Namen des Elements enthalten.

Schließende Tags enthalten einen Schrägstrich nach ihrem öffnenden < und vor dem Namen des HTML-Elements, das sie schließen.

Wenn Sie sich ein wenig mit dem oben genannten vertraut machen, werden Sie den meisten Bloggern, die WordPress verwenden, weit voraus sein.

Fett oder kursiv

Wenn Sie einen Punkt betonen und die Aufmerksamkeit auf bestimmte Wörter lenken wollen, sollten Sie sie fett oder kursiv setzen, um sie hervorzuheben.

Ich bevorzuge diesen Ansatz auf jeden Fall gegenüber ALL CAPS, das für mich wie ein Schrei wirkt.

Der HTML-Code für fett ist <strong> und für kursiv <em>.

Spaßfakt: Strong ist leicht zu merken, um etwas fett zu machen, aber warum verwendet das kursive Element em? Em ist eine Abkürzung für Betonung. Das könnte helfen, es zu behalten.

<em>This text is italicized, I am for gentle emphasis</em>

<strong>This text is bold, I am for strong emphasis</strong>

Zusätzlich können Sie natürlich das WordPress WYSIWYG oder die Tastenkombination STRG + B für Fett und STRG + I für Kursiv verwenden, nachdem Sie den Text, den Sie ändern möchten, markiert haben.

Für eine vollständige Liste der WordPress-Tastenkombinationen und andere Formatierungsmethoden gehen Sie hier.

Es gibt einige Regeln, wie Sie diese verwenden sollten und wie nicht, einschließlich, dass sie sich gegenseitig ausschließen, sie für kurze Sätze reservieren und sparsam verwenden.

Practical Typography hat einen großartigen Artikel, der die Bedeutung dieser Regeln erklärt.

Wenn Sie Texte schreiben, die Menschen wirklich ansprechen sollen, wie z.B. Verkaufstexte, dann können Sie diese Regeln biegen, aber nicht brechen.

Betonung

Erinnern Sie sich: Wenn alles betont wird, dann wird nichts betont!

Listen – Geordnet & Ungeordnet

Es gibt zwei Arten von Listen, die Sie mit HTML hinzufügen können und die auch vom WordPress WYSIWYG unterstützt werden.

Diese sind:

Geordnete Listen – <ol>

Geordnete Listen werden als eine Reihe von nummerierten Elementen angezeigt. Dies ist nützlich, wenn Sie eine Liste schreiben, bei der die Reihenfolge wichtig ist.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Der obige Code wird zu:

1. Punkt 1
2. Punkt 2
3. Punkt 3

Ungeordnete Listen – <ul>

Ungeordnete Listen sind im Wesentlichen Aufzählungslisten.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Und daraus wird die folgende Aufzählung.

• Punkt 1
• Punkt 2
• Punkt 3

Wir alle wissen, wie nützlich Listen sind, und sie helfen auch, den Inhalt aufzulockern und ihn interessanter zu gestalten.

Ein wichtiger Unterschied, den du hier bemerken wirst, ist, dass es einzelne Listenelemente <li> gibt und sie in ihrer Gesamtheit mit einem <ol> oder <ul> Wrapper umhüllt sind.

Dies ist wichtig zu beachten, denn wenn die Wrapper <ol> oder <ul> fehlen, werden die Listenelemente nicht gerendert.

Bilder

Ein weiterer wichtiger Aspekt bei der Formatierung eines Blogposts oder einer beliebigen Seite mit WordPress ist die Verwendung von Bildern, und Sie sollten keine Probleme haben, einige interessante Fotos zu finden, die Sie bei Yahoo-Bilder und anderen urheberrechtsfreien Bild-Websites finden können. Einige dieser Optionen sind kostenpflichtig, aber viele von ihnen sind kostenlos, vorausgesetzt, Sie geben eine Quellenangabe und einen Link an.

Ein kleiner Preis, den Sie zahlen müssen, um professionelles Bildmaterial auf Ihrer Website oder Ihrem Blog zu haben.

Ein Bild sagt mehr als tausend Worte, wie man sagt, sie bieten Ihren Lesern auch visuelle Anreize sowie Pausen, um Ihren Inhalt in verdauliche Stücke zu unterteilen.

Das hilft, Ihre Leser bei der Stange zu halten, und obwohl Sie Bilder nicht selbst codieren müssen, ist es nützlich, die Syntax zu verstehen.

Hier ist ein Beispiel für Bildcode und wie er aussieht, wenn Sie die Registerkarte „Text“ Ihres Editors betrachten.

<img src="https://mazepress.com/image.png">

Ein Bild benötigt keinen schließenden Tag, da alle benötigten Informationen in den öffnenden und schließenden Klammern des HTML-Elements enthalten sind. Das src ruft einfach den Ort der URL auf.

WordPress erlaubt es Ihnen, Ihre Bilder nach links oder rechts zu verschieben oder sie zu zentrieren. Wenn Sie dies tun und den Code in der Registerkarte Text überprüfen, werden Sie sehen, dass Klassen hinzugefügt wurden, die verwendet werden, um die Bilder entsprechend zu gestalten.

Dies ist ein Beispiel dafür, wie externes CSS verwendet wird, um verschiedene Stile auf verschiedene Bilder anzuwenden. Nützlich zu wissen!

Wichtig: Bevor Sie Bilder zu Ihren Beiträgen und Seiten hinzufügen, vergewissern Sie sich, dass sie für Geschwindigkeit und Suchmaschinen optimiert sind.

Einbettungen

Natürlich werden Sie Einbettungscodes von externen Websites verwenden wollen.

Wenn Sie beispielsweise ein Video von YouTube oder Vimeo einbinden möchten, gehen Sie auf „Teilen“ und erhalten einen langen Code, den Sie kopieren können.

Das Wichtigste ist, dass Sie keinen HTML- oder anderen Code in die Registerkarte „Visuell“ des Inhaltseditors einfügen können. Dadurch wird der Code verschlüsselt und unbrauchbar, wenn du auf Speichern drückst.

Gehe zur Registerkarte „Text“ und füge den Code dort ein, wo er erscheinen soll.

Unten findest du ein Beispiel für einen Einbettungscode von YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Während WordPress dir erlaubt, einfach eine YouTube-URL in deinen Beitrag einzufügen, um ihn als Video anzuzeigen, gibt dir das möglicherweise nicht die volle Kontrolle über die Videoabmessungen und die anderen Einbettungseinstellungen.

Aus diesem Grund und weil ich ein alter Hase bin, verwende ich immer noch den iframe-Einbettungscode.

Die meisten Websites, die Einbettungscodes anbieten, werden von WordPress nicht nativ unterstützt, so dass du dich immer noch mit Einbettungscodes, iframes und deren Funktionsweise auskennen musst, um Multimedia in deine Beiträge einfügen zu können.

Shortcodes

Shortcodes sind kein HTML. Tatsächlich sind sie nicht einmal eine Programmiersprache, sondern eine WordPress-eigene Funktion, die es Plugin- und Theme-Entwicklern ermöglicht, einfache Möglichkeiten für dich und mich zu schaffen, um Elemente zu unseren Webseiten und Beiträgen hinzuzufügen.

Das einfachste Beispiel, das in so gut wie jedem Blog zu finden ist, ist ein Shortcode für ein Kontaktformular, aber es gibt Hunderte, wenn nicht Tausende von möglichen Verwendungen für Shortcodes, die die Fähigkeit zum Hinzufügen beinhalten:

• Tabellen
• Galerien
• Preispakete
• Videos
• Lead Magnets / Email Opt-in Formulare
• Podcast Episoden

Hier ist ein Shortcode für ein Kontaktformular, das von dem Contact Form 7 Plugin generiert wird, eines unserer empfohlenen Plugins, das wir auf 90 % unserer Websites und Blogs installieren.

Anmerkung: Ich musste Leerzeichen nach der öffnenden und vor der schließenden Klammer einfügen, um zu verhindern, dass das Kontaktformular tatsächlich angezeigt wird; stellen Sie es sich also ohne die Leerzeichen vor.

Beachten Sie, dass die Syntax für einen Shortcode anders ist. Sie beginnen mit einer öffnenden Klammer anstelle von < und >.

Sie werden dann vom Shortcode-Entwickler so formatiert, dass Sie die wesentlichen Einstellungen leicht anpassen und ändern können.

Wenn die Webseite lädt, lädt dieses Kontaktformular eigentlich etwa 20 Zeilen unordentliches HTML, so dass es für Sie viel einfacher ist, wenn Sie auf einen Shortcode zugreifen können.

Die einzige Einschränkung ist, dass Sie Shortcodes nicht übermäßig verwenden sollten, da sie Ihre Webseiten verlangsamen werden.

Sie sind nützlich und können die Bearbeitung von Beiträgen erheblich vereinfachen, wenn Sie keine großen Mengen an HTML verwenden müssen, die Sie nicht verstehen und um die Sie vorsichtig herumarbeiten müssen.

Sonstige Ratschläge zur Formatierung

Es gibt noch einige andere Tipps, die ich WordPress-Neulingen ans Herz lege und die ich kurz ansprechen möchte:

Dazu gehören:

• Fügen Sie keine unnötigen Zeilenumbrüche ein. Das bedeutet, dass Sie den HTML-Tag <br> nicht verwenden und es vermeiden, zwischen Absätzen und Abschnitten zweimal die Eingabetaste zu drücken, es sei denn, Sie müssen dies unbedingt tun. Dadurch sehen Ihre Artikel unordentlich aus und es kommt zwangsläufig zu Ungereimtheiten.
• Fügen Sie keine seitenbezogenen Schriftfamilien, -größen und -farben hinzu – auch dies lässt Ihre Beiträge grauenhaft und wie aus dem Jahr 1995 aussehen. Sie denken vielleicht, dass ein grüner Titel in Sondergröße mit einer einzigartigen Schriftart die Aufmerksamkeit auf sich zieht, aber in Wirklichkeit sticht er als inkonsistent und unprofessionell hervor. Ihr Thema sollte diese Stile vorgeben.
• Fügen Sie niemals HTML- oder Einbettungscode zur Registerkarte „Visuell“ hinzu – Dies kann zu unerwarteten Ergebnissen führen, viel Aufräumarbeit erfordern oder Ihre Seite ganz zerstören.
• Laden Sie niemals Videos auf WordPress hoch – Ihr Website-Hosting ist nicht für die Bereitstellung von Videoinhalten ausgelegt. Glücklicherweise bieten YouTube und Vimeo trotzdem superschnelles und 100% kostenloses Video-Hosting. Deshalb ist es am besten, Videos von YouTube einzubetten, auch wenn es Ihre eigenen sind.

Nichts allzu Kompliziertes, aber ich sehe oft, dass Leute diese Fehler machen und sich das Leben schwer machen.

Aber bald könnte es anders sein, sehr anders sogar!

Gutenberg, die Zukunft des Bloggens?

Gutenberg ist ein neuer Content-Editor, der von Grund auf von WordPress entwickelt wurde und schon bald in einer Installation in Ihrer Nähe zu finden sein wird.

Ist das die Zukunft des Bloggens? Who knows? Aber es ist definitiv die Zukunft von WordPress, also ist es an der Zeit, sich darauf einzulassen.

Gutenberg ist ein anderes Biest.

Wenn Sie jemals Medium.com zum Bloggen verwendet haben, dann wird es sich unheimlich ähnlich anfühlen, wenn Sie Gutenberg zum ersten Mal ausprobieren.

Meiner Meinung nach ist das eine gute Sache, Mediums ablenkungsfreier Content-Editor ist wunderbar einfach zu bedienen, und zu sehen, dass WP dies zur Kenntnis nimmt, ist ein Plus für alle, die Blogs und Websites mit WP betreiben.

Der Gutenberg-Editor ist auch modular und ermöglicht es Ihnen, Blöcke in Ihre Inhalte zu ziehen, die jeweils einen anderen Zweck haben.

Das ähnelt der Art und Weise, wie Page-Builder-Plugins und bestimmte Themes derzeit diese Art von Drag-and-Drop-Lösung bieten, aber jetzt kommen diese Funktionen standardmäßig in WordPress.

Wenn es einen Aspekt von WordPress gibt, der sich im Laufe der Jahre nicht viel weiterentwickelt hat, dann ist es der TinyMCE-Editor, also begrüße ich diese Innovation mit offenen Armen.

Wenn du mit der Formatierung von Blogbeiträgen mit dem aktuellen Editor Probleme hast, kannst du Gutenberg bereits ausprobieren, indem du es herunterlädst und installierst, indem du in deinem Dashboard auf Plugins gehst und nach „Gutenberg“ suchst.

Formatierung von Blogposts & Grundlegende HTML-Funktionen

Wenn du ein wenig Zeit damit verbringst, die oben genannten Punkte zu üben, wirst du eine viel größere Kontrolle über deine Inhalte und deren Darstellung erlangen.

Hoffentlich fühlst du dich jetzt etwas wohler mit der Formatierung von Blogposts und der grundlegenden Verwendung von HTML.

Diese Fähigkeiten können dir eine Menge Zeit, Geld und Kopfzerbrechen ersparen, wenn die Formatierung deines Inhalts schief geht oder nicht richtig dargestellt wird.

Während die oben genannten Grundlagen für die meisten Blogger und WordPress-Website-Besitzer ausreichen, gibt es einige großartige kostenlose Websites, auf denen Sie HTML lernen können, einschließlich CodeAcademy und w3Schools.

Nun, gehen Sie und machen Sie Ihre Inhalte hübsch 🙂

Wenn Sie diesen Artikel nützlich fanden, sollten Sie sich auch einige unserer anderen nützlichen Blogging-Leitfäden ansehen, wie z. B. unsere Blog Post Checklist: Essentials Guide oder How to Repurpose Content und wenn du ein Fan dieser Art von Anleitungen bist, dann abonniere meinen Newsletter und ich werde meine besten Inhalte und Entdeckungen per E-Mail mit dir teilen.