4 Qualitätsoptionen für einen Inhaltsverzeichnis-Block in WordPress

Einen Inhaltsverzeichnis-Block in WordPress für Blogbeiträge (oder eigentlich jede andere Art von längeren schriftlichen Inhalten) anzubieten, ist aus zwei Gründen eine gute Idee

• Es hilft den Benutzern, im Beitrag zu dem zu springen, was sie brauchen (und stört hoffentlich nicht).
• Es bietet SEO-Wert.

Das RankMath SEO-Plugin berücksichtigt es als Teil Ihres Seiten-Scores (was darauf hindeutet, dass Sie eines haben sollten), aufgrund des zweiten Punktes. Sehen Sie, was Google Ihnen wahrscheinlich gibt, wenn Sie es richtig machen

Es ist sinnvoll, dass andere WordPress-SEO-Plugins wie Yoast einen Inhaltsverzeichnis-Block als integrierte Zusatzfunktion des Plugins anbieten. Wenn Sie Yoast verwenden, dann ist es meiner Meinung nach in Ordnung, einfach das zu nutzen. Aber ich gebe zu, es ist nicht mein Favorit, sich von einem Plugin abhängig zu fühlen, weil es eine Mikrofunktion anbietet, auf die man dann angewiesen ist.

Was sind also die Optionen?

Inhaltsverzeichnis

• Worauf Sie bei einem Inhaltsverzeichnis-Block in WordPress achten sollten
• Option 1: Ein dediziertes Inhaltsverzeichnis-Plugin verwenden
  • Heroic Table of Contents
  • Easy Table of Contents
  • SimpleTOC
  • LuckyWP Table of Contents
  • GutenTOC
• Option 2: Auf eine im WordPress-Core integrierte Inhaltsverzeichnis-Funktion warten
• Option 3: Einen Inhaltsverzeichnis-Block verwenden, der eine Unterfunktion eines anderen WordPress-Plugins ist
  • Yoast SEO Premium
  • Ultimate Addons for Gutenberg
• Option 4: Einen eigenen DIY Inhaltsverzeichnis-Block erstellen
• Favorit?

Worauf Sie bei einem Inhaltsverzeichnis-Block in WordPress achten sollten

Hier sind einige Dinge, auf die Sie achten und die Sie berücksichtigen sollten, wenn Sie einen Inhaltsverzeichnis-Block auswählen

• Anpassbarer Header – Viele Optionen fügen einen „Inhaltsverzeichnis“-Header über dem eigentlichen Inhaltsverzeichnis ein, was Sinn macht. Können Sie ihn deaktivieren oder anpassen? Welche Überschriftenebene ist es? Die Möglichkeit, die Überschrift zu deaktivieren, kann für das Layout notwendig sein, und die Wahl der Überschriftenebenen kann helfen, eine korrekte HTML-Semantik sicherzustellen.
• Einklappbar – Im Sinne der Verringerung der Nervigkeit des Inhaltsverzeichnisses bieten viele eine Funktion, um den Inhaltsverzeichnis-Block zwischen geöffneten und geschlossenen Zuständen umzuschalten. Möchten Sie das? Stört es Sie nicht, dass dafür wahrscheinlich JavaScript erforderlich ist? Ist das Umschalten zugänglich? Kann es standardmäßig in dem von Ihnen gewünschten Zustand sein?
• Auswahl der einzuschließenden Überschriften – Vielleicht möchten Sie nur alle <h2>-Elemente für das Inhaltsverzeichnis verwenden. Können Sie das tun? Erzeugen Unterüberschriften eine „verschachtelte“ Liste? Möchten Sie das? Können Sie bestimmte Überschriftenebenen ausschalten? Können Sie dem Block sagen, dass er nur <h2> bis <h4> einschließen soll? Gibt es Dinge außer Überschriften, die Teil des Inhaltsverzeichnisses sein sollen?
• Editierbare Links – Viele Inhaltsverzeichnis-Plugins in WordPress übernehmen normalerweise alle Überschriften wortwörtlich. Vielleicht möchten Sie einen bestimmten Link im Inhaltsverzeichnis kürzen, verlängern oder anderweitig ändern; d.h. nicht den exakten Text der Überschrift haben, auf die er verlinkt. Können Sie das tun?
• Zusätzliche Links einschließen – Vielleicht möchten Sie auf etwas verlinken, das keine Inhaltsüberschrift ist. Vielleicht wurde es über ein WordPress-Custom-Field zum Template hinzugefügt, oder es ist Teil des Gesamt-Templates wie der Kommentarbereich. Können Sie diese als Überschriften im Block hinzufügen (oder entfernen)?
• Unterstützung des Block-Editors – Das ist irgendwie der Sinn dieses Blogbeitrags. Ich habe nicht viele Optionen aufgenommen, die keinen Block haben. Aber sicher gibt es ältere Versionen davon, die auf [shortcode] basieren oder es auf andere Weise implementieren. Ich konzentriere mich hauptsächlich auf Blöcke, obwohl ich mir leicht eine Situation vorstellen kann, in der Ihr Ziel ist, das Inhaltsverzeichnis woanders in einem Template zu platzieren (vielleicht in der Seitenleiste?). Daher könnten mehrere Optionen und Modularität nützlich sein.
• Styling-Optionen – Persönlich bringe ich gerne mein eigenes Styling mit (Überraschung!) und entferne sogar jegliche Stylesheets (oder Skripte), die ein Plugin mitbringt. Aber ich kann mir vorstellen, dass mehr Leute möchten, dass das Inhaltsverzeichnis gut aussieht und sie es direkt aus dem Editor ästhetisch kontrollieren können. Das bedeutet, es wäre schön, Blockoptionen für Farben, Schriftarten, Abstände usw. zu haben.
• Semantisches Markup – Es könnte sich lohnen, einen Blick auf das HTML zu werfen, das der von Ihnen gewählte Inhaltsverzeichnis-Block generiert, um zu sehen, ob es sinnvoll ist. Ich habe Plugins gesehen, die HTML-Listen generieren, die tatsächlich keine Listen verschachteln, sondern stattdessen Klassen zu Listenelementen hinzufügen, damit sie verschachtelt *aussehen*. Nein danke. Ich bin mir nicht sicher, ob es ein offizielles HTML-Format gibt, das für SEO am besten geeignet ist, daher ist semantisches Markup das Beste, was Sie tun können.
• Überschriften-IDs – Damit ein verlinktes Inhaltsverzeichnis funktioniert, müssen alle Überschriften IDs haben, damit es etwas zum Ankern gibt. Ich würde denken, jedes Plugin, das etwas wert ist, würde diese nur zu Überschriften hinzufügen, *wenn sie noch keine haben*, aber Sie sollten das vielleicht überprüfen; andernfalls riskieren Sie, bestehende Links oder vielleicht sogar Styling und Funktionalität zu brechen. Überlegen Sie auch, welche IDs generiert werden. Zum Beispiel verwende ich das Add Anchor Links Plugin, das ein Link-Symbol (🔗) neben allen Überschriften hinzufügt, um Zugang zu den IDs zu bieten. Die IDs, die es generiert, waren identisch mit den von Inhaltsverzeichnissen generierten IDs, was zu einem doppelten ID-Problem führte. Behebbar, aber seien Sie sich solcher Dinge bewusst.

