Share
In onze vorige zelfstudie hebben we de History Web API binnen een statische site gebruikt voor soepele paginaovergangen. In deze tutorial gaan we de dingen naar een hoger niveau tillen door wat we hebben geleerd toe te passen op een WordPress-website. Er zal één cruciaal verschil zijn; we maken gebruik van SmoothState.js in plaats van zelf een geheel nieuw te bouwen.
SmoothState.js zal:
We zullen om een aantal redenen kiezen voor SmoothState.js:
Er zijn een aantal dingen die je nodig hebt om klaar te zijn om deze tutorial te volgen:
Door een "kindthema" in WordPress te gebruiken (in plaats van rechtstreeks met de originele themabestanden te werken), kunnen we veilig nieuwe standaardfuncties introduceren of vervangen.
Dit is de beste manier om een thema aan te passen, omdat eventuele wijzigingen die u aanbrengt, behouden blijven als het bovenliggende thema wordt bijgewerkt.
In ons geval is het bovenliggende thema TwentySixteen. Het kind bevindt zich in een andere nieuwe map "zestienixteen-child" die een "functions.php" -bestand en een stylesheet "style.css" bevat, als volgt.
. ├── twintigentien └── twintigentienjarig kind
Het belangrijkste onderdeel van een kindthema is het Sjabloon notatie in de stylesheet-header waarin de themarelatie staat. specificeren Sjabloon met de naam van de parent-themadirectory, in ons geval twentysixteen
/ ** Theme Name: Twenty Sixteen Child Theme URI: https://webdesign.tutsplus.com Auteur: Thoriq Firdaus Auteur URI: https://tutsplus.com/authors/tfirdaus Beschrijving: Een kindthema met een extra laag glam to TwentySixteen Versie: 1.0.0 Licentie: GNU General Public License v2 of later Licentie URI: http://www.gnu.org/licenses/gpl-2.0.html Tekstdomein: twintigentien Template: twintigentachtig * /
Zodra dat is ingesteld, activeert u het onderliggende thema via de beheerder:
Het thema Twenty16ixt child is geactiveerd, misschien wilt u ook een screenshot.png toevoegenWe moeten een aantal JavaScript-bestanden in ons WordPress-thema laden. In principe kunnen we dit doen door deze JavaScript rechtstreeks aan de hoofd tag in het bestand "header.php" van het thema. Volgens de WordPress standaard wordt het echter aangemoedigd om de wp_enqueue_script () functie, toegevoegd aan de functions.php, om conflicten te voorkomen:
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'); Met deze functie kunnen we ook de afhankelijkheden van het script instellen. In ons geval hangt de "smoothstate.js" af van jQuery, dus zal WordPress jQuery laden voor het laden van "smoothstate.js".
Ons bestand "script.js" is afhankelijk van beide scripts, dus de laadvolgorde van al onze scripts is als volgt:
Bekijk de volgende zelfstudies voor meer informatie over hoe bestandsparkeren werkt in WordPress:
Laten we de volgende code toevoegen aan ons 'script.js' om SmoothState.js te activeren:
(functie ($) $ (function () // Ready var-instellingen = anchors: 'a'; $ ('#page'). smoothState (settings););) (jQuery); In de bovenstaande code selecteren we #pagina (het element dat de inhoud van de site-pagina omspant) en SmoothState.js met de meest eenvoudige configuratie implementeert.
Onze pagina's moeten worden weergegeven zonder het browservenster volledig opnieuw te laden terwijl we door onze WordPress-site navigeren. Onze pagina's worden nu asynchroon afgeleverd.
Excuseer me voor de niet-inspirerende dummy-inhoud.Kortom, we zijn er helemaal klaar voor! Er zijn echter nog enkele details die de aandacht waard zijn:
#pagina dat wijst naar de WordPress Admin, wp-admin of wp-login.php.#reageren, spring niet naar de benoemde secties op de pagina.Er zijn enkele links op de pagina die verwijzen naar het WordPress-beheergebied, zoals de Bewerk link in elke post, de Ingelogd als admin, en de Uitloggen voor het reactieformulier.
"Bewerken" -link in Twenty Sixteen die verschijnt wanneer we zijn ingelogd.Een van de problemen wanneer SmoothState.js de Admin vraagt, is dat we niet terug kunnen gaan naar de vorige pagina wanneer we op de browser klikken Terug knop. Dit probleem treedt op omdat het script SmoothState.js niet aanwezig is in het gedeelte Beheerder om de vorige pagina op te vragen en weer te geven.
We gaan niet terug naar de vorige pagina nadat we het WordPress-dashboard hebben bezocht.We moeten voorkomen dat SmoothState.js een URL opvraagt waarnaar wordt verwezen wp-admin of wp-login. Om dit te doen kunnen we gebruik maken van de blacklist parameter, als volgt:
(functie ($) $ (function () // Gereed var-instellingen = anchors: 'a' blacklist: '.wp-link'; $ ('#page'). smoothState (settings);); ) (jQuery); De blacklist parameter vertelt SmoothState.js om de koppelingen met de opgegeven klasseselector te negeren; en gezien het bovenstaande codefragment, zal het de links negeren wp-koppeling klasse. Deze klassenaam is momenteel niet beschikbaar, dus we zullen een nieuwe klasse maken en deze dynamisch toevoegen aan de benodigde koppelingen:
functie addBlacklistClass () $ ('a') .each (function () if (this.href.indexOf ('/ wp-admin /')! == -1 || this.href.indexOf ('/ wp -login.php ')! == -1) $ (this) .addClass (' wp-link ');); Deze functie evalueert elke ankertag op de pagina en voegt vervolgens toe wp-koppeling klasse als de link-URL bevat / Wp-admin / of /wp-login.php.
We voeren deze functie twee keer uit om de klasse effectief aan de pagina toe te voegen. Ten eerste, bij het laden van de eerste pagina. De tweede is nadat SmoothState.js de nieuwe pagina heeft bezocht via de onAfter; een methode die telkens wordt uitgevoerd wanneer de nieuwe inhoud en animatie volledig is afgeleverd.
functie 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 = anchors: 'a', blacklist: '.wp-link', onAfter: function () addBlacklistClass ();; $ ('#page') .smoothState (instellingen);); Vervolgens moeten we links behandelen met een slepende hash. In een WordPress-thema vinden we er meestal een die linkt naar het commentaargedeelte van een bericht of een pagina.
De 'Leave a Comment' verwijst naar het commentaargedeelte van het bericht.Zoals de zaken er nu voorstaan, zult u merken dat de link ons niet naar de commentaarsectie zal leiden, omdat de pagina niet daadwerkelijk is herladen of vernieuwd. Daarom moeten we het verwachte normale gedrag repliceren.
(functie ($) ... $ (function () ... onAfter: function () ... var $ hash = $ (window.location.hash); if ($ hash.length! == 0) var offsetTop = $ hash.offset (). top; $ ('body, html') .animation (scrollTop: (offsetTop - 60),, duration: 280);;);) (jQuery); Zoals u kunt zien aan de hand van het bovenstaande codefragment, hebben we enkele regels met codes toegevoegd onder de onAfter methode. De code haalt de URL op hachee, scrolt vervolgens naar het gedeelte dat is aangewezen (als het gedeelte op de pagina staat) met behulp van jQuery-animatie.
Blader soepel naar het gedeelte Opmerkingen van het bericht We moeten de paginaovergang levendiger maken. Eerst voegen we de CSS-stijlen toe om de pagina te animeren, naar 'styles.css' van ons kindthema als volgt.
.site-inhoud -webkit-overgang: -webkit-transform .28s, opacity .28s; -ms-overgang: -o-transform .28s, opacity .28s; -o-overgang: -o-transform .28s, opacity .28s; overgang: transformeer .28s, opacity .28s; .slide-out .site-content -webkit-transform: translate3d (0, 100px, 0); -ms-transformatie: translate3d (0, 100px, 0); -o-transform: translate3d (0, 100px, 0); transformatie: translate3d (0, 100px, 0); dekking: 0;
De .website-inhoud is de klassenaam die de hoofdpost- of pagina-inhoud omspant, terwijl .uitglijden is een extra les die we hebben gemaakt om de inhoud eruit te schuiven.
(functie ($) ... $ (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);Gezien de bovenstaande code gebruiken we de onStart methode om de klasse toe te voegen wanneer SmoothState.js nieuwe inhoud begint toe te voegen. Vervolgens door onAfter, we verwijderen de klas nadat de nieuwe inhoud is afgeleverd.
En dat is alles wat er is! Toch is er één ding om rekening mee te houden met betrekking tot compatibiliteit met sommige WordPress plug-ins ...
Er zijn meer dan 40.000 WordPress-plug-ins beschikbaar, zelfs niet inclusief plug-ins die buiten de officiële repository worden gehost, zoals bijvoorbeeld op CodeCanyon. Er zijn veel plug-ins beschikbaar die mogelijk niet compatibel zijn (of zelfs breken) onze asynchrone laden, met name die welke in welke mate ook vertrouwen op scripting.
De volgende lijst is mijn ruwe schatting van enkele die u mogelijk moet bekijken wanneer u ze gebruikt in combinatie met SmoothState.js:
Bovendien wordt JavaScript intensief gebruikt in de Customizer binnen de WordPress Admin. Dus, je zou kunnen denken uitladen SmoothState.js in de Customizer, als er ooit iets breekt.
We hebben geleerd hoe SmoothState.js in WordPress te integreren, en we kunnen een kindthema gebruiken als onze ontwikkelingsstrategie. En dit is slechts een begin! We kunnen bijvoorbeeld uitbreiden wat we hebben gedaan in een plug-in met opties in de instellingen waar gewone gebruikers de uitvoer gemakkelijk kunnen aanpassen.
Als je op zoek bent naar inspiratie, bekijk dan deze veelzijdige WordPress-thema's op Envato Market die vergelijkbare AJAX-laadtechnieken gebruiken:
Brug
saillant
Stockholm