Supporto » Funzionalità = Plugin » 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…

    http://codepad.org/EipkT4no

    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 argomento è stato modificato 2 anni, 10 mesi fa da  Cristiano Zanca. Ragione: progressbar, javascript
Stai vedendo 3 repliche - dal 1 al 3 (di 3 totali)
  • Moderatore Cristiano Zanca

    (@cristianozanca)

    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.
    Giancarlo

    Grazie 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

Stai vedendo 3 repliche - dal 1 al 3 (di 3 totali)
  • Il topic ‘Inserimento codice Javascript’ è chiuso a nuove risposte.