Option 1: Ein dediziertes Inhaltsverzeichnis-Plugin verwenden

Ein dediziertes Inhaltsverzeichnis-Plugin ist ein Plugin, das sich ausschließlich auf ein Inhaltsverzeichnis konzentriert. Nichts anderes. Hier sind einige solide Optionen, bei denen das der Fall ist.

Heroic Table of Contents

Die Möglichkeit, Überschriften aus dem Inhaltsverzeichnis zu bearbeiten/hinzuzufügen/zu entfernen – auch nachdem es automatisch generiert wurde – ist ziemlich mächtig und einzigartig für dieses Plugin. Es erlaubt Ihnen auch, es zu öffnen und zu schließen (optional), was gut ist, da es das Ziel dieser Funktion ist, nützliche Links bereitzustellen und nicht Inhalte, die im Weg sind. Aber Vorsicht, das bedeutet, dass zusätzliche Skripte und Stile geladen werden müssen, was ideal oder angenehm für Sie sein mag oder auch nicht.

Easy Table of Contents

Dies ist *kein* Block-Editor-Block! Stattdessen fügt es sich automatisch ein, entweder nach Inhaltstyp oder über eine Opt-in-Checkbox in einem Metabox.

Ich finde es etwas umständlich, dass Sie mit diesem Plugin nicht steuern können, wo das Inhaltsverzeichnis platziert wird. Es sieht so aus, als würde es sich am oberen Rand von Beiträgen einfügen, wahrscheinlich direkt nach dem <!-- more -->.

SimpleTOC

Das ist mein Favorit.

Ich mag dieses Plugin, weil es standardmäßig keine Skripte oder Stile hinzufügt. Es erstellt einfach eine semantische HTML-Liste aus den Überschriften, verlinkt sie und das war's. So mag ich es.

LuckyWP Table of Contents

Viele Funktionen, aber ich finde es etwas umständlich, dass es keine regulären Blocksteuerungen hat. Stattdessen erhalten Sie eine völlig benutzerdefinierte Benutzeroberfläche zum Ändern der Einstellungen – und Sie können nicht in den Block selbst hineinschauen, wie er aussieht.

GutenTOC

Dieses Inhaltsverzeichnis-Plugin scheint den Geist des WordPress Block Editors gut zu umfassen, aber ich finde die Einstellungen etwas umständlich. Die von ihm angebotenen Optionen fühlen sich nicht besonders nützlich an (z. B. quadratische Aufzählungszeichen für die Liste? „15“ Leerraum links?).

Option 2: Auf eine im WordPress-Core integrierte Inhaltsverzeichnis-Funktion warten

