Inserimento codice Javascript
-
Ciao a tutti.
Sono un nuovo utente, e un quasi nuovo utilizzatore di WordPress.
Sto facendo delle prove su un template gratuito, per iniziare a “mordere” il prodotto.Ho seguito un tutorial che mi permetteva di inserire delle librerie nel mio template (bootstrap e font-awesome) ed è andato tutto liscio.
Adesso volevo aggiungere una libreria javascript per fare delle “progress bar circolari”, ma non riesco a farlo funzionare.
Posto il codice che ho usato per inserire le librerie nel template (function.php)…/*integrazione dei files di bootstrap e del blocco di font Awesome */ function theme_add_bootstrap() { wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array('jquery'), '1.11.3', true); // aggiungere la libreria JQuery wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.css' ); wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array(), '3.3.6', true ); wp_enqueue_script( 'bootwidget', get_template_directory_uri() . '/bootstrap/js/boot-widget.js', array(), '3.3.6', true ); wp_enqueue_style ('bootstrapstyle', get_template_directory_uri() . '/bootstrap/css/bootstrapstyle.css'); wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css' ); /* Script per le barre di avvnzamento circolare */ wp_enqueue_script( 'progressbar', get_template_directory_uri() . '/js/progressbar.js',array(),'1.0.0', true); } add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
qui il css (contenuto in uno dei file già dichiarati quindi già funzionante)
/* contenitore delle barre circolari di avanzamento */ #circularbar { margin: 20px; width: 200px; height: 200px; position: relative; }
Qui la chiamata al tutto sulla pagina php
<div id=”circularbar”>qui la barra circolare animata</div>
seguendo un altro tutorial, ho letto che la chiamata al codice javascript può essere fatto comodamente nella pagina (o nel footer) attraverso il comando <script></script> di hatml…
e io l’ho messo nel footer…inserendolo esattamente prima della chiusura del footer.
potete dirmi se è corretto e se non lo è come aggiustarlo?
Non funziona , dato che non fa vedere la barra circolare.grazie
- Questo topic è stato modificato 8 anni, 4 mesi fa da Cristiano Zanca. Motivo: progressbar, javascript
-
Ciao @emanuelewpto ,
per rendere i post del forum più leggibili è preferibile usare strumenti come codepad.org
per la modifica di un tema fare sempre un CHILD THEME
per semplicità di gestione è consigliato includere il codice in un file JS esterno come nell’esempio sottostante
https://github.com/kimmobrunfeldt/progressbar.js/tree/gh-pages/examples/minimal
per verificare se carica tutto ciò che deve essere caricato usare l’inspector del browser o firebug.
Ciao @emanuelewpto,
come ti ha detto Cristiano dovresti innanzitutto guardare nell’inspector del browser (di solito lo attivi con F12) se vengono riportati degli errori Javascript.
Poi alcuni suggerimenti:
1) non è necessario che aggiungi jQuery perchè è già caricato di default dentro WordPress.
2) come viene spiegato in questo link https://developer.wordpress.org/reference/functions/wp_enqueue_script/ il modo corretto di aggiungere librerie Javascript è usare prima la funzione wp_register_script e poi la wp_enqueue_script.
3) Il terzo parametro di queste due funzioni ($deps) è importante perchè consente di specificare da quali librerie dipende quella che vuoi usare. Compilato nel modo corretto assicura che WordPress carichi le librerie nell’ordine giusto. Vedo che nel tuo codice non l’hai specificato e nel caso di jQuery hai messo come dipendenza jQuery stesso, che non è giusto.
Spero che i miei suggerimenti possano aiutarti, ma comunque la prima cosa che devi verificare è che non ci siano errori Javascript.
GiancarloGrazie ad entrambi delle risposte.
Mi pare che la specifica “(jQuery)” fosse già del progetto, dato che io ho solo accodato la parte relativa al bootstrap e a font-awesome…
proverò a seguire tutti i consigli.Grazie
- Il topic ‘Inserimento codice Javascript’ è chiuso a nuove risposte.