Concevoir un portfolio responsive avec filtre via Isotope.js sous WordPress

8 octobre 20137 avril 2018 Tutoriels WordPress Par Aurélien Denis

Un thème premium qui se respecte comporte des modèles de pages de type portfolio, très utile pour mettre en valeur vos créations artistiques notamment. La plupart d'entre eux sont dotés d'un système de filtre basé sur les termes d'une taxonomie spécialement créée pour l'occasion et le redimensionnement de la fenêtre réajuste automatiquement les éléments avec une transition en CSS3. Ce tutoriel va vous apprendre comment mettre en place un tel système sous WordPress et sans avoir recours à un plugin.

Vous recherchez un développeur WordPress capable de vous créer un thème sur-mesure ? C'est mon métier depuis plus de 7 ans, prenez contact et discutons de votre projet.

Avant-propos

Ce tutoriel est réservé à des utilisateurs avertis. Elle requiert de multiples connaissances de base en termes d’intégration, de développement Web et plus. Il serait impossible de tout expliquer ligne par ligne d’où cet avertissement. Les utilisateurs peu à l’aise avec le code préféreront le recours à un plugin.

Résultat final / démonstration

~~Une démonstration est disponible sur mon site Neticpro et une variante sur le site de ddesign.~~

Les sites ayant subi une refonte, seules les captures d’écran ci-dessous illustrent le propos.

wpchannel-isotope-portfolio-1 — Mon portfolio (pas mis à jour) avec ouverture d’une détaillée

wpchannel-isotope-portfolio-2 — Le portfolio de Christèle & Déborah avec effet fancyBox

Étape n°1 – Création du custom post type ‘Portfolio’

Il nous faut dans un premier temps générer un type de contenu sur-mesure qui sera entièrement dédié à la saisie des éléments du portfolio.

Récupérez donc ce code à insérer dans votre fichier functions.php (ou dans un fichier dédié pour ceux qui veulent aller plus loin) :

/* Portfolio */
function cpt_ntp_portfolio() {
$labels = array(
 'name' => _x( 'Portfolio', 'Post Type General Name', 'ntp_framework' ),
 'singular_name' => _x( 'Portfolio', 'Post Type Singular Name', 'ntp_framework' ),
 'menu_name' => __( 'Portfolio', 'ntp_framework' ),
 'parent_item_colon' => __( 'Portfolio parent :', 'ntp_framework' ),
 'all_items' => __( 'Tous les portfolios', 'ntp_framework' ),
 'view_item' => __( 'Voir le portfolio', 'ntp_framework' ),
 'add_new_item' => __( 'Ajouter un portfolio', 'ntp_framework' ),
 'add_new' => __( 'Nouveau portfolio', 'ntp_framework' ),
 'edit_item' => __( 'Editer un portfolio', 'ntp_framework' ),
 'update_item' => __( 'Mettre à jour le portfolio', 'ntp_framework' ),
 'search_items' => __( 'Rechercher des produits', 'ntp_framework' ),
 'not_found' => __( 'Aucun portfolio trouvé', 'ntp_framework' ),
 'not_found_in_trash' => __( 'Aucun portfolio trouvé dans la corbeille', 'ntp_framework' ),
 );
 $rewrite = array(
 'slug' => 'portfolio',
 'with_front' => true,
 'pages' => false,
 'feeds' => false,
 );
 $args = array(
 'label' => __( 'portfolio', 'ntp_framework' ),
 'description' => __( 'Les créations de votre entreprise', 'ntp_framework' ),
 'labels' => $labels,
 'supports' => array( 'title', 'editor', 'thumbnail', 'revisions', 'custom-fields', ),
 'taxonomies' => array( 'type' ),
 'hierarchical' => false,
 'public' => true,
 'show_ui' => true,
 'show_in_menu' => true,
 'show_in_nav_menus' => true,
 'show_in_admin_bar' => true,
 'menu_position' => 20,
 'menu_icon' => '',
 'can_export' => true,
 'has_archive' => true,
 'exclude_from_search' => true,
 'publicly_queryable' => true,
 'query_var' => 'portfolio',
 'rewrite' => $rewrite,
 'capability_type' => 'page',
 );
 register_post_type( 'portfolio', $args );
}
add_action( 'init', 'cpt_ntp_portfolio', 0 );

Vous pouvez changer le textdomain par le vôtre, à la place de ntp_framework.

Vérifiez que le type de contenu apparaît bien dans votre administration WordPress puis ajoutez quelques éléments d’exemples.

Aucun champ particulier n’a été ajouté, notez que l’image à la une nous servira pour afficher les vignettes dans la galerie.

Étape n°2 – Création de la taxonomie personnalisée ‘Type’

Il s’agit ni plus ni moins que des catégories liées au items du portfolio. Je l’ai nommé Type pour l’exemple :

