Tutoriel : Intégrez MixItUp à WordPress

MixItUp est un plugin pour jQuery, léger mais puissant, qui vous permet de filtrer et trier votre contenu avec de belles transitions. Il s’intègrera parfaitement avec votre code HTML et CSS existant, parfait lorsque vous utilisez un affichage responsive ou fluide sur votre site. Le genre de librairie idéale pour vos portfolios, boutiques ou galeries. Vous pouvez voir quelques démos sur le site officiel.

tutoriel mixitup wordpress

[symple_heading type= »h2″ title= »Comment ça fonctionne ? » margin_top= »20px; » margin_bottom= »20px » text_align= »left » font_size= » »]

La librairie utilise d’abord jQuery pour cacher ou afficher vos éléments selon vos filtres, puis applique les transitions proposées par le CSS3 pour un rendu parfait dans vos navigateurs. La solution est donc un peu plus légère que les plugins proposant la même chose mais seulement avec Javascript. Afin de s’intégrer à vos designs, le plugin ne force pas la position « absolute ». Tous vos éléments restent dans leur position naturelle, ainsi votre design fluide restera exactement comme vous l’avez créé.

La librairie est évidement optimisée pour les navigateurs CSS3-ready. Pour les plus anciens, il se dégrade proprement vers un simple filtre qui affichera ou masquera les éléments. Un choix assumé pour garder la librairie aussi légère que possible.

[symple_heading type= »h2″ title= »Comment l’utilise-t-on ? » margin_top= »20px; » margin_bottom= »20px » text_align= »left » font_size= » »]

