• User Newbie

    Wordpress e JQuery

    Ciao a tutti! Sono nuovo, ma parto con un argomento che sto trovando spinoso.
    Ovvero l'integrazione di JQuery in Wordpress. Spulciando qua e la ho visto come integrare
    o meglio richiamare JQuery (inserendo una stringa nel function.php) ma per farla breve vi chiedo:
    Se io volessi inserire ad esempio questo effetto in una mia pagina wordpress (effetto totalmente a caso, tanto poi immagino valga per tutti gli altri, gallerie, slideshow ecc) codepen.io/tamak/pen/hzEer, come devo fare? Considerando che non so quanto possa manipolare il codice html della pagina in questione..

    Help!:?


  • User Attivo

    Ciao, non devi preoccuparti di Jquery perché viene caricato in automatico da WP.
    Crea il tuo script in un file .js, per esempio: my_script.js e lo carichi nella cartella js del tema attivo, questo file js lo richiami dal file functions.php, qualcosa del genere:

    
    function my_scripts_js() {
    wp_enqueue_script('custom_script',get_template_directory_uri() . '/js/my_script.js', array('jquery'));
    }
    add_action('wp_enqueue_scripts', 'my_scripts_js');
    
    

    In questo modo avrai la certezza che i tuo js venga caricato correttamente.


  • User Newbie

    Grazie per il chiarimento! Però ho ancora un dubbio, richiamo nel file function.php il mio script, ma poi attivamente nella pagina come lo inserisco? (voglio dire, creo una nuova pagina da aggiungere al menù e poi?)


  • User Attivo

    Dipende da cosa vuoi implementare, se facciamo riferimento al link di esempio che hai postato sopra, in modo un po' "grezzo" basta che crei una nuova pagina e con l'editor visuale disattivato incolli tutto il codice HTML.

    Riassumendo i passaggi:

    • crei il file js che contiene lo script e lo posizioni nella cartella js del tema attivo
    • nel file functions.php chiami lo script js come spiegato sopra
    • nel file style.css del tema aggiungi tutte le regole CSS
    • in WP crei una nuova pagina, assicurati di disattivare l'editor visuale, incolli tutto il codice HTML.

    Se tutto funziona, in teoria dovrebbe funzionare, vedrai lo stesso identico effetto, forse dovrai aggiustare un po' di CSS, ad esempio la prima classe body che contiene font e larghezza potresti disattivarla.

    Questo è tutto.
    Per sperimentare magari usa uno dei temi di default, per esempio Twenty Fifteen.


  • User Newbie

    @hub said:

    Dipende da cosa vuoi implementare, se facciamo riferimento al link di esempio che hai postato sopra, in modo un po' "grezzo" basta che crei una nuova pagina e con l'editor visuale disattivato incolli tutto il codice HTML.

    Riassumendo i passaggi:

    • crei il file js che contiene lo script e lo posizioni nella cartella js del tema attivo
    • nel file functions.php chiami lo script js come spiegato sopra
    • nel file style.css del tema aggiungi tutte le regole CSS
    • in WP crei una nuova pagina, assicurati di disattivare l'editor visuale, incolli tutto il codice HTML.

    Se tutto funziona, in teoria dovrebbe funzionare, vedrai lo stesso identico effetto, forse dovrai aggiustare un po' di CSS, ad esempio la prima classe body che contiene font e larghezza potresti disattivarla.

    Questo è tutto.
    Per sperimentare magari usa uno dei temi di default, per esempio Twenty Fifteen.

    Grazie ancora! Farò una prova e poi ti farò sapere se tutto funziona! 😉


  • User Newbie

    Dopo un periodo di prove varie, torno a scrivere. Purtroppo niente da fare, ho provato ad inserire le istruzioni nel function.php, quindi copiare il codice html (dell'effetto jquery) nella pagina di wordpress (con l'editor visuale disabilitato) ma nulla. Prende solo i lnk e non l'effetto voluto. Qualcuno conosce altri metodi?


  • User Attivo

    Per essere sicuro ho provato io stesso sia sul tema Twenty Ten che ti avevo suggerito che sull'ultimo tema Twenty Sixteen, poi in una nuova pagina ho incollato integralmente il codice HTML, funziona perfettamente con entrambi i temi, le skillbars avanzano in modo armonico.

    @Mat90 said:

    Qualcuno conosce altri metodi?
    Spiegati meglio, hai indicato le skillbars come esempio ma con jQuery non ci sono limiti.
    Se per altro metodo intendi un metodo più semplice per integrare delle funzioni allora quello che ti serve è un plugin già fatto, puoi cercare nel repository di WordPress, trovi di tutto, per restare nell'esempio delle skillbars: it.wordpress.org/plugins/skillbars

    Non necessita di configurazioni, ogni skillbar la inserisci con shortcode come questo che puoi inserire dove vuoi:

    
    [skillbar title="HTML" percentage="50" color="#3498db" show_percent="true"]