/* Type */
function ct_ntp_type() {
$labels = array(
 'name' => _x( 'Types', 'Taxonomy General Name', 'ntp_framework' ),
 'singular_name' => _x( 'Type', 'Taxonomy Singular Name', 'ntp_framework' ),
 'menu_name' => __( 'Types', 'ntp_framework' ),
 'all_items' => __( 'Tous les types', 'ntp_framework' ),
 'parent_item' => __( 'Type parent', 'ntp_framework' ),
 'parent_item_colon' => __( 'Type parent :', 'ntp_framework' ),
 'new_item_name' => __( 'Nouveau type', 'ntp_framework' ),
 'add_new_item' => __( 'Ajouter un type', 'ntp_framework' ),
 'edit_item' => __( 'Editer un type', 'ntp_framework' ),
 'update_item' => __( 'Mettre à jour', 'ntp_framework' ),
 'separate_items_with_commas' => __( 'Séparer les types par des virgules', 'ntp_framework' ),
 'search_items' => __( 'Rechercher des types', 'ntp_framework' ),
 'add_or_remove_items' => __( 'Ajouter ou supprimer des types', 'ntp_framework' ),
 'choose_from_most_used' => __( 'Choisir parmi les types les plus utilisés', 'ntp_framework' ),
 );
 $rewrite = array(
 'slug' => 'type',
 'with_front' => true,
 'hierarchical' => true,
 );
 $args = array(
 'labels' => $labels,
 'hierarchical' => true,
 'public' => true,
 'show_ui' => true,
 'show_admin_column' => true,
 'show_in_nav_menus' => true,
 'show_tagcloud' => true,
 'query_var' => 'type',
 'rewrite' => $rewrite,
 );
 register_taxonomy( 'type', 'portfolio', $args );
}
add_action( 'init', 'ct_ntp_type', 0 );

Étape n°3 – Création de la page d’archive du portfolio

A présent que les données sont saisies dans le back-office de WordPress, il nous faut les afficher. Avec les types de contenu personnalisé, on reprend simplement la hiérarchie des thèmes WordPress, à savoir :

archive-portfolio.php : la page qui affichera la liste complète des éléments dont le lien correspondra au nom du type de contenu (à moins que vous n’ayez passé des règles de réécriture) ;
single-portfolio.php : pour afficher le détail d’un item du portfolio ;

Le premier fichier est le plus important, le second facultatif si bien que nous ne l’utiliserons pas dans ce tutoriel afin de simplifier.

Voici un exemple de fichier archive-portfolio.php, je dis un exemple dans la mesure où vous devrez l’adapter en fonction de votre thème en reprenant la même structure HTML / CSS.

Notez que le code est basé sur le framework Bootstrap 2.3 pour les aspects responsive. Je compte le passer en Bootstrap 3.0 prochainement.

/* Page d’archive du portfolio */

<?php get_header(); ?>
<div id="content" class="container">
	<div class="row">
		<div id="main" class="span12" role="main">

			<div class="page-header">
				<h1 class="archive_title h2">
					<?php post_type_archive_title(); ?> - <small><?php _e('Some of our best work', 'ntp_framework'); ?></small>
				</h1>
			</div>

			<?php 
				$terms = get_terms("type"); 
				$count = count($terms); 
				echo '<ul id="portfolio-filter" class="filter">'; 
				echo '<li class="active-tag btn btn-small"><a href="#all" data-filter="*" title="Tout">Tout</a></li>'; 
				if ( $count > 0 ) { 
					foreach ( $terms as $term ) { 
						$termname = ($term->slug); 
						echo ' <li class="btn btn-small"><a href="#'.$termname.'" title="" data-filter=".'.$termname.'" rel="'.$termname.'">'.$term->name.'</a></li>'; 
					} 
				} 
				echo "</ul>"; 
			?>

			<div id="portfolio-wrapper">
				<ul id="portfolio-list" class="thumbnails isotope">

				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

					<li id="post-<?php the_ID(); ?>" <?php post_class('item-portfolio'); ?> role="article">
						<?php
							$image_id = get_post_thumbnail_id();
							$image_url = wp_get_attachment_image_src($image_id, 'large');
							$image_url = $image_url[0];
						?>

						<a class="fancybox thumbnail" id="post-<?php the_ID(); ?>" href="<?php echo $image_url ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('medium', array('class' => 'aligncenter photo')); ?></a>
					</li>

				<?php endwhile; ?> 

				<?php else : ?>

					<article id="post-not-found">
						<header>
							<h1><?php _e("No portfolio yet", "ntp_framework"); ?></h1>
						</header>

						<section class="post_content">
							<p><?php _e("Sorry, What you were looking for is not here.", "ntp_framework"); ?></p>
						</section>
					</article>

				<?php endif; ?>

				</ul>
			</div>
		</div> 
	</div> 
</div>
<?php get_footer(); ?>

Étape n°4 – Intégration des scripts JavaScript

Nous aurons recours au script Isotope qui dispose de nombreux paramètres de personnalisation pour celles et ceux qui voudront aller plus loin.

Nous devons enregistrer le script et l’appeler sur la page d’archive de notre portfolio de façon optimale. Toujours dans le fichier functions.php :

/* Ajout des scripts JavaScript */
function ntp_js() {
wp_register_script('isotope', get_template_directory_uri().'/inc/js/jquery.isotope.min.js', array('jquery'), '1.5.19', true);if (is_post_type_archive('portfolio')) {
wp_enqueue_script('isotope');
}
}
add_action('wp_enqueue_scripts', 'ntp_js');

Il nous faut également récupérer les slugs des termes de la taxonomie liée au portfolio pour les insérer automatiquement dans la galerie. C’est de cette manière que le système de filtrage opère via Isotope.

