Utiliser Pods avec Oxygen

Pas mal de collègues ont manqué l’opportunité d'acheter ACF Pro en version "licence à vie" et n'ont pas envie de payer le plug-in chaque année. Pas de panique, il y a une solution ... Pods !

Introduction

Je vais résumer un peu les différences ... En premier, Pods remplace deux plug-ins, CPT UI et ACF, car il crée aussi bien les CPT et taxonomies que les champs (Fields). Ensuite, Pods a la possibilité de sauver dans une table séparée et créée par le plug-in (option), nos différents champs. Une table assurera le lien entre le poste et ces données.

Au niveau des types de champs, Pods en propose moins qu'ACF (19 contre 30) mais compense par la flexibilité de ces champs. Le meilleur exemple est que le champ image peut se voir attribuer une sélection multiple, ce qui le transforme, si on peut dire, en galerie ... Un champ relation, par défaut, se transformera en liste. En résumé, dans bien des cas, Pods disposera de ce que nous cherchons pour étendre notre site WordPress (page d'options, relations entre postes ...)

Champs simples (un élément)

Bien qu'Oxygen n'ait pas réellement une intégration de Pods, il est cependant assez simple à utiliser (après quelques notions). Voyons en premier les champs "simples" ... Il suffira de copier le nom de votre champ dans "Insert Data -> Custom Field/Meta Options"

Que nous pouvons retrouver sur la page de configuration de nos pods

Récupérer les images

Jusqu'ici tout va bien, les champs uniques passent comme ça, une adresse (en texte) peut être reprise dans l'élément Maps d'Oxygen également. Voyons maintenant pour une image seule. Pods vous donne la possibilité de récupérer ce que vous voulez, soit l'image elle-même, soit son lien (URL) en fonction de sa taille (thumbnail, medium, full, ...). En activant les templates de pods et en en créant un, vous allez avoir dans votre administration à droite, la liste de toutes les références utilisables. En fonction de la taille d'image que vous désirez insérer vous aller mettre dans l'élément Image d'Oxygen, le lien avec la source de votre fichier exemple : featured_image._src.medium pour récupérer l'image en taille moyenne de mon champ featured_image (c'est son nom, car j'ai désactivé celle par défaut pour sauver le maximum de champs dans ma table séparée).

Utiliser le code PHP

Il est également possible de mettre une fonction dans un plug-in pour récupérer vos images, je vous conseille l'article de Mohammed Wasim Akram qui m'a aidé pour mes premiers pas.

Et en PHP alors ? Il arrive que nous ayons besoin de passer par un code bloc. Dans le cas d'une archive avec un repeater, voici ce que va donner le code, notez bien qu'il faut récupérer (dans ce cas) l'identifiant du poste :

<?php 
$post_id = get_the_ID();
$html ='';
$color = get_post_meta($post_id,'custom_ribbon_color', true);
$yes = get_post_meta($post_id,'display_custom_ribbon', true);
$label = get_post_meta($post_id,'custom_ribbon_label', true);

if ( $yes == "YES") {
    $html = '<div class="ruban" style="background-color:'. $color .' ">';
    $html .= '<div class="txt-ruban">'. $label .'</div>';
    $html .= '</div>';
  echo $html;
}
?>

Dans cet exemple, j'ai un champs Oui/Non (YES/NO) qui permet de choisir si on veut afficher un ruban, un champ ColorPicker pour récupérer la couleur de fond du ruban, et enfin le texte en lui-même.

Il existe aussi une autre manière de récupérer les champs pods comme ceci :

<?php
  	// get pods object
	$mypod = pods( $post->post_type, $post->ID );
	$html ='';

if ( $mypod->field('display_custom_ribbon') == "YES") {
    $html = '<div class="ribbon" style="background-color:'. $mypod->field('custom_ribbon_color') .' ">';
	$html .= '<div class="mts-badge">'. $mypod->field('custom_ribbon_label') .'</div>';
    $html .= '</div>';
    echo $html;
}
?>

Relation entre CPT

Nous allons terminer avec un exemple de relation entre CPT, j'ai des biens qui sont gérés par plusieurs agents et sur un bien, je veux afficher l'agent qui gère le bien, j'ai donc rajouté une relation dans les propriétés pour connecter un agent. Mettre un champ relation et le connecter avec votre autre CPT (le champ bidirectionnel est facultatif.

Pour récupérer les informations de l'agent, il suffira d'utiliser les champs créés automatiquement pour la relation.

$pod = pods('property', get_the_ID() );
$retour = '</br>';

//getting the pod fields for one pod
if( $pod->exists() ){
  echo $pod->field('agent_relation.agent_photo._img.medium') . $retour;
  echo $pod->field('agent_relation.post_title') . $retour;
  echo $pod->field('agent_relation.sub_title_of_agent') . $retour;
  echo $pod->field('agent_relation.phone') . $retour;
}

Champs multiples (tableau/array)

Pour réaliser une galerie, nous allons avoir des champs multiples, soit un tableau (array) d'images (ou de texte pour une liste). Dans ce cas, et particulièrement pour les images, nous allons avoir besoin d'un bloc de code avec quelques lignes de code. Voici ce que ça va nous donner :

<?php
// get pods object
$mypod = pods( $post->post_type, $post->ID );

if ($mypod->field('property_slider')) {
  echo '<h3>Gallery:</h3>';
  echo '<div class="gallery-single">';
	foreach( $mypod->field('property_slider', true) as $picture) {
		echo '<div class="gal-single"><a href="' . $picture['guid'] . '" data-fancybox="gallery"><img src="' . $picture['guid'] . '" width="150" height="150" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>';
	}
  echo '</div>';
}
?>

Petit récapitulatif, pour vérifier qu'un champ existe :

if ($mypod->field('property_slider')) {
}
/* OU - OR */
if ( $mypod->display('add_more_features') == "Oui") {
}
/* Mon champs possède Oui et Non*/

Récupérer un champs :

// get pods object
$mypod = pods( $post->post_type, $post->ID );   //Archives
$item = $mypod->field('rental_includes', true);
echo $item;

/* OU - OR */
$post_id = get_the_ID();  //Single posts
$color = get_post_meta($post_id,'custom_ribbon_color', true);
echo $color;

Conclusion

J'espère vous avoir donné une bonne approche de Pods, ne pas avoir fait d'erreurs et que ce tutoriel vous donnera envie d'utiliser Pods. Il existe d'autres vidéos en anglais pour vous former, même si malheureusement, je reconnais que la documentation manque fortement, particulièrement pour les débutants. Sinon vous pouvez aller lire plus ici sur Pods.

Les références du code peuvent se retrouver via ce lien.