Share
In unserem vorherigen Tutorial haben wir die History-Web-API innerhalb einer statischen Website verwendet, um reibungslose Seitenübergänge zu ermöglichen. In diesem Tutorial werden wir die Dinge auf die nächste Stufe bringen, indem wir das anwenden, was wir auf einer WordPress-Website gelernt haben. Es wird einen entscheidenden Unterschied geben. Wir werden SmoothState.js nutzen, anstatt unsere eigenen von Grund auf neu aufzubauen.
SmoothState.js wird:
Wir werden uns aus verschiedenen Gründen für SmoothState.js entscheiden:
Es gibt ein paar Dinge, die Sie benötigen, um dieses Tutorial zu befolgen:
Wenn Sie ein untergeordnetes Design in WordPress verwenden (anstatt direkt mit den ursprünglichen Designdateien zu arbeiten), können Sie neue Funktionen sicher einführen oder die Standardfunktionen überschreiben.
Dies ist die beste Vorgehensweise, wenn Sie ein Design anpassen möchten, da alle von Ihnen vorgenommenen Änderungen beibehalten werden, wenn das übergeordnete Design aktualisiert wird.
In unserem Fall lautet das übergeordnete Thema Zwanzig Sechzehn. Das Kind befindet sich in einem anderen neuen Ordner „zwanzig-unter-acht“, der eine Datei „functions.php“ und ein Stylesheet „style.css“ wie folgt enthält.
. ├── Zwanzigzehn └── Zwanzigzehn Kinder
Der wichtigste Teil eines Kinderthemas ist das Vorlage Notation im Stylesheet-Header, in der die Design-Beziehung angegeben ist. Angeben Vorlage mit dem Namen des übergeordneten Themenverzeichnisses in unserem Fall zwanzigzehn
/ ** Themenname: Twenty Sixteen Child Theme URI: https://webdesign.tutsplus.com Autor: Thoriq Firdaus Author URI: https://tutsplus.com/authors/tfirdaus Beschreibung: Ein untergeordnetes Thema, das eine zusätzliche Ebene hinzufügt glam to TwentySixteen Version: 1.0.0 Lizenz: GNU General Public License v2 oder höher Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html Textdomäne: twentysixteen Vorlage: twentysixteen * /
Sobald dies eingestellt ist, aktivieren Sie das untergeordnete Thema über den Administrator:
Das untergeordnete Thema "TwentySixteen" ist aktiviert. Möglicherweise möchten Sie auch eine "screenshot.png" hinzufügenWir müssen eine Reihe von JavaScript-Dateien in unser WordPress-Theme laden. Im Prinzip könnten wir dies tun, indem Sie diese JavaScript direkt in die Kopf Tag in der Datei „header.php“ des Designs. Dem WordPress-Standard folgend, wird jedoch empfohlen, den wp_enqueue_script () Funktion hinzugefügt Functions.php, um Konflikte zu vermeiden:
Accentsconagua
wp_enqueue_script ('smoothstate-js', 'assets / js / smoothstate.js', array ('jquery'), '0.5.2'); wp_enqueue_script ('script-js', 'assets / js / script.js', array ('jquery', 'smoothstate-js'), '1.0.0'); Mit der Funktion können wir auch die Skriptabhängigkeiten festlegen. In unserem Fall hängt "smoothstate.js" von jQuery ab. Daher lädt WordPress jQuery vor dem Laden von "smoothstate.js"..
Unsere Datei "script.js" hängt von ab beide Skripte, die Ladereihenfolge aller unserer Skripte lautet daher wie folgt:
Schauen Sie sich die folgenden Tutorials an, um mehr darüber zu erfahren, wie das Einreihen von Dateien in WordPress funktioniert:
Fügen wir folgenden Code in unsere "script.js" ein, um SmoothState.js zum Laufen zu bringen:
(function ($) $ (function () // Ready var settings = Anker: 'a'; $ ('#page') .smoothState (Einstellungen););) (jQuery); Im obigen Code wählen wir aus #Seite (das Element, das den Seiteninhalt der Website umschließt) und stellen SmoothState.js mit der grundlegendsten Konfiguration bereit.
Unsere Seiten sollten bedient werden, ohne das Browserfenster vollständig neu zu laden, wenn wir durch unsere WordPress-Site navigieren. Unsere Seiten werden jetzt asynchron ausgeliefert.
Bitte entschuldigen Sie mich für den langweiligen Dummy-Inhalt.Im Grunde sind wir alle eingestellt! Es gibt jedoch noch einige Details, die es zu beachten gilt:
#Seite das zeigt auf den WordPress Admin, wp-admin oder wp-login.php.#antworten, Springen Sie nicht zu den festgelegten Abschnitten auf der Seite.Auf der Seite befinden sich einige Links, die auf den WordPress-Verwaltungsbereich verweisen, wie z Bearbeiten Link in jedem Beitrag, der Als Admin angemeldet, und das Ausloggen vor dem Kommentarformular.
"Bearbeiten" -Link in TwentySixteen, der angezeigt wird, wenn wir angemeldet sind.Wenn SmoothState.js den Administrator anfordert, besteht eines der Probleme darin, dass wir nicht in der Lage sind, zur vorherigen Seite zurückzukehren, wenn wir im Browser klicken Zurück Taste. Dieses Problem tritt auf, weil das SmoothState.js-Skript nicht im Admin-Bereich vorhanden ist, um die vorherige Seite anzufordern und zu liefern.
Nach dem Besuch des WordPress-Dashboards kehren wir nicht zur vorherigen Seite zurück.Wir müssen verhindern, dass SmoothState.js eine URL anfordert, auf die verwiesen wird wp-admin oder WP-Login. Dazu können wir das nutzen schwarze Liste Parameter wie folgt:
(function ($) $ (function () // Ready var einstellungen = anchors: 'a' blacklist: '.wp-link'; $ ('#page') .smoothState (settings);); ) (jQuery); Das schwarze Liste Parameter weist SmoothState.js an, die Verknüpfungen mit dem angegebenen Klassenselektor zu ignorieren. und angesichts des obigen Code-Ausschnitts werden die Verknüpfungen mit ignoriert WP-Link Klasse. Dieser Klassenname ist derzeit nicht vorhanden. Daher erstellen wir eine neue Klasse und fügen sie dynamisch zu den erforderlichen Links hinzu:
function addBlacklistClass () $ ('a') .each (function () if (this.href.indexOf ('/ wp-admin /')! == -1 || this.href.indexOf ('/ wp -login.php ')! == -1) $ (this) .addClass (' wp-link ');); Diese Funktion wertet jedes Ankertag auf der Seite aus und fügt sie hinzu WP-Link Klasse, wenn die Link-URL enthält / wp-admin / oder /wp-login.php.
Wir führen diese Funktion zweimal aus, um die Klasse effektiv zur Seite hinzuzufügen. Zuerst auf der ersten Seite laden. Die zweite ist, nachdem SmoothState.js die neue Seite über die onAfter; Eine Methode, die jedes Mal ausgeführt wird, wenn der neue Inhalt und die Animation vollständig bereitgestellt wurden.
function addBlacklistClass () $ ('a') .each (function () if (this.href.indexOf ('/ wp-admin /')! == -1 || this.href.indexOf ('/ wp -login.php ')! == -1) $ (this) .addClass (' wp-link ');); $ (function () addBlacklistClass (); var settings = Anker: 'a', schwarze Liste: '.wp-link', onAfter: function () addBlacklistClass ();; $ ('#page') .smoothState (Einstellungen);); Als Nächstes müssen wir Links mit einem nachfolgenden Hash behandeln. In einem WordPress-Theme finden wir normalerweise eines, das mit dem Kommentarbereich eines Beitrags oder einer Seite verlinkt.
"Leave a comment" verweist auf den Kommentarbereich des Beitrags.Nach dem Stand der Dinge werden Sie feststellen, dass der Link nicht zum Kommentarbereich führt, da die Seite nicht tatsächlich neu geladen wird erfrischt. Daher müssen wir das erwartete normale Verhalten replizieren.
(Funktion ($) … $ (Funktion () … onAfter: Funktion () … var $ hash = $ (window.location.hash); if ($ hash.length! == 0) var offsetTop = $ hash.offset (). top; $ ('body, html') .animate (scrollTop: (offsetTop - 60),, duration: 280);;););) (jQuery); Wie Sie dem obigen Code-Snippet entnehmen können, haben wir ein paar Codezeilen unter hinzugefügt onAfter Methode. Der Code ruft die URL ab hash, Blättern Sie dann mit jQuery Animation zu dem angegebenen Abschnitt (sofern der Abschnitt auf der Seite vorhanden ist).
Scrollen Sie problemlos zum Kommentarbereich des Beitrags Wir müssen den Seitenübergang lebendiger gestalten. Zuerst fügen wir die CSS-Stile hinzu, um die Seite zu animieren, wie folgt zu „styles.css“ unseres Kinderthemas.
.site-content -webkit-Übergang: -webkit-transform .28s, Deckkraft .28s; -ms-Übergang: -o-transform .28s, Deckkraft .28s; -o-Übergang: -o-Transformation .28s, Deckkraft .28s; Übergang: Transformation .28s, Deckkraft .28s; .slide-out .site-content -webkit-transform: translate3d (0, 100px, 0); -ms-transform: translate3d (0, 100px, 0); -o-transform: translate3d (0, 100px, 0); transform: translate3d (0, 100px, 0); Deckkraft: 0;
Das .Inhalt der Website ist der Klassenname, der den Hauptbeitrag oder den Seiteninhalt umschließt, während .Herausgleiten ist eine zusätzliche Klasse, die wir erstellt haben, um den Inhalt herauszuschieben.
(function ($) … $ (function () … var settings = … onStart: duration: 280, // ms render: function ($ container) $ container.addClass ('slide-out'); , onAfter: function ($ container) … $ container.removeClass ('slide-out');; $ ('#page') .smoothState (settings););) (jQuery);In Anbetracht des obigen Codes verwenden wir die am Start Methode, um die Klasse hinzuzufügen, wenn SmoothState.js mit dem Einlesen neuer Inhalte beginnt. Dann durch onAfter, Wir entfernen die Klasse, nachdem der neue Inhalt geliefert wurde.
Und das ist alles was dazu gehört! In Bezug auf die Kompatibilität mit einigen WordPress-Plugins gilt jedoch Folgendes:
Es stehen mehr als 40.000 WordPress-Plugins zur Verfügung, nicht einmal Plugins, die außerhalb des offiziellen Repositorys gehostet werden, wie beispielsweise CodeCanyon. Es gibt viele Plugins, die mit unserem asynchronen Laden möglicherweise nicht kompatibel sind (oder sogar brechen), insbesondere solche, die in gewissem Umfang auf Skripte angewiesen sind.
Die folgende Liste ist meine grobe Schätzung von einigen, die Sie möglicherweise beachten müssen, wenn Sie sie in Verbindung mit SmoothState.js verwenden:
Darüber hinaus wird JavaScript im Customizer des WordPress Admin stark verwendet. So können Sie darüber nachdenken Entladung SmoothState.js im Customizer, falls irgendetwas kaputt geht.
Wir haben gelernt, SmoothState.js in WordPress zu integrieren und ein untergeordnetes Thema als Entwicklungsstrategie zu nutzen. Und das ist nur ein Anfang! Wir könnten beispielsweise das, was wir getan haben, in ein Plugin mit Optionen in den Einstellungen erweitern, mit denen normale Benutzer die Ausgabe problemlos anpassen können.
Wenn Sie nach Inspiration suchen, schauen Sie sich diese vielseitigen WordPress-Themes auf Envato Market an, die ähnliche AJAX-Seitenladeverfahren verwenden:
Brücke
hervorstechend
Stockholm