WordPress 3.3: tutto jQuery finalmente

Con WordPress 3.3 anche jQuery e tutti i suoi moduli sono stati allineati. Adesso infatti è possibile accedere alla nuova lista dei moduli dell’ultima release 3.3, come ad esempio l’autocomplete. Ecco uno snippet per una buona inclusione:

1
2
3
4
5
6
// Moduli che WordPress caricherà per noi propedeutici allo script "myscript.js"
$deps = array('jquery-ui-slider',
  'jquery-ui-datepicker',
  'jquery-ui-autocomplete'
);
wp_enqueue_script('key', 'js/myscript.js', $deps, 1.3.4, true);
  • Simone

    Ciao, scusa se ti rubo questo spazio…mi servirebbe un aiuto se possibile…avrei la necessità di usare i tabs di jQuery UI…come posso fare? Ovviamente con wp 3.3…ti ringrazio della risposta se vorrai aiutarmi! ^^

  • http://www.undolog.com Giovambattista Fazioli

    @Simone: è abbastanza semplice. Adesso non so se ti serve lato frontend, backend o all’interno di un plugin, comunque sia il procedimento è il medesimo. Prima di tutto devi emettere un HTML appropriato, del tipo:

    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="tabs">
      <ul>
        <li><a href="#tab1" rel="nofollow">Titolo Tab 1</a></li>
        <li><a href="#tab2" rel="nofollow">Titolo Tab 2</a></li>
        <li><a href="#tab3" rel="nofollow">Titolo Tab 3</a></li>
      </ul>

      <div id="tab1">Contenuto Tab 1</div>
      <div id="tab2">Contenuto Tab 2</div>
      <div id="tab3">Contenuto Tab 3</div>

    </div>

    Sia jQuery che jQuery UI, compreso il modulo Tabs, sono già presenti in WordPress, quello che devi fare è essere sicuro che vengano caricati insieme al tuo script che applica l’effetto tabs. Se il tuo script si chiama

    1
    applica-tabs.js

    quando lo carichi usa:

    
    
    1
    2
    3
    4
    5
    6
    7
    $deps = array(
     'jquery',
     'jquery-ui-core',
     'jquery-ui-tabs'
    );
    // Sostituisci a [tua path] il percorso sul server
    wp_enqueue_script('applica-tabs', '[tua path]applica-tabs.js', $deps);

    Nel tuo script usa:

    
    
    1
    2
    3
    jQuery(document).ready(function ($) {
        $("#tabs").tabs();
    });

    Già così dovrebbe funzionarti tutto. Quello che manca, come ultima cosa, forse la più rognosa, è un tema grafico, dei fogli di stile in pratica. Se sei capace puoi fartelo da solo, altrimenti puoi crearlo o scaricarlo dal sito jQuery usando il ThemeRoller. Una volta scaricato il file css insieme alle immagini, per caricarlo usa:

    
    
    1
    2
    // Sostituisci a [tua path] il percorso sul server
    wp_enqueue_style('applica-tabs', "[tua path]jquery-ui.custom.css");

    Ovviamente, sia per lo script che per il css inserisci il percorso corretto relativo al tuo server web. Questo è tutto.

  • Simone

    @Giovambattista Fazioli: Ti ringrazio per la pazienza, è tutto chiarissimo… ora provo subito, l’unica cosa è il dove caricarli, devo inserire il tutto in

    1
    functions.php

    oppure in header.php? Intendo il codice per richiamare jQuery… ti ringrazio tantissimo!

  • http://www.undolog.com Giovambattista Fazioli

    @Simone: per pulizia ti consiglio di inserire un codice del genere in

    1
    functions.php

    :

    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // Init script and style
    add_action('wp_head', function() {

    $deps = array(
     'jquery',
     'jquery-ui-core',
     'jquery-ui-tabs'
    );
    // Sostituisci a [tua path] il percorso sul server
    wp_enqueue_script('applica-tabs', '[tua path]applica-tabs.js', $deps);

    // Sostituisci a [tua path] il percorso sul server
    wp_enqueue_style('applica-tabs', "[tua path]jquery-ui.custom.css");

    });
  • Simone

    Ci ho provato ieri sera inserendo tutto in functions.php, tutto ok, i moduli jquery, jqueryui e tabs li carica bene ma non mi funziona lo stesso…(il markup html l’ho inserito in sidebar.php).
    Oggi riprovo con il codice che mi hai fornito per ultimo (dopo il mio commento)…e mi restituisce due errori sulla scrittura del codice, di preciso all’inizio e alla fine…

  • http://www.undolog.com Giovambattista Fazioli

    @Simone: quello potrebbe essere dovuto alla sintassi che ho usato, specifica per PHP 5+, prova così che è sostanzialmente uguale:

    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // Init script and style
    add_action('wp_head', 'include_script');

    function include_script() {
     $deps = array(
      'jquery',
      'jquery-ui-core',
      'jquery-ui-tabs'
     );
     // Sostituisci a [tua path] il percorso sul server
     wp_enqueue_script('applica-tabs', '[tua path]applica-tabs.js', $deps);

     // Sostituisci a [tua path] il percorso sul server
     wp_enqueue_style('applica-tabs', "[tua path]jquery-ui.custom.css");
    }
  • Simone

    Mi scoccia disturbati ancora e utilizzare questo spazio per queste cose…comunque sia, non funziona neanche cosi, sia con la vers. precedente che con quella di adesso non mi carica proprio i moduli jquery, jqueryui e tabs…invece senza lo script add action wp_head mi carica i moduli…ma il tabs non funziona…

  • paso

    Ciao vorrei chiedere una info, è possibile usare il datepicker con cform7, mi spiegp meglio posso implementare il calendario dentro un form creato da questo plugin caricando la libreria di wordpress?

  • http://www.undolog.com Giovambattista Fazioli

    @paso: assolutamente si. Basta che identifichi il campo

    1
    input

    che vuoi far diventare calendario in qualche modo, tramite id o classe. Per il resto quella rimane una form come le altre, esattamente come se l’avessi realizzata tu personalmente.