Come caricare file css e js relativi al tema

Torna a Articoli

Come caricare file css e js relativi al tema

Ogni tema ha diversi file di stile e file javascript che devono essere caricati nelle pagine web.

WordPress nel corso degli anni ha ampliato il suo codice per renderlo per renderlo molto più flessile e per l’incorporamento dei file css e js ha fornito una serie di strumenti che, se utilizzati correttamente, permettono di evitare di caricare codice duplicato.

 

Come NON incorporare css o js

Una cattiva abitudine seguita per diverso tempo anche dopo che WordPress aveva fornito gli strumenti per l’incorporamento dei css e js era quella di aggiungere il codice in header.php
<link rel="stylesheet" href="<?php echo get_stylesheet_url();?>
oppure direttamente nella function.php


<?php
function add_stylesheet_to_head() {
echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">';
} add_action('wp_head','add_stylesheet_to_head');

?>


In questi due casi sopra WordPress non è in grado di verificare se il codice inserito sia già stato caricato e provvede a caricarlo nuovamente e questo potrebbe essere un terribile errore!!!

 

Come incorporare file css

Come già detto all’inizio dell’articolo Worpress ha fornito diversi strumenti per l’incorporamento di file css all’interno delle pagine web.

Registra i file css che vuoi incorporare utilizzando la funzione

<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>

  • $handle (stringa, obbligatorio) è il nome che scegli di assegnare allo stile
  • $src (stringa, obbligatorio) è la URL del foglio di stile
  • $deps (array, opzionale) gestisce i nomi per gli stili dipendenti
  • $ver (stringa o booleano, opzionale) rappresenta il numero della versione
  • $media (stringa, opzionale) per quale supporto è lo stile es. screen, print ecc.

La registrazione dei fogli di stile è opzionale ma solo nel caso in cui pensi che questi file non verranno caricati in altri plugin o altre parti di codice.

Dopo aver registrato il css devi accodarlo in modo che sia pronto per il caricamento nella sezione <head> del tema utilizzando la funzione che segue

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

  • $handle (stringa, obbligatorio) è il nome che scegli di assegnare allo stile
  • $src (stringa, obbligatorio) è la URL del foglio di stile
  • $deps (array, opzionale) gestisce i nomi per gli stili dipendenti
  • $ver (stringa o booleano, opzionale) rappresenta il numero della versione
  • $media (stringa, opzionale) per quale supporto è lo stile es. screen, print ecc.

Segue un esempio del codice da inserire in function.php di come utilizzare entrambe le funzioni per caricare i css nelle pagine


<?php
function add_styles() {
wp_register_style('my_stylesheet', get_stylesheet_url().'style.css');
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'add_styles' ); 
?>

Nota bene
La funzione add_action richiama wp_enqueue_script e non wp_enqueue_style!!!
Si utilizza
  • wp_enqueue_scripts  per caricare stili e script nelle pagine del front-end
  • admin_enqueue_scripts  per caricare stili e script nelle pagine del pannello di amministrazione
  • login_enqueue_scripts  per caricare stili e script nella pagina di login

Come incorporare file js

Per registrare gli script

<?php wp_register_style( $handle, $src, $deps, $ver, $in_footer ); ?>

  • $handle (stringa, obbligatorio) è il nome che scegli di assegnare allo stile
  • $src (stringa, obbligatorio) è la URL del foglio di stile
  • $deps (array, opzionale) gestisce i nomi per gli stili dipendenti
  • $ver (stringa o booleano, opzionale) rappresenta il numero della versione
  • $in_footer ( booleano, opzionale) se true aggiunge lo stile prima di </body> altrimenti nella <head>

Da notare che attraverso questa azione possiamo specificare dove va caricato lo script, o nel footer se true il parametro $in_footer altrimenti nella sezione <head> del documento. Poi si può procedere come visto per il caricamento dello stile.


<?php 
function add_scripts() {
wp_register_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_script');
} 
add_action( 'wp_enqueue_scripts', 'add_scripts' ); 
?>

Condividi questo post

Lascia un commento

Torna a Articoli