Wie man einen Inhalt für Artikel mit Anker-Links in WordPress erstellen

In einem großen Artikel verwandelt das Inhaltsverzeichnis den Besucher in einen Leser. Der Benutzer kommt auf die Seite und liest bereits die Abschnittsüberschriften, versteht die Veröffentlichungsstruktur vom Beitrag. Er sieht, ob es gibt eine Information, die er sucht. Lassen Sie uns die Inhalterstellungsmöglichkeiten ähnlich wie auf Wikipedia herausfinden.

Beispil vom Inhalt bei Wikipedia
Beispil vom Inhalt bei Wikipedia

Inhalt

Manuelle Inhaltsverzeichniserstellung des Artikels ohne Plugin in WordPress
Inhaltsverzeichniserstellung des Beitrags mit der Pluginsverwendung in WordPress
Plagin Table of Contents Plus (TOC+)
Plagin Heroic Table of Contents


Manuelle Inhaltsverzeichniserstellung des Artikels ohne Plugin in WordPress

Um Artikelinhalte zu erstellen, ohne ein Plugin zu verwenden, braucht man zunächst ein Inhaltsverzeichnis mit dem WordPress-Beitrag-Editor erstellen.

Text-Inhalt Vorbereitung
Beispielinhalte für diesen Artikel

Als nächstes braucht man Anker-Links für Inhaltsverzeichnisse oder Elemente vom Artikel erstellen, zu denen die Links führen sollen. Geben Sie dazu den HTML-Ankernamen bei Erweitert im Komponenten-Panel von WordPress ein. Dies kann Text oder eine Nummer sein.

| Wichtig! Jeder Anker muss einen unterschiedlichen Namen haben.
Erstellung von Anker-Links
Anker-Linkserstellung

Danach kehren wir zum Inhaltsverzeichnis zurück und weisen durch Sharp „#“ Anker-Links zu. Sharp „#“ sagt uns, dass der Benutzer an einer bestimmten Stelle dieses Beitrags gesendet wird, nicht an eine andere Seite.

Anker-Links Inhaltsverzeichnis
Linkhinzufügung zur Inhaltsüberschrift

Speichern und die Funktionsfähigkeit in der Vorschau überprüfen. Fertig!

Wenn Sie möchten die Navigation vom Link zum Anker soft machen, also scrollen, anstatt zum Anker-Link zu springen, fügen Sie den folgenden Code zu zusätzlichen CSS hinzu: html {scroll-behavior: smooth;}

Klar gibt es die Möglichkeit, um Anker-Links durch die Bearbeitung von Text im HTML-Format zu erstellen. Dazu braucht man bei der HTML-Bearbeitung „id“ für den Anker-Link geben. Um die Navigation so zu schaffen, offen Sie den Editor „als HTML bearbeiten“, fügen Sie den Text ein und teilen ihn mit Unterüberschriften auf.

Anker-Linkserstellung als HTML
Anker-Linkserstellung als HTML

Fügen Sie vor jeder Unterüberschrift eine Codezeile hinzu, z.B. bei der Überschrift h2 sieht das so aus: <h2 id=„Ankername“>„ Überschriftname“</h2>. Mit dieser Kennung „id“ markieren wir die Stelle im Artikel, auf den der Leser gelangt  wird, wenn er auf den Link im Inhalt klickt.

Danach kehren wir an den Anfang zum Inhalt zurück und erstellen einen Link mit der Kennung: <a href=„#Ankername“>Überschriftname vom Inhalt</a>. Zwischen öffnenden > und dem schließenden </a> Kennungen geben wir den Überschriftname vom Inhalt ein, zu dem der Link führt. Speichern und prüfen, ob alles korrekt bei der Vorschau funktioniert wird.

Falls gewünscht, verwenden Sie die Kennungen <ul> oder <ol>, um den Inhalt mit einer Aufzählungszeichenliste oder einer nummerierten Liste anzuzeigen.

