Lipaonline

Étiquette : Tuto

Tuto Pods : 3. Pods et SEO

Dans le tutorial précédent, nous avons étendu le type post de WordPress, pour gérer nos recettes de cuisine, et je vous avoue que ce choix n’était pas le fruit du hasard !

Aujourd’hui lorsqu’on parle de SEO, on parle surtout de contenu, mise à jour après mise à jour, Google prend de plus en plus en compte le contenu de qualité, et pour que son moteur « comprenne » de quoi vous parler, il a créé les « rich snippets« , qui sont des bouts de codes HTML, pour un certain nombre de type de contenu… dont… les recettes de cuisine !

Nous avons vu que Pods permet d’utiliser des shortcodes pour afficher des données dans un article, mais pour un rich snippet, par exemple, cela devient assez fastidieux, et surtout source d’erreurs. Pour nous simplifier la tâche, ce framework permet aussi de créer des templates pour nos Pods, que va pouvoir afficher à l’intérieur de notre article, sans toucher au code du template de WordPress !

Création d’un template dans Pods

Pour cela, la première chose à faire, est d’aller dans la menu composants et activer cette fonctionnalité dans Pods, un nouveau élément apparait alors en dessous de « composants », « Templates », cliquez dessus, et faire ajouter (en haut).

pods-creer-template

 

Appelons le « recette snippet », voila ce que cela donne (en simplifiant, le but est seulement de montrer comment faire).

pods-recette-snippet

 

Les {@name} … sont les champs personnalisés à ajouter dans notre pod post que l’on a déjà créer dans le tuto précédent.

Pour le champ image, on choisi le type « File / Image / Video« , ce qui permet de gérer ce champ avec la bibliothèque de WordPress 🙂

Pour finalement afficher ce template sur votre page, un simple shortcode est nécessaire :

Pod not found

Et c’est tout !

Voila qui j’espère vous donnera des idées… je vais ouvrir un site spécial pods avec démo et pods à télécharger ! 🙂

Tuto Pods : 2. Champs personnalisés et shortcodes

Avec WordPress vous pouvez créer des champs personnalisés pour vos pages ou vos articles, cela permet de donner une certaine logique à votre texte, encore faut-il pouvoir les afficher ces champs, et à moins que votre template le permette, il va falloir fouiller dans le code PHP pour faire cela…(comme indiquer ici).

Et c’est justement la que Pods intervient, ce plugin va créer un shortcode ( un code qu’on met directement dans le texte de l’article/page) pour chaque champs… et bien plus encore.

(Pour installer Pods, c’est ici).

Prenons un exemple simple : Les recettes de cuisine, c’est très à la mode et donne une première idée de ce qu’il possible de faire avec Pods.

Pour cela nous allons étendre un type existant, en l’occurrence article (on peut le faire aussi avec page), nous aurions pu créer un nouveau type « Recette de cuisine », mais cela fera l’objet d’un autre tutorial, restons simple pour l’instant, le but de cette article est justement de vous montrer qu’on peut tirer un avantage avec Pods, sans même rien connaitre en PHP, HTML !

Allez dans votre admin, faites « Ajouter » , et cette fois cliquer sur le 2 choix : « étendre un pod existant »

Dans l’écran suivant, on peut choisir Type de contenuPost/Page ou Média,Utilisateur,Commentaire, on choisi Post/Page,

puis De type Post : Vous choisissez celui qui vous convient le mieux.. pour un blog, article est bon choix.

tuto-pods-cuisine

On se retrouve au même point que la dernière étape du 1er tutorial, mais en regardant de près, en haut apparait « Edit Pod: post », indiquant que vous êtes en train de modifier le type post.

Ajoutons un champ:

tuto-pods-ajouter-champs

Le libellé et le nom et l’équivalent du nom et du slug pour WordPress, attention si vous mettez des accents français dans le libellé, il vont disparaitre dans le slug, ainsi, je défini un champs « Temps de préparation », le nom automatique sera « temps_de_prparation », rajoutez le « e ».. cela vous évitera bien des maux de tête ! 😉

La où on commence à apercevoir la puissance de Pods, c’est dans le choix suivant : Type de champ

Alors que dans WordPress, on ne peut mettre que un champs texte, ici on peut mettre du texte, un éditeur WYSIWYG (l’éditeur de texte de WordPress), une date, un nombre, une couleur etc…on y reviendra plus tard…

Pour plus de facilité, choisissons « Plain Number« , pour un temps de préparation en minutes.

On peut dire au système que le champs est requis, ne cochons pas la case, nos articles ne sont pas obligatoirement des recettes.

