+ Rispondi alla Discussione
Risultati da 1 a 7 di 7

Wordpress e JQuery

Ultimo Messaggio di hub il:
  1. #1
    User Newbie L'avatar di Mat90
    Data Registrazione
    Feb 2016
    Località
    Torino
    Messaggi
    5

    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!

  2. #2
    hub
    hub è offline
    User
    Data Registrazione
    Apr 2015
    Località
    Varese
    Messaggi
    793
    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:

    Codice:
    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.

  3. #3
    User Newbie L'avatar di Mat90
    Data Registrazione
    Feb 2016
    Località
    Torino
    Messaggi
    5
    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?)

  4. #4
    hub
    hub è offline
    User
    Data Registrazione
    Apr 2015
    Località
    Varese
    Messaggi
    793
    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.

  5. #5
    User Newbie L'avatar di Mat90
    Data Registrazione
    Feb 2016
    Località
    Torino
    Messaggi
    5
    Citazione Originariamente Scritto da hub Visualizza Messaggio
    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!

  6. #6
    User Newbie L'avatar di Mat90
    Data Registrazione
    Feb 2016
    Località
    Torino
    Messaggi
    5
    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?

  7. #7
    hub
    hub è offline
    User
    Data Registrazione
    Apr 2015
    Località
    Varese
    Messaggi
    793
    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.

    Citazione Originariamente Scritto da Mat90 Visualizza Messaggio
    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:

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

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.