Filtro di categorie animato in WordPress

7 Ott 2020 - Wordpress

WordPress: Come realizzare un filtro di categorie animato con tasti dedicati in perfetto stile tema premium

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:

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!

Massimiliano Piacentini

Proprietario di 360Smartweb

Dopo vari anni passati come graphic designer e dopo molti corsi, ho seguito la mia massima passione: lo sviluppo di siti web in html, php e WordPress. Il design web è stata una semplice conseguenza di tutte le mie skills che mi permettono, seguendo le best practices, per dare una User Experience sui siti creati.

Il mio sito web