Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Mit Easy Table of Contents wird das Lesen von Artikel noch angenehmer! Ein Inhaltsverzeichnis (TOC) ist bereits ein nützliches Werkzeug, aber mit einigen Tipps und Modifikationen kannst du es noch effektiver nutzen. Entdecke, wie du Überschriften umbrichst, das Sticky TOC nur für Beiträge mit aktiviertem Hauptmenü anzeigen lässt und sogar einen Scroll-Hinweis für das Sticky TOC hinzufügst. Außerdem zeigen wir dir, wie du automatisch Anker für dein Inhaltsverzeichnis generierst. Tauche ein und optimiere deine Inhaltsstruktur für eine noch bessere Benutzererfahrung!
Um ein Inhaltsverzeichnis zu erstellen, gibt es verschiedene Plug-ins, die in der Regel kostenlos verfügbar sind. Zu dem hier genannten ist das Easy Table of Content.
Die Installation und Verwendung ist 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.
Inhaltsverzeichnis mit Easy Table of Content
Easy 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 ein "Tab-Menü" enthalten, von Vorteil sein, das Inhaltsverzeichnis nicht anzuzeigen.
- 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 "Erweitert" die Option "Überschriften". Dort kann man die gewünschten Überschriftennummern auswählen.
- Unterhalb der Option "Überschriften ausschließen" ist hier bspw. den "Related Posts" die Überschrift auszuschließen. Siehe unterhalb des Beitrags: "👉🏿 Das könnte für Dich auch ansprechen" Diese Überschrift sollte Global ausgeblendet werden. Das funktioniert allein mit: 👉🏿 *
Auf diese Weise kann man das Inhaltsverzeichnis individuell anpassen und es auf die Bedürfnisse der eigenen Website zuschneiden.
Modifikationen für Easy Table of Content
Die Anpassungen haben sich während der Entwicklung der Website ergeben, wobei insbesondere dem Sticky TOC viel Aufmerksamkeit geschenkt wurde. Das Menü auf der linken Seite ist ein gutes Beispiel dafür, wie praktisch der Sticky TOC sein kann. Als nächstes wurden Tipps zum Zeilenumbruch von Überschriften im Haupt-Inhaltsverzeichnis sowie das Hinzufügen eines Ankers zum TOC entwickelt.
Sticky TOC Anpassungen
- Probleme mit Sticky TOC und Twenty Fourteen
- Sticky TOC nur für Beiträge anzeigen, in denen das Hauptmenü aktiviert ist
- Hinzufügen eines Scroll-Hinweises zum Sticky TOC Menü
- Zentrieren des Sticky TOC Menüs vertikal
- Resizable Überschriften: Schnelle Navigation und Übersicht
- Sticky-Menü zum Besuch der Website automatisch einblenden
Probleme mit Sticky TOC und Twenty Fourteen
Es öffnet und schließt in einem Ruck.
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:
/* --- Sticky TOC spezifisch 20/14 --- */
.ez-toc-sticky-fixed.hide {
display: block;
}
Zur Nachlese, siehe Support.
Sticky TOC Button nur bei aktiviertem Hauptmenü anzeigen
Beispielsweise wird das Inhaltsverzeichnis für jeden Beitrag separat definiert. Dies erfolgt unterhalb des Editors im Bereich "Inhaltsverzeichnis". In den Haupteinstellungen ist die Option "Unterstützung aktivieren" entsprechend aktiviert, jedoch ohne automatische Einfügung.
Das Problem, das durch die Standardfunktion nicht gelöst wurde, besteht darin, dass das Sticky-Button automatisch für alle Beiträge aktiviert ist. Eine mögliche Lösung wäre, die Beiträge, für die der Sticky-Button ausgeschlossen werden soll, manuell in den Sticky-Einstellungen unter "Ausschließen durch Übereinstimmung mit URL/String" anzugeben. Dies erfordert jedoch eine umständliche manuelle Zuordnung, insbesondere für Seiten mit vielen Beiträgen.
Flexible Inhaltsverzeichnisse – definiere sie nach Bedarf!
Daher haben wir dieses Problem mit einer Kombination aus JavaScript und CSS gelöst, um sicherzustellen, dass der Sticky-Button nur für Beiträge sichtbar ist, für die auch das Hauptmenü aktiviert wurde.
Zuerst wird der Sticky-Button standardmäßig ausgeblendet, indem er mit CSS ausgeblendet wird:
/* --- Sticky TOC Button mit CSS ausblenden und mit JS einblenden --- */
.ez-toc-sticky {
display: none;
}Dadurch bleibt der Sticky-Button trotz der Aktivierung in den Einstellungen für alle Beiträge ausgeblendet.
Das folgende JavaScript sorgt dafür, dass das Sticky-Element wieder angezeigt wird, wenn der Container mit der Classe ez-toc-container im Inhalt des Beitrags vorhanden ist. Andernfalls bleibt das Sticky-Element ausgeblendet:
/* --- Sticky TOC Button einblenden vs. CSS ausblenden --- */
document.addEventListener("DOMContentLoaded", function() {
// Überprüfe, ob der Container mit der Klasse "ez-toc-container" vorhanden ist
var tocContainer = document.getElementById('ez-toc-container');
if (tocContainer) {
// Zeige das Sticky-Element an
var stickyElement = document.querySelector('.ez-toc-sticky');
if (stickyElement) {
stickyElement.style.display = 'block';
}
}
});
/* Ende Sticky TOC Button einblenden vs. CSS ausblenden */Im vorliegenden Code wird das Sticky-Element je nach dem Vorhandensein eines Containers mit der Classe ez-toc-container entweder ein- oder ausgeblendet. Dies geschieht durch Hinzufügen oder Entfernen der CSS-Eigenschaft display: block des Sticky-Elements mit der Classe ez-toc-sticky.
Die document.addEventListener("DOMContentLoaded", function() wird verwendet, um sicherzustellen, dass der Code erst ausgeführt wird, wenn der DOM-Inhalt vollständig geladen ist. Dies ermöglicht es, auf DOM-Elemente zuzugreifen, sobald sie verfügbar sind, was besonders wichtig ist, wenn Änderungen am DOM vorgenommen werden sollen.
Warum wird hier jedoch nicht der window.addEventListener('load', function() verwendet? Der Unterschied liegt in dem Zeitpunkt, zu dem diese Events ausgelöst werden. Das Event DOMContentLoaded wird ausgelöst, sobald der HTML-Parser den gesamten DOM-Baum erstellt hat, während das window.load-Event ausgelöst wird, sobald alle Ressourcen einer Webseite geladen wurden, einschließlich Bilder, Stylesheets und Skripte. Das DOMContentLoaded-Event tritt also früher auf als das window.load-Event.
In diesem Fall, in dem das Sticky-Element basierend auf dem DOM-Inhalt manipuliert wird, genügt das DOMContentLoaded-Event, da die Manipulation des Sticky-Elements nicht von Ressourcen abhängt, die möglicherweise noch nicht vollständig geladen sind. Das window.load-Event könnte hier unnötige Verzögerungen verursachen, da der Code erst ausgeführt würde, nachdem alle Ressourcen geladen sind, was nicht erforderlich ist.
Deshalb wird das DOMContentLoaded-Event bevorzugt, um sicherzustellen, dass der Code so früh wie möglich ausgeführt werden kann, was zu einer verbesserten Benutzererfahrung führt.
Scroll-Hinweis zum Sticky TOC Menü
Der Scrollbalken im Sticky-Inhaltsverzeichnis erscheint nur dann, wenn tatsächlich gescrollt wird. Daher sollte angezeigt werden, dass das Sticky-Menü gescrollt werden kann. Wenn der Inhalt länger ist als der definierte Abschnitt (zum Beispiel 600px), sollte ein visueller Hinweis angezeigt werden, ansonsten nicht.
Mit JavaScript und CSS machen wir den Hinweis. Hier ist das entsprechende CSS:
/* --- Sticky TOC Hinweis zum Scrollen --- */
.ez-toc-sticky-title::after {
opacity: 0;
}
.ez-toc-sticky-title.visible::after {
content: "Scrollen";
position: absolute;
left: 50%;
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
transition: opacity 0.3s ease-out;
opacity: 1;
}
.ez-toc-sticky-title-container {
position: sticky !important;
margin-left: -15px;
float: left;
}
.ez-toc-sidebar {
padding-top: 0px !important;
}
.ez-toc-sticky-fixed .ez-toc-close-icon {
margin: 2px 0 0 0;
font-size: 1.5rem;
color: #4F5279;
}
/* Ende Sticky TOC Hinweis zum Scrollen */
Die Attributwerte sind natürlich individueller Natur!
… und JavaScript:
/* --- Sticky TOC Hinweis zum Scrollen --- */
window.addEventListener('load', function() {
var stickyTitle = document.querySelector('.ez-toc-sticky-title');
var stickyContainer = document.querySelector('.ez-toc-sticky-container');
// Überprüfen, ob sowohl der Sticky-Titel als auch der Sticky-Container existieren
if (stickyTitle && stickyContainer) {
// Überprüfen, ob der Inhalt des Sticky-Bereichs über 550px liegt
if (stickyContainer.offsetHeight > 550) {
stickyTitle.classList.add('visible');
} else {
stickyTitle.classList.remove('visible');
}
}
});
/* Ende Sticky TOC Hinweis zum Scrollen */In diesem Beispiel verwenden wir window.addEventListener('load', function() anstelle von document.addEventListener("DOMContentLoaded", function(), um sicherzustellen, dass der Code erst ausgeführt wird, nachdem alle Ressourcen der Seite vollständig geladen wurden. Warum ist das wichtig? Nun, window.onload wird normalerweise verwendet, um sicherzustellen, dass der Code ausgeführt wird, sobald der DOM-Baum vollständig analysiert und erstellt wurde. Es wird jedoch festgestellt, dass einige Inhalte, wie z. B. Bilder und externe Skripte, möglicherweise noch nicht geladen wurden, wenn DOMContentLoaded ausgelöst wird. Dies könnte dazu führen, dass der Code vorzeitig ausgeführt wird und auf nicht vollständig geladene Inhalte zugreift, was zu unerwartetem Verhalten führen kann.
Durch die Verwendung von window.onload stellen wir sicher, dass der Code erst ausgeführt wird, nachdem alle Inhalte auf der Seite, einschließlich Bilder, Skripte und andere Ressourcen, vollständig geladen wurden. Dadurch wird vermieden, dass der Code vorzeitig ausgeführt wird und auf nicht vollständig geladene Inhalte zugreift.
In diesem speziellen Beispiel überprüfen wir die Höhe des Sticky-Bereichs und entscheiden dann, ob der Scroll-Hinweis angezeigt werden soll. Indem wir sicherstellen, dass der Code erst nach dem Laden der gesamten Seite ausgeführt wird, können wir sicher sein, dass alle Inhalte korrekt geladen und bereit sind, und somit wird der Scroll-Hinweis nur angezeigt, wenn man ihn wirklich braucht.
Zentrieren des Sticky TOC Menüs vertikal
Wenn man der Haupteinstellung den Sticky-Button der Ausrichtung Mitte hat, dann sollte möglicherweise auch das Inhaltsverzeichnis zentriert sein.
Dies scheint zunächst recht einfach zu sein:
.ez-toc-sidebar {
position: fixed;
top: 50%;
transform: translateY(-50%);
}
Jedoch kam es dabei zu einem Konflikt mit anderen CSS-Regeln oder aufgrund einer unerwarteten Struktur. Daher sollte dies alleinig per JavaScript erfolgen:
/* --- Funktion Sticky TOC Menü vertikal zentriert --- */
function centerSidebarVertically() {
var sidebar = document.querySelector('.ez-toc-sidebar');
if (sidebar) {
var windowHeight = window.innerHeight; // Höhe des sichtbaren Bereichs des Bildschirms
var sidebarHeight = sidebar.offsetHeight; // Höhe der Seitenleiste
// Berechne die obere Position der Seitenleiste, um sie vertikal zentriert zu halten
var topPosition = (windowHeight - sidebarHeight) / 2;
// Setze die obere Position der Seitenleiste
sidebar.style.top = topPosition + 'px';
}
}
// Füge einen Event-Listener hinzu, um die Seitenleiste neu zu positionieren, wenn sich die Fenstergröße ändert
window.addEventListener('resize', centerSidebarVertically);
// Rufe die Funktion auf, um die Seitenleiste initial vertikal zentriert zu positionieren
window.onload = centerSidebarVertically;
/* Ende Funktion Sticky TOC vertikal zentriert */
In diesem Skript wird die centerSidebarVertically Funktion direkt nach ihrer Definition aufgerufen. Dadurch wird sichergestellt, dass die Seitenleiste sofort nach dem Laden der Seite vertikal zentriert wird.
Resizable Überschriften im Sticky TOC
Resizable Überschriften: Schnelle Navigation und Übersicht im Sticky TOC. Resizable bedeutet anpassbar, veränderbar und wird in dem Kontext der Hervorhebung oder Markierung von aktuellen Überschriften verwendet.
Das Sticky-Menü, das beim Scrollen an Ort und Stelle bleibt, ist eine gängige Praxis, um die Navigation auf einer Website zu verbessern. Die Idee von Resizable Überschriften, die sich an die Scrollposition anpassen und möglicherweise markieren, sind eine weitere Designinnovation, die die Lesbarkeit verbessern kann.
Die Einführung von resizable Überschriften in Verbindung mit Sticky-Menüs erfolgte wahrscheinlich in den Jahren, als responsives Webdesign und die Benutzererfahrung (UX) im Webdesign immer besser wurden. Dies könnte irgendwann zwischen Mitte und Ende der 2010er Jahre gewesen sein.
Die Sticky TOC-Navigation ermöglicht es, die Übersicht immer im Blick zu behalten und bietet eine effiziente Navigation durch den Artikel. Besonders leistungsfähig wird diese Funktion in Verbindung mit resizablen Überschriften. Dadurch ist es sofort ersichtlich, in welchem Abschnitt des Artikels man sich befindet, sobald die entsprechende Überschrift markiert ist.
Wie wir das Team Wegerl.at mit seinen Freunden kennen, sollte auch das sehr funktionell sein und wurde ge-JavaScript-elt und einer kleinen Menge CSS implementiert.
Dieses Feature kann mithilfe von JavaScript und einer kleinen Menge CSS implementiert werden.
/* --- CSS Sticky TOC Resizable Überschriften --- */
.ez-toc-sidebar a.active {
font-weight: 500;
background-color: #7f7f7f;
color: #fff !important;
padding: 0px 5px;
border-radius: 4px;
}
/* Ende Sticky TOC Resizable Überschriften*/
Die Funktion zum Hervorheben der aktuellen Überschrift im Menü basierend auf der Scrollposition per JavaScript samt:
/* --- Funktion Sticky TOC Resizable Überschriften --- */
var lastScrollTop = 0;
function updateHeadingHighlight() {
var headings = document.querySelectorAll('.ez-toc-sidebar a');
var windowHeight = window.innerHeight;
var scrollTop = window.scrollY;
var sidebar = document.querySelector('.ez-toc-sidebar');
// Finde die Überschrift, die sich am nächsten am mittleren Rand des Bildschirms befindet
var closestHeading = null;
var closestDistance = Infinity;
headings.forEach(function(heading) {
var targetId = heading.getAttribute('href').substring(1);
var targetHeading = document.getElementById(targetId);
if (targetHeading) {
var headingRect = targetHeading.getBoundingClientRect();
var distance = Math.abs(headingRect.top + headingRect.height / 2 - windowHeight / 2);
if (distance < closestDistance && headingRect.top >= 0 && headingRect.bottom <= windowHeight) {
closestDistance = distance;
closestHeading = heading;
}
}
});
// Markiere die gefundene Überschrift und entferne Markierung von anderen Überschriften
if (closestHeading) {
headings.forEach(function(heading) {
heading.classList.remove('active');
});
closestHeading.classList.add('active');
// Überprüfen, ob das Menü scrollbar ist und sich der Scroller nach unten bewegen muss
if (sidebar.scrollHeight > sidebar.clientHeight) {
// Berechnen der Position, um die die markierte Überschrift mittig im sichtbaren Bereich zu halten
var targetPosition = closestHeading.offsetTop - sidebar.offsetTop - (windowHeight / 2 - closestHeading.offsetHeight / 2);
sidebar.scrollTop = targetPosition;
}
}
// Speichern des aktuellen Scrollwerts für den nächsten Durchlauf
lastScrollTop = scrollTop;
}
document.addEventListener('scroll', updateHeadingHighlight);
document.addEventListener('DOMContentLoaded', updateHeadingHighlight);
// Event-Listener für das Anklicken eines Menülinks
document.addEventListener('DOMContentLoaded', function() {
var headings = document.querySelectorAll('.ez-toc-sidebar a');
headings.forEach(function(heading) {
heading.addEventListener('click', function(event) {
// Entferne die aktive Markierung von allen Überschriften im Menü
headings.forEach(function(heading) {
heading.classList.remove('active');
});
// Füge die aktive Markierung zur angeklickten Überschrift hinzu
this.classList.add('active');
// Verhindere den Standardverhalten des Links (z. B. das Scrollen zur Ankerposition)
event.preventDefault();
});
});
});
/* Ende Funktion Sticky TOC Resizable Überschriften */Prüfe den ersten Wert, ab wann der Scroll aktiv sein sollte, d.h. ob ab Mitte (4) oder eher am Ende (2):
var targetPosition = closestHeading.offsetTop - sidebar.offsetTop - (windowHeight / 2 - closestHeading.offsetHeight / 2);Erprobung anderer Ansätze. Wir haben verschiedene Ansätze ausprobiert.
Bei Scrollen nach oben sollte die vorhergehende Überschrift markiert werden, wenn die aktuelle Überschrift unten aus dem visuellen Bereich ist. Das wäre für länger Abschnitte der vorherigen Überschrift sehr passend. Das ist nicht so erfolgreich, deswegen sind wir mit dem aktuellen JS sehr zufrieden!
Bemerkung: Wenn im Sticky-Menü auf eine Überschrift geklickt wird und sich diese gleichzeitig mit der folgenden Überschrift im Viewport befindet, wird die folgende Überschrift im Menü als markiert angezeigt. Das ist hier deutlich zu erkennen, wenn man hier im Sticky-Menü verschiedene Überschriften anklickt.
Highlighten im Sticky TOC betonen die Flexibilität der Navigation
Die Scrollleiste im Sticky-Menü wird durch das automatische Scrollen überflüssig und kann ausgeblendet werden, was zu einem noch entspannteren Menüerlebnis führt:
/* --- Sticky-Menü Scrollleiste ausblenden --- */
.ez-toc-sidebar::-webkit-scrollbar {
display: none;
}Sticky TOC Menü zum Besuch der Website einblenden
Beim Besuch der Webseite sollte das Sticky-Menü standardmäßig sichtbar sein. Diese Einstellung kann in den Hauptoptionen unter "TOC open on load" aktiviert werden. Dadurch wird das Sticky-Menü direkt beim Laden der Webseite geöffnet und legt sich über das Headerbild und andere Elemente.
Allerdings haben wir eine alternative Lösung implementiert: Das Menü öffnet sich erst, wenn der Benutzer zum Haupt-Inhaltsverzeichnis scrollt – was in den meisten Fällen ideal ist und ein schöneres Benutzererlebnis bietet. Dies erfordert zusätzliches JavaScript:
/* --- Funktion Sticky TOC Menü-Einblendung beim Erreichen des Inhaltsverzeichnisses --- */
function ezTOC_showBarWhenInView() {
var container = document.getElementById('ez-toc-container');
var sidebar = document.querySelector(".ez-toc-sticky-fixed");
if (container && sidebar) {
var containerRect = container.getBoundingClientRect();
var containerTop = containerRect.top;
// Einblenden des Sticky-Menüs, wenn der Container oben im Viewport angekommen ist
if (containerTop <= 0) {
sidebar.classList.remove("hide");
sidebar.classList.add("show");
sidebar.style.zIndex = "999"; // Setze den Z-Index-Wert des Sticky-Menüs
document.querySelector(".ez-toc-open-icon").style = "z-index: -1;";
// Entferne den Event Listener, um das automatische Einblenden zu stoppen
window.removeEventListener('scroll', ezTOC_showBarWhenInView);
} else {
sidebar.classList.remove("show");
sidebar.classList.add("hide");
}
}
}
window.addEventListener('scroll', ezTOC_showBarWhenInView);
/* Ende Funktion Sticky TOC Menü-Einblendung beim Erreichen des Inhaltsverzeichnisses */Nachdem das Menü erfolgreich eingeblendet wurde, wird der 'Event Listener' entfernt. Dadurch wird das Sticky-Menü automatisch nur einmalig eingeblendet und danach nicht mehr, wenn es durch einen Klick in die Seite oder durch den Schließen-Button geschlossen wurde. Das Sticky-Menü kann erneut geöffnet werden, indem der Sticky-Button angeklickt wird.
Das Ausklappen des Sticky-Menüs kann durch zusätzliches CSS weiter verbessert werden. Dabei wird das Sticky-Menü konsistent und ansprechend wieder eingeklappt, ohne die Notwendigkeit von separatem CSS für das Einklappen.
/* --- Sticky TOC Menü langsam Einblenden --- */
.ez-toc-sticky-fixed {
opacity: 0;
transition: width 1s ease, opacity 2s ease;
}
.ez-toc-sticky-fixed.show {
opacity: 1;
}
/* CSS-Animation für das Einblenden des Menüs */
@keyframes rollInFromLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.ez-toc-sticky-fixed.show {
animation: rollInFromLeft 1.3s ease forwards;
}
/* Ende Sticky TOC Menü langsam Einblenden */Sticky-Menü – Konformes Ein- und Ausklappen ohne zusätzlichen CSS zum Schließen.
Globale Anpassungen für Seiten-Inhalsverzeichnis
- Umbruch von Überschriften im Inhalt
- Automatisches Hinzufügen eines Ankers zum Haupt-Inhaltsverzeichnis
Umbruch von Überschriften im Inhalt
Überschriften können nicht einfach umgebrochen werden, ohne dass es zu Problemen für das Inhaltsverzeichnis kommt. Dies sollte daher per CSS wie folgt umgesetzt werden:
/* --- Überschriften mit Zeilenumbruch --- */
@media (min-width: 700px) {
.lange-ue {
white-space: nowrap;
}
}
CSS-Media-Query @media (min-width: 700px) stellt sicher, dass diese Classen nur auf Bildschirmen mit einer Mindestbreite von 700 Pixeln angewendet werden.
Der Teil ab <span class="nowrap"> wird nicht umgebrochen und in die nächste Zeile verschoben, wenn er nicht mehr genügend Platz hat, um sich vollständig innerhalb der aktuellen Textzeile auszubreiten.
Anmerkung: Die Verwendung von white-space: nowrap; auf der Ebene der Inline-Styles wäre nicht ideal, wenn du eine responsive Website erstellst, da dies die Flexibilität der Darstellung auf verschiedenen Bildschirmgrößen beeinträchtigen kann.
Durch die Verwendung der .lange-ue-Classe und die Einschränkung auf den @media-Bereich kannst du sicherstellen, dass der Zeilenumbruch nur auf größeren Bildschirmen deaktiviert wird, während er auf kleineren Bildschirmen, wie Mobilgeräten, weiterhin aktiv bleibt. Dadurch wird sichergestellt, dass die Darstellung der Überschriften auch auf mobilen Geräten gut aussieht und dass der Text entsprechend umbrochen wird, um auf den Bildschirm zu passen.
Zum Beispiel im HTML dann:
<h5 class="lange-ue">Tanzende Überschriften: <span class="nowrap">mit Zeilenumbruch-Zauber!</span></h5>Überschriften, die umgebrochen werden sollen, werden mit der Classe lange-ue versehen und die Teile, die nicht umgebrochen werden sollen, innerhalb eines span-Tags mit der Classe nowrap.
Also die Class class="lange-ue" in den Überschriften-Tag und mit <span class="nowrap"> der Stelle, wo der visuelle Umbruch stattfindet.
Nochmal, der Zeilenumbruch erfolgt nur, wenn der Text nach der nowrap-Classe nicht mehr in dieselbe Zeile passt. Ein Beispiel dafür ist die folgende Überschrift:
Tanzende Überschriften: mit Zeilenumbruch-Zauber!
Die Überschrift bleibt hier im Lesemodus ununterbrochen, da der Text immer noch in dieselbe Zeile passt. Wenn du jedoch über die Headerleiste in den Normalmodus wechselt und die Inhaltsbreite schmaler wird, wird die Überschrift gemäß der Class und der nowrap-Auszeichnung umbrochen.
Hier ist mein Beitrag im Support: Überschrift mit Zeilenumbruch.
- Probleme erfolgt auch Überschriften, welche einen Tag wie
<code>enthalten, also<h2><code>.htaccess</code></h2>oder direkte Auszeichnungen vonstyle, dann funktioniert das Inhaltsverzeichnis nicht. - Den Überschriften ist alles über CSS zu machen und entsprechend der Classe zu stylen.
- Anker können selbstverständlich eingefügt werden.
Dem Haupt-Menü automatisch einen Anker setzten
Das Inhaltsverzeichnis wird automatisch mit einem Anker versehen, sodass am Ende des Artikels ein Button-Link zurück zum Verzeichnis führt.
- JS, um den Anker automatisch einfügen:
/* --- TOC Anker autmoatisch --- */
jQuery('#ez-toc-container').before('<div id="ih-toc"></div>');2. JS, Funktion Scrolle zum Anker
/* --- Scrolle zum Anker ih-toc --- */
(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);
/* Ende Scrolle zum Anker ih-toc */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;
});
/* Ende Shortcode: mybutton */ 4. Das CSS für den Button, bspw.:
/* --- myButton CSS --- */
.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%;
}
/* Ende myButton CSS */Ein Klick für den Überblick – zurück zum Inhaltsverzeichnis
Siehe den Button am Ende des Beitrags, somit scrollt man mit Anklicke zurück zum Inhaltsverzeichnis.
Die Abenteuer des neugierigen Lesers
Eine kleine Geschichte mit kulinarischem Ende.
Ein neugieriger Leser taucht in die Tiefen des Inhaltsverzeichnisses ein, begierig darauf, die Geheimnisse und Wunder zu entdecken, die zwischen den Zeilen verborgen sind. Mit einem Klick beginnt sein aufregendes Abenteuer durch die mysteriöse Welt der Überschriften und Unterkapitel.
Die Entdeckung der kulinarischen Künste
In diesem Abschnitt des Inhaltsverzeichnisses stößt der Leser auf eine Vielzahl von kulinarischen Kreationen und gastronomischen Genüssen. Von verlockenden Vorspeisen bis hin zu verführerischen Desserts, jede Überschrift verspricht eine neue kulinarische Erfahrung.
Die geheimen Rezepte der Kochkunst
Während der Leser weiter in das Inhaltsverzeichnis eintaucht, stößt er auf eine Sammlung geheimer Rezepte und unerforschter Kochtechniken. Diese versteckten Schätze versprechen, seine kulinarischen Fähigkeiten zu erweitern und ihm das Geheimnis der perfekten Mahlzeit zu enthüllen.
Eine Expedition durch die Welt der Aromen
In diesem Abschnitt erlebt der Leser eine abenteuerliche Expedition durch die vielfältigen Aromen und Geschmacksrichtungen der Welt. Von exotischen Gewürzen bis hin zu vertrauten Aromen, jede Überschrift führt zu einem neuen Geschmackserlebnis und einer unvergesslichen kulinarischen Reise.
Die Begegnung mit schelmischen Snacks
Hier trifft der Leser auf eine bunte Vielfalt schelmischer Snacks und verlockender Leckereien. Diese frechen Köstlichkeiten versprechen, seine Geschmacksknospen zu kitzeln und ihm ein Lächeln auf die Lippen zu zaubern, während er sich durch das Inhaltsverzeichnis navigiert.
Ein Festmahl für die Sinne: Geschichten aus der Küche
Schließlich kommt der Leser am Ende seines Abenteuers an und findet sich inmitten eines opulenten Festmahls für die Sinne wieder. Diese abschließende Überschrift lädt ihn ein, sich zurückzulehnen, zu entspannen und die Geschichten und Aromen zu genießen, die ihm das Inhaltsverzeichnis zu bieten hat.
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
Aktualisiert im Jahr 2024-April
