Hoe JavaScript's naar de onderkant of voettekst te verplaatsen in WordPress

Onlangs heeft een van onze lezers ons gevraagd hoe ze JavaScripts naar de bodem kunnen verplaatsen in WordPress om hun score voor de Google-paginasnelheid te verhogen. We zijn blij dat ze het vroegen, want we wilden hier eerlijk over schrijven. Eerder hebben we het gehad over hoe JavaScript- en CSS-stijlen correct kunnen worden toegevoegd in WordPress. In dit artikel laten we u zien hoe u JavaScripts naar beneden kunt verplaatsen in WordPress, zodat u de laadtijd van uw site en de snelheidsscore van uw Google-pagina kunt verbeteren..

Voordelen van JavaScript verplaatsen naar de bodem

JavaScript is een programmeertaal voor de client. Het wordt uitgevoerd en uitgevoerd door de webbrowser van een gebruiker en niet door uw webserver. Wanneer u JavaScript bovenaan plaatst, kunnen browsers het JavaScript uitvoeren of verwerken voordat de rest van uw pagina wordt geladen. Wanneer JavaScripts naar beneden worden verplaatst, zou uw webserver de pagina snel weergeven en vervolgens zou de browser van de gebruiker JavaScripts uitvoeren. Aangezien alle weergave aan de serverzijde al is voltooid, wordt JavaScript op de achtergrond geladen, waardoor de algehele belasting sneller wordt.

Dit zal uw snelheidsscore verbeteren bij het testen met de paginasnelheid van Google of Yslow. Google en andere zoekmachines overwegen nu paginasnelheid als een van de prestatiematrices bij het weergeven van zoekresultaten. Dit betekent dat websites die sneller worden geladen prominenter in zoekresultaten worden weergegeven.

De juiste manier om scripts toe te voegen in WordPress

WordPress heeft een krachtig enquishing systeem waarmee ontwikkelaars van thema's en plug-ins hun scripts in de wachtrij kunnen zetten en naar behoefte kunnen laden. Als scripts en stijlen op de juiste manier worden aangemaakt, kunt u de laadsnelheid van uw pagina aanzienlijk verbeteren.

Om u een eenvoudig voorbeeld te laten zien, zullen we een klein beetje JavaScript toevoegen aan een WordPress-thema. Sla uw JavaScript op in a .js bestand en plaats dat .js bestand in uw thema's js directory. Als uw thema geen directory voor JavaScripts heeft, maak er dan een aan. Nadat u uw scriptbestand hebt geplaatst, bewerkt u uw thema's functions.php bestand en voeg deze code toe:

 functie wpb_adding_scripts () wp_register_script ('my-amazing-script', get_template_directory_uri (). '/js/my-amazing-script.js',",'1.1', true); wp_enqueue_script ('my-amazing-script' ); add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); 

In deze code hebben we de functie wp_register_script () gebruikt. Deze functie heeft de volgende parameters:

Als u het script in het voet- of voetgedeelte van een WordPress-pagina wilt toevoegen, hoeft u alleen de $ in_footer parameter naar waar.

We hebben ook een andere functie gebruikt get_template_directory_uri () die de URL voor de sjabloonmap retourneert. Deze functie moet worden gebruikt voor het bijhouden en registreren van scripts en stijlen in WordPress-thema's. Voor plug-ins die we zullen gebruiken plugins_url () functie.

Het probleem:

Het probleem is dat WordPress-plug-ins soms hun eigen JavaScript toevoegen aan pagina's binnen of buiten de pagina. Om die scripts naar de bodem te verplaatsen, moet u uw plugin-bestanden bewerken en de scripts naar de bodem verplaatsen.

De JavaScript-bron vinden

Open uw site in de webbrowser en bekijk de paginabron. U ziet de koppeling naar het JavaScript-bestand met de locatie en de oorsprong van het bestand. De onderstaande schermafbeelding vertelt ons bijvoorbeeld dat ons script behoort tot een plug-in genaamd 'test-plugin101'. Het scriptbestand bevindt zich in de js directory.

Soms zie je dat JavaScript rechtstreeks aan de pagina is toegevoegd en niet via een afzonderlijk .js-bestand is gekoppeld. In dat geval zou u al uw plug-ins een voor een moeten deactiveren. Ververs de pagina na het deactiveren van elke plug-in totdat u degene vindt die het script aan uw pagina's toevoegt. Als het JavaScript niet verdwijnt, zelfs nadat alle plug-ins zijn gedeactiveerd, probeer dan over te schakelen naar een ander thema om te zien of JavaScript is toegevoegd aan uw thema.

Registreer en wacht scripts

Zodra u de plug-in of het thema hebt gevonden dat JavaScript toevoegt in de koptekstsectie, is de volgende stap om erachter te komen waar de plug-in een oproep voor het bestand doet. In een van je PHP-bestanden van je thema of plug-in zul je een oproep zien naar dat specifieke .js het dossier.

Als de plug-in of het thema al in de wachtrij staat om een ​​JavaScript-bestand toe te voegen, hoeft u alleen de functie wp_register_script in uw plug-in of thema te wijzigen en waar toe te voegen voor de parameter $ in_footer. Zoals dit:

 wp_register_script ('script-handle', plugins_url ('js / script.js', __FILE__), ", '1.0', true); 

Laten we aannemen dat uw plug-in of thema onbewerkte JavaScript-code toevoegt in de koptekst of tussen de inhoud. Zoek de onbewerkte JavaScript-code in de plug-in of themabestanden, kopieer het JavaScript en sla het op in a .js het dossier. Gebruik dan wp_register_script () functie zoals hierboven weergegeven, om JavaScript naar de bodem te verplaatsen.

Noot van de redactie: het is belangrijk om te weten dat wanneer u wijzigingen in de kernbestanden aanbrengt en de plug-in bijwerkt, uw wijzigingen niet zullen worden opgeheven. Een betere manier om dit te doen zou zijn om het script te deregistreren en opnieuw te registreren vanuit het functions.php-bestand van uw thema. Zie deze tutorial.

Naast het verplaatsen van de scripts naar het voetgedeelte, zou je ook moeten overwegen om een ​​snellere plug-in voor sociale media en luie afbeeldingen te gebruiken. Daarnaast moet u ook W3 Total Cache en MaxCDN gebruiken om uw sitesnelheid te verbeteren.

We hopen dat dit artikel u heeft geholpen JavaScripts naar de bodem te verplaatsen in WordPress en uw paginasnelheid te verbeteren. Voor vragen en feedback kunt u hieronder een reactie achterlaten.