Allt om att lägga till stilar och skript i WordPress
WordPress erbjuder flera metoder för att lägga till stilar och skript för frontend och admin, både för att lägga till filer och direkt utmatning av variabler/utdata. Det här inlägget går i detalj med kodexempel på hur man lägger till skript och stilar till WordPress på rätt sätt.
Skript och stilar kan registreras och ställas i kö genom att definiera unika handtag (slugliknande ID), vilket gör det möjligt för WordPress att eliminera dubbletter, såsom flera jQuery-bibliotek, och att hantera beroenden (vilken stil eller skript som ska laddas före detta och det) .
Om det inte finns något specifikt behov av att registrera stilar eller skript, kan du bara ställa dem i kö direkt och hoppa över registreringen. Det är också möjligt att avregistrera eller avköa stilar och skript (wp_dequeue_scriptoch wp_dequeue_style) genom att hänvisa till handtaget. Det hjälper vanligtvis att lägga till ett högre nummer i krokens prioritet (så att den körs efter kroken där föremålen ställdes i kö).
PS: Att lägga till stilar och skript till Gutenberg (både admin- och frontend-block), förklaras i mitt inlägg Gutenberg: The Basics.
Lägga till skript och stilar till frontend
För att lägga till stilar och skript endast till frontend, använd kroken wp_enqueue_scripts. Trots krokens namn används den för både manus och stilar. Här är ett exempel på hur en stilmall och en javascript-fil ställs i kö i ett tema:
add_action('wp_enqueue_scripts', function() {
// Styles
wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/style.css', [], '1.0');
// Scripts
wp_enqueue_script('main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery'], '', true);
});Det tredje argumentet för både stilar och skript är en array med beroenden. För skript kanske du vill ladda jQuery-biblioteket före din skriptfil. Obs: WordPress-installationer kommer med ett gäng vanliga skriptbibliotek (till exempel jQuery, jQuery UI, Backbone och Underscore). Så länge du lägger till något av dessa handtag som beroende i ditt enqueue_script kommer WordPress att ställa dessa i kö, så du behöver inte lägga till dina egna filer för dessa bibliotek.
Det femte argumentet för skript är huruvida skriptet ska laddas i slutet av <body>(i sidfoten) istället för inuti <head>taggen.
För användning i ett plugin måste du använda andra metoder för att få URL:en till en lokal fil, till exempel plugin_dir_url(__FILE__).
Lägga till skript och stilar till admin
WordPress erbjuder en annan krok, admin_enqueue_scripts, för att lägga till stilar och skript endast för admin. Använd samma metoder som ovan för att registrera, ställa i kö och lokalisera skript och stilar:
add_action('admin_enqueue_scripts', function() {
global $pagenow, $post_type;
// Example: $hook == 'edit.php'
// Example: $post_type == 'post'
// wp_enqueue_style or wp_enqueue_script
});Lägga till skript och stilar på inloggningssidan
Eftersom ingen av krokarna ovan visas på administratörsinloggningsskärmen, erbjuder WordPress en separat krok för detta ändamål, login_enqueue_scripts.
add_action('login_enqueue_scripts', function() {
// wp_enqueue_style or wp_enqueue_script
});Utmatning av Javascript-variabler
För utmatning av Javascript-variabler (t.ex. att hämta sökvägar, översatta strängar eller andra variabler, kan du använda wp_localize_script. Den här funktionen kräver en köad skripthandtag. Den andra parametern skulle vara variabelnamnet och den tredje dess värde. Värdet kan vara en array, som så. :
Inuti ditt skript har du tillgång till de variabler som skickas, så här:
jQuery(document).ready(function($) {
console.log(Theme_Variables.ajax_url);
});I denna hook kan du komma åt globala variabler $pagenowoch $post_typeför att ytterligare specificera var du vill ställa dina stilar och skript i kö.
Utmatning av inline-stilar
Om du behöver mata ut inline-stilar, till exempel för temavariabler du har ställt in i Customizer (t.ex. med get_theme_mod), kan du mata ut dessa genom att använda wp_add_inline_stylefunktionen. Det fungerar ganska likt att mata ut Javascript-variabler, där du måste tillhandahålla ett stilhandtag i kö:
add_action('wp_enqueue_scripts', function() {
// wp_enqueue_style('main-style'); // Must exist!
$color = get_theme_mod('my-custom-color'); // e.g. #FF0000
$custom_css = "
body {
background: {$color};
}";
wp_add_inline_style('main-style', $custom_css);
});Lägga till asynkrona taggar till skript
Tyvärr finns det ingen direkt funktion eller filter att lägga asynctill i dina skripttaggar, men vi kan uppnå detta genom att manipulera strängen som WordPress använder för att mata ut skripttaggarna för alla köade skript, som så (kom ihåg att ange ditt skript med handtaget):
Användbara dokumentationslänkar
- wp_enqueue_scripts (hook)
- admin_enqueue_scripts (hook)
- login_enqueue_scripts (hook)
- wp_enqueue_style
- wp_dequeue_style
- wp_enqueue_script
- wp_dequeue_script
- wp_localize_script
- wp_add_inline_style