4. Créer un shortcode WordPress pour un plugin portfolio

Ce tutoriel est la 4eme 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

 

A ce stade notre plugin n’est pas encore autonome et seules les personnes ayant des bases dans le développement WordPress serait capable de s’en servir.

 

Objectif : Créer un shortcode WordPress pour notre portfolio

Transformer le modèle de page template-portfolio.php en shortcode, directement utilisable depuis une page ou un article.

 

1. Comment créer un Shortcode ?

Vous vous en doutez surement maintenant mais c’est encore du code à ajouter dans le function.php du thème, sauf qu’on est dans un plugin…

Il va donc falloir l’ajouter dans le fichier php principal du plugin, c’est à dire le fichier qui porte le même nom que le dossier (hadouweb-portfolio.php).

Voici à quoi ressemble la syntaxe :

 

Pour la fonction « add_shortcode » le premier élément correspond au shortcode qu’il va falloir utiliser dans les pages/articles de votre site, « [hafolio] ».

Le second élément appel votre fonction, elle va recevoir en paramètre les attributs du shortcode, elle pourrait très bien être vide si votre shortcode n’a pas de paramètre.

On pourra donc indiquer quelles catégories on souhaite utiliser et combien de réalisations on veut afficher, se qui pourrait donner quelque chose de ce genre:

[hafolio cat=cat1,cat2 nbr=50]

Pour finir il faut retourner le résultat attendu, en gros il va falloir faire retourner notre template-portfolio.php

 

2. Intégrer template-portfolio.php dans la fonction

On aura donc besoin de cette partie :

J’en profite ici pour faire une petite parenthèse, il s’agit de la query WordPress, dans mon modèle de page, j’utilise query_post, se qui n’est pas gênant en soit, car sur cette page, on ne devrait pas avoir d’autres requêtes, mais, pour vous expliquer la query_post, il s’agit d’une fonction qui va modifier la requête principal, c’est à dire la requête en cours.

L’avantage c’est que c’est plus rapide, ça évite d’avoir plusieurs requêtes sur la base de donnée, par contre il faut faire attention aux conflits.

Dans un shortcode, c’est à ne surtout pas utiliser, car un shortcode c’est typiquement le genre d’élément qui doit être autonome, si, par exemple, juste après notre shortcode, le template fait une query_post, et bien le shortcode risque de faire planter la prochaine query_posts

J’en profite pour vous donner un lien intéressant, le site de TweetPress.fr, il y a un article qui parle des boucles secondaires et de query_post.

http://tweetpress.fr/screencast/boucles-secondaires-wordpress/

Pour conclure il est préférable d’instancier un nouvel objet query, il faut utiliser WP_Query.

Voici se que donne la boucle seule :

 

Voici l’intégration dans la fonction du shortcode :

 

A ce stade vous avez déjà un shortcode utile et fonctionnel, si vous ajoutez [hafolio] dans un article ou une page vous allez avoir votre portfolio, mais vous allez également avoir toute les catégories et un nombre illimité de réalisation.

 

3. Utiliser les paramètres du shortcode.

Le but est de pouvoir faire un shortcode comme ceci [hafolio cat=cat1,cat2 nbr=50]

Pour ça il faut déclarer les attributs comme ci-dessous :

Notre fonction va recevoir les arguments, on peu facilement tester avec le var_dump($a).

Ce qui nous donne :

var-dump

 

Dans un premier temps, je recommande toujours de préparer une valeur par défaut si jamais l’utilisateur ne souhaite pas utiliser cat ou nbr, il faut quand même afficher quelque chose.

Si l’attribut cat du shortcode contient bien quelque chose alors la variable $filters utilisera les valeurs de cat, sinon, filters reprendra TOUTE les catégories du portfolio.

Il faut récupérer le terme complet de la catégorie, l’utilisateur va saisir le slug dans le shortcode et dans notre fonction on ne pourrait utiliser que ce slug (my-categorie) alors qu’on a besoin du nom pour un affichage plus sympa (My catégorie).

Donc pour pouvoir faire $filters->name il nous faut avant utiliser la fonction get_term_by pour récupérer le terme complet.

Même principe pour l’attribut nbr de notre shortcode.

 

Dans le prochain tutoriel, nous allons améliorer notre plugin avec plusieurs petit détails, comme par exemple faire un bouton dans l’éditeur pour notre shortcode.

 

Télécharger le plugin

[download id= »324″]

 

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

2 thoughts on “4. Créer un shortcode WordPress pour un plugin portfolio

  1. Salut Nicolas, intéressant cet article et original. Je n’ai pas souvent vu ce type d’approche. Si je peux me permettre il y a tout de même certains manques et erreurs.

    Il serait bon d’ajouter le filtre shortcode_$atts qui n’est qu’une string à rajouter en tant que 3ème param de ta fonction shortcode_atts(). Il permet de filtrer sur les éléments du tableau. Ici c’est d’autant plus indiqué sur une query (filtrer avant déclenchement par exemple sur le nombre d’items).

    La GROSSE GROSSE ERREUR du tuto par contre et pardon de crier ^^ mais … surtout ne pas utiliser query_post() pour une boucle secondaire, très mauvaise pratique. Fais plutôt une nouvelle instance de la classe WP_Query (ce qui te permettra par la même de te passer de la globale $post). J’insiste vraiment sur ce point-clé, ton shortcode en l’état peut faire planter d’autres codes.

    Donne un autre nom à ton tableau, $atts correspond aux param définis par l’utilisateur.

    • Salut Julien, c’est vrai que j’ai la mauvaise habitude de coder pour moi et pas pour les autres, j’ai fais quelques corrections au passage, 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="">