Avant d’attaquer l’essentiel du tutoriel, passons par la base. Vous pouvez utiliser votre propre grille avec MixItUp. La seule nécessité est d’avoir un conteneur avec un id unique (par exemple #grid) et que vos éléments soient identifiés par la classe .mix (elle peut être changée dans les options de la librairie.

Côté HTML

Un exemple de formatage :

<ul id="grid">
    <li class="mix dogs"></li>
    <li class="mix cats"></li>
    <li class="mix krakens"></li>
    <li class="mix dogs cats"></li>
    <li ...
</ul>

Vous pouvez ajouter d’autres informations qui vous permettront de trier vos données dans le code de cette manière :

<ul id="grid">
    <li class="mix dogs" data-name="Abby" data-age="2"></li>
    <li class="mix cats" data-name="Bucky" data-age="9"></li>
    <li class="mix dogs" data-name="Molly" data-age="5"></li>
    <li class="mix krakens" data-name="Kraken" data-age="3987"></li>
    <li ...
</ul>

L’attribut data-name permettra un tri alphabétique et data-age par âge.

Définissez vos filtres

Par défaut, MixItUp appliquera l’action de filtre sur tout élément avec la classe .filter (option qui peut être encore une fois changée dans les options de configuration). Quand un filtre sur une catégorie est actif, le bouton correspondant sera attribué de la classe .active, utile pour appliquer un style différent à votre bouton.

<ul>
    <li class="filter" data-filter="dogs"></li>
    <li class="filter" data-filter="cats"></li>
    <li class="filter" data-filter="krakens"></li>
    <li class="filter" data-filter="dogs cats"></li>
</ul>

Pour des besoins particuliers, vous pouvez aussi filtrer vos éléments avec la méthode Javascript ‘filter’.

Définissez vos choix de tris

De la même manière que pour les filtres, vous pouvez définir vos tris par la classe .sort et la modifier dans les options. Ces boutons peuvent aussi faire partie d’une liste non-ordonnée, en ajoutant un attribut data-sort pour le tri et data-order pour l’ordre :

<ul>
    <li class="sort" data-sort="data-name" data-order="desc"></li>
    <li class="sort" data-sort="data-name" data-order="asc"></li>
    <li class="sort" data-sort="data-age" data-order="desc"></li>
    <li class="sort" data-sort="data-age" data-order="asc"></li>
    <li class="sort" data-sort="default" data-order="asc"></li>
    <li class="sort" data-sort="random"></li>
</ul>

Ajoutez le Javascript

MixItUp est comme je l’ai cité plus haut, une librairie jQuery. Vous aurez donc besoin d’ajouter la librairie avant MixItUp

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.mixitup.min.js"></script>

Pour créer votre instance, rien de plus simple, ajoutez le code suivant :

$(function(){

    $('#grid').mixitup();

});

Tant que vous utilisez le formatage par défaut de MixItUp, tout devrait fonctionner avec cette simple ligne.
Si vous avez modifiez quelque chose dans les classes par défaut, n’oubliez pas de modifier les options dont voici la description :

$('#Grid').mixitup({
    targetSelector: '.mix',
    filterSelector: '.filter',
    sortSelector: '.sort',
    buttonEvent: 'click',
    effects: ['fade','scale'],
    listEffects: null,
    easing: 'smooth',
    layoutMode: 'grid',
    targetDisplayGrid: 'inline-block',
    targetDisplayList: 'block',
    gridClass: '',
    listClass: '',
    transitionSpeed: 600,
    showOnLoad: 'all',
    sortOnLoad: false,
    multiFilter: false,
    filterLogic: 'or',
    resizeContainer: true,
    minHeight: 0,
    failClass: 'fail',
    perspectiveDistance: '3000',
    perspectiveOrigin: '50% 50%',
    animateGridList: true,
    onMixLoad: null,
    onMixStart: null,
    onMixEnd: null
});

Pour plus d’informations sur les options et la configuration, rendez vous sur la page dédiée à la librairie.

[symple_heading type= »h2″ title= »Intégration à WordPress » margin_top= »20px; » margin_bottom= »20px » text_align= »left » font_size= » »]

Voilà maintenant la partie que vous attendiez, l’intégration avec WordPress. Le but de ce tutoriel est non seulement de vous expliquer comment l’ajouter à votre site, mais aussi de vous montrer que l’on peut le faire avec le moins de modifications possibles.
Partons du thème gratuit pour WordPress Imabalance 2. Le design, en grille, est idéal pour y intégrer MixItUp.

[symple_box color= »red » text_align= »left » width= »100% » float= »none »]
Attention, pour que MixItUp fonctionne bien dès le premier coup, il faut absolument que le thème n’utilise pas Masonry. Manque de chance, j’ai utilisé un thème qui le fait. Pas d’importance, j’ai désactivé Masonry pour ce tutoriel.

De plus, n’oubliez pas de SAUVEGARDER vos fichiers. Une erreur est vite arrivée !
[/symple_box]

N’oublions pas les 3 étapes pour ajouter la librairie :

  • Ajout du marquage HTML
  • Ajout du des filtres et tris
  • Ajout du Javascript.

Vérifions le HTML de la homepage. Le conteneur principal a pour ID #boxes. C’est donc celui que nous allons utiliser pour créer l’instance MixItUp. Les éléments, eux, ont tous la classe .box. Nous allons donc modifier les options pour coller au HTML.

mixitup wordpress

Ajoutons les filtres

Seul petit problème dans le thème, il n’existe pas de menu que nous pourrions utiliser correctement pour afficher les filtres. Il va donc falloir modifier un peu le code HTML pour le faire.

Tout d’abord, ouvrez le fichier header.php. Nous allons y ajouter notre menu. Vers la ligne 214, juste après le :

<div class="clear"></div>

Ajoutez :

<?php if(is_home()) {?>
<style>
	<div id="filtres">
		<ul class="menu-filtre">
		<?php 
			$categories=  get_categories();
			foreach ($categories as $category) 
				echo '<li class="filter" data-filter="'.$category->category_nicename.'"><span>'.$category->cat_name.'</span></li>';
			?>
		</ul>
	</div>
	<div class="clear"></div>
<?php } ?>

Ce code va nous permettre d’afficher les filtes uniquement sur la page d’accueil. Le hic, c’est que le formatage n’est pas très lisible. Ajoutez y un peu de CSS (idéalement dans votre fichier style.css) :

/* Cette partie est obligatoire pour faire fonctionner la librairie correctement */

#boxes .box{
    opacity: 0;
    display: none;
}

/* Fin de la partie obligatoire */

#filtres {
	float: left;
	clear: both;
}
			
ul.menu-filtre {
	 float: left;
	 display: block;
	 font-size: 13px;
	 list-style-type:none;
}
			
	ul.menu-filtre li {
		display: inline-block;
		color: white;
		background: #0768ad;
		margin: 5px;
	}
			
		ul.menu-filtre  li span {
			white-space: nowrap;
			display: inline-block;
			margin: 0 14px 0 10px;
			padding: 5px 0;
		}
			
		ul.menu-filtre li a:hover {
			background-color:#333;
		} 

