jQuery e WordPress: farli cooperare una volta per tutte
Come probabilmente ben saprete – e mi rivolgo ai lettori che già hanno avuto esperienza con il suddetto CMS – WordPress ha una gestione davvero difficile per quanto riguarda l‘inclusione degli script .
In questa guida andremo a vedere come implementare uno script jQuery su WordPress, partendo dalle pratiche più semplici, che però potrebbero riservare qualche brutta sorpresa, fino ad arrivare a quelle maggiormente complesse ma più funzionali.
1. Inclusione dello script dentro i tag head
La prima cosa che salta in mente e che viene naturale provare a mettere in pratica, è quella di aggiungere lo script in questione nel file header.php, subito prima la chiamata della funzione “wp_head()”, con una semplice inclusione del tipo:
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/script.js" type="text/javascript"></script>
dove “script.js” sarà il nostro script, che si troverà dentro la cartella che abbiamo chiamato “js”. La funzione get_stylesheet_directory_uri(), invece, servirà a richiamare l’url della cartella dove si trova il nostro tema.
Vi assicuro che è un gran risparmio di fatica, difatti, senza l’utilizzo della suddetta funzione, si sarebbe dovuto scrivere qualcosa come:
<script src="wp-content/themes/miotema/js/script.js" type="text/javascript"></script>
Sembra facile, vero? In realtà, questo primo metodo, nonostante sia molto semplice e possa apparire anche efficace, molto probabilmente risulterà non funzionante nell’80% dei casi, motivo per cui è bene imparare a utilizzare il metodo di lavoro spiegato nel prossimo paragrafo, tra l’altro previsto anche dalla documentazione ufficiale di WordPress.
2. Registrazione dello script nel file function.php
Premesso che oggi non parleremo di come creare un file function.php, andiamo a vedere il codice PHP necessario per far riconoscere lo script a WordPress.
Il file function.php, come suggerisce il nome, permette di aggiungere funzioni molto potenti al nostro tema, come ad esempio la registrazione (ovvero l’implementazione dentro i tag head) di file di stile e di script javascript.
Ricordandoci che naturalmente jQuery è un framework JS, e quindi i metodi di registrazione sono i medesimi, scopriamo come usare le funzioni wp_register_script e wp_enqueue_script per inserire i nostri script jQuery, analizzando il codice che segue:
function aggiungi_script() {
if(!is_admin()) {
wp_register_script('script', get_template_directory_uri().'/js/script.js', array('jquery'), '1.0', false);
wp_enqueue_script('script');
}
}
add_action( 'wp_enqueue_scripts', 'aggiungi_script' );
Innanzitutto, come possiamo vedere, si crea una nuova funzione, in questo caso denominata “aggiungi_script”, all’interno della quale si troverà il nostro codice.
Successivamente, aggiungiamo la condizione if !is_admin(), che ha lo scopo di non far eseguire lo script se ci troviamo nel backend (area di amministrazione) di WordPress, onde evitare eventuali problemi aggiuntivi.
Infine, proprio dentro la condizione if, aggiungiamo due funzioni:
1) wp_register_script(), con all’interno diversi parametri:
- il nome dello script, nel nostro caso “script”;
- la posizione dello script;
- la libreria da cui dipende lo script, nel nostro caso ovviamente sarà jQuery;
- la versione dello script;
- un valore boolean, che se impostato su false caricherà lo script all’interno dell’header; se, al contrario, il valore sarà “true”, lo script sarà incluso nel footer;
2) wp_enqueue_script(), dove sarà specificato solo il nome dello script da “mettere in coda” (“enqueue” significa proprio questo) all’interno dell’head.
Questa due funzioni, come già detto, avranno il compito di registrare lo script, anche se per farlo funzionare, e quindi includerlo dentro la pagina html, come si può notare, servirà la funzione add_action() con due parametri: l’azione da eseguire e la funzione correlata.
3. Usare un namespace per il simbolo $
Se siete arrivati fino a questo punto, e lo script risulta di fatto implementato anche se non ancora funzionante, allora quasi sicuramente il vostro problema può dipendere dal simbolo del dollaro, o meglio $, che istanzia qualsiasi oggetto, fungendo da alias per la dicitura “jQuery”.
Nonostante sia un simbolo molto comodo, spesso può creare problemi se si usano altri framework quali Prototype o simili.
Usiamo perciò un metodo molto comodo, che tra l’altro non prevede nemmeno l’utilizzo del noConflict (altro argomento che esula da questo tutorial): stiamo parlando dell’assegnazione di un namespace a $.
L’operazione, anche per chi non l’avesse mai fatta, è davvero basilare, difatti il codice per lo script sarà il seguente:
jQuery(document).ready(function($){
//Codice qui
});
Da questo momento, ogni alias $ sarà cambiato in “jQuery”, per assicurarvi l’assenza di conflitti.
Esempio
Immaginiamo ora di voler centrare una pagina di login dove centrare due elementi: un logo, di classe .logo, ed un form contenente diversi elementi input, di classe .center.
Il nostro obiettivo sarà quello di centrare il logo orizzontalmente, mentre il form, sia orizzontalmente che verticalmente.
Ovviamente, potremmo provare con un po’ di codice jQuery, ovvero:
$(document).ready(function(){
$('.logo').css({
marginLeft: ($(window).width()-$('.logo').width())/2
});
$('.center').css({
marginTop: ($(window).height()-$('.center').height())/2,
marginLeft: ($(window).width()-$('.center').width())/2
});
});
Proviamo quindi con il punto 1, e se tutto andrà come previsto, lo script risulterà non funzionante come si può osservare con l’immagine di seguito:
Al contrario, seguendo i punti 2 e 3, il risultato sarà certamente quello desiderato, rappresentato dall’immagine sottostante:
Il tutorial termina qui.
Come sempre, se avete dubbi o per caso il vostro codice dovesse non ancora funzionare, chiedete pure nei commenti.
L'autore
20 commenti
Trackback e pingback
-
jQuery e WordPress: farli cooperare una volta p...
[…] Come probabilmente ben saprete - e mi rivolgo ai lettori che già hanno avuto esperienza con il suddetto CMS…
Interessante articolo…
Ciao una domanda. Nei nostri file header.php o footer.php dovremmo inserire qualche riga di codice particolare o bastano le funzioni wp_head o wp_footer?
Ciao Paolo,
grazie per la domanda. In effetti bastano semplicemente wp_head e wp_footer per il corretto funzionamento dello script, WordPress si occupa di posizionarlo, grazie al valore booleano sopra riportato, in maniera del tutto automatica.
Ottimo… Proprio quello che cercavo.
Grazie mille Vilson,
sono contento di esserti stato utile!
Ciao, complimenti per l’articolo ma se voglio importare più files contemporaneamente di script diversi che appartengono a plugin differenti jquery? replico il tutto?
Ammettiamo di importare uno script jquery per isotope ed uno per gestire un menu responsive faccio per due il codice sopra?
Ciao Marco,
per aggiungere due script contemporaneamente, basterà scrivere un codice del genere:
function aggiungi_script() {
if(!is_admin()) {
wp_register_script(‘script’, get_template_directory_uri().’/js/script.js’, array(‘jquery’), ‘1.0’, false);
wp_register_script(‘isotope’, get_template_directory_uri().’/js/jquery.isotope.js’, array(‘jquery’), ‘1.0’, false);
wp_enqueue_script(‘script’);
wp_enqueue_script(‘isotope’);
}
}
add_action( ‘wp_enqueue_scripts’, ‘aggiungi_script’ );
Ciao, e complimenti per questo e tutti gli altri articoli.
Una domanda.
Come tutti sappiamo, spesso è molto importante l’ordine in cui vengono inclusi più javascript. A volte basta chiamare uno prima di un altro , piuttosto che il viceversa, per avere dei problemi.
Il tutto sopratutto quando si utilizzano più librerie dipendenti da jQuery.
Al momento della registrazione e della “messa in coda” (nel function.php) di eventuali più javascript dipendenti da jQuery, le “precedenze” vengono gestite correttamente ? O anche in questo caso abbiamo bisogno di utilizzare un wp_enqueque_script() prima di un altro o viceversa ?
Grazie
Ciao Francesco,
grazie per i complimenti,
è sempre preferibile mettere in successione gli script in base alle dipendenze, proprio come avviene con la semplice inclusione nei tag .
Non è però obbligatorio, in quanto il codice PHP, come ben sappiamo viene elaborato tutto prima di essere inviato al client. Con ciò voglio dire che, una volta assegnate le dipendenze allo script all’interno dell’array, proprio dove noi abbiamo scritto array(‘jquery’), in automatico, una volta effettuato l’output della pagina, saranno posizionate successivamente all’inclusione di jQuery.
Scusami se non sono stato chiarissimo a causa del gran mal di testa che mi sta assalendo in questi giorni, e se dovessi avere ulteriori dubbi, ti prego di rispondere a questo commento.
Sei stato chiarissimo,
grazie mille.
ciao complimenti per l’articolo, io sono un novello di wordpress e volevo sapere come mettere un “accordion” dentro un tema wordpress esattamente questo script
$(function(){
$(“#accordion .expanded”).hide();
$(“a.opening”).click(function(){
$(this).next().slideToggle(‘fast’, function(){
$(this).prev(“a.opening”).toggleClass(“active”);
});
return false;
});
});
Ciao ho trovato questo articolo piuttosto chiaro a differenza di altri un po’ troppo disordinati..
Ho seguito l’articolo e ho aggiunto le righe in funtions.php
precedentemente avevo già aggiunto delle righe in style.css
Ho due quesiti
Poiché il Java Deve funzionare esattamente nella pagina header.php mi chiedevo questi 3 codici dove vanno
1) <script src="/js/mio.js” type=”text/javascript”>
Attualmente precede (wp_head)
2) Subito dopo
jQuery(document).ready(function($){
//Codice qui
});
E infine non so dove mettere
function ticker(){
$(‘#ticker li:first’).slideUp( function () { $(this).appendTo($(‘#ticker’)).slideDown(); });
}
setInterval(function(){ ticker () }, 3000);
E inoltre
errata corrige
Ho fatto un sacco di tentativi
Ho capito non è necessario
jQuery(document).ready(function($){
//Codice qui
});
Nella versione 4 di wordpress.
Grande articolo.
Seguirò il sito per chiarire ulteriori dubbi
Grazie mille
Ciao Max,
grazie per la segnalazione (mi riferisco a questo commento ed al precedente).
Per impegni lavorativi, non ho potuto testare su mano WordPress 4.0, tuttavia mi sembra difficile che WordPress assegni un wrap automatico a degli script jQuery inseriti manualmente all’interno del function.php o header che sia.
Per caso hai inserito il suddetto codice attraverso qualche plugin raggiungibile dall’area amministrativa di WordPress?
Grazie mille per la collaborazione,
Rinaldo
sono necessarie entrambe le funzioni wp_enqueue_script e wp_register_script o basta solo wp_enqueue_script?lo chiedo perchè in altri articoli ho letto così però non ho ben capito la differenza
Sto provando a far funzionare uno script che dovrebbe posizionare il footer a fondo pagina, questo per la precisione https://www.yourinspirationweb.com/2013/09/24/sticky-footer-come-posizionare-il-footer-in-fondo-alla-pagina, seguendo i suggerimenti che dai qui ma non riesco.
Dato che sono imbranato ti elenco i passi che ho fatto così magari puoi indicarmi dove sbaglio.
ho creato nella cartella del mio tema child una cartella js e vi ho inserito il file contenente lo script, che è questo
// sticky footer plugin
$(document).ready(function(){
var footer;
$.fn.extend({
stickyFooter: function(options) {
footer = this;
positionFooter();
$(window)
.on(‘sticky’, positionFooter)
.scroll(positionFooter)
.resize(positionFooter);
function positionFooter() {
var docHeight = $(document.body).height() – $(“#sticky-footer-push”).height();
if(docHeight 0) {
$(footer).before(”);
}
if( $(‘#wpadminbar’).length > 0 ) {
diff -= 28;
}
$(“#sticky-footer-push”).height(diff);
}
}
}
});
$(‘#footer’).stickyFooter();
})(jQuery);
ho inserito in function.php del tema child queste righe
function add_script() {
if(!is_admin()) {
wp_register_script(‘sticky-footer’, get_template_directory_uri().’/js/sticky-footer.js’, array(‘jquery’), ‘1.0’, true);
wp_enqueue_script(‘sticky-footer’);
}
}
add_action( ‘wp_enqueue_scripts’, ‘add_script’ );
ma non succede niente, sbaglio qualcosa?
Grazie
Ciao Riccardo,
ho letto con attenzione il tuo articolo e ho provato a implementare un mio script che avevo costruito per il sito di mia moglie (sito statico, tipico in HTML).
Ti spiego riassumendo:
Lo script definisce, in base alla data attuale, il giusto segno astrologico del momento, estrae il segno zodiacale (un testo, per . es. “Acquario”), estrae la corrispondente pietra zodiacale legata a questo segno (es. “Lapislazzuli”) ed estrae anche l’immagine di questa pietra. Il tutto viene visualizzato sulla hompage. Come detto sul sito statico attuale.
Da un paio di settimane sto prendendo confidenza con WordPress perché vorrei fare il porting del sito statico con una struttura più al passo coi tempi. Naturalmente non voglio fare questo porting in scala 1:1 ma vorrei prendere dal vecchio sito alcune cose che reputo comunque ok. Una di queste è appunto questo benedetto JavaScript di visualizzazione come citato sopra.
Ho provato a fare i call delle funzioni direttamente nella pagina home del sito di test di WP e cosa singolare, i testi mi vengono visualizzati correttamente, tutto perfetto. L’immagine invece non c’è verso di farla apparire (ho il classico quadrettino vuoto!).
E’ possibile ch’io faccia un errore di fondo, vale a dire, di concetto o di principio? In questo caso mi crescerebbe una barba bianca da far invidia a Matusalemme (e senza arrivare a un risultato!).
Se gentilmente pensi di potermi rispondere, sono chiaramente a tua disposizione per gli approfondimenti del caso.
Te ne sarei davvero grato
Grazie in anticipo e un saluto
Ernesto
Ho inserito il codice in una pagina di prova in WP, funziona, ma non trova il jQuery che deve rallentare lo scorrimento.
Nel functions.php c’è questo:
[pre]wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );[/pre]
nella pagina
[pre]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam
risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus
ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum
malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra.
Torna su
jQuery(document).ready(function($)
{
function ScorriPagina(Posizione, Velocita)
{
$(“html,body”).animate({scrollTop: Posizione}, Velocita, function(){});
return false;
}
$(“.torna-su”).click(function()
{
//Lo scroll avverrà per 0 pixel (e cioè posizione da raggiungere) ad una velocità di 1 secondo
ScorriPagina(0, 1000);
});
});
[/pre]
come contattarla?
dal 2015 non scrive più