Standard sätt att inkludera JavaScript och CSS i WordPress

Om du är en WordPress-utvecklare hörde du om orden som wp_enqueue_script, wp_enqueue_style och wp_enqueue_scripts. Det här är de metoder vi bör använda för att inkludera JavaScript och CSS i WordPress.

När det gäller WordPress ska man inte använda skript- och länktaggar för att lägga till JavaScript- och CSS-filer.

Fördelar med att använda standardmetoder

För en webbplats är det vanligt att använda olika typer av effekter, animationer för att förbättra användarupplevelsen. Det finns gott om färdiga plugins tillgängliga på internet som gör att vi kan lägga till skjutreglage, kontaktformulär, karusell etc på din webbplats. När vi använder dessa externa resurser måste vi använda JS- och CSS-filer som tillhandahålls av dem. Genom att använda de WordPress-tillhandahållna metoderna kan vi styra sidor där sådana plugins endast kan användas. Till exempel, om vi visar skjutreglaget på startsidan, finns det inget behov av att inkludera skjutreglaget JS och CSS-filer på en annan sida. Det är alltid en bra praxis att endast inkludera JS och CSS när det behövs. Detta är en bra praxis som används för att förbättra webbplatsens prestanda och göra att vår webbplats laddas snabbare.

Faktisk kod för att inkludera JavaScript och CSS

Låt oss anta att vi har custom.js och custom.css-filer som måste läggas till på vår webbplats. För detta måste vi placera under koden.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri(). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Obs! Den tredje parametern i funktionen wp_register_script. Vi passerade array (‘jquery’) vilket innebär att vår custom.js är beroende av jquery.js-filen. Du kan skapa en emapy-array här om ditt skript inte har beroende.

Den sista parametern är satt till true vilket innebär att du inkluderar custom.js-filen i en sidfot (före slutet av body-taggen).

Parameterförklaring för funktionen wp_register_script ()

$ handle (Obligatoriskt): Namnet på skriptet. Bör vara unik.
$ src (Obligatoriskt): Skriptets fullständiga URL eller skriptets sökväg i förhållande till WordPress-rotkatalogen.
$ deps (valfritt): En uppsättning registrerade skript hanterar detta skript beror på.
Standardvärde: array ()
$ ver (valfritt): Sträng som anger skriptets versionsnummer, om det har ett, som läggs till URL: en som en frågesträng för cache-busting-syften. Om versionen är inställd på falsk läggs automatiskt till ett versionsnummer som motsvarar den nuvarande installerade WordPress-versionen. Om den är satt till null läggs ingen version till. Standardvärdet är falskt
$ in_footer (Valfritt): Huruvida manuset ska läggas till innan stängningen av body-taggen istället för i huvudet. Standard ‘falskt’.

Parameterförklaring för funktionen wp_register_style ()

$ handtag (obligatoriskt): Namn på formatmallen. Bör vara unik.
$ src (Obligatoriskt): Hela webbadressen för formatmallen eller sökvägen till formatmallen i förhållande till WordPress-rotkatalogen.
$ deps (valfritt): En uppsättning registrerade formatmallar hanterar detta formatmall beror på.
Standardvärde: array ()
$ ver (valfritt): Sträng som anger formatmallens versionsnummer, om det har ett, som läggs till URL: en som en frågesträng för cache-busting-syften. Om versionen är inställd på falsk läggs automatiskt till ett versionsnummer som motsvarar den nuvarande installerade WordPress-versionen. Om den är satt till null läggs ingen version till. Standardvärde: false
$ media(Valfritt): Mediet som detta formatmall har definierats för. Accepterar mediatyper som ‘alla’, ‘skriv ut’ och ‘skärm’ eller mediefrågor som ‘(orientering: stående)’ och ‘(max-bredd: 640 pixlar)’. Standardvärde: ‘alla’.

Det handlar om hur man inkluderar JavaScript och CSS i WordPress. Om du har några frågor eller förslag, vänligen lämna kommentarer nedan.