Maintenant que nous avons un menu simple, avec le bon formatage pour fonctionner avec MixItUp, il faut s’attaquer aux éléments de notre page. Nous allons garder la classe qu’ils utilisent mais nous allons ajouter les catégories correspondantes dans le formatage afin de permettre à MixItUp de les reconnaître.
Ouvrez le fichier loop.php, qui gère l’affichage de la page d’accueil et remplacez la ligne :

<div class="box" ....

par :

<div class="box <?php foreach(get_the_category() as $category) { echo $category->slug . ' ';} ?>" ... 

Le Javascript

Téléchargez la librairie si ce n’est pas encore fait. Envoyez ensuite le fichier jquery.mixitup.min.js dans le répertoire libs du thème par exemple.
Ajoutez ensuite après la ligne 19, ceci :

<script type='text/javascript' src="<?php echo get_template_directory_uri(); ?>/libs/jquery.mixitup.min.js"></script>

Puis, vers la ligne 194, juste avant :

});
</script>

ajoutez le code suivant :

$('#boxes').mixitup({
	targetSelector: '.box'
});

Souvenez-vous, nous deviens changer la classe des éléments par défaut par celle utilisée dans le thème : .box.

Nous y sommes, MixItUp a été ajouté et fonctionne avec notre thème. Si vous voulez voir une démo, rendez-vous sur la démo Kune.fr de MixItUp.
N’hésitez surtout pas à laisser vos remarques et vos questions dans les commentaires.

Mat_

Au départ on sort avec un diplôme d’ingénieur de l’ESIL (devenu Polytech’Marseille) en Informatique, réseau et multimédia, spécialisé dans les Systèmes d’Informations et Services E-Business.
En même temps on bosse, on développe, on apprend. Et maintenant on entreprend.

Passionné de nouvelles technologies, et évangéliste de WordPress, j’aime découvrir, tester, rechercher.

Vous aimerez aussi...

8 réponses

  1. barrelny dit :

    Merci beaucoup pour le tutoriel Kune!

  2. soulpixel dit :

    Est-ce que ceci fonctionne avec mixitup 2 ?
    Merci

    • Mat_ dit :

      Non pas tout à fait. Il faut y apporter quelques modifications.
      Le mieux serait que je fasse la mise à jour de l’article, ou un nouveau.
      Mais dans l’idée, l’appel à la fonction est maintenant de type camel case :
      $(function(){
      $(‘#grid’).mixItUp();
      });

      Le CSS change aussi, plus besoin de opacity:0 . Le laisser cassera mixItUp. La règle devient donc :

      #boxes .box{
      display: none;
      }

      Enfin, les catégories sont maintenant requises dans l’attribut data-filter, utilisé par jQuery par défaut. Par exemple :

      div class="filter" data-filter=".category-1">Category 1

      Pour plus d'infos en attendant l'article, un seul lien : https://mixitup.kunkalabs.com/docs/version-1-migration/

  3. AudreyG dit :

    bonjour,
    j’aimerais savoir si on pourrait utiliser mixitup pour des articles ou des div dans une page, svp, au lieu d’image ou de médias?
    merci beaucoup.

  4. AudreyG dit :

    J’ai bien suivi jusqu’à la rubrique « Ajoutons les filtres ». Ou un peu avant… En fait, j’utilise le thème Intuition (pour lequel j’ai créée un thème enfant contenant juste un fichier style.css). Ce thème n’utilise pas masonry (du moins je ne crois pas…). Je suis perplexe, dois je faire les modifications de menu et si oui, comment? vu que je voudrais mon filtre à gauche et non pas dans le header… j’ai quelques notions très succintes de php et de html, mais là je patauge…
    Merci de ton aide…

  5. AudreyG dit :

    Petite précision, j’ai besoin d’utiliser le filtre dans plusieurs pages différentes mais pas dans home ni dans les autre pages…

Suivez Kune.fr sur les réseaux sociaux !

Kune.fr est votre site de ressources web. Vous y trouverez de nombreux outils utiles pour le web.
Alors n'hésitez plus, aimez notre page !

  • Ressources Wordpress, tutoriels, plugins et thèmes
  • Ressources design, packs d'icônes, kits UI ...
Fermer cette popup
%d blogueurs aiment cette page :