Come aggiungere filtri al tuo portfolio WordPress

Il mese scorso ti ho mostrato come creare un sito portfolio su WordPress utilizzando un tipo di post personalizzato, una nuova query "progetti" e alcuni nuovi modelli.

In questo post, ti mostrerò come aggiungere filtri alla pagina del tuo portfolio utilizzando la libreria Isotope.js.

Se non l'hai già fatto, entra nel tuo sito WordPress, crea alcune categorie e assegnale agli elementi del tuo portfolio. Se leggi il primo articolo, sto usando di nuovo un CPT chiamato "Progetti", quindi per ogni progetto aggiunto al mio sito WordPress, dovrò assicurarmi che venga assegnata una categoria. Sul mio sito, i miei progetti saranno classificati come "Nuove costruzioni" o "Ristrutturazioni".

Dopo aver assegnato una categoria a ciascuno dei tuoi progetti, è il momento di aggiungere il JavaScript che farà il lavoro di filtraggio di fantasia per te.

Isotope.js è una libreria di layout sviluppata da David DeSandro. È gratuito per l'open source e per uso personale, tuttavia, per uso commerciale, è necessario acquistare una licenza. Si prega di consultare la pagina della licenza per ulteriori informazioni e prezzi.

Quindi, aggiungiamo il file isotope.js al tuo sito. Idealmente, dovresti aggiungerlo a una directory chiamata /js/ nel tuo tema figlio per assicurarti che gli aggiornamenti non lo eliminino mai.

Devi anche creare un altro file e aggiungerlo alla tua directory /js/ . Questo file conterrà il jQuery necessario per indirizzare i tuoi progetti. Nel mio esempio, ho chiamato questo file projects.js .

Incolla il codice seguente in quel file e salvalo. Le cose chiave da notare in questo file sono #projects , .project .project-item e #filters . Questo è il file in cui puoi anche cambiare layoutMode: in muratura, packery, cellsByColumn e altro. In questo tutorial, sto usando la modalità griglia.

jQuery(function ($) {

// initialize Isotope after all images have loaded

var $container = $('#projects').imagesLoaded( function() { //The ID for the list with all the blog posts

$container.isotope({ //Isotope options, 'item' matches the class in the PHP

itemSelector : '.project-item',

grid: {

columnWidth: 200

}

});

});

 
//Add the class selected to the item that is clicked, and remove from the others

var $optionSets = $('#filters'),

$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){

var $this = $(this);

// don't proceed if already selected

if ( $this.hasClass('selected') ) {

return false;

}

var $optionSet = $this.parents('#filters');

$optionSets.find('.selected').removeClass('selected');

$this.addClass('selected');
//When an item is clicked, sort the items.

var selector = $(this).attr('data-filter');

$container.isotope({ filter: selector });
return false;

});

});

Dopo aver aggiunto questo codice al tuo sito, è il momento di accodare i file. Se functions.php del tuo tema figlio ha già una funzione dichiarata per farlo, dovrai solo aggiungere una riga di codice come quella qui sotto.

wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array(), '1.0.0', true );

wp_enqueue_script('projects', get_stylesheet_directory_uri() . '/js/projects.js', array(), '1.0.0', true );

Nota, get_stylesheet_directory_uri() si riferisce sempre al tema attivo corrente.
Nel caso di un tema personalizzato o dello scenario in cui stai alterando un tema senza un tema figlio, probabilmente utilizzeresti get_template_directory_uri() al posto di get_stylesheet_directory_uri()
Se il tuo tema figlio non ha già una funzione per accodare il tuo script, dovrai aggiungerne uno. Utilizzare quanto segue per accodare il file isotope.js .

add_action( 'wp_enqueue_scripts', 'child_scripts');

function child_scripts(){

wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array(), '1.0.0', true );

wp_enqueue_script('projects', get_stylesheet_directory_uri() . '/js/projects.js', array(), '1.0.0', true );

}

Un'ultima nota qui, dovresti assicurarti che il tuo tema abbia già accodato jQuery. In caso contrario, dovrai aggiungere wp_enqueue_script('jquery'); ma a partire da WordPress 3.8, jQuery è impacchettato con il core di WordPress in /wp-includes/js/jquery/jquery.js .

Infine, salva il tuo file functions.php .

Ora torna al tuo file projects-page.php e aggiungi il codice che mostrerà i tuoi filtri, oltre a ottenere il numero di categorie e il nome della categoria di ciascun progetto.

Incolla il codice seguente appena sopra dove inizia il tuo portfolio. Come l'ultimo tutorial, sto usando Bootstrap e nell'HTML sottostante, sto impostando la mia riga del filtro su tutta la larghezza del contenitore. Per impostazione predefinita, i miei filtri si allineeranno a sinistra della colonna. Se non stai usando Bootstrap, potresti voler iniziare e terminare con i tag <ul> .

