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.