CodiceSviluppatoreGuida per principianti

Tutto sull’aggiunta di stili e script in WordPress

Last updated Nov 11, 2022

Contenuto

Aggiunta di script e stili al frontend

Aggiunta di script e stili all’amministratore

Aggiunta di script e stili alla pagina di accesso

Output di variabili Javascript

Output di stili in linea

Aggiunta di tag asincroni agli script

Link utili alla documentazione

WordPress offre diversi metodi per aggiungere stili e script per frontend e amministratore, sia per l’aggiunta di file che per l’output diretto di variabili/output. Questo post entra nel dettaglio con esempi di codice su come aggiungere script e stili a WordPress nel modo corretto.

Script e stili possono essere registrati e accodati definendo handle univoci (ID slug), consentendo a WordPress di eliminare i duplicati, come più librerie jQuery, e di gestire le dipendenze (quale stile o script caricare prima di questo e quello) .

Se non c’è bisogno specifico di registrare stili o script, puoi semplicemente accodarli subito, saltando la registrazione. È anche possibile annullare la registrazione o rimuovere dalla coda stili e script (wp_dequeue_scripte wp_dequeue_style) facendo riferimento all’handle. Di solito aiuta ad aggiungere un numero più alto nella priorità del gancio (facendolo correre dietro al gancio in cui sono stati accodati gli elementi).

PS: l’aggiunta di stili e script a Gutenberg (sia admin che frontend block), è spiegata nel mio post Gutenberg: The Basics.

Aggiunta di script e stili al frontend

Per aggiungere stili e script solo al frontend, usa l’hook wp_enqueue_scripts. Nonostante il nome dell’hook, viene utilizzato sia per gli script che per gli stili. Ecco un esempio di accodamento di un foglio di stile e di un file javascript in un 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);
});

Il terzo argomento sia per gli stili che per gli script è un array con dipendenze. Ad esempio, per gli script potresti voler caricare la libreria jQuery prima del tuo file di script. Nota: le installazioni di WordPress vengono fornite con una serie di librerie di script comuni incluse (ad esempio jQuery, jQuery UI, Backbone e Underscore). Finché aggiungi uno di questi handle come dipendenza nel tuo enqueue_script, WordPress li accoderà, quindi non devi aggiungere i tuoi file per queste librerie.

Il quinto argomento per gli script è se lo script debba essere caricato o meno alla fine di <body>(nel piè di pagina), invece che all’interno del <head>tag.

Per l’uso in un plug-in è necessario utilizzare altri metodi per ottenere l’URL di un file locale, ad esempio plugin_dir_url(__FILE__).

Aggiunta di script e stili all’amministratore

WordPress offre un altro hook, admin_enqueue_scripts, per aggiungere stili e script solo all’amministratore. Utilizzare gli stessi metodi di cui sopra per la registrazione, l’accodamento e la localizzazione di script e stili:

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
});

Aggiunta di script e stili alla pagina di accesso

Poiché nessuno degli hook sopra appare nella schermata di accesso dell’amministratore, WordPress offre un hook separato per questo scopo, login_enqueue_scripts.

add_action('login_enqueue_scripts', function() {
    // wp_enqueue_style or wp_enqueue_script
});

Output di variabili Javascript

Per l’output di variabili Javascript (ad es. ottenere percorsi, stringhe tradotte o altre variabili, puoi utilizzare wp_localize_script. Questa funzione richiede un handle di script accodato. Il secondo parametro sarebbe il nome della variabile e il terzo il suo valore. Il valore può essere un array, in questo modo :

add_action('wp_enqueue_scripts', function() {
    // wp_enqueue_script('main-script');  // Must exist!
    $variable_to_js = [
        'ajax_url' => admin_url('admin-ajax.php')
    ];
    wp_localize_script('main-script', 'Theme_Variables', $variable_to_js);
});

All’interno del tuo script hai accesso alle variabili passate, in questo modo:

jQuery(document).ready(function($) { 
    console.log(Theme_Variables.ajax_url);
});

In questo hook puoi accedere alle variabili globali $pagenowe $post_typespecificare ulteriormente dove vuoi accodare i tuoi stili e script.

Output di stili in linea

Se hai bisogno di produrre stili in linea, ad esempio per le variabili del tema che hai impostato in Customizer (ad esempio usando get_theme_mod), puoi emetterli usando la wp_add_inline_stylefunzione. Funziona in modo abbastanza simile all’output di variabili Javascript, in cui è necessario fornire un handle di stile accodato:

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);
});

Aggiunta di tag asincroni agli script

Sfortunatamente non ci sono funzioni o filtri diretti da aggiungere asyncai tag di script, ma possiamo ottenere ciò manipolando la stringa che WordPress utilizza per generare i tag di script per tutti gli script accodati, in questo modo (ricorda di specificare il tuo script tramite il suo handle):

add_filter('script_loader_tag', function($tag, $handle, $src) {
    if ('main-script' != $handle) {
        return $tag;
    }
    return str_replace('<script', '<script async', $tag);
}, 11, 3);

Link utili alla documentazione

Fonte di registrazione: awhitepixel.com