2. Création d’un portfolio WordPress avec Isotope

 

Ce tuto est la seconde partie d’une suite qui vous permettra d’apprendre les points essentiels au développement WordPress.

J’ai voulu rendre la lecture de cette formation plus attractif en essayant de vous faire créer un plugin portfolio dynamique et paramétrable depuis l’admin.

1. Nouveau type de contenu (Custom Post Type)
2. Création d’un portfolio WordPress avec Isotope
3. Créer un plugin portfolio avec WordPress
4. Créer un shortcode WordPress

 

 

Objectif : Créer un portfolio WordPress avec Isotope

Réaliser un portfolio avec un design assez sympa et permettre de filtrer dynamiquement par catégorie.

Pour ce tuto on va utiliser la librairie isotope, c’est une librairie qui permet de filtrer dynamiquement, elle propose des options vraiment très puissante, je vous laisse la découvrir tranquillement et voir les exemples possible sur le site dédié.

 

1. On va commencer par réaliser un modèle de page pour éviter de modifier le fichier page.php du thème.

Pour créer un nouveau modèle de page, c’est très simple, il suffit de copier le fichier page.php puis le renommer comme vous voulez ( généralement en template-lenom.php )

Pour moi se sera template-portfolio.php.

Ajouter en haut de votre fichier le commentaire suivant :

La syntaxe est très importante, si par exemple vous faite un espace entre Name et : comme « Name : » la page ne pourra pas être utilisée en tant que modèle de page.

Créez une nouvelle page et sélectionnez portfolio en tant que modèle de page.

 

2. Il faut maintenant charger la librairie Isotope.

Pour charger un nouveau fichier javascript avec WordPress il faut utiliser la fonction wp_enqueue_script (wp_enqueue_style pour le css).

Je vous conseil de faire un nouveau fichier php pour ne pas trop encombrer le fichier function.php de votre thème.

Personnellement je fais un dossier hadouweb à la racine de mon thème wp-content/themes/montheme/hadouweb.

Je créer un fichier portfolio.php et je copie dedans le code que j’avais précédemment effectué pour le custom post type ( tuto précédent ).

Il faut ajouter cette ligne dans le function.php de votre thème pour charger votre fichier portfolio.php.

Créez un nouveau dossier js dans votre dossier principal et un nouveau fichier vide nommé isotope.min.js. ( wp-content/themes/votretheme/votredossier/js/isotop.min.js ).

Copiez dans ce fichier le code de cette page : http://isotope.metafizzy.co/isotope.pkgd.min.js

Maintenant vous devez ajouter ce bout de code (dans portfolio.php ) pour charger la librairie :

remplacer hadouweb par votre dossier si vous avez un autre nom.

 

3. On va récupérer les catégories de nos projets pour s’en servir comme filtre.

Pour récupérer les catégories du type « portfolio » il faut utiliser ce code :

Si vous utilisé les catégories par défaut de WordPress il suffit de remplacer project-cat par category, category est une taxonomy par défaut dans wordpress.

Voila le code que je vais utiliser pour mes filtres :

Dans la boucle il faut ajouter un peu de code html et surtout récupérer nos catégories ( project-cat ), pour récupérer les taxonomys lié à nos articles. voici se qu’il faut rajouter :

Au final, le contenu de votre fichier devrait ressembler à ça :

 

4. Ajouter le javascript pour animer notre portfolio WordPress.

Ajouter un nouveau fichier js au même niveau que la librairie isotope.min.js.

Je le nomme portfolio.js

Le but de ce tuto n’est pas de vous expliquer comment fonctionne isotope, il y a vraiment beaucoup d’options et c’est l’une des meilleurs librairie voir la meilleur à ma connaissance qui permet de gérer des filtres, elle peu paraitre complexe au vu des exemples du site mais pas d’inquiétude.

Pour notre portfolio WordPress on à juste besoin de ce code :

N’oubliez pas de charger ce fichier portfolio.js en ajoutant cette ligne dans la fonction portfolio_scripts()

 

5. Pour finir voici un petit code css qui permet d’avoir quelque chose de potable.

Charger le css en ajoutant cette ligne dans la fonction portfolio_scripts() :

Et copier ce code dans portfolio.css :

 

1. Nouveau type de contenu (Custom Post Type)
2. Création d’un portfolio WordPress avec Isotope
3. Créer un plugin portfolio avec WordPress
4. Créer un shortcode WordPress

One thought on “2. Création d’un portfolio WordPress avec Isotope

  1. Ce tuto m’a bien aidé, j’avais besoin d’un petit coup de main pour mettre en place…

    Par contre un détail gênant :
    dans la variable $filter des posts, tu utilises les fields « names » alors que ce sont les « slugs » qui sont utilisés pour les boutons… Donc si comme moi on a des différences entre les noms et slug (majuscules, accents…), le filtre ne fonctionne pas.

    Sinon très bien,
    merci !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">