Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

Inhaltsverzeichnis –
Plug-In Table of Content

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Ein Inhaltsverzeichnis ist hilfreich, da es einen Überblick über den Inhalt eines Textes bietet und es dem Leser ermöglicht, schnell zu den für ihn relevanten Abschnitten zu navigieren. Insbesondere bei längeren Texten ist ein Inhaltsverzeichnis unverzichtbar, um eine schnelle und effektive Navigation zu ermöglichen.

Um ein Inhaltsverzeichnis zu erstellen, gibt es verschiedene Plug-ins, die in der Regel kostenlos verfügbar sind. Zu den genannten Plug-ins Table of Contents Plus und Easy Table of Content gibt es auch Alternativen wie beispielsweise Ultimate Blocks oder LuckyWP Table of Contents.

Plug-ins

Die Installation und Verwendung dieser Plug-ins sind in der Regel einfach und erfordert keine besonderen technischen Kenntnisse. In der Regel ist das Plug-in einfach herunterzuladen und zu aktivieren. Anschließend kann man es automatisch oder per Hand anpassen und im Inhalt einbetten.

Table of Contents Plus.

Das Plug-in Table of Contents Plus.

Anpassung Sprungmarken:

  • Dashboard/Einstellungen/TOC+
    • unter "Erweitert":
      • "Weiches Blättern – Versatz von oben": Die Pixelzahl anpassen (hier Theme Twenty Fourteen, 80px).

Die Einstellungen sind auch in Deutsch beschrieben.

Easy Table of Content

InhaltsverzeichnisEasy Table of Content ist ein Plug-in für WordPress, das ähnlich wie "Table of Contents Plus" funktioniert. Es bietet jedoch ein anderes Design und zusätzliche Funktionen. Im Editor von WordPress ist eine Meta-Box verfügbar, die es ermöglicht, das Inhaltsverzeichnis individuell anzupassen. Diese Box kann über die Einstellungen → Ansicht anpassen → Table of Contents aktiviert werden.

… ein paar Tipps

Die individuellen Einstellungen können sehr nützlich sein, um das Inhaltsverzeichnis für bestimmte Beiträge auf der Website anzupassen. Zum Beispiel kann es für Beiträge, die einen "Scoller" oder ein "Tab-Menü" enthalten, von Vorteil sein, das Inhaltsverzeichnis anders zu gestalten als für andere Beiträge.

Wenn man das Plug-in global einstellt, wird automatisch die Überschrift "Related Posts" dem Inhaltsverzeichnis hinzugefügt. Wenn man dies ausschließen möchte, kann man dies über die Einstellungen → Erweitert → "Ausschluss-IDs" tun und die ID der Überschrift "Related Posts" angeben.

Ein weiteres Beispiel für individuelle Einstellungen bei einem Inhaltsverzeichnis mit dem Plug-in "Easy Table of Contents" wäre, dass man die Überschriften von 2 bis 5 dem Inhaltsverzeichnis hinzufügen möchte, aber die Überschrift "Related Posts" ausschließen möchte.

Um dies zu erreichen, geht man zu den Einstellungen des Plug-ins und wählt unter "Erscheinungsbild" die Option "Anzeigen". Dort kann man die gewünschten Überschriftennummern auswählen, in diesem Fall 2 bis 5.

Um die Überschrift "Related Posts" auszuschließen, wählt man unter "Erweitert" die Option "Ausschluss-IDs" und gibt die ID der Überschrift "Related Posts" ein.

Bspw.:

👉🏿 *

Siehe unterhalb des Beitrags. 👉🏿 Das könnte für Dich auch interessant sein …

Auf diese Weise kann man das Inhaltsverzeichnis individuell anpassen und es auf die Bedürfnisse der eigenen Website zuschneiden.

Dem Sticky-Menü hapert es? (Twenty Fourteen)

Es öffnet und schließt sehr schnell.

Das Problem wurde gelöst. Die Lösung besteht darin, im Thema Twenty Fourteen den Regelsatz .hide {display: none;} zu überschreiben. Dies kann entweder im Child-Theme oder im Customizer erfolgen:

.ez-toc-sticky-fixed.hide {
    display: block;
}

Zur Nachlese, siehe Support.


Dem Inhaltsverzeichnis automatisch einen Anker setzten, somit Button zurück zum Inhaltsverzeichnis.

  1. JS, um den Anker automatisch einfügen:
jQuery('#ez-toc-container').before('<div id="ih-toc"></div>');

2. JS, Funktion Scrolle zum Anker

/* Scrolle zum  Anker*/
(function($) {
    // Alle Fehlermeldungen zeigen, um Fehler zu beheben.
    "use strict";

    function zumAnkerScrollen() {
        let anker = ["#ih-toc"];

        $.each(anker, function(index, value) {
            $("a[href=\"" + value + "\"]").on("click", function(e) {
                e.preventDefault(); // Deaktiviert die generelle Funktion des angeklickten Links
                var offset = -20; // wie viel Platz oberhalb sein soll, also die Höhe der Kopfzeile + 10 oder 20.
                if ($(value).length) {
                    $('html, body').animate({
                        scrollTop: $(value).offset().top + offset
                    }, 1000); // Die Geschwindigkeit für die Animation. Hier eine Sekunde.
                }
            });
        });
    }

    // Alternative für $(document).ready({});
    $(function() {
        zumAnkerScrollen();
    });
})(jQuery);

3. Der Shortcode wird über die functions.php erstellt:

/* Shortcode: mybutton */ 
add_shortcode('mybutton', function( $atts ) {
    extract(shortcode_atts(array(
        'text' => '',
        'link' => '#ih-toc'
    ), $atts)); 

    $html = '<a href="' . $link . '"><div class="myButton">' . $text . '</div></a>';
    return $html;    
});

4. Das CSS für den Button, bspw.:

.myButton {
	position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 100px;
	width: 30px;
	height: 30px;
	background: -webkit-gradient(linear,0 0,0 100%,from(#a4d3ee),to(#f5f5f5));
	background: -moz-linear-gradient(top,#a4d3ee,#f5f5f5);
	box-shadow: 0 0 3px gray;
	-webkit-border-radius: 50%;
}

Siehe das GIF hier unterhalb, somit scrollt man auch mit Anklicke zurück zum Inhaltsverzeichnis:

zeitmaschine, gifzentrale.com

Aktualisiert im Jahr 2023-April