Im Vergleich zur Verwendung von Plagins ist die manuelle Navigationserstellung besser, da sie Serverressourcen spart und das Laden der Seite nicht verlangsamt.

Aber für die Gestaltung nach Ihrem Geschmack braucht man einen zusätzlichen CSS-Stil schreiben, da ohne ihn der Inhalt in der Standardansicht für die Website angezeigt wird. Und wenn es viele Publikationen gibt, wird die manuelle Inhaltkennzeichnung eine Routine sein. Um Zeit und Nerven zu sparen, kann das Inhaltsverzeichnis mit einem Plugin hinzugefügt werden.


Inhaltsverzeichniserstellung des Beitrags in WordPress mit der Pluginsverwendung

Plagin Table of Contents Plus (TOC+)

Das TOC + Plugin sammelt automatisch Überschriften beim Text und erzeugt einen Inhalt für den Beitrag. Das Inhaltdesign ähnelt dem Inhaltsverzeichnis in Wikipedia-Artikeln. Sie können aus mehreren Farbthemen auswählen oder Ihr eigenes schaffen. Ein benutzerfreundliches Plagin mit flexiblen Einstellungen.

TOC+

In Plugins-Installieren suchen Sie unter den Namen Table of Contents Plus durch und klicken auf Installieren. Aktivieren Sie das Plagin und offen Sie die TOC-Einstellungen.

Haupteinstellungen von TOC+
Haupteinstellungen von TOC+

Die Haupteinstellungen und die Einstellung vom Erscheinungsbild des Plugins sind logisch und unkompliziert. Um den Inhalt des Artikels automatisch zu generieren, braucht man die Überschriften <h1>, <h2>, usw. in den Artikeln angeben. Das Plugin selbst findet die und fügt den Inhalt entsprechend Ihren Einstellungen hinzu.

Erweiterte Einstellungen von TOC+
Erweiterte Einstellungen von TOC+

Eine zusätzliche Funktion dieses Plugins ist auch die Erstellung einer Sitemap für Benutzer, wie z.B. unsere Sitemap. Um die Sitemap auf der Seite anzuzeigen, braucht man den Shortcode [sitemap] an der entsprechenden Stelle hinzufügen.

Seitemapeinstellungen bei TOC+
Seitemapeinstellungen bei TOC+

Plagin Heroic Table of Contents

Heroic Table of Contents ist ein ziemlich neues Plugin mit nur 1000+ aktiven Installationen. Es hat jedoch viele Funktionen. Das Plagin verfügt über eine spezielle Funktion, mit der Sie das Inhaltsverzeichnis in einzelnen Beiträgen und Seiten anzeigen können. Außerdem können Sie in diesem Plugin einen eigenen Titel für das erstellte Inhaltsverzeichnis angeben.

Heroic Table of Contents

Im Gegensatz zu TOC+ erzeugt das Plagin ein Inhaltsverzeichnis nicht automatisch. Und dafür braucht man einen Block „Heroic Table of Contents“ bei der Beitragserstellung im Text hinzufügen, wo Sie wollen. Danach können Sie den Block im Komponenten-Panel von WordPress einstellen.

Verwendung von Heroic TOC
Verwendung von Heroic TOC

CM Table of Contents kann von der offiziellen WordPress-Website oder direkt von Plugins in WordPress heruntergeladen werden.


Schluß

Natürlich gibt es viele weitere Plugins, um Inhalte zu erstellen. Aber sie alle erfüllen die gleiche Funktion und haben ähnliche Einstellungen. Es gibt auch die Möglichkeit, ein Inhaltsverzeichnis automatisch zu erstellen, indem Sie ein Skript für die Website schreiben. Aber diese Methode ist viel schwieriger für Anfänger und bietet nicht so viele Vorteile als die beschriebenen Wege in diesem Artikel. Wir hoffen, dass dieser Beitrag für Sie nützlich war.

0 0 vote
Article Rating
Abonnieren
Benachrichtige mich bei
guest
0 Kommentare
Inline Feedbacks
View all comments