Zum Zeitpunkt des Schreibens gibt es eine offene Pull-Anfrage, um einen Inhaltsverzeichnis-Block im Gutenberg-Plugin zu aktivieren. Vermutlich wird dieser, wenn alles gut geht, schließlich in den Core integriert. Das wäre großartig, wenn Sie mich fragen, aber es hilft nicht, das Problem zu lösen, dass Sie gerade jetzt einen Inhaltsverzeichnis-Block benötigen.

Wenn diese Funktion herauskommt, würde ich mich stark dafür entscheiden. Hoffentlich kann ich dann eine Suche oder Abfrage durchführen, um vorhandene Inhaltsverzeichnis-Blöcke auf allen Beiträgen zu finden, sie auf die Verwendung des nativen Blocks umstellen und das Plugin, das ich derzeit verwende, entfernen.

Option 3: Einen Inhaltsverzeichnis-Block verwenden, der eine Unterfunktion eines anderen WordPress-Plugins ist

Ich würde davon abraten, ein Plugin zu verwenden, das eine ganze Reihe von Dingen tut, nur weil Sie einen kleinen Teil davon nutzen möchten. Aber hey, wenn sich herausstellt, dass Sie *viele* Dinge aus dem großen Plugin nutzen könnten, könnte das ein Bonus sein, um insgesamt weniger Plugins zu verwalten.

Yoast SEO Premium

Die kostenlose Version des Yoast SEO-Plugins hat es nicht, aber für nur 99 US-Dollar pro Jahr hat das Yoast SEO Premium Plugin es. Es hat fast keine Funktionen. Sie fügen es einfach als Block hinzu, und es erscheint. Sie können den Titel bearbeiten oder ihn entfernen – es ist fast wie ein „Sub-Block“.

Die Liste der Links ist nicht editierbar, aber sie aktualisiert sich in Echtzeit, wenn Sie die Überschriften im Inhalt ändern, was die meisten anderen, die ich getestet habe, nicht taten. Super einfach, keine Styles oder Features, aber ich mag das irgendwie. Ich würde Yoast nicht nur für diese eine Funktion ausführen, besonders für eine kostenpflichtige Premium-Version, aber wenn Sie Yoast sowieso verwenden (auf lange Sicht), dann könnten Sie genauso gut diesen Weg gehen.

Ultimate Addons for Gutenberg

Dies ist wahrscheinlich der eleganteste Inhaltsverzeichnis-Block, auf den ich gestoßen bin. Auch hier bin ich skeptisch, ein All-in-One-Plugin für eine bestimmte Funktion zu verwenden, aber wenn die anderen Funktionen, die in diesem Plugin integriert sind, Dinge sind, die Sie nutzen können, dann ist es eine solide Option.

Option 4: Einen eigenen DIY Inhaltsverzeichnis-Block erstellen

Das eigene Erstellen von Blöcken ist keine Frage! Ich habe das ein paar Mal mit create-guten-block gemacht, obwohl ich heute eher zu @wordpress/create-block greifen würde. Das bringt Sie in die JavaScript-Welt, wo Sie den Inhalt des Beitrags mit JavaScript parsen, Überschriften im Beitragsinhalt finden und daraus aufbauen müssen. Ich würde sagen, das ist eher mittelschweres bis fortgeschrittenes Terrain. Einerseits ist es zusätzlicher technischer Schuldenaufwand, und andererseits haben Sie zumindest die volle Kontrolle, da es Ihr eigener Code ist.

Da wir uns auf das Erstellen von Blöcken konzentrieren, hat Advanced Custom Fields eine sehr leistungsstarke Methode zum Erstellen benutzerdefinierter Blöcke, die diese Leistung zurück in die PHP-Welt bringt. Auf diese Weise wird der Code erheblich einfacher, wenn Sie sich nur darauf konzentrieren, ein Inhaltsverzeichnis aus anderen Überschriften-Blöcken zu erstellen.

Bill Erickson hat einen Beitrag – „Zugriff auf Gutenberg-Blockdaten mit PHP über parse_blocks() und render_block() – der sich schließlich mit dem tatsächlichen Erstellen eines Inhaltsverzeichnis-Blocks befasst. Dieser Gist, den er bereitstellt, ist eine ziemlich nützliche Referenz dafür, wie man durch Blöcke in einem Beitrag schleift und eine HTML-Liste erzeugt.

Favorit?

Wenn ich Yoast SEO Premium auf einer Website verwenden würde, würde ich einfach das eine verwenden. Wenn nicht, würde ich mich für SimpleTOC entscheiden. Das haben wir hier auf CSS-Tricks gemacht. Sobald die Core-Funktion veröffentlicht wird (🤞), würde ich an einem Regentag Projekt daraus machen, alle Beiträge, die derzeit das Inhaltsverzeichnis-Plugin verwenden, auf die Verwendung des Core-WordPress-Blocks umzustellen (vorausgesetzt, es wird gut).