/* Ajout des termes dans les classes CSS des éléments du portfolio */
function ntp_item_portfolio_class( $classes, $class, $ID ) {
 $taxonomy = 'type';
 $terms = get_the_terms( (int) $ID, $taxonomy );
 if( !empty( $terms ) ) {
 foreach( (array) $terms as $order => $term ) {
 if( !in_array( $term->slug, $classes ) ) {
 $classes[] = $term->slug;
 }
 }
 }
 return $classes;
}
add_filter('post_class', 'ntp_item_portfolio_class', 10, 3);

Comme vous l’aurez remarqué, nous aurons recours au transformations et animations via le CSS de niveau 3 que la plupart des navigateurs supportent dorénavant et non pas à jQuery.

Il nous maintenant initialiser le script et activer les différents effets sur la page concernée :

/* Ajout du JavaScript isotope sur le portfolio */
function ntp_isotope_js() { 
 if (!is_admin() && is_post_type_archive('portfolio')) { ?>
 <script> 
 jQuery(function($) {
 $(window).load(function() {

 /* Code principal */
 function ntp_portfolio_isotope() {
 var $container = $('#portfolio-list');
 $container.imagesLoaded(function(){
 $container.isotope({
 itemSelector: '.item-portfolio',
 layoutMode: 'masonry' 
 });
 });
 } ntp_portfolio_isotope();

 /* Filtre */
 $('.filter a').click(function() {
 var selector = $(this).attr('data-filter');
 $('#portfolio-list').isotope({ filter: selector });
 $(this).parents('ul').find('a').removeClass('active');
 $(this).addClass('active');
 return false;
 });

 /* Redimensionnement */
 var isIE8 = $.browser.msie && +$.browser.version === 8;
 if (isIE8) {
 document.body.onresize = function () {
 ntp_portfolio_isotope();
 };
 } else {
 $(window).resize(function () {
 ntp_portfolio_isotope();
 });
 }

 /* Orientation */
 window.addEventListener("orientationchange", function() {
 ntp_portfolio_isotope();
 });

 });
 });
</script> 
<?php } }
add_action ('wp_footer', 'ntp_isotope_js');

Étape n°5 – Ajout des classes CSS

Pour un rendu correct, il nous faut ajouter quelques lignes de code CSS. Attention à ne pas modifier le nom des classes CSS précédemment ajoutées dans les fichiers PHP.

/*--------------------------------------------------------------
    Portfolio
-------------------------------------------------------------- */

/* Grille portfolio */
ul#portfolio-list { 
    margin-top: 20px;    
}
ul#portfolio-list h2 { 
    font-weight: lighter;
}
.thumbnail { 
    width: 85%;
}
.isotope, .isotope .isotope-item {
    -webkit-transition: all 0.6s ;
    -moz-transition: all 0.6s ;
    -ms-transition: all 0.6s ;
    -o-transition: all 0.6s ;
    transition: all 0.6s ;
}
.isotope {
    transition-property: height, width;
}
.isotope .isotope-item {
    transition-property: transform, opacity;
}
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    transition-duration: 0s;
}
ul#portfolio-filter {
    margin-top: 20px;
}
a.thumbnail:hover, a.thumbnail:focus {
    border-color: #27AAE2;
    box-shadow: none;
    outline: 0 none;
}
.thumbnail {
    border: 1px solid #EEEEEE;
    border-radius: 0 0 0 0;
    box-shadow: none;
}
.single-portfolio header {
    text-align: center;
}
.single-portfolio h1 {
    margin: 50px auto 0;
}
.single-portfolio h2 {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: lighter;
    margin: 0;
}
#bg-portfolio {
    background: rgb(69,72,77); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    border-bottom: 1px solid #D4D4D4;
    border-top: 1px solid #D4D4D4;
    margin: 20px 0;
    padding: 50px 0;
}
ul#project-details li {
    margin: 10px 0;
}
.single-portfolio .carousel img {
    height: auto;
    left: 0;
    margin: 0 auto;
    min-width: inherit;
    position: relative;
    top: 0;
}

Étape n°6 – Vérifier le résultat final

Pour terminer, il nous faut ajouter un lien d’accès au portfolio. Sous Apparence puis Menus, rajoutez un Lien avec l’URL du portfolio typiquement : http://neticpro.fr/portfolio/

Pour aller plus loin

#1 – Augmenter le nombre d’éléments affichés dans la galerie

Le nombre d’éléments affichés est limité au paramètre défini dans les réglages de lecture de WordPress. Vous pouvez rajouter ce bout de code dans le fichier de fonctions pour en afficher 99 bien que je ne vous conseille pas de dépasser 50 éléments avec ce type de script.

/* Nombre d'items à afficher dans le portfolio */
function ntp_cpt_item( $query ) {
 if ( is_post_type_archive( 'portfolio' ) ) {
 $query->set( 'posts_per_page', 99 );
 return;
 }
}
add_action( 'pre_get_posts', 'ntp_cpt_item', 1 );

#2 – Ajouter un effet fancyBox sur les éléments

Si vous ne souhaitez pas ouvrir une page détaillée pour décrire l’item, vous pouvez tout aussi bien afficher l’image en plus grand via un effet fancyBox.

Pour ce faire, intégrer le script fancyBox puis appelez en se basant sur les mêmes méthodes décrites ci-dessus pour Isotope. Je n’irais pas plus loin ici car cela pourrait faire l’objet d’un autre tutoriel.

#3 – Activer le responsive si absence de Twitter Bootstrap

