Filtro di categorie animato in WordPress

WordPress: Come realizzare un filtro di categorie animato con tasti dedicati in perfetto stile tema premium
- WordPress: Come realizzare un filtro di categorie animato con tasti dedicati in perfetto stile tema premium
- Passo 1: Richiamare la libreria di jQuery
- Passo 2: Richiamare la libreria di isotope
- Passo 3: Richiamare la libreria di Bootstrap
- Passo 4: Inizializzare lo script di isotope
- Passo 5: Realizzazione della struttura per i tasti per i filtri
- Passo 6: Realizzazione del Custom Loop e della struttura delle sezioni
- VERSIONE STATICA DELLA PAGINA, SENZA PASSARE DA WORDPRESS
- Conclusioni
Dopo qualche mese di assenza dal blog, eccoci qua, di nuovo pronti a darvi delle guide il più comprensibile possibile riguardante lo sviluppo di siti in WordPress. Ci siamo presi una pausa per studiare e aggiornarci su tutte le novità ed aumentare le nostre skill.
Quest’oggi vogliamo mostrarvi come poter realizzare un filtro di categorie animato all’interno del vostro sito (solitamente lo mettiamo in homepage, ma nessuno vieta di sfruttarlo in template o pagine custom), con tasti associati per il filtro delle categorie.

