Ein Entwicklerleitfaden Fügen Sie in WordPress mit JQuery einen Smooth Scroll to Top-Effekt hinzu

Veröffentlicht: 2022-06-03

Wir alle lieben WordPress wegen seiner Nahtlosigkeit und der Tatsache, dass es die Verwendung eines effizienten Content-Management-Systems viel einfacher macht.

Es ist keine Übertreibung, aber eine einfache und zugängliche Webentwicklung ist ein Segen für neue Webmaster. WordPress verfügt über Dutzende von Funktionen, die es verschiedenen Website-Eigentümern ermöglichen, ihren Benutzern eine super glatte und interaktive Benutzeroberfläche bereitzustellen.

Diejenigen, die neu bei WordPress sind, können WordPress-Tutorials zu Ressourcen wie The Blog Starter lesen, die eine Schritt-für-Schritt-Anleitung zum Starten und Verwalten Ihres Blogs enthalten.

Wenn Sie sich nur auf den Inhalt Ihrer Website konzentrieren, möchten wir Ihnen sagen, dass eine ansprechende und optisch ansprechende Website genauso wichtig ist wie der Inhalt.

Wenn Sie eine bestehende Website haben und nicht wissen, wo Sie anfangen sollen, nehmen Sie sich Zeit und investieren Sie jeden Tag 30 Minuten, um über das Erscheinungsbild und die Benutzeroberfläche Ihrer Website nachzudenken. Vertrauen Sie uns, denn Sie werden nach und nach die Elemente finden, die Sie reparieren müssen. Sobald Sie Ihre Website mit großen visuellen Bemühungen aufladen, werden die Konversationsraten steigen.

Und wenn Sie bereits daran interessiert sind, Benutzern ein reibungsloses Besuchserlebnis für Ihre Website zu bieten, ein großes Lob an Sie! Nun, wir haben ein großartiges Tutorial für alle vorbereitet, die ihre Website weiter aufpeppen und die visuelle Gesamtleistung ihrer Website verbessern möchten.

Lassen Sie sich in diesem Blog-Beitrag von uns durch das Hinzufügen eines Smooth Scroll zum Top-Effekt in WordPress mit Hilfe von jQuery führen.

Warum den Smooth Scroll verwenden?

Wenn Websites lange Artikel enthalten und der Benutzer sie durchgeht, ist es normalerweise frustrierend, das Ende der Webseite zu erreichen.

Wenn Ihre Website also mit nur einem Klick ein reibungsloses Scrollen nach oben ermöglicht, wird der Leser Ihre Website nahtlos und superflüssig finden.

Wenn Sie also ein Websitebesitzer oder ein digitaler Vermarkter sind, müssen Sie ein Opportunist sein und sicherstellen, dass Sie alles tun, um ein zusätzliches und organisches Publikum für Ihre Website zu gewinnen.

Möglichkeiten zum Hinzufügen des Smooth Scroll to Top-Effekts in WordPress

Um in WordPress einen reibungslosen Bildlauf zu To Effect hinzuzufügen, können Sie eine der folgenden Methoden verwenden:

1. Verwenden eines in jQuery geschriebenen Codes

2. Verwendung eines Plugins

Normalerweise bevorzugen wir das Codieren gegenüber Plugins, da dies keinen Raum für Schluckauf lässt, wenn es richtig gemacht wird. Plugins können manchmal die Ladegeschwindigkeit der Website verringern, aber die Codierung kann Ihnen helfen, einige Anpassungen vorzunehmen, ohne die Geschwindigkeit überhaupt zu beeinträchtigen. In diesem Tutorial erklären wir insbesondere den Codierungsprozess.

Wie füge ich den Effekt „Smooth Scroll to Top“ in WordPress mit Codierung hinzu?

Um Ihrer WordPress-Website mithilfe der Codierung einen reibungslosen Scroll-to-Top-Effekt hinzuzufügen, müssen Sie diese vier Schritte ausführen:

  1. Erstellen Sie eine „Smoothscrolleffect.js“-Datei.
  2. Füge deinem Theme die Funktion „Smoothscrolleffect.js“ hinzu.
  3. Fügen Sie das Symbol im Design hinzu
  4. Verlinkung des Effekts mit den Webseiten

Sobald Sie mit diesen 4 Schritten fertig sind, können Sie mehr Leser gewinnen. Wenn Sie ein Programmierer sind, können Sie Ihre eigenen Skripte gemäß Ihren Anforderungen erstellen.

Für Nicht-Programmierer haben wir jeden Schritt ausführlich erklärt und den erforderlichen Code hinzugefügt. Sie müssen also nur die Schritte lesen und entsprechend ausführen.

Schritt 1: Erstellen Sie eine „Smoothscrolleffect.js“-Datei

Dies ist die wichtigste Datei, die Sie für diesen Schritt erstellen. Wenn Sie diesen Schritt nicht effektiv implementieren, erzielen Sie möglicherweise keinen vollständig reibungslosen Bildlauf.