Dans mes exemples, les images disposent d’une taille en pourcentage ce qui autorise une adaptation en fonction de la résolution de la fenêtre. Si vous n’utilisez pas une telle solution, vous devriez lire la documentation relative à ce sujet sur le site Isotope.

Vous disposez à présent d’un portfolio de vos plus belles créations avec un code optimisé, adaptatif et entièrement conçu pour WordPress. Des suggestions d’améliorations ?

78 commentaires

zakaria SAIGHI (@fennecrea)
8 octobre 2013 à 10 h 20
Merci pour le tuto! Il y’a quelque moi j’avais réalisé mon portfolio WP + Isotope. Qu’en pensez-vous? http://www.fennecrea.com
Needhelp
8 octobre 2013 à 17 h 33
Merci pour ce tuto.
Par contre j’ai dû manquer une étape car lorsque je tente d’accéder à la page archive-portfolio.php, j’ai l’erreur suivante : « Fatal error: Call to undefined function get_header() in C:\wamp\www\wordpress\wp-content\themes\Pronto\achive-portfolio.php on line 1 »
J’utilise le thème Pronto et j’aurais aimé le rendre un peu plus dynamique grâce à votre tutoriel.
Merci pour votre aide.
1. Aurélien Denis auteur de l’article
  11 octobre 2013 à 13 h 38
  Essayez avec le thème par défaut de WordPress. Si c’est OK alors Pronto pose souci.
SEVRIN Alexandre
11 octobre 2013 à 6 h 19
Bonjour Aurélien, merci pour ce tuto que je ne manquerai pas de mettre à profit quand je serai un peu plus familiarisé avec WordPress… Etant relativement débutant, et disons le, amateur, connaîtrais-tu une extension permettant d’arriver à un résultat similaire? En effet le thème que j’utilise actuellement permet de créer de très belle pages portfolio, mais pas de les filtrer par catégorie ou mots clés…
1. Aurélien Denis auteur de l’article
  11 octobre 2013 à 13 h 10
  Oui il existe beaucoup de plugins mais il est vrai que de nombreux le proposent en natif (ce qui peut poser des bugs de compatiblité avec des plugins). Pas de plugins en tête, mais une recherche dans le répertoire officiel ou en premium te fournira sans doute de très bon résultats.
