Hoe JavaScript en stijlen op de juiste manier in WordPress te plaatsen

Wilt u leren hoe u JavaScripts en CSS-stylesheets correct kunt toevoegen in WordPress? Veel DIY-gebruikers maken vaak de fout hun scripts en stylesheets rechtstreeks in plug-ins en thema's te plaatsen. In dit artikel laten we u zien hoe u JavaScripts en stylesheets correct kunt toevoegen in WordPress. Dit is met name handig voor degenen die net beginnen met het leren van WordPress-thema- en plugin-ontwikkeling.

Veelvoorkomende fouten bij het toevoegen van scripts en stylesheets in WordPress

Veel nieuwe WordPress-plug-ins en thema-ontwikkelaars maken de fout om hun scripts of inline CSS rechtstreeks toe te voegen aan hun plug-ins en thema's.

Sommigen gebruiken ten onrechte de wp_head functie om hun scripts en stylesheets te laden.

Hoewel bovenstaande code misschien eenvoudiger lijkt, is het de verkeerde manier om scripts toe te voegen aan WordPress, en dit leidt in de toekomst tot meer conflicten.

Als u jQuery bijvoorbeeld handmatig laadt en een andere plug-in laadt jQuery via de juiste methode, dan wordt jQuery twee keer geladen. Als het op elke pagina is geladen, heeft dit een negatieve invloed op de snelheid en prestaties van WordPress.

Het is ook mogelijk dat de twee verschillende versies zijn die ook conflicten kunnen veroorzaken.

Dat gezegd hebbende, laten we eens kijken naar de juiste manier om scripts en stylesheets toe te voegen.

Waarom scripts en stijlen inlezen in WordPress?

WordPress heeft een sterke ontwikkelaarscommunity. Duizenden mensen van over de hele wereld ontwikkelen thema's en plug-ins voor WordPress.

Om ervoor te zorgen dat alles naar behoren werkt en niemand op de tenen van een ander stapt, heeft WordPress een systeem dat in het oog springt. Dit systeem biedt een programmeerbare manier om JavaScripts en CSS-stylesheets te laden.

Door de functies wp_enqueue_script en wp_enqueue_style te gebruiken, vertel je WordPress wanneer een bestand moet worden geladen, waar het moet worden geladen en wat de afhankelijkheden zijn..

Met dit systeem kunnen ontwikkelaars ook gebruikmaken van de ingebouwde JavaScript-bibliotheken die met WordPress worden gebundeld, in plaats van meerdere keren hetzelfde script van derden te laden. Dit vermindert de laadtijd van de pagina en helpt conflicten met andere thema's en plug-ins voorkomen.

Hoe scripts op juiste wijze in WordPress in te voeren?

Het correct laden van scripts in WordPress is heel eenvoudig. Hieronder ziet u een voorbeeldcode die u in uw pluginsbestand of in het function.php-bestand van uw thema zou plakken om scripts correct in WordPress te laden.

 ?php-functie wpb_adding_scripts () wp_register_script ('my_amazing_script', plugins_url ('amazing_script.js', __FILE__), array ('jQuery'), '1.1', true); wp_enqueue_script (my_amazing_script);  add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); ?> 

Uitleg:

We begonnen met het registreren van ons script via de wp_register_script () functie. Deze functie accepteert 5 parameters:

• $ handle - Handle is de unieke naam van uw script. De onze wordt "mijn_amazing_script" genoemd
• $ src - src is de locatie van uw script. We gebruiken de plugins_url-functie om de juiste URL van onze plugins-map te krijgen. Zodra WordPress dat heeft gevonden, zoekt het naar onze bestandsnaam amazing_script.js in die map.
• $ deps - deps is voor afhankelijkheid. Omdat ons script jQuery gebruikt, hebben we jQuery toegevoegd in het gebied afhankelijkheid. WordPress laadt automatisch jQuery als het niet al op de site wordt geladen.
• $ ver - Dit is het versienummer van ons script. Deze parameter is niet vereist.
• $ in_footer - We willen ons script in het voetgedeelte laden, dus we hebben de waarde ingesteld om waar te zijn. Als u het script in de kop wilt laden, maakt u het onwaar.

Na het invoeren van alle parameters in wp_register_script, we kunnen het script gewoon binnen bellen wp_enqueue_script () waardoor alles gebeurt.

De laatste stap is het gebruik van actiehaak wp_enqueue_scripts om het script daadwerkelijk te laden. Omdat dit een voorbeeldcode is, hebben we dat recht onder al het andere toegevoegd.

Als u dit aan uw thema of plug-in toevoegt, kunt u deze actieknop plaatsen waar het script daadwerkelijk vereist is. Hiermee kunt u de geheugenvoetafdruk van uw plug-in verminderen.

Nu kunnen sommigen zich afvragen waarom gaan we de extra stap om het script eerst te registreren en vervolgens in te voeren? Welnu, hiermee kunnen andere site-eigenaren uw script deregistreren zonder de kerncode van uw plug-in te wijzigen.

Stijlen op de juiste manier in WordPress vastzetten

Net als bij scripts kunt u uw stylesheets ook in de wacht slepen. Kijk naar het onderstaande voorbeeld:

In plaats van gebruiken wp_enqueue_script, we gebruiken nu wp_enqueue_style om ons stylesheet toe te voegen.

Merk op dat we hebben gebruikt wp_enqueue_scripts actiehaak voor zowel stijlen als scripts. Ondanks de naam werkt deze functie voor beide.

In de bovenstaande voorbeelden hebben we gebruikt plugins_url functie om naar de locatie van het script of de stijl te wijzen die we wilden inlijven.

Als u echter de functie wachtrij-scripts in uw thema gebruikt, gebruikt u gewoon get_template_directory_uri () in plaats daarvan. Als u met een kindthema werkt, gebruik dan get_stylesheet_directory_uri ().

Hieronder ziet u een voorbeeldcode:

We hopen dat dit artikel je heeft geholpen bij het correct toevoegen van jacvascript en stijlen in WordPress. U kunt ook de broncode van de top WordPress-plug-ins bestuderen voor voorbeelden uit de praktijk.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.