{"id":233747,"date":"2023-02-22T18:36:00","date_gmt":"2023-02-22T15:36:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233747"},"modified":"2022-11-11T12:10:40","modified_gmt":"2022-11-11T09:10:40","slug":"allt-om-att-laegga-till-stilar-och-skript-i-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/allt-om-att-laegga-till-stilar-och-skript-i-wordpress\/","title":{"rendered":"Allt om att l\u00e4gga till stilar och skript i WordPress"},"content":{"rendered":"\n

WordPress erbjuder flera metoder f\u00f6r att l\u00e4gga till stilar och skript f\u00f6r frontend och admin, b\u00e5de f\u00f6r att l\u00e4gga till filer och direkt utmatning av variabler\/utdata. Det h\u00e4r inl\u00e4gget g\u00e5r i detalj med kodexempel p\u00e5 hur man l\u00e4gger till skript och stilar till WordPress p\u00e5 r\u00e4tt s\u00e4tt.<\/p>\n

Skript och stilar kan registreras och st\u00e4llas i k\u00f6 genom att definiera unika handtag (slugliknande ID), vilket g\u00f6r det m\u00f6jligt f\u00f6r WordPress att eliminera dubbletter, s\u00e5som flera jQuery-bibliotek, och att hantera beroenden (vilken stil eller skript som ska laddas f\u00f6re detta och det) .<\/p>\n

Om det inte finns n\u00e5got specifikt behov av att registrera stilar eller skript, kan du bara st\u00e4lla dem i k\u00f6 direkt och hoppa \u00f6ver registreringen. Det \u00e4r ocks\u00e5 m\u00f6jligt att avregistrera eller avk\u00f6a stilar och skript (wp_dequeue_script<\/code>och wp_dequeue_style<\/code>) genom att h\u00e4nvisa till handtaget. Det hj\u00e4lper vanligtvis att l\u00e4gga till ett h\u00f6gre nummer i krokens prioritet (s\u00e5 att den k\u00f6rs efter kroken d\u00e4r f\u00f6rem\u00e5len st\u00e4lldes i k\u00f6).<\/p>\n

PS: Att l\u00e4gga till stilar och skript till Gutenberg (b\u00e5de admin- och frontend-block), f\u00f6rklaras i mitt inl\u00e4gg Gutenberg: The Basics<\/a>.<\/p>\n

L\u00e4gga till skript och stilar till frontend<\/h2>\n

F\u00f6r att l\u00e4gga till stilar och skript endast till frontend, anv\u00e4nd kroken wp_enqueue_scripts<\/code>. Trots krokens namn anv\u00e4nds den f\u00f6r b\u00e5de manus och stilar. H\u00e4r \u00e4r ett exempel p\u00e5 hur en stilmall och en javascript-fil st\u00e4lls i k\u00f6 i ett tema:<\/p>\n

add_action('wp_enqueue_scripts', function() {\n    \/\/ Styles\n    wp_enqueue_style('main-style', get_stylesheet_directory_uri().'\/style.css', [], '1.0');\n\u00a0\n    \/\/ Scripts\n    wp_enqueue_script('main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery'], '', true);\n});<\/code><\/pre>\n
Det tredje argumentet f\u00f6r b\u00e5de stilar och skript \u00e4r en array med beroenden. F\u00f6r skript kanske du vill ladda jQuery-biblioteket f\u00f6re din skriptfil. Obs<\/strong>: WordPress-installationer kommer med ett g\u00e4ng vanliga skriptbibliotek (till exempel jQuery, jQuery UI, Backbone och Underscore). S\u00e5 l\u00e4nge du l\u00e4gger till n\u00e5got av dessa handtag<\/a> som beroende i ditt enqueue_script kommer WordPress att st\u00e4lla dessa i k\u00f6, s\u00e5 du beh\u00f6ver inte l\u00e4gga till dina egna filer f\u00f6r dessa bibliotek.<\/p>\n
Det femte argumentet f\u00f6r skript \u00e4r huruvida skriptet ska laddas i slutet av <body><\/code>(i sidfoten) ist\u00e4llet f\u00f6r inuti <head><\/code>taggen.<\/p>\n
F\u00f6r anv\u00e4ndning i ett plugin m\u00e5ste du anv\u00e4nda andra metoder f\u00f6r att f\u00e5 URL:en till en lokal fil, till exempel plugin_dir_url(__FILE__)<\/code>.<\/p>\n
L\u00e4gga till skript och stilar till admin<\/h2>\n
WordPress erbjuder en annan krok, admin_enqueue_scripts<\/code>, f\u00f6r att l\u00e4gga till stilar och skript endast f\u00f6r admin. Anv\u00e4nd samma metoder som ovan f\u00f6r att registrera, st\u00e4lla i k\u00f6 och lokalisera skript och stilar:<\/p>\n
add_action('admin_enqueue_scripts', function() {\n    global $pagenow, $post_type;\n    \/\/ Example: $hook == 'edit.php'\n    \/\/ Example: $post_type == 'post'\n    \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\n
L\u00e4gga till skript och stilar p\u00e5 inloggningssidan<\/h2>\n
Eftersom ingen av krokarna ovan visas p\u00e5 administrat\u00f6rsinloggningssk\u00e4rmen, erbjuder WordPress en separat krok f\u00f6r detta \u00e4ndam\u00e5l, login_enqueue_scripts<\/code>.<\/p>\n
add_action('login_enqueue_scripts', function() {\n    \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\n
Utmatning av Javascript-variabler<\/h2>\n
F\u00f6r utmatning av Javascript-variabler (t.ex. att h\u00e4mta s\u00f6kv\u00e4gar, \u00f6versatta str\u00e4ngar eller andra variabler, kan du anv\u00e4nda wp_localize_script. Den h\u00e4r funktionen kr\u00e4ver en k\u00f6ad skripthandtag. Den andra parametern skulle vara variabelnamnet och den tredje dess v\u00e4rde. V\u00e4rdet kan vara en array, som s\u00e5. :<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    \/\/ wp_enqueue_script('main-script');  \/\/ Must exist!\n    $variable_to_js = [\n        'ajax_url' => admin_url('admin-ajax.php')\n    ];\n    wp_localize_script('main-script', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\n
Inuti ditt skript har du tillg\u00e5ng till de variabler som skickas, s\u00e5 h\u00e4r:<\/p>\n
jQuery(document).ready(function($) { \n    console.log(Theme_Variables.ajax_url);\n});<\/code><\/pre>\n
I denna hook kan du komma \u00e5t globala variabler $pagenow<\/code>och $post_type<\/code>f\u00f6r att ytterligare specificera var du vill st\u00e4lla dina stilar och skript i k\u00f6.<\/p>\n
Utmatning av inline-stilar<\/h2>\n
Om du beh\u00f6ver mata ut inline-stilar, till exempel f\u00f6r temavariabler du har st\u00e4llt in i Customizer (t.ex. med get_theme_mod<\/code>), kan du mata ut dessa genom att anv\u00e4nda wp_add_inline_style<\/code>funktionen. Det fungerar ganska likt att mata ut Javascript-variabler, d\u00e4r du m\u00e5ste tillhandah\u00e5lla ett stilhandtag i k\u00f6:<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    \/\/ wp_enqueue_style('main-style');  \/\/ Must exist!\n\u00a0\n    $color = get_theme_mod('my-custom-color');  \/\/ e.g. #FF0000\n    $custom_css = \"\n        body {\n            background: {$color};\n        }\";\n        wp_add_inline_style('main-style', $custom_css);\n});<\/code><\/pre>\n
L\u00e4gga till asynkrona taggar till skript<\/h2>\n
Tyv\u00e4rr finns det ingen direkt funktion eller filter att l\u00e4gga async<\/code>till i dina skripttaggar, men vi kan uppn\u00e5 detta genom att manipulera str\u00e4ngen som WordPress anv\u00e4nder f\u00f6r att mata ut skripttaggarna f\u00f6r alla k\u00f6ade skript, som s\u00e5 (kom ih\u00e5g att ange ditt skript med handtaget):<\/p>\n
add_filter('script_loader_tag', function($tag, $handle, $src) {\n    if ('main-script' != $handle) {\n        return $tag;\n    }\n    return str_replace('<script', '<script async', $tag);\n}, 11, 3);<\/code><\/pre>\n
Anv\u00e4ndbara dokumentationsl\u00e4nkar<\/h2>\n