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 8 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.
É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) :
É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.
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.
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)
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
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.
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…
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.
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 ?
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 ?
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 ?
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.
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.
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
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.
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.
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) ?
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 ?
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.
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.
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.
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.
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é.
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?
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?
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
Oui corrigé également.. et dire que je l’ai en place dans mon code actuel pour mon propre site.
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
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.
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…
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.
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
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
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 !
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.
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 »)
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
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…
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!!
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.
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 !
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.
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
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/
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
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 ?
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
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.
Essayez avec le thème par défaut de WordPress. Si c’est OK alors Pronto pose souci.
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…
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.
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 ?
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 ?
Vérifies que jQuery se charge bien… bizarre.
Y a t-il un script particulier pour inclure Jquery dans un site WordPress ? Ou est-ce la même méthode » «
WordPress intègre jQuery de base…
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
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
Oui merci de m’envoyer un pastebin. J’éditerai les 2 commentaires en conséquence.
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 ?
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.
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
(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 ?
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.
Il manquait les classes filter clearfix dans mon ul portfolio-filter.
Bonne continuation
I wish this was in English because I am so confused. I can’t get the filters working.
Hey sorry for that, no English version here… but maybe on Google you should find a localized version of this tutorial, no?
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
Tu veux sans doute parler du terme de la taxonomie ?
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.
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.
C’est bon, je suis passé pas les Forums Grafikart et j’ai résolu mon problème
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 »
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
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.
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
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.
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.
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
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
J’ai trouvé -> le css de bootstrap
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 ?
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.
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é.
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 +
S’ajoute if(!is_admin()) inutile sur wp_enqueue_scripts mais ce n’est pas ça qui empêche le code de marcher
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.
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?
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.
Oui corrigé également.. et dire que je l’ai en place dans mon code actuel pour mon propre site.
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
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.
Oui c’est faisable en modifiant le code qui affiche la liste déroulante…
Qui se trouve dans le jquery, dans le php, dans les deux ? Quel code, ou est-ce trop demander ?
J’ai le même problème que domguillemet, merci de répondre svp
personne pour m’aider?
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
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’);}
});
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.
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
oups, je voulais dire, des petites vignettes qui font juste changer la grande image de Gauche. (Pardon!!!)
C’est un développement personnel, pas de plugins pour faire cela.
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 !
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.
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 !!!
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’
});
})
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.
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 !!!
Salut Aurelien,
Moi lorsque je clique sur un des filtres, tous les elements disparaissent!
merci pour ton aide
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
Merci du commentaire ! C’est toujours difficile de déboguer à distance sur ce type de scripts…
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!!
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.
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 !
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.
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
Pour un thème enfant, il convient d’utiliser get_stylesheet_directory_uri. Surtout pas un get_bloginfo.
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 ..
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/
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
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
Bonjour je me demandais s’il etait possible de rajouter une combinaison de filtre pour le portfolio ?
Le fait de pouvoir combiner plusieurs filtres ?
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 ?