WordPress Theme Dorayaki vom Elmastudio ohne Plugin um die Funktion Smooth-Scrolling erweitern

Wer wie wir viel mit den sehr guten WordPress-Themes vom Elmastudio arbeitet, vermisst leider bei einigen Themes, wie zum Beispiel dem Dorayaki, die sehr praktische Funktion, dass sich die Seite per Klick wieder nach oben zum Seitenanfang bewegt. Klar ist es mit HTML leicht möglich, eine Sprungadresse zu definieren, und zack ist die Seite am Anfang. Man kann das Gleiche auch mit dem Menü im Footer-Bereich der Seite erreichen. Aber was mir persönlich daran missfällt, ist der harte Sprung nach oben. Ich finde es viel cooler und ansprechender, wenn die Seite sanft wie von Geisterhand nach oben scrollt. Das Smooth-Scrolling selber ist aber leider nicht alleine mit HTML und CSS machbar, dafür benötigt man etwas JavaScript. Ja, es gibt auch Plugins für WordPress, die diese Smooth-Scrolling-Funktion nachliefern können, aber ich möchte immer möglichst wenig Plugins in meinem WordPress installiert haben und deshalb löse ich das Problem beim Dorayaki-Theme etwas anders.

Benötigtes JavaScript für das Smooth-Scrolling finden

Zuerst stellt sich die Frage: Woher nehmen wir den JavaScript-Code, wenn man nicht so viel Ahnung von JavaScript hat, um das selber zu programmieren? Meine Lösung lautet: Wer das supergünstige und geniale Theme-Bundle vom Elmastudio hat, muss nicht lange suchen, denn das Baylys-Theme verfügt über die gewünschte Funktion. Der benötigte JavaScript-Code befindet sich im Pfad „wp-content/themes/baylys/js“ und die dort benötigte Datei lautet „custom.js“. Diese Datei kann mit jedem Texteditor geöffnet und bearbeitet werden. Die benötigte Funktion für das coole Smooth-Scrolling befindet sich gleich am Anfang der Datei. Den im Bild gezeigten Code einfach komplett inklusive Überschrift markieren und in die Zwischenablage kopieren. Jetzt die Datei „custome.js“ vom Dorayaki-Theme aus dem Pfad „wp-content/themes/dorayaki/js“ öffnen und den soeben in die Zwischenablage kopierten Code direkt an den Anfang und vor allen anderen schon vorhandenen Codes wieder einfügen.

Immer für eine aktuelle WordPress-Datensicherung sorgen!

Bevor wir aber jetzt die geänderte „custome.js“ vom Dorayaki-Theme per FTP auf den Webserver hochladen, ändere ich die Bezeichnung der aktuellen Live-Datei per FTP ab. Also ich benenne die Datei „custome.js“ in custome_.js um. Sollte ich jetzt einen Fehler in der geänderten Version der custome.js gemacht haben, dann kann ich das ohne größeren Aufwand sehr schnell wieder rückgängig machen. Grundsätzlich gilt aber, man sollte immer eine aktuelle Datensicherung haben, wenn man Änderungen an seiner WordPress-Installation vornimmt. Dann geht es jetzt weiter mit dem Hochladen der angepassten custome.js in den Ordner „wp-content/themes/dorayaki/js“ per FTP auf den Webserver. Wenn alles geklappt hat, sollte die Seite noch funktionieren, aber ansonsten darf sich erst mal nichts geändert haben.

Smooth-Scrolling-Funktion im WordPress nutzbar machen

Jetzt geht es darum, die JavaScript-Funktion auch zu nutzen. Es gibt unterschiedliche Möglichkeiten, die Funktion im Dorayaki-Theme nutzbar zu machen. Ich habe mich dazu entschlossen, die Smooth-Scrolling-Funktion in der farblich abgesetzten Box im Footer auf der rechten Seite zu platzieren. Auch habe ich das Wort TOP gegen einen Pfeil nach oben ausgetauscht. Aber wer möchte, kann natürlich auch ein beliebiges Wort einsetzen, über das die Funktion ausgelöst wird.

Um die Funktion jetzt sichtbar zu machen, müssen wir die folgende Code-Zeile in die Footer.php einfügen:

Das kann man am einfachsten direkt im Design-Editor vom WordPress-Backend machen. Dazu einfach im Backend auf Design und dann auf Editor klicken. Anschließend in der rechten Spalte den Eintrag Fußzeile (footer.php) auswählen. Für meine gewünschte Position auf der Internetseite muss die Code-Zeile in den Bereich class=“footerlabel“ kopiert werden und zwar vor das Ende dieser DIV-Class. So sollte der DIV-Block aussehen, wenn er fertig ist:

Jetzt noch speichern und dann sind wir auch schon fast fertig.

Zeichen für die Smooth-Scrolling-Funktion mit CSS optimieren

Zum Abschluss habe ich das Zeichen – damit es besser sichtbar ist – mit dem folgenden CSS etwas formatiert:

Das kann man direkt in den Theme-Optionen vom Dorayaki-Theme im Bereich „Custom CSS“ einfügen und speichern.

So das war’s 🙂

Jetzt sollte das Pfeil-Zeichen auch auf Ihrer Dorayaki-Seite im Internet sichtbar sein und per Klick die Seite wieder zum Anfang scrollen. Wenn das Pfeil-Zeichen nicht sichtbar ist, dann die Seite bitte mit [F5] mal neu laden, und wenn ein Cache-Plugin zum Einsatz kommt, dann zuerst den Cache leeren und danach die Seite neu laden. Die Geschwindigkeit vom Smooth-Scrolling lässt sich im JavaScript der Datei custome.js über den Parameter Speed ändern. Original steht die Scroll-Geschwindigkeit auf 400. Ich selber nutze in der Regel 800. Damit ist das Scrollen für meinen Geschmack etwas sanfter, aber das ist natürlich reine Geschmackssache.

Theoretisch könnte man auch noch einen Hover-Effekt für den Mauszeiger einbauen, damit das Zeichen irgendeine Reaktion zeigt, wenn der Mauszeiger drüber weg bewegt wird. Aber das habe ich in diesem Beispiel weggelassen, da dieser Effekt meiner Meinung nach sowieso den meisten Nutzern kaum auffällt und auf Touch-Geräten wie zum Beispiel einem Smartphone gar nicht sichtbar ist bzw. ausgelöst wird.