Stile e funzioni per i vostri select in WordPress - Selectr

7 Agosto 2017
 • 

Siete alla ricerca di una soluzione per migliorare l'integrazione dei dropdown (<select>) sul vostro sito WordPress? Selectr è una valida scelta!

Se avete già testato Select2 sapete già di cosa sto parlando, in questo caso però la leggerezza la farà da padrona.

Download

Lo trovate direttamente su GitHub. Per scaricarlo cliccate su "Clone or download" e poi su Download ZIP.

Come integrarlo

Estratta la cartella per l'integrazione in WordPress vi basterà fare l'enqueue di 3 file:

  • selectr.min.css, il foglio di stile di Selectr, lo trovate nella cartella dist.
  • selectr.min.js, il codice javascript che muove Selectr, lo trovate nella cartella dist.
  • opzioni.selectr.min.js, il vostro file che servirà per attivare Selectr e impostare le sue opzioni, dovete crearlo in base alle vostre esigenze.

Come effettuare l'enqueue dei file? Semplicemente inserendo queste righe di codice in function.php o ancora meglio in un plugin personalizzato. Prima di fare questo seguite però gli altri passaggi.

function enqueue_selectr() {
   wp_enqueue_style( 'selectr_css', plugins_url('cartella-plugin/selectr/selectr.min.css') );
   wp_enqueue_script( 'selectr_js', plugins_url('cartella-plugin/selectr/selectr.min.js'), array('jquery'), '', true );
   wp_enqueue_script( 'selectr_site_js', plugins_url('cartella-plugin/selectr/opzioni.selectr.min.js'), array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_selectr' );

Esempio di dropdown (<select>)

Facciamo un esempio partendo da questo codice html che definisce un dropdown.

<select id="field-test" name="test">
   <option value="test1">Test 1</option>
   <option value="test2">Test 2</option>
</select>

Come attivare Selectr sul dropdown creato

Per attivare Selectr sull'ID #field-test del dropdown basterà inserire questo codice nel file opzioni.selectr.min.js.

jQuery(document).ready(function( $ ){  
   new Selectr('#field-test', {      
     defaultSelected: false,
     allowDeselect: true,
     clearable: true,
     placeholder: "Test"
   });
});

Ricordatevi di dare un ID differente a ognuno dei vostri dropdown.

Semplice vero? Se avete problemi lasciate un commento o contattateci direttamente.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

searchenvelope-ophonefacebookenvelopewhatsapp

Su questo sito utilizziamo strumenti nostri o di terze parti che memorizzano piccoli file (cookie) sul tuo dispositivo. I cookie sono normalmente usati per permettere al sito di funzionare correttamente (cookie tecnici), per generare statistiche di uso/navigazione (cookie statistici) e per pubblicizzare opportunamente i nostri servizi/prodotti (cookie di profilazione). Possiamo usare direttamente i cookie tecnici, ma hai il diritto di scegliere se abilitare o meno i cookie statistici e di profilazioneAbilitando questi cookie, ci aiuti ad offrirti una esperienza migliore con noi. 

>> Cookie Policy <<