Kamel
28 octobre 2013 à 15 h 21
Je rencontre un petit problème : l’animation ne s’effectue pas, les items sont là, mais dès que l’on clic dessus rien ne se passe. Quelqu’un peut-il m’aider ?
1. Kamel
  30 octobre 2013 à 9 h 05
  Après vérification, j’ai vu que : sur ce passage
  function ntp_isotope_js() {
  if (!is_admin() && is_post_type_archive(‘portfolio’)) { ?>
  jQuery(function($) {
  Uncaught ReferenceError: jQuery is not defined
  $(window).load(function() {
  On me signale « Uncaught ReferenceError: jQuery is not defined » à la ligne JQuery function. Personne pour m’aider ?
  1. Aurélien Denis auteur de l’article
    7 novembre 2013 à 10 h 01
    Vérifies que jQuery se charge bien… bizarre.
    1. Kamel
      10 novembre 2013 à 12 h 53
      Y a t-il un script particulier pour inclure Jquery dans un site WordPress ? Ou est-ce la même méthode » «
      1. Aurélien Denis auteur de l’article
        13 novembre 2013 à 15 h 58
        WordPress intègre jQuery de base…
SR
6 novembre 2013 à 9 h 38
Bonjour,
J’apprécie vraiment ton blog car il me fait gagner un temps fou moi qui ne suis pas développeur … Par contre j’ai vu quelques points à corriger dans la page PHP sauf erreur de ma part ?
echo »;
echo ‘Tout‘;
à remplacer par
echo »;
echo ‘Tout‘;
sinon la fonction js ne point pas sur les bons éléments.
Merci
SR
1. SR
  6 novembre 2013 à 9 h 40
  zut … visiblement problème d’interprétation, html dans le commentaire …
  je disais qu’il manque : class= »filter clearfix » dans le id= »portfolio-filter »
  et : class= »active » dans le href= »#all »
  @+
  SR
  1. Aurélien Denis auteur de l’article
    6 novembre 2013 à 18 h 19
    Oui merci de m’envoyer un pastebin. J’éditerai les 2 commentaires en conséquence.
Amaterasu
16 novembre 2013 à 20 h 33
Merci pour le tuto.
Malheureusement, lorsque je fais charger le fichier jquery.isotope.min.js, celui ci ne l’est apparemment pas, puisqu’il n’apparaît pas dans les fichiers chargés (F12/Ressource).
Aurais-je fais une mauvaise manipulation ?
1. Aurélien Denis auteur de l’article
  22 novembre 2013 à 10 h 00
  Vérifiez le code source de la page et notamment si le lien vers le JS fonctionne bien et que vous pouvez en visualiser le code. Sinon, il y a un bug dans votre chemin.
Ludo
5 décembre 2013 à 18 h 00
Salut Aurélien, tout d’abord un grand merci pour ce tutorial grandement utile !
Cependant, mes filtres ne marches pas… Lorsque je clique sur un « type », il y a juste mon URL qui change /portfolio/#exemple-type.
Voilà, je voulais savoir si tu savais pourquoi, car j’ai refais plusieurs fois le tuto et rien ne change.
Deuxième question, mes contenant les posts sont plus grand que le thumbnail en lui même, pourquoi ?
En attendant ta réponse, je te souhaite une bonne soirée !
Merci
Ludo
1. Ludo
  5 décembre 2013 à 18 h 02
  (je rectifie car la balise -li- a été prise en compte )
  Deuxième question, mes -li- contenant les posts sont plus grand que le thumbnail en lui même, pourquoi ?
2. Aurélien Denis auteur de l’article
  7 décembre 2013 à 10 h 17
  Si le changement sur le type – autrement dit la bascule, ne s’effectue pas, alors il faut vérifier que les scripts se chargent bien via la console de Firebug par exemple sous Firefox.
  Pour la seconde question, il peut y avoir des régénération de miniatures à opérer également.
  Ma réponse est plutôt technique mais ce tutoriel s’adresse plutôt à des utilisateurs avertis.
  1. Ludo
    9 décembre 2013 à 11 h 21
    Il manquait les classes filter clearfix dans mon ul portfolio-filter.
    Bonne continuation
Naomi
10 décembre 2013 à 17 h 54
I wish this was in English because I am so confused. I can’t get the filters working.
1. Aurélien Denis auteur de l’article
  14 décembre 2013 à 12 h 30
  Hey sorry for that, no English version here… but maybe on Google you should find a localized version of this tutorial, no?
Mangekyou
24 décembre 2013 à 8 h 19
Bonjour,
Je voudrais savoir comment récupérer le « type » de chaque item du portfolio en php.
J’ai essayé avec la variable $termname mais celle-ci reste toujours la même, elle ne change pas en fonction de l’item
1. Aurélien Denis auteur de l’article
  24 décembre 2013 à 11 h 32
  Tu veux sans doute parler du terme de la taxonomie ?
  1. Mangekyou
    24 décembre 2013 à 18 h 11
    Oui c’est ça. J’ai tout essayé ($termname, $term->name, la fonction get_term() …) mais sans succès.
    Je voudrais afficher sa catégorie à chaque item juste en dessous de celui-ci.
    1. Aurélien Denis auteur de l’article
      28 décembre 2013 à 11 h 59
      Il faudrait voir le code pour cela mais sincèrement je n’ai pas vraiment le temps de m’y pencher en ce moment… passes plutôt par les forums anglais ou français.
      1. Mangekyou
        4 janvier 2014 à 7 h 34
        C’est bon, je suis passé pas les Forums Grafikart et j’ai résolu mon problème
Ross
8 janvier 2014 à 16 h 15
Très bon article ! C’est justement ce que je recherchais. Dommage qu’il n’y ait pas plus d’info sur la page « single-portfolio.php »
Jelak
13 février 2014 à 19 h 02
Bonjour !
tout d’abord merci pour ce tuto très bien fait.
Ensuite je souhaiterais signaler si certains d’entre ont les filtres qui ne fonctionnent pas qu’il manque deux fois « filter » dans le code html de archive-portfolio.php.
à remplacer par
quelques lignes plus loin :
à remplacer par ;
En tous pour moi cela fonctionne, sinon les filtres n’étaient pas actifs
Pour finir j’aurais une question : comment afficher les archives du portfolio sur deux colonnes ?
J’essaie désespérement depuis quelques heures mais je galère.
J’ai bien vu que la boucle affichait un par boulot. Peut-être une boucle qui en affiche deux (un par colonne) ?
Merci
1. Aurélien Denis auteur de l’article
  13 février 2014 à 19 h 52
  Le code n’est pas passé. Merci de passer par un service en ligne comme pastebin et de poster un commentaire. Je nettoierai le tout une fois cela fait.
  1. Jelak
    20 février 2014 à 16 h 22
    Voici le code du début de archive-portfolio.php
    http://pastebin.com/ciSZEi8c
    Je tente toujours d’afficher les items sur deux colonnes, en vain.
    J’ai essayé plusieurs mode layout, ai défini des largeurs de colonnes (ou pas), etc. rien n’y fait. Les items sont affichés en deux colonnes au chargement de la page (les 2 premières secondes), puis se repositionnent l’un en dessous de l’autre.
    Est-ce que cela pourrait venir du fait que tu utilises des UL et LI au lieu de DIV ?
    Sinon quelqu’un aurait-il la solution svp ?
    Merci
    1. Jelak
      20 février 2014 à 18 h 36
      Il y a une évolution : maintenant les items sont bien affichés sur deux colonnes lorsqu’on arrive sur la page. Mais si on clique sur un filtre, les items se repositionnent l’un en dessous de l’autre et non plus sur deux colonnes.
      1. Aurélien Denis auteur de l’article
        22 février 2014 à 11 h 25
        C’est compliqué de dépanner sans être en direct. Il faut bien comprendre comment fonctionne le script Isotope ou Masonry car les contraintes sont fortes.
      2. Jelak
        26 février 2014 à 11 h 03
        J’ai justement mis le site en ligne :
        http://www.institut-paysage-environnement.com/gestain/
        Le bug dans la page ‘références’ subsiste toujours, passage sur une colonne si on clique sur un filtre.
        Les lignes de code correspondantes dans archive-reference.php : http://pastebin.com/AGJsfbqj
        Merci pour ton aide
Salah
16 février 2014 à 14 h 38
Salut,
Merci pour ce tuto vraiment très bien fait.
J’ai une petite question concernant la personnalisation des thumbnails. J’ai beau changer le code css, retirer les « border : solid » mes thumbnails s’affichent systématiquement avec un rebord aux coins arrondis. Je ne sais pas où trouver le bon code css pour changer cela.
Une idée ?
Merci
1. Salah
  16 février 2014 à 18 h 18
  J’ai trouvé -> le css de bootstrap
dam1en
16 février 2014 à 18 h 04
bonjour,
j’aimerai intégrer isotope.js,
cependant je cherche un moyen de filtrer les projets avec un système de « sous-filtres »
comme sur la page suivante :
http://www.grifo.tv/#/tags/
avez vous une idée ?
David
26 février 2014 à 17 h 18
Bonjour
Il y a une erreur dans le code de l’étape #3 à la ligne 31.
Après le li id, apparaît {{{PHP7}}} alors qu’on devrait voir post_class(‘item-portfolio’); à l’intérieur d’une balise php pour que les classes puissent être ajouté aux items de portfolio.
Sinon, très bonne explication de comment intégrer isotope dans WordPress.
1. Aurélien Denis auteur de l’article
  26 février 2014 à 17 h 22
  Effectivement et nous travaillons à la résolution de ce bug avec le développeur du plugin pour afficher du code sous WordPress. C’est dans notre to-do ! Merci de l’avoir rappelé.
Julien Maury (@TweetPressFr)
2 mars 2014 à 20 h 54
Bonjour, en effet cela ne peut pas marcher déjà à cause de la fonction wp_enqueue_script(), son paramètre $deps doit être un array or ici c’est un string donc écrire plutôt array(‘jquery’) ensuite ce code {{{PHP7}}} on ne voit pas très bien à quoi cela correspond.
On ne comprend pas bien pourquoi le code js est mis dans le footer avec une balise script. On pourrait très bien l’enqueue en le faisant dépendre de isotope.non?
a +
1. Julien Maury (@TweetPressFr)
  2 mars 2014 à 21 h 08
  S’ajoute if(!is_admin()) inutile sur wp_enqueue_scripts mais ce n’est pas ça qui empêche le code de marcher
  1. Aurélien Denis auteur de l’article
    2 mars 2014 à 21 h 57
    Corrections effectuées pour la dépendance dans un tableau et le bug PHP7 – Pastacode bugue avec mon site mais problème signalé.
    Oui je suis d’accord avec toi pour l’inclusion du script. Ça revient au même en fin de compte…
    Et merci pour le if(!is_admin) qui est inutile, on m’avait fait la remarque au WordCamp mais je n’ai pas pensé à éditer les tutoriels qui en parlent.
    1. Julien Maury (@TweetPressFr)
      2 mars 2014 à 22 h 55
      De rien, je voulais mettre ça en place rapidement dans une des sections de mon blog mais ça foirait alors j’ai regardé le code. En revanche j’ai pas encore fait marcher la fonction tri, t’es sûr du markup?
      1. Julien Maury (@TweetPressFr)
        2 mars 2014 à 23 h 48
        Bon j’ai fait marcher le script mais il faut corriger encore sur la balise ul des filtres de recherche : rajouter la class filter sinon le js est inopérant.
Aurélien Denis auteur de l’article
3 mars 2014 à 9 h 43
Oui corrigé également.. et dire que je l’ai en place dans mon code actuel pour mon propre site.
Vincent Guesné
13 mai 2014 à 19 h 10
Pour ceux qui ont un soucis avec imageLoaded : « Undefined is not function »
il faut inclure, le script http://imagesloaded.desandro.com/ de la même façon que isotope et ça fonctionne
domguillemet
17 mai 2014 à 0 h 01
Bonjour Aurélien,
Merci pour le tuto. Y-aurait-il un moyen de faire pointer l’affichage sur une catégorie en particulier, d’éviter le « Tout » ?
Merci.
1. Aurélien Denis auteur de l’article
  2 juin 2014 à 11 h 53
  Oui c’est faisable en modifiant le code qui affiche la liste déroulante…
  1. domguillemet
    3 juin 2014 à 9 h 55
    Qui se trouve dans le jquery, dans le php, dans les deux ? Quel code, ou est-ce trop demander ?
    1. aida
      19 juin 2014 à 16 h 19
      J’ai le même problème que domguillemet, merci de répondre svp
      1. aida
        24 juin 2014 à 12 h 54
        personne pour m’aider?
      2. domguillemet
        24 juin 2014 à 16 h 07
        Je ne sais pas quel thème tu utilises, mais l’affichage des catégories, et en particulier du « Tout » dont on se passerait bien, est géré :
        -d’une part dans le jquery : rechercher quelque chose du genre : _filter:function(a){var b=this.options.filter=== » »? »* »:this.options.filter; et changer le caractère « * » par « .1 », ce qui veut dire que s’il n’y a pas de filtre préétabli, le filtre se fait sur la catégorie dont l’id (ou le slug) est 1… mais ça ne suffit pas…
        -ensuite dans le php du portfolio, mais j’ai beau changer le « Tout », le supprimer… les vignettes continuent à s’afficher…
        -et aussi (c’est mon cas) dans le header.php…
        -et peut-être encore ailleurs.
        Je sais, ça ne t’aide pas beaucoup, mais voilà où j’en suis…
        A tout hasard, un lien pour t’aider :
        http://isotope.metafizzy.co/options.html
    2. aida
      24 juin 2014 à 16 h 51
      Salut domguillemet, merci pour ta reponse.
      En fait j’utilise Eleven comme theme, J’ai deja modifié le js, le fichier php et resultat: j’ai plus ALL, ni tous les autres items,mais il faut cliquer sur une categorie pour qu’ils s’affiche.
      voici mon js
      /*************************
      * Isotope
      *************************/
      jQuery(window).load(function(){
      if(typeof jQuery(‘body’).isotope == ‘function’ && useIsotope == 1){
      var $container = $(‘.portfolio’);
      $container.isotope({
      filter:’.nos-realisations’,
      animationEngine: ‘best-available’,
      animationOptions: {
      duration: 750,
      easing: ‘linear’,
      queue: false,
      },
      layoutMode: ‘fitRows’
      });
      $container.imagesLoaded(function() {
      setColumns();
      });
      $(‘nav.primary ul a’).click(function(){
      var selector = $(this).attr(‘data-filter’);
      $container.isotope({
      filter: selector,
      animationOptions: {
      duration: 750,
      easing: ‘linear’,
      queue: false,
      }
      });
      return false;
      });
      var $optionSets = $(‘nav.primary ul’),
      $optionLinks = $optionSets.find(‘a’);
      $optionLinks.click(function(){
      var $this = $(this);
      if ( $this.hasClass(‘selected’) ) {
      return true;
      }
      var $optionSet = $this.parents(‘nav.primary ul’);
      $optionSet.find(‘.selected’).removeClass(‘selected’);
      $this.addClass(‘selected’);
      });
      } else { console.warn(‘Isotope plugin not loaded’);}
      });
      1. aida
        28 juillet 2014 à 11 h 00
        J’ai finalement trouvé la solution!!
        il fallait mettre filter:’. filter-realisations’ à la place de filter:’. realisations’ realisations etant l’id de la categorie dont on veut afficher les elements.
Devier
2 juin 2014 à 10 h 48
Bonjour, merci pour ce tuto que je trouve très bien fait. Mais, j’ai une question : Dans votre exemple sur votre site dans la colone de droite vous avez inséré des petites vignettes qui font juste changer la grande image de droite (sans changer de page). Comment vous y êtes vous pris. Cela m’intéresse beaucoup…. Merci
Devier
2 juin 2014 à 10 h 50
oups, je voulais dire, des petites vignettes qui font juste changer la grande image de Gauche. (Pardon!!!)
1. Aurélien Denis auteur de l’article
  2 juin 2014 à 11 h 38
  C’est un développement personnel, pas de plugins pour faire cela.
  1. Devier
    2 juin 2014 à 16 h 36
    je m’en doutais mais merci pour votre réponse… Si vous aviez une piste ou un lien pour que je puisse comprendre, voir apprendre a mettre un tel dispositif sur mon site j’en serais vraiment ravi. Merci encore en tous cas !
Emmanuelle
6 juin 2014 à 7 h 34
Bonjour,
Depuis que j’ai découvert votre site je suis accro.
je suis une débutante wordpress avec quelques notions de code. J’aurais souhaiter avoir cet effet portfolio pour mes post sur ma front page et l’associer à un slide, en gros un peu comme sur ce blog –> http://www.mylittlefabric.com
Est ce possible avec ce tutoriel? Et y-a t-il beaucoup de changement à faire au niveau code?
Merci pour votre aide et pour vos tuto super bien expliqués.
Raphael
25 juillet 2014 à 11 h 24
Bonjour et un grand merci pour tout ce que tu fais. Ce n’est pas la première fois que j’obtiens une réponse à mes questions sur ton site.
J’ai cependant une question qui reste sans réponse actuellement…
Est-il possible de créer une condition qui dit : Lorsque je clique sur un bouton filtre et que le contenu est vide, j’écris « Coming Soon » plutôt qu’avoir une page blanche? J’imagine que pour cela il faut modifier le fichier source d’isotope. Si oui, je ne suis pas contre une petit exemple du code à inscrire et où le placer. ne comprenant pas tout dans le fichier, j’ai du mal à savoir où placer cette condition.
Voici le lien qui montre le projet sur lequel je souhaiterais réaliser cela :
http://www.obba-lingerie.com/test/collection/
(L’idée étant que certaine collection ne sont pas encore sortie comme « OUI » ou « SIRENE ». Du coup, il faudrait un message qui indique « Coming soon »)
Un grand merci d’avance et encore Bravo !!!
1. Raphael
  25 juillet 2014 à 12 h 39
  J’avais pensé à un petit script mais je dois me tromper quelque part car ça ne marche pas :
  …
  Coming Soon
  $(document).ready(function(){
  if ($(‘#content’).height(0) {
  $(« #ComingSoon »).css({
  ‘opacity’: ‘1’
  });
  })
  1. Aurélien Denis auteur de l’article
    25 juillet 2014 à 12 h 44
    Par le JS, je ne saurais pas dire. En PHP, j’agirais sur get_terms qui permet d’exclure certains termes ou de masquer ceux qui n’ont pas de contenu.
    Sinon, à voir dans la boucle avec des conditions pour afficher un texte « à venir » par exemple.
    1. Raphael
      25 juillet 2014 à 13 h 59
      Merci pour ta réponse rapide. J’ai essayé ta 1ere méthode sans succès. La 2ème me semble peut réalisable avec le plugin Woocommerce. Normalement, j’aurais aussi fait une condition selon la boucle. Mais ici, pas de boucle visible dans content-product.php de Woocommerce.
      C’est pas grave merci quand même, je trouverais la solution à long terme
      Enjoy !!!
Bigbenny
4 octobre 2014 à 0 h 31
Salut Aurelien,
Moi lorsque je clique sur un des filtres, tous les elements disparaissent!
merci pour ton aide
Alice
23 décembre 2014 à 16 h 55
Salut et merci pour ton blog! Je m’en sers souvent et ça m’est très utile!
Je me sers d’Isotope et de ses possibilités masonry. Tout marche, après quelques heures de bricolages, j’ai même réussit à créer plusieurs types de filtres…
Je me demandais si tu avais une solution pour le masonry, j’ai une erreur d’affichage lorsque la page load, les blocs peuvent (mais pas toujours) passer les uns au dessus des autres… Si je recherche ou si je rétrécis ma page tout revient à la normale…
Si tu as une idée… -> weareucpa.com
Et bravo encore pour ce site super utile
Alice
1. Aurélien Denis auteur de l’article
  24 décembre 2014 à 13 h 42
  Merci du commentaire ! C’est toujours difficile de déboguer à distance sur ce type de scripts…
  1. alicegelmi586018283
    24 décembre 2014 à 14 h 43
    Je ne voulais pas te charger de code direct, je voulais juste savoir si tu avais déjà groupé les deux, et si m’autorisais du coup à poster le script, si jamais tu as un bout de temps à me donner, mais je sais que c’est vite chronophage!!
    1. Aurélien Denis auteur de l’article
      24 décembre 2014 à 15 h 02
      Oui tu peux toujours partager sur pastebin
      En principe, selon le tutoriel, les 2 doivent fonctionner ensemble à condition de faire un reload pour éviter le chevauchement. Pour autant, ces scripts évoluent rapidement et il est possible qu’il faille procéder autrement.
annapseudo
11 février 2015 à 14 h 19
Bonjour,
Merci beaucoup pour ce tutoriel très clair et ô combien utile !
J’ai suivi à 3 reprises toutes les étapes mais je ne parviens pas à obtenir de résultat sur ma page portfolio, j’ai les thumbnails mais rien ne bouge en cliquant sur les filtres, pourtant isotope.min.js est bien appelé.
La seule chose que je vois comme explication est que je suis dans un child theme de twentytwelve. L’étape 4 n’est peut-être pas bonne dans mon cas du coup.
Comment faire fonctionner isotope dans un child theme selon vous ?
D’avance merci pour votre écoute !
1. Aurélien Denis auteur de l’article
  14 février 2015 à 11 h 02
  Si les scripts se chargent bien, les chemins doivent être corrects. A voir si vous n’avez pas une erreur dans la console dans les outils de développement.
annapseudo
27 août 2015 à 12 h 27
Bonjour Aurélien,
Pour que ça fonctionne, pour appeler correctement le js depuis le fichier functions de mon child theme, j’ai dû remplacer à l’étape 4 la ligne
get_template_directory_uri().’/inc/js/jquery.isotope.min.js
par
get_bloginfo( ‘stylesheet_directory’ ).’/js/jquery.isotope.min.js’
Je suis étonnée que cela marche sans cette modif dans le child theme des autres personnes qui ont suivi ton tuto…? A ce moment, j’aimerais bien comprendre
1. Aurélien Denis auteur de l’article
  30 août 2015 à 17 h 09
  Pour un thème enfant, il convient d’utiliser get_stylesheet_directory_uri. Surtout pas un get_bloginfo.
annapseudo
27 août 2015 à 12 h 30
D’autre part, j’aimerais changer la taille des vignettes, que je trouve un peu petites. Mais pour l’instant je n’ai pas trouvé comment faire ..
annapseudo
27 août 2015 à 12 h 59
J’ai remarqué que si l’on avait des images de format portrait et d’autre en paysage, ça ne fonctionnait pas correctement : les images ne s’imbriquent pas bien, il y a des grands vides entre elles et la mozaïque voulue au départ ne fonctionne pas.
Saurais-tu comment on peut éviter ce problème ?
A ce moment, est-ce que cette solution tuto s’adapte mieux en n’ayant que des images (sans textes, titres etc) ? https://wpchannel.com/masonry-infinite-scroll-wordpress/
1. Aurélien Denis auteur de l’article
  30 août 2015 à 17 h 11
  Il faut utiliser un Masonry qui est un script du même auteur que Isotope. Cette documentation fournit les éléments de réponse : http://isotope.metafizzy.co/layout-modes/masonry.html
infographiste freelance
11 décembre 2015 à 2 h 47
Super tutoriel très complet ! J’utilise déjà le template de page portfolio de mon thème en place, mais j’aurai bien l’utilité d’utiliser ce portfolio sur mesure que tu expliques pour tester sur un de mes autres sites
Bobinet sacha
11 janvier 2016 à 16 h 44
Bonjour je me demandais s’il etait possible de rajouter une combinaison de filtre pour le portfolio ?
1. Aurélien Denis auteur de l’article
  12 janvier 2016 à 10 h 27
  Le fait de pouvoir combiner plusieurs filtres ?
Eddy
7 avril 2017 à 11 h 01
Je me pose la même question que Sacha. Avoir plusieurs taxos et cumuler les critères.
J’ai des recettes avec 2 taxos : type et difficulté.
Pourrais-je filtrer sur dessert et peu coûteux ?