<div id="filter-row" class="row">
<div id="project-page" class="col-lg-12">
		<ul class="nav navbar-nav navbar-left" id="filters">
			<?php
				$terms2 = get_terms("project_categories"); // This will go get all the categories
				$count = count($terms2); //This counts the number of categories
				echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">Show All</a></li>';
				if ( $count > 0 ){
				foreach ( $terms2 as $term ) {
												$termname = strtolower($term->name);								$termname = str_replace(' ', '-', $termname);
	echo '<li style="list-style:inline;"><a href="javascript:void(0)" title="" class="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
	}
}
// in the above foreach loop, the code will return all the values stored in $terms2 array.

 ?>
		</ul>
	</div>
</div>

Il passaggio successivo consiste nell'ottenere la categoria per ogni progetto e inserirla nel contenitore del progetto come classe.

<?php
/*
Get the category for each unique post using the post ID
*/
$terms = get_the_terms( $post->ID, 'project_categories' );
if ( $terms && ! is_wp_error( $terms ) ) :
$links = array();
	foreach ( $terms as $term ) {
	$links[] = $term->name;
	}
	$tax_links = join( " ", str_replace(' ', '-', $links));
	$tax = strtolower($tax_links);
	else :
	$tax = '';
	endif;

	$terms = get_the_terms( $post->ID, 'project_categories' );
?>

<?php echo '<div class="project col-sm-6 col-md-4 all project-item '. $tax .'">';?>

Nel codice sopra, all , project-item e $tax vengono aggiunti a ogni contenitore del progetto. $tax sarà la categoria che gli hai assegnato nel wp-admin . L'aggiunta di "tutto" consente di reimpostare la pagina del portfolio ogni volta che un utente fa clic sul filtro "tutto".

Alla fine, ogni progetto dovrebbe avere una classe chiamata "tutti" e nel mio caso, ogni progetto avrà anche "nuove costruzioni" o "ristrutturazione". Ora, quando un utente fa clic su una delle categorie, la pagina si riformatta in modo elegante per visualizzare solo la categoria che è stata selezionata, il tutto mantenendo il layout della griglia del portfolio.

In conclusione, Isotope.js è un plugin jQuery molto potente che può essere implementato su qualsiasi sito WordPress. Una volta installato, può essere utilizzato per ordinare e filtrare layout di cataloghi, gallerie o portfolio. Inoltre, ci sono più opzioni di layout che puoi usare. Scopri tutte le opzioni qui.

Alla fine, ecco come appare il mio projects-page.php una volta terminato:

<?php
/* This is my Projects Portfolio page */

get_header(); 

?>
<div id="content-full-width" class="page-wrap">
    <div class="container content-wrapper">
        <div class="row">
            <div id="content-projects" class="page-wrap2">
	    <div class="container content-wrapper">
	<!-- ============ CONTENT START ============ -->
	        <section id="project-content">
		<div id="intro" class="row">
		    <div class="col-sm-12 text-center">
			<?php while ( have_posts() ) : the_post(); ?>
			<?php the_content() ?>
			<?php endwhile; // end of the loop. ?>
		    </div>
		</div>
	            <div id="filters-row" class="row">
		    <div id="project-page" class="col-lg-12">
		        <ul class="nav navbar-nav navbar-left" id="filters">
			<?php
			$terms2 = get_terms("project_categories");
			$count = count($terms2);
			echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">All</a></li>';
			if ( $count > 0 ){
			    foreach ( $terms2 as $term ) {									    $termname = strtolower($term->name);
			    $termname = str_replace(' ', '-', $termname);
			echo '<li style="list-style:inline;"><a href="javascript:void(0)" title="" class="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
			}
		} ?>
		    </ul>
		</div>
	        </div>
	    <div id="projects" class="row">
	<!-- Start projects Loop -->
		<?php  /* Query the post   */
	$args = array( 'post_type' => 'projects', 'posts_per_page' => -1, 'orderby'=>'menu_order','order'=>'ASC' );
	$loop = new WP_Query( $args );
	while ( $loop->have_posts() ) : $loop->the_post();
/* Pull category for each unique post using the ID */
	$terms = get_the_terms( $post->ID, 'project_categories' );
	if ( $terms && ! is_wp_error( $terms ) ) :
	   $links = array();
	       foreach ( $terms as $term ) {
	       $links[] = $term->name;
		}
	       $tax_links = join( " ", str_replace(' ', '-', $links));
	       $tax = strtolower($tax_links);
		else :
		$tax = '';
	endif;
	<?php echo '<div class="project col-sm-6 col-md-4 all project-item '. $tax .'">';?>
            <a href="<?php print get_permalink($post->ID) ?>">
              <?php echo the_post_thumbnail(); ?></a>
              <h4><?php print get_the_title(); ?></h4>
              <?php print get_the_excerpt(); ?><br />
              <a class="btn btn-default" href="<?php print get_permalink($post->ID) ?>">Details</a>
        </div> <!-- End individual project col -->
        <?php endwhile; ?>
    </div><!-- End Projects Row -->
</div><!-- End Container -->
<!-- ============ CONTENT END ============ -->

<?php get_footer(); ?>

E con ciò, avrai una pagina del portfolio di filtraggio dei contenuti completamente funzionante!

Plugin WordPress che adorerai

Scarica questo ebook per un elenco dei nostri plugin più consigliati per gli sviluppatori! Abbiamo riscontrato che tutti questi plugin sono semplici da usare, non troppo performanti sul tuo sito e semplicemente affidabili.