Iniziamo con i requisiti:
- Libreria isotope.js
- Libreria di bootstrap
- Libreria jQuery
- Conoscenza del CSS
- Conoscenza dell’html
- Conoscenza dei template tag di WordPress
Non vi preoccupate, a fine guida con i copia e incolla dei codici, riuscirete a realizzare una versione standard della struttura
Passo 1: Richiamare la libreria di jQuery
Come primo passo andremo ad integrare jQuery all’interno del vostro tema (sicuramente lo avrete già integrato. Se si, allora passate al passo 2)
Se andate sulla pagina ufficiale di jQuery potete scaricare l’ultima versione sul vostro computer/mac.
Successivamente, spostate il file nella cartella /js/ del vostro tema WordPress (se non l’avete, createne una). Adesso spostatevi nel file “function.php” e andate alla voce “scripts” e incollate il codice seguente:
wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.js', array(), '', true );
adesso jQuery sarà correttamente richiamato nel vostro sito web
Passo 2: Richiamare la libreria di isotope
Adesso dovete scaricare la libreria di isotope.
Andate sulla pagina ufficiale di isotope e cliccate sulla voce “isotope-pkgd.min.js” per scaricare il file di riferimento (in alcuni casi vi apre direttamente il file mostrandovi una serie di codici. Copiate tutti i codici e con un file editor tipo textedit, sublimetexteditor o atom potrete salvarlo con il nome del file appena citato).
Sempre nella sezione script della function.php incollate questo:
wp_enqueue_script('isotope', get_template_directory_uri() . '/js/isotope-pkgd.min.js', array(), '', true );
Anche isotope è stato inserito correttamente
Passo 3: Richiamare la libreria di Bootstrap
Per finire le integrazioni, dovete inserire Bootstrap con la solita prassi utilizzata fino a questo momento o per fare prima, ai fini della guida, potrete copiare e incollare i CDN che altro non sono che risorse online messe a disposizione di tutti.
Recatevi sulla pagina ufficiale di Bootstrap e copiate gli script alla sezione “JS”
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
E il css alla sezione “CSS”
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
Entrambi vanno inseriti all’interno del tag <head> che sicuramente troverete nel vostro file header.php
Passo 4: Inizializzare lo script di isotope
Per poter inizializzare Isotope.js è necessario andare nel file dove inserite tutti gli script del vostro tema o in alternativa (lo sconsigliamo ma funziona lostesso) potete inserirlo dopo che avremo realizzato la struttura in html.
Comunque il codice è il medesimo:
$( document ).ready(function() { /* script ISOTOPE PER FILTRI CATEGORIA */ // external js: isotope.pkgd.js // init Isotope var $grid = $('.row-filter').isotope({ itemSelector: '.elemento', layoutMode: 'fitRows' }); // filter functions var filterFns = { // show if number is greater than 50 numberGreaterThan50: function() { var number = $(this).find('.number').text(); return parseInt( number, 10 ) > 50; }, // show if name ends with -ium ium: function() { var name = $(this).find('.name').text(); return name.match( /ium$/ ); } }; // bind filter button click $('.filters-button-group').on( 'click', 'button', function() { var filterValue = $( this ).attr('data-filter'); // use filterFn if matches value filterValue = filterFns[ filterValue ] || filterValue; $grid.isotope({ filter: filterValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); }); });
Se lo inserite nel file dei vostri script, inseritelo in fondo alla pagina, altrimenti dopo a struttura html tra i tag <script></script>.
A vostra scelta.
Passo 5: Realizzazione della struttura per i tasti per i filtri
Adesso viene la parte più complessa, ma ripeto, se farete copia e incolla del codice funzionerà.
Dovete creare i tasti iniziali che permettano di filtrare i contenuti sottostanti al click su uno di essi.
Per fare questo utilizzerete un classico “foreach” che in pratica funziona con la logica:
Per ogni oggetto che trovi -> mostra questo.
Noi con il codice seguente gli diciamo di recuperare le categorie di post, e per ogni categoria di post, mostra un tasto con caratteristiche particolari (dettate da isotope).
Ecco il codice:
<div class="button-group filters-button-group"> <?php //Altre Categorie $categories = get_categories(); foreach ($categories as $category) { $option = '<button class="button-filter" data-filter="'.'.'.$category->cat_name.'">'; $option .= $category->cat_name; $option .= '</button>'; echo $option; } ?> </div>
In pratica va a recuperare tutte le categorie che ha la sezione “articoli” e per ognuna stampa a video un tasto; di seguito un esempio del’output generato ipotizzando una categoria di post che si chiama “evidenza”
<button class="button-filter" data-filter=".evidenza">Evidenza</button>
Passo 6: Realizzazione del Custom Loop e della struttura delle sezioni
Adesso l’ultimo passo… la realizzazione del custom loop con la struttura necessaria a isotope per funzionare correttamente con i tasti appena generati.
Facciamo una premessa prima di mostrarvi il codice; questo loop va a recuperare post e l’immagine che verrà fuori è quella che avrete impostato come immagine in evidenza the_post_thumbnail(); quindi se non avete impostato imagini nei vostri post, fatelo prima così avrete una corretta visualizzazione
<div class="grid"> <!-- RECUPERA I POST E CREA I CONTENUTI --> <?php $args = array( 'post_type' => 'post', 'posts_per_page' => 20 ); // La Query $theme_the_query = new WP_Query( $args ); // Il Loop while ( $theme_the_query->have_posts() ) : $theme_the_query->the_post(); ?> <?php $theme_image_attributes = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'single'); ?> <?php $category = get_the_category( $id ); ?> <div class="col-md-4 p-0 element-item <?php echo $category[0]->cat_name; ?>" data-category="<?php echo $category[0]->cat_name; ?>"> <div class=""> <a href="<?php the_permalink(); ?>"> <img class="img-responsive" src="<?php echo $theme_image_attributes[0]; ?>"> <?php the_title( '<div class="container-hover"><h3 class="titolo">', '</h3></div>' ); ?> </a> </div> </div> <?php endwhile; wp_reset_query(); wp_reset_postdata(); ?> </div> <!—grid -->
Ecco fatto!
Adesso, se caricate la pagina, potrete vedere una versione, probabilmente non stilizzata, del filter funzionante.
Non vi resta che andare ad abbellire a vostro piacimento tutta la struttura, stando ben attenti a non rimuovere le classi GRID e ELEMENT-ITEM che servono per il corretto funzionamento del plugin.
VERSIONE STATICA DELLA PAGINA, SENZA PASSARE DA WORDPRESS
Se non volete perdervi in tutte le strutture di WordPress, c’è una via più semplice, quella di realizzare a mano tutta la struttura in html con lo script annesso.
Potete trovare il risultato e i codici da cui attingere su codepen in una guida realizzata da Dave DeSandro
Ricordatevi che dovrete richiamare comunque il file isotope-pkgd.min.js con il cdn in cima alla pagina:
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
Conclusioni
Come potete vedere, grazie a questa guida, potrete realizzare una struttura molto complessa che trovereste solo nei temi premium risparmiando dei sodini.
Ricordiamo e ripetiamo che il risultato che avrete seguendo la guida per integrarlo in WordPress, a video sarà completamente da stilizzare anche se grazie a bootstrap sarà comunque diviso in colonne. In caso avessi dubbi, domande o richieste, non esitate a contattarmi nella sezione commenti.
Offrimi un caffè
Ciao, se le mie guide ti appassionano, ti hanno aiutato o ti hanno risolto alcuni problemi, offrimi un caffè o qualcosa di più.
Te ne sarò immensamente grato!