In diesem Schritt erstellen wir eine „.js“-Datei (jQuery), die eine Funktion enthält, die dem Top-Effekt ein glattes Scrollen hinzufügt. Befolgen Sie die Schritte zum Erstellen einer „.js“-Datei und laden Sie sie in das Verzeichnis der Website hoch.

  1. Erstellen Sie eine neue Notepad-Datei in Ihrem System.
  2. Kopieren Sie den folgenden Code:

jQuery(document).ready(function($){

$(Fenster).Scroll(Funktion(){

if ($(this).scrollTop() < 200) {

$('#glätten') .fadeOut();

} anders {

$('#glätten') .fadeIn();

}

});

$('#smoothup').on('click', function(){

$('html, body').animate({scrollTop:0}, 'fast');

falsch zurückgeben;

});

});

  1. Fügen Sie den Code in die Notepad-Datei ein.
  2. Speichern Sie es unter einem beliebigen Namen, aber stellen Sie sicher, dass die Erweiterung „.js“ ist.
  3. Melden Sie sich beim cPanel Ihrer Website an.
  4. Navigieren Sie zum Verzeichnis der Website „/js/“

Hinweis: Wenn Ihre Website kein js-Verzeichnis hat, müssen Sie eines erstellen.

  1. Laden Sie die „.js“-Datei, die Sie erstellt haben, auf Ihrem System in das Verzeichnis hoch.

Schritt 2: Befestigen Sie die glatte Schriftrolle am Thema

Im obigen Schritt haben wir eine Datei (mit Smooth-Scroll-Funktion) im Verzeichnis der Website erstellt, und in diesem Schritt werden wir die Smooth-Scroll-Funktion mit unserem Thema verknüpfen. Führen Sie dazu die folgenden Schritte aus:

Navigieren Sie im WordPress-Admin-Dashboard zu Ihrem Theme-Editor. Öffnen Sie function.php zum Bearbeiten. und fügen Sie den folgenden Code darin ein.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), ”, true );

Klicken Sie auf „Änderungen speichern“.

Schritt 3. Symbol zum Design hinzufügen

Offensichtlich möchten Sie Ihrer Website ein Symbol hinzufügen, über das Sie dem Leser anbieten können, nach oben zu scrollen. Außerdem müssen Sie es interaktiver und reaktionsschneller machen. Sie können dies mit Hilfe von CSS wie folgt erreichen:

  1. Navigieren Sie im Theme-Editor zur stylesheet.css Ihres Themes.
  2. Kopieren Sie den folgenden Code.

#glätten {

Höhe: 40px;

Breite: 40px;

Position:fest;

Unten:50px;

Rechts: 100 Pixel;

Texteinzug:-9999px;

Anzeige:keine;

Hintergrund:url („http://www.example.com/wp-content/uploads/2013/07/top_icon.png“);

-webkit-Übergangsdauer: 0,4s;

-moz-Übergangsdauer: 0,4 s; Übergangsdauer: 0,4 s;

}

#glätten:schweben {

-webkit-transform: rotieren (360 Grad) }

Hintergrund: url(”) no-repeat;

}

  1. Fügen Sie es in das Stylesheet Ihres Designs ein.
  2. Klicken Sie auf „Änderungen speichern“.

Hier können Sie das Symbol nach Ihren Wünschen ändern; Wir haben eine Referenz verwendet. Um das Bild zu ändern, können Sie es auf Ihre Website hochladen und in das Feld Hintergrund: URL im obigen Code einfügen.

Schritt 4: Verlinken des Smooth Scrolls mit Webseiten.

Nachdem wir nun eine „.js“-Datei erstellt und in das Verzeichnis der Website hochgeladen, ihr das Design angehängt und ein Symbol für den Effekt erstellt haben, ist es Zeit für den letzten Schritt. Wir werden den Smooth-Scroll-Effekt nun mit allen Webseiten der Website verlinken. Folge den Schritten:

  1. Öffne die footer.php im Theme-Editor.
  2. Kopieren Sie den folgenden Code:
    1. <a href=“#top“ id=“smoothup“ title=“Zurück nach oben“></a>
  3. Fügen Sie es auf der Seite footer.php ein.
  4. Klicken Sie auf „Änderungen speichern“.

Herzlichen Glückwunsch! Sie haben Ihrer WordPress-Website mithilfe von jQuery erfolgreich den Smooth-Scroll-Top-Effekt hinzugefügt.

Fazit

Wir hoffen, dass das obige Tutorial Ihnen effektiv dabei helfen wird, den Effekt „Smooth Scroll to Top“ in WordPress mit JQuery hinzuzufügen und Ihre Benutzer mit einer großartigen Website-Navigationserfahrung zu umwerben.

Wenn Sie bei der Umsetzung der oben genannten Schritte auf Probleme stoßen, teilen Sie uns dies bitte mit, indem Sie unten einen Kommentar hinterlassen.