In WordPress nach oben scrollen hatte ich mir für alle Blogs separate schon eingerichtet.
Klickbare Kurzübersicht zum Beitrag
HTML-Link-Lösung [ erste Version ]
Sprungziel eintragen
Technisch gelöst hatte ich das nach etwas online Suche in einer ersten Version ganz einfach mit einem HTML-Link.
Indem ich auf der Header Vorlage manuell einen “HTML-ANKER” mit ‘zum-header-hoch” auf den gesamten Block in der Ansicht der Vorlage “Header Template Teil”, also dort zur “Header Zeile” selber das rechts in der Spalte unter “Erweitert” eingetragen und die Vorlage gespeichert habe.
Das findest du in deiner WordPress Instanz unter > Designs > Editor > Vorlagen > Header
Sprunglink Button erstellen
Der HTML-ANKER als Sprungziel war damit gesetzt.
Da ich das im Header eingetragen und festgelegt hatte, funktioniert dieser auch auf ALLEN Seiten oder Beiträgen dieses einen Blogs!
Der zweite Schritt, der zur Funktion als HTML-Link notwendig ist, besteht in einem Button zum Anklicken, damit dann das Sprungziel im Header angesteuert und dadurch die Seite auch nach oben gescrollt wird.
Dazu habe ich statt dem Header im selben Pfad > Design > Editor > Vorlagen > Footer – den letzteren ausgewählt und in diesem “Footer Template Teil” dann möglichst weit unten – bei mir Rechts, einen neuen Button ergänzt.
Der Button kann einen beliebigen Linktext bekommen, irgendiwe Sinnvoll ist sich etwas wie “ganz hoch”, “zum Header” und vielleicht eine grafische Ergänzung mit Pfeil “🡹” oder Händen “👆🏽 👆🏻 👆🏼👆🏾 👆” nach oben.
Der Link im Button bekommt dann den Eintrag “#zum-header-hoch” – das kann auch anders heißen, muss aber nach dem Hashtag genau dem entsprechen, was du unter dem ersten Schritt als HTML-ANKER eingetragen hast!
Kollission mit TOP in WordPress nach oben scrollen
Dann fehlten mir klickbare Inhaltsübersichten in meinen Blogs.
Um das automatisch aus den H1 – H6 Tags zu realisieren, wählte ich dann das PlugIn “TOP Table Of Contents“, was an sich sehr gut in der freien Version funktioniert und ich nutze das bis heute in allen Blogs.
Da dann aber der Header nicht weiter nach oben geschoben wird, was ich ja auch so wollte, nutzt der HTML-ANKER in dieser ersten Version nichts mehr.
Ich merkte plötzlich einfach nur, dass es nicht mehr geht und wunderte mich. Zuerst dachte ich, dass es vielleicht an der neueren WordPress 6.8.3 Variante lag. Bis ich mich dann kurz entschlossen der Sache annahm und wieder suchte, was andere machen.
Kollission Lösungssuche
Das sah aber wieder alles zu aufwendig aus und ich überlegte mir wie ich wohl, den H1-Titel, der ja immer ganz oben ist, statt dessen ansteuern könnte.
Erneutes kurzes suchen brachte mich zu den css-tricks und deren Beitrag “How to Make an Unobtrusive Scroll-to-Top Button“. Dort unter “And what about smooth scrolling?” sah ich die <html id=”top”> Zuordnung notiert. Das brachte mich dann auf die Idee, dem Titel Tag eine ID zuzuordnen, die dann als neues Sprungziel gelten sollte.
Ein liebes “Danke” für den genannten Beitrag an dieser Stelle von mir geht an css-tricks!
Ganz Wichtig hier in WordPress nach oben scrollen ist
Wichtigster Punkt, ist, um das nicht in allen Seiten oder Beiträgen eines Blogs separat einstellen zu müssen, das in allen genutzten Seitenvorlagen je 1x festzulegen !
HTML-LINK [ neue Variante ]
Die zuvor kurz angerissenen neue Variante eines HTML-Links mit Sprungziele auf dem Titel lässt sich praktisch und technisch wie folgt in 4 Schritten direkt für den ganzen Blog umsetzen.
1. Seiten Template auswählen
2. Seiten Template bearbeiten
3. Titel im Seiten Template die id=top ergänzen
4. Im Footer Template “#top” als Link in den Button setzen & speichern
Testen & Freuen mit in WordPress nach oben scrollen
Dann eine Seite deines Blogs neu laden und den Button unten im Footer anklicken … und … freuen !
Grüße & Fragen zu in WordPress nach oben scrollen
Beste Grüße aus Berlin und solltest du dazu Fragen oder deine Beispiel mit Ergänzungen oder Verbesserungen haben, dann nutze gerne die Kommenetare hier, da finden das dann alle jederzeit!
Vielen Dank für dein Interesse bis zum Schluss und teile diese Info gerne, wenn sie dich weitergebracht hat!
Jochen
PS: andere Umsetzungsbeispiele von mir findet du in meinem Hirtenwahl-Blog oder auch in Knuud & Ksavver [ Der Blog ] – die weiteren Blogs aus meiner Blog-Entwicklungsgeschichte habe ich inzwischen auch alle entsprechen noch angepasst und bin darüber sehr glücklich!
Es hat sich für mich jetzt schon gelohnt, das nur erstmal gleich für mich und dich hier festzuhalten und damit weiterzugehen.
Schreibe einen Kommentar