Comment ajouter des filtres à votre portfolio WordPress

Le mois dernier, je vous ai montré comment créer un site de portfolio sur WordPress en utilisant un type de publication personnalisé, une nouvelle requête "projets" et quelques nouveaux modèles.

Dans cet article, je vais vous montrer comment ajouter des filtres à votre page de portfolio à l'aide de la bibliothèque Isotope.js.

Si vous ne l'avez pas déjà fait, accédez à votre site WordPress, créez quelques catégories et attribuez-les aux éléments de votre portefeuille. Si vous lisez le premier article, j'utilise à nouveau un CPT appelé "Projets", donc pour chaque projet ajouté à mon site WordPress, je devrai m'assurer qu'une catégorie est attribuée. Sur mon site, mes projets vont être classés comme « Nouvelle construction » ou « Rénovations ».

Une fois que vous avez attribué une catégorie à chacun de vos projets, il est temps d'ajouter le JavaScript qui fera le travail de filtrage sophistiqué pour vous.

Isotope.js est une bibliothèque de mise en page développée par David DeSandro. Il est gratuit pour une utilisation open source et personnelle, cependant, pour une utilisation commerciale, vous devez acheter une licence. Veuillez consulter la page de licence pour plus d'informations et les prix.

Alors, ajoutons le fichier isotope.js à votre site. Idéalement, vous devriez l'ajouter à un répertoire appelé /js/ dans votre thème enfant pour vous assurer que les mises à jour ne le suppriment jamais.

Vous devez également créer un fichier supplémentaire et l'ajouter à votre répertoire /js/ . Ce fichier contiendra le jQuery nécessaire pour cibler vos projets. Dans mon exemple, j'ai nommé ce fichier projects.js .

Collez le code suivant dans ce fichier et enregistrez-le. Les éléments clés à noter dans ce fichier sont les #projects , .project .project-item et #filters . Il s'agit du fichier dans lequel vous pouvez également modifier layoutMode: masonry, packery, cellsByColumn, etc. Dans ce tutoriel, j'utilise le mode grille.

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;

});

});

Une fois que vous avez ajouté ce code à votre site, il est temps de mettre les fichiers en file d'attente. Si le functions.php de votre thème enfant a déjà une fonction déclarée pour faire cela, il vous suffira d'y ajouter une ligne de code comme celle ci-dessous.

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 );

Notez get_stylesheet_directory_uri() fait toujours référence au thème actif actuel.
Dans le cas d'un thème personnalisé ou du scénario où vous modifiez un thème sans thème enfant, vous utiliserez probablement get_template_directory_uri() à la place de get_stylesheet_directory_uri()
Si votre thème enfant n'a pas encore de fonction pour mettre votre script en file d'attente, vous devrez en ajouter une. Utilisez ce qui suit pour mettre en file d'attente votre fichier 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 );

}

Une dernière note ici, vous devez vous assurer que votre thème a déjà mis en file d'attente jQuery. Si ce n'est pas le cas, vous devrez ajouter wp_enqueue_script('jquery'); mais à partir de WordPress 3.8, jQuery est fourni avec le noyau WordPress dans /wp-includes/js/jquery/jquery.js .

Enfin, enregistrez votre fichier functions.php .

Maintenant, revenez à votre fichier projects-page.php et ajoutez le code qui affichera vos filtres, ainsi que le nombre de catégories et le nom de la catégorie de chaque projet.

Collez le code suivant juste au-dessus du point de départ de votre portefeuille. Comme le dernier tutoriel, j'utilise Bootstrap et dans le HTML ci-dessous, je configure ma ligne de filtre sur toute la largeur du conteneur. Par défaut, mes filtres s'aligneront à gauche de la colonne. Si vous n'utilisez pas Bootstrap, vous pouvez commencer et terminer par les balises <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>

L'étape suivante consiste à obtenir la catégorie de chaque projet et à la placer dans le conteneur de projet en tant que 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 .'">';?>

Dans le code ci-dessus, all , project-item et $tax sont ajoutés à chaque conteneur de projet. $tax sera la catégorie que vous lui avez attribuée dans wp-admin . L'ajout de « tout » vous permet de réinitialiser la page du portfolio chaque fois qu'un utilisateur clique sur le filtre « tout ».

En fin de compte, chaque projet devrait avoir une classe appelée "tous" et dans mon cas, chaque projet aura également soit "nouvelle construction" soit "rénovations". Désormais, lorsqu'un utilisateur clique sur l'une des catégories, la page se reformate avec élégance pour n'afficher que la catégorie qui a été sélectionnée, tout en conservant la disposition en grille du portfolio.

En conclusion, Isotope.js est un plugin jQuery très puissant qui peut être implémenté sur n'importe quel site WordPress. Une fois installé, il peut être utilisé pour trier et filtrer les mises en page de catalogue, de galerie ou de portfolio. De plus, il existe plusieurs options de mise en page que vous pouvez utiliser. Découvrez toutes les options ici.

Au final, voici à quoi ressemble mon projects-page.php une fois terminé :

<?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(); ?>

Et avec cela, vous aurez une page de portefeuille de filtrage de contenu entièrement fonctionnelle !

Les plugins WordPress que vous allez adorer

Téléchargez cet ebook pour obtenir une liste de nos plugins les plus recommandés pour les développeurs ! Nous avons trouvé que tous ces plugins étaient simples à utiliser, pas trop performants sur votre site et tout simplement fiables.