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

4 min


127

Laat, E.W.M. de (Erwin)

All rights reserved

DeLaatBusiness

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

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 vooral handig voor degenen die net beginnen met het leren van WordPress-thema- en plugin-ontwikkeling.

Juiste toevoeging van JavaScripts en stijlen in WordPress

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 de wp_headfunctie ten onrechte om hun scripts en stylesheets te laden.

1

2

3

4

5

6

<?php

add_action(‘wp_head’, ‘wpb_bad_script’);

function wpb_bad_script() {

echo ‘jQuery goes here’;

}

?>

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 in WordPress inluisteren?

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 plug-insbestand of in het function.php-bestand van uw thema zou plakken om scripts correct in WordPress te laden.

1

2

3

4

5

6

7

8

9

10

?php

function 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 de voettekst laden, dus we hebben de waarde ingesteld om waar te zijn. Als u het script in de kop wilt laden, maakt u het onwaar.

Nadat we alle parameters wp_register_scripthebben ingevoerd , kunnen we gewoon het script bellen wp_enqueue_script()waarin alles gebeurt.

De laatste stap is om wp_enqueue_scripts gebruiken actie haak 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 verkleinen.

Nu vragen sommigen zich misschien af ​​waarom we de extra stap zetten om het script eerst te registreren en vervolgens in te chaten? 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:

1

2

3

4

5

6

7

<?php

function wpb_adding_styles() {

wp_register_style(‘my_stylesheet’, plugins_url(‘my-stylesheet.css’, __FILE__));

wp_enqueue_style(‘my_stylesheet’);

}

add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_styles’ ); 

?>

In plaats van het te gebruiken wp_enqueue_script, gebruiken we nu wp_enqueue_styleom ons stylesheet toe te voegen.

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

In de bovenstaande voorbeelden hebben we de plugins_urlfunctie gebruikt om naar de locatie van het script of de stijl te wijzen die we wilden laten inlijsten.

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

Hieronder ziet u een voorbeeldcode:

1

2

3

4

5

6

7

8

9

<?php

  

function wpb_adding_scripts() {

wp_register_script(‘my_amazing_script’, get_template_directory_uri() . ‘/js/amazing_script.js’, array(‘jquery’),’1.1′, true);

wp_enqueue_script(‘my_amazing_script’);

}

  

add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ ); 

?>

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.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format