3. Créer un plugin portfolio avec WordPress

 

Ce tuto est la 3eme 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 – Plugin portfolio dynamique

Dans ce tuto nous allons créer une première version fonctionnel pour un plugin portfolio, puis nous allons l’améliorer au fur et à mesure des tutos.

 

1. Pour créer un plugins WordPress, il faut un dossier dans wp-content/plugins (pas obligatoire si le plugins peu tenir dans un seul fichier php) puis dans ce dossier il faut créer un fichier php avec le même nom que le dossier.

Veuillez bien choisir un nom unique pour éviter les conflits de plugins, n’utilisez pas « Portfolio » par exemple, vous pouvez reprendre votre pseudo partiellement ou complétement.

Pour moi c’est hadouweb-portfolio.

Donc dans le fichier php (hadouweb-portfolio/hadouweb-portfolio.php).

Il faut ajouter ça :

Je vous laisse changer les informations. Il ne faut rien d’autre pour avoir votre premier plugin :) allez voir dans « Extensions« , vous devriez voir quelques choses de ce genre :

hadouweb-portfolio

 

2. Maintenant, toujours dans ce fichier il va falloir rajouter tout ce qu’on devait charger dans le fichier fonction.php ou portfolio.php

Ce qui nous donne ça :

N’oubliez pas de copier le dossier css et js dans votre dossier plugin et de changer l’url des fichiers à charger.

Je vous remet ici les fichiers :

isotope.min.js : voir l’url ici

portfolio.js

portfolio.css

 

3. Ajouter fancybox pour ouvrir les images en popup.

Fancybox n’est pas forcément la librairie la plus légère pour les lightbox mais elle à le mérite d’être stable et connus.

Tout comme Isotope, il faut télécharger et charger la librairie dans notre plugin.

 

1. Télécharger le zip ici.

2. Copier le fichier jquery.fancybox.pack.js dans le dossier js, je le renomme en fancybox.min.js pour que ce soit plus pratique.

3. Faite la même chose avec jquery.fancybox.css et les images/sprites.

4. Il va falloir modifier le fichier fancybox.css, les images sont chargées à la racine du fichier css, sauf que c’est mieux de mettre les images dans un dossier image ou img, vous pouvez facilement faire une modification général avec notepad par exemple en utilisant le raccourcie ctrl+h :

Rechercher : url(‘ et remplacer par url(‘../img/

5. Pour finir il faut charger le js et le css de fancybox :

 

4. Modifier la vue pour ajouter le lien de la popup.

Dans votre modèle de page repérer la boucle et ajouter le lien :

Ajouter ce petit code jQuery pour dire que vous voulez appeler fancybox sur la classe fancybox

Vous pouvez placer ce code dans le fichier portfolio.js à la suite de celui sur le on click

 

5. Pour conclure on va travailler la navigation de notre portfolio quand l’image est ouverte en grande.

La version simple.

Ajouter l’attribut rel= »all » sur le lien :

Maintenant vous pouvez naviguer de gauche à droite dans TOUT votre portfolio.

Le problème c’est que vous voulez pouvoir naviguer dans la catégorie en cours.

Par exemple si vous sélectionné le filtre « Logo » et que vous ouvrez en grand l’un des logos, vous ne voulez pas voir apparaitre une réalisation de site internet juste après…

Il va falloir faire un petit script pour changer le « rel » dynamiquement.

 

Dans le prochain tuto nous allons remplacer le modèle de page par un shortcode pour avoir un plugin portfolio réutilisable facilement.

 


 

En bonus le plugin WordPress en version 0.1

[download id= »148″]

 

Pour utilisez ce plugin il faut une vue, voici le code d’un modèle de page à utiliser dans votre thème :

 

 

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 “3. Créer un plugin portfolio avec WordPress

  1. olivier Martinais

    Bonjour, j’ai un petit souci. Lorsque je clique sur les filtres « tags », tout disparait. Je dois cliquer sur « Tous » pour voir les photos. Une idée de quoi cela pourrait venir ? je suis débutant. Merci pour vos tutos.

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="">