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.<\/p>\n
Script e stili possono essere registrati e accodati definendo handle univoci (ID slug), consentendo a WordPress di eliminare i duplicati, come pi\u00f9 librerie jQuery, e di gestire le dipendenze (quale stile o script caricare prima di questo e quello) .<\/p>\n
Se non c’\u00e8 bisogno specifico di registrare stili o script, puoi semplicemente accodarli subito, saltando la registrazione. \u00c8 anche possibile annullare la registrazione o rimuovere dalla coda stili e script ( PS: l’aggiunta di stili e script a Gutenberg (sia admin che frontend block), \u00e8 spiegata nel mio post Gutenberg: The Basics<\/a>.<\/p>\n Per aggiungere stili e script solo al frontend, usa l’hook Il terzo argomento sia per gli stili che per gli script \u00e8 un array con dipendenze. Ad esempio, per gli script potresti voler caricare la libreria jQuery prima del tuo file di script. Nota<\/strong>: le installazioni di WordPress vengono fornite con una serie di librerie di script comuni incluse (ad esempio jQuery, jQuery UI, Backbone e Underscore). Finch\u00e9 aggiungi uno di questi handle<\/a> come dipendenza nel tuo enqueue_script, WordPress li accoder\u00e0, quindi non devi aggiungere i tuoi file per queste librerie.<\/p>\n Il quinto argomento per gli script \u00e8 se lo script debba essere caricato o meno alla fine di Per l’uso in un plug-in \u00e8 necessario utilizzare altri metodi per ottenere l’URL di un file locale, ad esempio WordPress offre un altro hook, Poich\u00e9 nessuno degli hook sopra appare nella schermata di accesso dell’amministratore, WordPress offre un hook separato per questo scopo, 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\u00f2 essere un array, in questo modo :<\/p>\n All’interno del tuo script hai accesso alle variabili passate, in questo modo:<\/p>\n In questo hook puoi accedere alle variabili globali Se hai bisogno di produrre stili in linea, ad esempio per le variabili del tema che hai impostato in Customizer (ad esempio usando Sfortunatamente non ci sono funzioni o filtri diretti da aggiungere wp_dequeue_script<\/code>e wp_dequeue_style<\/code>) facendo riferimento all’handle. Di solito aiuta ad aggiungere un numero pi\u00f9 alto nella priorit\u00e0 del gancio (facendolo correre dietro al gancio in cui sono stati accodati gli elementi).<\/p>\nAggiunta di script e stili al frontend<\/h2>\n
wp_enqueue_scripts<\/code>. 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:<\/p>\nadd_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<body><\/code>(nel pi\u00e8 di pagina), invece che all’interno del <head><\/code>tag.<\/p>\nplugin_dir_url(__FILE__)<\/code>.<\/p>\nAggiunta di script e stili all’amministratore<\/h2>\n
admin_enqueue_scripts<\/code>, 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:<\/p>\nadd_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>\nAggiunta di script e stili alla pagina di accesso<\/h2>\n
login_enqueue_scripts<\/code>.<\/p>\nadd_action('login_enqueue_scripts', function() {\n \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\nOutput di variabili Javascript<\/h2>\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>\njQuery(document).ready(function($) { \n console.log(Theme_Variables.ajax_url);\n});<\/code><\/pre>\n$pagenow<\/code>e $post_type<\/code>specificare ulteriormente dove vuoi accodare i tuoi stili e script.<\/p>\nOutput di stili in linea<\/h2>\n
get_theme_mod<\/code>), puoi emetterli usando la wp_add_inline_style<\/code>funzione. Funziona in modo abbastanza simile all’output di variabili Javascript, in cui \u00e8 necessario fornire un handle di stile accodato:<\/p>\nadd_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>\nAggiunta di tag asincroni agli script<\/h2>\n
async<\/code>ai tag di script, ma possiamo ottenere ci\u00f2 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):<\/p>\nadd_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>\nLink utili alla documentazione<\/h2>\n
\n