Articles

MarkoSaric

Dieser Artikel ist ein One-Stop-Shop für Ihre WordPress-HTML-Codes. Hier ist die Liste der WordPress-HTML-Tags und -Codes, die am häufigsten zum Erstellen von Inhalten verwendet werden. Speichern Sie die Liste und verwenden Sie sie als Referenz beim Verfassen Ihrer WordPress-Blogposts und -seiten.

WordPress HTML im Gutenberg-Editor

WordPress ist eine der besten Blogging-Plattformen. Millionen von Menschen und Marken nutzen es, um großartig aussehende Websites zu erstellen.

Dieses Handbuch gilt sowohl für die selbst gehostete als auch für die gehostete Version von WordPress. Sehen Sie den Unterschied zwischen WordPress.com oder WordPress.org .

WordPress 5.0 mit dem neuen Gutenberg-Editor, der im Dezember 2018 veröffentlicht wurde, hat die Art und Weise, wie Sie mit HTML-Tags in Ihren Blog-Posts und Seiten arbeiten, erheblich verbessert und vereinfacht.

Wie zeigt man HTML-Code in den von Gutenberg bearbeiteten Beiträgen an? Sie fügen einfach den Block “Code” hinzu und geben Ihren Code ein. Es zeigt den Code Ihren Besuchern.

Wie bearbeiten Sie Ihre Gutenberg-Beiträge mit HTML? Sie klicken einfach im Optionsmenü des jeweiligen Blocks, den Sie bearbeiten möchten, auf “Als HTML bearbeiten”.

Sie können auch den “Classic” -Block oder das “Classic Editor” -Plugin hinzufügen, um den früheren WYSIWYG-Editor zu erhalten, den ich weiter unten in diesem Beitrag beschreibe.

Klassischer Editor: Was ist der Unterschied zwischen Bild und Text?

Beim Verfassen eines Blogposts oder einer Seite im klassischen WordPress-Editor haben Sie zwei Bearbeitungsoptionen. Sie können die Standardansicht “Visuell” oder den Modus “Text” verwenden.

Im visuellen Modus können Sie Ihren Inhalt so sehen, wie er ist. Der visuelle Modus heißt WYSIWYG und steht für genau das, was der visuelle Modus tut: Was Sie sehen, ist, was Sie bekommen.

Sie sehen Ihre Inhalte so, wie Ihre Besucher sie in ihren Browsern sehen, und Sie haben einfache Schaltflächen, mit denen Sie sie bearbeiten können. Die meisten Leute verwenden diesen “visuellen” Post-Editor in WordPress, wenn sie ihre Inhalte erstellen.

Im Textmodus sehen Sie den Code und die HTML-Tags. In diesem Textmodus können Sie beliebigen HTML-Code zu Ihren Blog-Posts oder Seiten hinzufügen. Der HTML-basierte Texteditor sieht gruseliger aus und ist bei Anfängern nicht so beliebt.

Aber was ist, wenn Sie wissen, wie man codiert oder ein bisschen mehr Kontrolle über das Layout und die Struktur beim Erstellen Ihrer Beiträge oder Seiten haben möchten? Sie sollten den “Text” -Editor verwenden.

Wie bearbeite ich HTML im WordPress Classic Editor?

Wie kommen Sie zum HTML-Texteditor? Klicken Sie in Ihrem WordPress-Admin-Beitrag oder im Abschnitt zum Schreiben von Seiten auf die Registerkarte “Text”. Im Texteditor fügen Sie alle Ihre HTML-Tags hinzu und bearbeiten sie.

Wie füge ich HTML-Code zu einem WordPress-Beitrag oder einer WordPress-Seite hinzu?

Sie können einfach jeden HTML-Code direkt in Ihren WordPress “Text” -Editor schreiben oder einfügen. Versuchen Sie es mit einem der am häufigsten verwendeten Tags aus meiner Liste unten.

Kopieren Sie es hier auf der Website, fügen Sie es in den Texteditor ein und “Vorschau” Ihres Beitrags oder Ihrer Seite, um zu sehen, wie Ihre Besucher es sehen werden.

Manchmal kommt es vor, dass der Code beim Umschalten vom Text- in den visuellen Modus entfernt wird.

Seien Sie vorsichtig und stellen Sie sicher, dass Ihnen dies nicht passiert ist. Oder versuchen Sie, sich nur an den Texteditor zu halten, wenn Sie Code schreiben möchten, um dieses Problem nicht zu beheben.

Für diejenigen, die mit dem Codieren vertraut sind, können Sie sogar den “visuellen” Editor deaktivieren. Gehen Sie in Ihrem WordPress-Navigationsmenü zu “Benutzer”, klicken Sie auf “Ihr Profil” und wählen Sie “Deaktivieren Sie den visuellen Editor beim Schreiben”.

Kopieren und Einfügen zwischen Google Text & Tabellen, Microsoft Word und WordPress

WordPress 5.0 Release hat es glatt und einfach gemacht, Inhalte aus Google Text & Tabellen oder Microsoft Word zu kopieren und in Ihre WordPress-Beiträge und Seiten einzufügen.

Das war nicht immer einfach. Wenn Sie mit HTML im klassischen Editor arbeiten, können Sie manchmal einige Kauderwelschzeichen bemerken.

Dies kann passieren, wenn Sie von Microsoft Word in WordPress kopieren / einfügen. Eine nützliche Quelle beim Einfügen von HTML-Code aus Word in den WordPress-Editor ist Postable.

