Tuto Pods : Annuaire de livres (niv. 1)

Dans ce tutoriel, nous allons créer une liste de livres avec WordPress et Pods (mais vous pouvez facilement modifier pour coller à votre projet).

Le postulat de départ est de ne pas écrire une seule ligne de code PHP, et de ne pas modifier le thème.

Pour ce tuto nous allons avoir besoin de :

  • WordPress
  • Thème : j’ai choisi PR News qui convient assez bien pour notre projet
  • Plugins : Pods, Pods Auto-Display (pour afficher les champs)

Nous allons nous servir de ce que propose par défaut WordPress:

  • Articles : Chaque livre sera représenté par un article
  • Catégories : Pour les « rayons » ( Suspense, drame, historique…)
  • Tags : Pour les auteurs

Création du Pod « Livre »

Le but est de rester « dans les clous », on va donc transformer « post » en Pod, ce qui s’appelle « étendre un Pod » (pour Pods tout est potentiellement un Pod).

create-pods

A l’étape suivante on choisi « type de post » et « article »:

pods-post

Et nous voila avec un Pod, où nous allons ajouter les champs personnalisés:

pods-post-2

 Après l’ajout des champs :

pods-post-3

 Quelques explications :

  • avis : il s’agit d’un champs WYSIWYG (avec l’éditeur de base de WordPress)
  • a_lire : il permet de relier le livre avec un autre
  • a_lire_aussi : le problème du champs « a_lire », sans programmation PHP, on a accès uniquement au titre et lien du deuxième livre, ce qui n’est pas très « joli », avec ce champs « a_lire_aussi », vous pourrez ajouter une image, un texte etc…

A la fin, surtout ne pas oublier de faire « Save Pod » !

Ensuite, vous allez créer vos livres, simplement en créant un article, vos champs personnalisés sont ajoutés dans l’interface de création d’un article :

pods-post-4

pods-post-5

 

On remarquera en particulier les champs « avis » (l’éditeur de WordPress) et « a_lire », une menu déroulant permettant de sélectionner un autre livre (à partir du moment où vous en avez plusieurs évidemment).

Notre Pod étant un « post étendu », il hérite des informations de « post » : contenu « principal », catégorie,tag, image à la une…et tout ce que votre thème ou vos plugins auront créés, c’est le but, rester compatible avec votre installation WordPress.

Affichage de vos champs

Pods propose plusieurs techniques pour afficher vos champs, dont le shortcode, qui permet de n’avoir recours à aucun code PHP.

Vous pouvez vous rendre compte du rendu ici : Lab book 1.

Pour la vue de l’intérieur :

pods-post-6

J’ai ajouté 2 shortcodes dans le corps de l’article, le premier permet d’afficher un champs , on voit bien « Nb de pages : 312 » dans l’article, pour le deuxième, pour afficher un widget Amazon, il utilise une autre fonctionnalité de Pods, les templates.

Création d’un template « Pods »

Un template, est un bout de code HTML qui permet de personnaliser l’affichage de vos champs. Mais avant de pouvoir les utiliser, il faut activer ce composant dans Pods ( menu  Composants, puis Templates , le dernier). Un menu « Template » apparait à gauche, cliquez et faite « ajouter ».

Voici mon template pour Amazon:

pods-post-amazon

Il s’agit du code fournit par Amazon, où j’ai inséré un « magic tag », {@isbn_10} , qui est simplement la valeur du champs du même nom :). Il suffit alors d’indiquer le nom de ce template dans le shortcode de l’article.

Ce système de shortcode/template est très puissant (cela mérite un article rien que pour lui), et très souple, mais cette souplesse en fait aussi sa faiblesse, si vous l’oubliez ou l’insérez ou mauvaise endroit de votre article…

Utiliser Pods Auto-Display

Ce plugin va afficher automatiquement vos champs personnalisés à la fin de votre article, et bien sur avec la possibilité d’utiliser un template !

Voici notre template :

<h3>Données du livre</h3>
ISBN : {@isbn_10} <br/>
Editeur : {@editeur}

<h3>Notre avis</h3>
{@avis}

<h3>Vous aimerez aussi</h3>
<h4><a href="{@a_lire.permalink}">{@a_lire}</a></h4>

<h3>Et aussi</h3>

{@a_lire_aussi}

<h3>Et sur Amazon</h3>

<iframe src="http://rcm-eu.amazon-adsystem.com/e/cm?t=toop-21&o=8&p=16&l=st1&mode=books-fr&search={@title}&fc1=000000&lt1=_blank&lc1=3366FF&bg1=FFFFFF&f=ifr" marginwidth="0" marginheight="0" width="468" height="336" border="0" frameborder="0" style="border:none;" scrolling="no"></iframe>

<br/><br/>

On remarquera surtout le champs « relationship »{@a_lire}, qui contient le titre du livre « cible » , et {@a_lire.permalink} le lien vers ce livre.

Télécharger ce tuto

Un autre module très utile dans Pods, est « Migrate: Packages », qui permet d’importer/exporter vos Pods/Templates. Pour télécharger ce tuto, ou pour faire vos tests en local.

Le fichier à télécharger est ici : Pods Livres

2 Replies to “Tuto Pods : Annuaire de livres (niv. 1)”

  1. Bonjour Patrick,
    Merci pour ce super tuto 🙂
    Effectivement dans ma 1ère tentative il me manquait le plugin « Pods Auto-Display » et je créais un nouveau Pod. Je ne sais pas si cela change grand chose mais je n’arrivai effectivement pas au même résultat!
    Du coup cela m’interpelle à nouveau pour le choix du plugin car j’hésite depuis le début entre ACF et Pods.
    Et en fait en étendant le post de type article, on revient a ce que fait bien ACF!!

    Du coup qu’est-ce qui te fais plus choisir Pods ?

    Je n’ai pas réussi l’import, j’ai un msf d’erreur : »Error: Le champ editeur existe déjà, vous ne pouvez pas renommer ar ce nom » mais je me demande si ce n’est pas plutôt le nom qui fait échouer en effet par habitude, je nome tjs le 1er utilisateur: admin à la place d’administrator ?

    Enfin dernière question annexe, pourquoi il y a une seule image sur l’article complet (http://lab-book1.toowp.com/lombre-de-janus/) et 2 sur les autres ??

    Bonne journée
    Hervé

  2. Salut Hervé,

    Pods permet aussi des créer des Custom Post Type, des Custom Taxonomies, des Customs de tout ce qu’il y a dans WordPress, il s’adapte du simple champs personnalisé, à des trucs très complexe…

    Pour l’ombre de Janus, c’est simplement que l’image en haut et l’image à la une, je n’ai pas mis d’image dans l’article, comme sur les autres articles…

Laisser un commentaire