Come caricare stili css e script nell’header o footer di WordPress

Nella guida di oggi vediamo come caricare stili e script all’interno dell’header o footer di WordPress attraverso l’uso delle funzioni wp_enqueue_script e wp_enqueue_style

Se siete stanchi di incasinare il file header.php di WordPress con il caricamento di stili o javascript, o più semplicemente volete rendere i caricamenti più ordinati e controllati questo articolo fa proprio al caso vostro.

Funzione WordPress  wp_enqueue_style

[button link=”http://codex.wordpress.org/Function_Reference/wp_enqueue_style” color=”blue” target=”blank” size=”large”]Documentazione[/button]

La funzione wp_enqueue_style permette di caricare fogli di stile direttamente nell’header di WordPress specificando quest’ultimi all’interno di functions.php del tuo tema. Questi stili saranno poi richiamati all’interno del file header.php automaticamente dove hai piazzato la funzione wp_head(). Possiamo specificare qualsiasi foglio di stile, dal framework css (ad esempio Bootstrap), al caricamento dei font tramite Google. Ecco un esempio di codice molto esplicativo:

function theme_scripts() {

[...]

//Css framework
wp_enqueue_style( 'theme-style-framework', get_template_directory_uri() . '/css/bootstrap.min.css' );

//Fonts
wp_enqueue_style( 'theme-fonts', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900,300italic,400italic' );

//Richiama il file stile principale style.css
wp_enqueue_style( 'theme-style', get_stylesheet_uri() );

[...]
}//Function enqueue
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Funzione WordPress wp_enqueue_script

[button link=”http://codex.wordpress.org/Function_Reference/wp_enqueue_script” color=”blue” target=”blank” size=”large”]Documentazione[/button]

Similarmente a quanto accade per wp_enqueue_style, grazie a wp_enqueue_script possiamo caricare dinamicamente nel nostro tema file js di qualsiasi tipo.

function theme_scripts() {

[...]

//Theme Custom
wp_enqueue_script( 'theme-custom', get_template_directory_uri() . '/js/custom.js', array(), false, true );

[...]
}//Function enqueue
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Come avrete notato, rispetto alla versione style che richiedeva solo nome dell’handler e percorso al file, I parametri utilizzabili da enqueue_script  sono i seguenti:

  • $handle – Indica il nome usato per manipolare il caricamento dello script.
  • $src – Come per la versione style, indica il percorso allo script. Default:false.
  • $deps – Permette di indicare se questo script va caricato dopo un altro (ad esempio una libreria) in quanto necessaria al suo funzionamento. Default: array().
  • $ver – Permette di specificare la versione dello script caricato. Default: false
  • $in_footer – Permette di caricare il file js nel footer anzichè all’interno dell’header di wordpress. Default:false.

Condizionali di caricamento utili

Uno dei “problemi” di WordPress è la velocità di caricamento, non propriamente eccelsa, che genera la necessità di caricare e rendere selettivo il caricamento degli script. Per fare questo ci vengono in aiuto alcune funzioni molto utili messe a disposizione dal core di WordPress.

Se volessimo caricare le librerie js dei commenti, ad esempio, sarebbe utile caricarle solamente all’interno della vista singola (single.php) e non in tutto il sito in quanto di fatto non verrebbero utilizzate e rallenterebbero solo il caricamento. Ecco come fare:

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
   wp_enqueue_script( 'comment-reply' );
}

Lista dei tag condizionali offerti di WordPress:

[button link=”http://codex.wordpress.org/Conditional_Tags” color=”blue” target=”blank” size=”large”]Documentazione[/button]

Conclusioni

Usare queste funzioni per caricare stili e script dovrebbe essere alla base di tutti coloro che vogliono usare WordPress in modo professionale. Conoscevi questa tecnica? Fammi sapere cosa ne pensi nei commenti!

  1. Ciao!

    Non riesco a spostare il menu secondario tutto a destra (sarebbe bello anche sopra al menu principale ma mi accontento), le ho provate tutte: margin, float, in tutti i posti iun cui vedevo scritto Secondary menu. Come posso fare? Non sono neanche un’esperta e ho paura di mandare in tilt tutto….. Se mi aiuti potrei farti un po’ di pubblicità sui social…. Grazieeee

  2. Ciao Riccardo grazie alla tua guida sto imparando passo a passo un po WordPress. Ti volevo chiedere come mai nello script per il caricamento dei fogli di style nel add_action c’è scritto wp_enqueue_scripts e non wp_enqueue_style?
    Mi daresti un chiarimento?
    Grazie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Modern Touch UI FLAT in formato PSD

Modern Touch UI FLAT in formato PSD