Kopieren Sie Ihren HTML-Code aus Word (oder einer anderen Quelle) in das Tool, um eine WordPress-freundliche und saubere Version des Codes zu erhalten, die Sie dann in Ihren Inhalt einfügen können.

Wie zeige ich HTML-Codes in meinen Blog-Posts als normalen Text an?

Wie wäre es, wenn Sie HTML-Tags und andere Codes in Ihren Beitrag einfügen und anzeigen möchten, damit Ihre Besucher sie wie normalen Text anzeigen können?

So wie ich es hier in meinem Artikel mache? Sie verwenden immer noch den Texteditor, aber Sie wickeln Ihren Code wie folgt ein:

<code><div class="header"></code> 

WordPress-HTML-Syntax-Plugins für eine schönere Anzeige von Code

Es gibt einige WordPress-Plugins, die Ihnen bei diesem Vorgang helfen und es Ihnen ermöglichen, das Layout und die Darstellung des Codes in Ihrem Blog für Ihre Besucher zu bearbeiten.

Ich empfehle die folgenden beiden. SyntaxHighlighter Evolved ist die beliebteste Option, während Pastacode am besten für diejenigen geeignet ist, die beim Entwerfen eines Blogs Seitenersteller verwenden.

Am häufigsten verwendete WordPress HTML-Codes und Tags

Fügen Sie ein Bild ein

<img src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" alt="Description of the image">

Machen Sie das Bild zu einem neuen Ziel anklickbar

<a href="Destination-URL"><img alt="Description of the image" src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" /></a>

Fügen Sie einen Link ein

Beachten Sie, dass der Ankertext der sichtbare Teil Ihres Links ist. Es ist das Wort oder die Phrase, auf die Ihre Besucher klicken, um zu der Seite zu gelangen, auf die Sie verlinken.

<a href="Destination-URL">Anchor text</a>

Machen Sie den Link nofollow

Für SEO-Zwecke müssen Sie möglicherweise einen Teil Ihres Links Nofollow machen. So geht’s:

<a href="Destination-URL" rel="nofollow">Anchor text</a>

Öffnen Sie den Link in einem neuen Browserfenster

<a href="Destination-URL" target="_blank">Anchor text</a>

Link zu einem bestimmten Abschnitt auf einer langen Seite

Diese werden als Seitensprünge bezeichnet. Ihre Besucher können auf einen Link klicken und irgendwo weiter unten oder oben im Artikel verschoben werden.

Dies ist besonders nützlich für längere Anleitungen, die Sie mithilfe des Inhaltsverzeichnisses in verschiedene Kapitel aufteilen möchten.

Der erste Teil beim Erstellen eines Seitensprungs besteht darin, einen Abschnitt (oder ein Ziel) zuzuweisen, auf den Sie verlinken möchten.

Platzieren Sie diesen Code in dem Abschnitt Ihrer Seite, auf den Sie verlinken möchten. Der zweite Teil besteht darin, tatsächlich einen Link zu diesem zugewiesenen Abschnitt aus Ihrem Intro oder Ihrem Inhaltsverzeichnis zu erstellen.

<a></a><a href="#Specific-section">Anchor text</a>

Dies funktioniert auch, wenn Sie von einem anderen Artikel in Ihrem Blog auf einen bestimmten Abschnitt Ihrer Seite verlinken möchten. Sie können einen Link zu diesem Ziel einfügen: https://yourblog.com/yourpost/#Specific-section.

So funktionieren auch diese “Zurück nach oben” -Links. Weisen Sie oben in Ihrem Beitrag einen Abschnittsnamen zu und fügen Sie unten in Ihrem Beitrag eine Schaltfläche “Nach oben gehen” hinzu, die auf den oberen Abschnitt verweist.

Hervorstehende Titel und Unterüberschriften erstellen

<h1>This is a heading H1</h1> <h2>This is a heading H2</h2> <h3>This is a heading H3</h3>

Zeilenumbruch einfügen

<p>This is<br>a paragraph</br> with a line break</p>

Neuen Absatz erstellen

<p>This is the first paragraph</p> <p>This is the second paragraph</p>

Aufzählungsliste erstellen

<ul> <li>list item with a bullet point</li><li>another item with a bullet point</li></ul>

Nummerierte Liste erstellen

<ol><li>list item with number 1</li><li>list item with number 2</li></ol>

Markieren Sie Text in einem Beitrag mit gelbem (oder einem anderen farbigen) Hintergrund

<span style="background-color:yellow;">Your text</span>

Weisen Sie die Nummer für ein Element in Ihrer nummerierten Liste zu

<ol start="7"><li>List item number 7</li></ol>

Erstellen Sie eine Buchstabenliste

<ol type="A"><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li></ol>

Erstellen Sie eine römische Zahlenliste

<ol type="I"><li>Item I</li><li>Item II</li><li>Item III</li><li>Item IV</li></ol>

Zentrieren Sie Ihren Text

<center>to be centered</center>

Machen Sie Ihren Text fett

<strong>to be bold</strong>

Machen Sie Ihren Text kursiv

<em>to be italic</em>

Ändern Sie die Farbe des Textes

<span style="color: #000000;">Your text</span>

Fügen Sie ein Blockquote ein

<blockquote>Your quote</blockquote>

Erstellen Sie eine Tabelle

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.