Guida WordPress – Come Includere jQuery e CSS

Scritto da fedeweb il 18 febbraio 2013 con 2 Commenti | Pubblicato in Guide Wordpress


Per le guide WordPress, oggi voglio mostrarti qual è il modo più corretto per includere plugin jQuery o fogli di stile CSS in WordPress.

Guida WordPress - Includere jQuery e CSS

Ci sono delle funzioni pensate apposta per questo compito:

  • wp_register_script() e wp_enqueue_script() per caricare gli script;
  • wp_register_style() e wp_enqueue_style() per i fogli di stile.

Probabilmente già conosci queste funzioni, vediamo un esempio di utilizzo:

wp_register_script( 'site', get_template_directory_uri().'/js/site.js', array( 'jquery' ),1);
wp_enqueue_script( 'site' ); 

Anch’io fino a poco tempo fa la scrivevo come sopra, ma poi grazie ai suggerimenti di Andrea Cardinali al WordCamp di Bologna, ora la funzione la scrivo in questo modo:

wp_register_script( 'site', get_template_directory_uri().'/js/site.js', array( 'jquery' ),null,true );
wp_enqueue_script( 'site' ); 

I primi tre parametri sono uguali in entrambi gli esempi, quelli che cambiano sono gli ultimi due, che rappresentano il versionamento e dove vengono caricati gli script.

Mettendo il versionamento a “null” si consente il caching degli script e del css, cosa non possibile se la versione è presente.

Il parametro true invece permette di caricare tutti gli script “in fondo“, prima della chiusura del tag </body>.

Lo stesso vale per i fogli di stile CSS, dove non va utilizzato il parametro true dato che questi vanno caricati all’inizio, tra i tag head.

Per tutti i dettagli sulle funzioni, ti consiglio di visitare il codex di WordPress.

Template con navigazione orizzontale animata, realizzato in HTML, CSS e jQuery

437 download

711 download

About fedeweb

Federico Pian è un web designer freelance e insegnante , che ama condividere le proprie conoscenze e rendere tutti partecipi della sua passione. Guarda il suo portfolio e cosa sa fare nei tutorial. Scopri più informazioni su di lui nella pagina mi presento.

2 Commenti

  1. Mi sa che c’è un errore di copia-incolla :) I due codici sono uguali :P

    • Controlla bene ;)

Lascia un commento