Puis on clique sur Ajouter un champ.

On recommence pour créer un champ « ingrédients », une simple liste d’ingrédients principaux, type : Plain Text

Voici le résultat : (n’oubliez pas de cliquer sur « Save Pod » à chaque modification)

tuto-pods-champs-final

Maintenant, lorsque vous allez écrire un article, vous verrez apparaitre en dessous de votre éditeur de texte ceci:

tuto-pods-ecrire-post

Si cela n’apparait pas, cliquez en haut à droite sur « Options de l’écran » et cochez « Plus de champs ».

Comment utiliser les champs personnalisés avec Pods ?

Comme je le disais en introduction, vous pouvez utiliser vos champs personnalisés directement dans votre article/page grâce au shortcode.

Exemple simple:

Pour afficher votre temps de préparation :

[ pods field= »temps_de_preparation » ]

ou

[ pods ]{@temps_de_preparation}[/pods]

 Exemple de liste :

Sans pods, une recette avec du chocolat, nous l’aurions tagé avec le mot « chocolat », sur un article relatant notre visite au salon du chocolat, nous aurions fait de même…impossible alors de lister les recettes avec du chocolat, sans avoir en même les autres articles qui en parle aussi.

Avec Pods, nous avons créé un champs « ingrédient », qui va justement servir à cela ! Le shortcode de pods permet aussi de faire des listes, par exemple:

[ pods name= »post » limit= »3″ where= »t.ingredient LIKE ‘%chocolat%' »]{@post_title}[/pods ]

Explications:

  • name : c’est le nom de notre pod, dans notre cas « post » car on a étendu le type post.
  • limit : 3, on veut 3 recettes.
  • where : il s’agit d’une requête de type SQL , on lui demande la liste des recettes avec le mot « chocolat » quelque part dans le champ ingrédients.
  • post_title : c’est le titre du post.

Autres utilisations, vous avez créé des pods pour vos ustensiles de cuisine, pour cette recette vous avez utiliser votre robot XB-78, vous pouvez ajouter par exemple

[ pods name="robot" slug="XB-78"]Test de <a href="{@lien}">{@nom}</a>[/pods]

Ou par exemple, dans une page spécial chocolat, vous pouvez ajouter une liste de vos 10 meilleures recettes avec du chocolat ( en changeant limit à 10).

Voila qu’un petit aperçue de ce qu’il possible de faire avec Pods, j’espère vous avoir donner envie d’utiliser ce plugin, très prochainement, je vous montrerez d’autres exemples un peu plus complexes…

N’hésitez pas à commenter si vous avez des questions !

Petit exercice :

Comment afficher 5 recettes dont le temps de préparation est < 30mins ? Utile pour une pause repas rapide 🙂

Tuto Pods : 1.Installation et prise en main du plugin

Comme tout plugin WordPress, l’installation ne pose aucun problème, vous pouvez le télécharger sur WordPress.org – Pods et l’installer manuellement, ou le récupérer directement dans l’admin de WordPress.

Une fois installé, vous aurez une section en plus tout en bas de votre administration : « Administration » pour une installation en Français et « Pods admin » en anglais (La traduction n’est pas encore complète, mais j’ai intégré la Team pour la finir :).

Dans la section de pods, vous avez 5 éléments :

  • Modifier Pods (présent lorsque vous aurez créé votre 1er pods)
  • Ajouter: pour ajouter ou étendre un pods
  • Composants : va permettre d’ajouter des possibilités au framework, cela évite d’avoir un tas d’options inutile qui alourdissent votre site pour rien.
  • Paramètres : Pour vider ou supprimer le plugin proprement
  • Aide : l’aide

 Allons sur « Ajouter »:

create-pods

 

 

Vous pouvez soit créer un nouveau Pods ( un Custom Post Type, une Taxonomie et même une page de paramètres !), ou étendre un type de contenu existant à la base dans WordPress : Posts (Posts, Pages, etc), Taxonomies (Categories, Tags, etc), Media, Utilisateurs, ou les Commentaires.

Je reviendrai plus en détails par ma suite, sur chaque possibilité dans des cas concrets, il y a des choses très simples, et d’autres plus complexes.

L’étape suivant permet de choisir le type de Pods et le nom qu’on veut lui donner :

creation-pods2

 

Voila, vous avez créer votre premier Pods ! Il apparait dans le menu à gauche…

update-pods

Bon, je suis content, j’ai un Pods… mais j’en fais quoi maintenant ? … Ce sera l’objet du deuxième Tuto Pods… chi va piano, va sano e va lontano…