Lipaonline

Menu

Catégorie : Pods

Pods tips : Lazy load avec WP Rocket

On ne présente plus le plugin de cache WP Rocket (enfin si ne le connaissait pas, c’est par ici)…

Il y a quelques temps, j’ai eu des soucis avec Pods et le lazy load de WP Rocket, mais, avec le concours des support des 2 plugins, l’explication et la résolution du problème a vite été trouvé 🙂

Comme je l’ai déjà dit, avec Pods, quelques fois « on sort des clous » de WordPress, ce n’est pas propre à ce plugin, cela peut être le cas dès qu’on code en PHP dans un thème

WP Rocket, comme tout bon plugin, utilise des « hook » (des fonctions qui se greffent à des fonctions de WordPress), en l’occurrence the_post_thumbnail(), mais en dehors d’un post, cette fonction ne donne aucun résultat.

La solution est alors, de faire le lazy load « à la main »:

<?php $img = wp_get_attachment_image_src( $pods->field( 'photo.ID' ), 'full' ); ?>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
data-lazy-original="<?php echo $img[0];?>" 
alt="<?php echo $pods->field( 'name' );?>" 
width=<?php echo $img[1];?> height=<?php echo $img[2];?>>

« photo » est le nom de votre champs image, « full » est la taille originale, pour plus de détails sur la fonction wp_get_attachment_image_src.

A noter que si vous utiliser des templates ou un champs WYSIWYG, Pods utilise alors la fameuse fonction the_post_thumbnail() , du coup, plus aucun problème de lazy load 🙂

Réaliser votre projet avec WordPress et Pods

Aujourd’hui, WordPress est devenu un outil très répandu pour réaliser un « projet Web », à la fois gratuit et de bonne qualité, pour beaucoup, il suffit de télécharger un thème et quelques plugins, et voila votre site prêt à conquérir le monde pour moins de 100€ !

Cela reste une solution idéale si vous voulez un site fonctionnel rapidement et sans vous ruiner, mais si vous voulez intégrer votre site à votre business réel, l’argent et le temps économisé au début, sera vite perdu sur le moyen long terme. Le manque de flexibilité de ce type de solution vous amènera tôt au tard à devoir le refaire, ou pire à le bidouiller, le transformant en usine à gaz ingérable…un peu comme des locaux pas adaptés à votre métier, à la longue votre productivité pourrait en pâtir et vous faire perdre beaucoup d’argent.

Un exemple typique, un philatéliste professionnel a créé un site avec WordPress (il voulait économiser les commissions que prennent les sites spécialisés). Il a créé un article par timbre. Au début tout allait bien… mais au bout de quelques mois, cela devenait ingérable, entre les timbres « mal vendus », et ceux déjà vendu pour lesquels il recevait encore des commandes car il ne les avaient supprimé du site. Au final, le site a été abandonné. Même s’il n’a pratiquement rien coûté : WordPress = 0€ + Thème = 0€ + hébergement = 10€, le temps pour ajouter les timbres ( fiche + scan + côte), et mettre à jour, tout ceci est perdu ! A la base, WordPress est fait pour réaliser un blog ou un site d’entreprise, mais pas pour un catalogue.

Un « vrai » projet web démarre par votre métier, un audit de l’existant ( votre site web, votre mailing list, vos profils sociaux), de la veille sur vos concurrents, de ce que vous voulez faire, de ce que vous pouvez faire (beaucoup n’imaginent pas ce que l’on peut faire sur le web.. en particulier les décideurs malheureusement), et surtout des ressources (aussi bien humain que financiers) dont vous disposez. On obtient un cahier des charges, et le plus douloureux pour votre comptable, un devis 😉

Vous pensez que votre entreprise ne peut pas se permettre un tel projet ? Vous n’auriez pas complètement tord…

Template + WordPress + Pods : le triptyque magique 🙂

Avec un template pour la partie visible, WordPress pour la partie backoffice, et Pods pour la « solution métier », je dispose d’une solution qui profite de la facilité de WordPress pour une mise en oeuvre rapide. Un template flexible (et facilement interchangeable aux désirs du client, ou pour de l’évènementiel par exemple) et Pods me permet de coller au plus près des besoins du client, et de m’adapter aux évolutions futures. Et tout ceci, plus en adéquation avec les finances des PME (voir TPME).

Bien sur, cette solution n’est pas adaptée à 100% des besoins, si vous avez une âme de Zuckerberg-like, que votre but est de concurrencer son réseaux social, ma formation me permettrait de réaliser votre projet, mais WordPress n’est certainement pas le bon outil pour cela, et je n’ai (pour l’instant) que 2 bras et un cerveau…

Pods, le couteau Suisse pour votre site web

Comme (presque) tout plugin sous WordPress, Pods s’installe en quelques clics. Mais aux antipodes des plugins « usine à gaz » qui font un tas de choses (des fois on ne sait pas toujours ce qu’ils font exactement), Pods ne fait rien ! C’est un plugin « bas niveau », qui va vous permettre de faire beaucoup de choses, de la simple widget (comme je l’explique dans cet article) jusqu’à l’intégration parfaite de votre site web à vos outils internes ( gestion clients, commandes…).

Pour vous montrer la flexibilité de Pods, je vais prendre comme exemple, la problématique qui m’a été envoyé suite à mon article d’introduction, à savoir la gestion de livres, et les 3 grands scénarios possibles selon le besoin réel du client, et des ressources disponibles:

90% WordPress + 10% Pods

Cette solution, adaptée pour un blogueur souhaitant parler de ses lectures par exemple, a l’avantage de rester 100% compatible avec WordPress, l’ensemble des thèmes et plugins. Chaque livre fera l’objet d’un article, Pods ne servira qu’a ajouter des champs personnalisés ( isbn,format,nb de pages…) et à créer des templates pour afficher de manière standardisée les livres ou une widget Amazon (pour faire de l’affiliation). Les catégories permettront de trier par rayon (policier,drame..), et les tags seront utilisés pour les auteurs.

50% WordPress + 50% Pods

Pour un collectionneur de livres anciens ou une petite bibliothèque associative par exemple, dans ce scénario on utilise d’une manière plus poussée Pods. Le nombre de livres devient trop important pour être traité comme un article ou page. Il faut créer un Pods par livre, de même pour les auteurs. Créer des taxonomies pour chaque critère de classement souhaités. La « partie WordPress » servira par exemple pour une bibliothèque à annoncer les évènements, présenter des horaires d’ouverture, le chemin d’accès… comme un site d’entreprise traditionnel. Cette solution nécessite plus de travail à mettre en place, mais sa gestion au quotidien est très proche d’un « simple » blog.

10% WordPress + 90% Pods

Lorsque le nombre de livres devient trop important, il devient nécessaire de « sortir » la base des livres de WordPress. Pour des raisons de performances, mais aussi d’ouverture vers l’extérieur. Pods permet de faire cela, et vous pourrez ainsi gérer vos livres avec votre logiciel habituel ( Excel, gestion de stock..), et synchroniser en quelques clics avec votre site (cela peut même se faire automatiquement). WordPress ne sera que la partie visible pour le visiteur. On s’éloigne de la fonction première de WordPress, mais cela permet d’avoir un site « type WordPress » et une sorte de catalogue, le tout dans une parfaite cohérence graphique et fonctionnelle, et évite le développement de deux projets distincts.

Bien sur, chaque projet est différent, mais cela donne 3 grandes directions à suivre dans la conception d’un projet. Le dernier avantage, et non des moindres, il est assez facile de changer de scénario sans devoir tout refaire.

Je suis suis pas rentré dans les détails de chaque cas, des tutos sont en préparations, mais en attendant, vous pouvez lire les précédents ici.

 

WordPress + Pods = Un VRAI CMS ! (dossier et tutoriaux)

J’ai déjà écris plusieurs articles et tutoriaux à propos de Pods sur d’autres sites (ici et la ). Je vais profiter de celui-ci pour vous faire un dossier plus complet, qui reprendra un résumé des anciens articles (en y ajoutant des nouvelles astuces apprises depuis.. on apprend tous les jours), mais aussi de nouveaux tutoriaux pour vous aider à transformer WordPress en véritable CMS, et ainsi prendre le contrôle total de votre site. Votre unique barrière sera votre imagination !

Au programme :

Qu’est ce que Pods ? Pourquoi l’utiliser ?

Que vous soyez un PHP Guru, un as des hooks, ou un « simple blogueur »  qui souhaite customiser son blog, Pods est une boite à outils, qui pourra vous aider à réaliser votre projet web.

Installation et prise en main.

Dans ce chapitre, on reprendra les bases de l’utilisation de Pods.

Présentation des modules.

Pods se présente sous forme de modules, cela lui permet de s’adapter au mieux à vos besoins, sans alourdir de système de choses inutiles.

Widget , Page, Template , tout savoir sur Pods.

Présentation complète des fonctionnalités de Pods.

Tutoriaux et cas concrets.

Rien de tel que des exemples concrets pour mieux comprendre comment fonctionne Pods, et comment il peut être la solution à votre problème.

A propos des cas concrets, si vous voulez me soumettre vos problématiques de vos sites/blogs, je me ferai un plaisir d’y répondre en faisant un tutoriel.

Custom Post Type “Offre Spéciale” Avec Pods (4/*)

Nous avons vu dans le 1er article comment Pods peut répondre à notre besoin.

Dans le 2e, nous avons créé nos Pods et contenus.

Dans le 3e, nous avons affiché nos Pods, et vu comment modifier un template WordPress  pour qu’il puisse afficher un widget Pods (quand cela n’est pas possible dès le départ).

dans ce 4e et dernier article, nous allons mettre en forme nos Pods avec des templates. Cela nécessite quelques notions d’HTML/CSS, et un peu de copier/coller.

Création d’un template Pods

Commençons par le plus compliqué, la colonne du milieu, nous avions un code PHP WordPress, que l’on va transformer en template Pods.

<?php $posts = get_posts('orderby=rand&numberposts=10'); foreach($posts as $post) { ?>
						<div class="post addon-post">
							<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="nofollow" id="featured-thumbnail">
								<?php if ( has_post_thumbnail() ) { ?> 
									<?php echo '<div class="featured-thumbnail">'; the_post_thumbnail('featured',array('title' => '')); echo '</div>'; ?>
								<?php } ?>
							</a>
							<div class="addon-post-content">	
								<h2 class="title addon-title">
									<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a>
								</h2>
								<div class="addon-post-info"><span class="theauthor"><span class="icon-user"></span><?php global $post; $author_id=$post->post_author; ?><a href="<?php echo get_author_posts_url($author_id); ?>"><?php the_author_meta( 'nickname', $author_id ); ?></a></span></div>
							</div>
						</div>
					<?php } ?>

Avec un peu d’habitude, cela n’est pas très compliqué, mais pour un débutant… ce qu’il faut, c’est repérer les functions de WordPress, ce sont pratiquement toujours les mêmes : get_posts , the_permalink() …

En clair : affiche moi 10 posts (numberposts=10) alétoirement (orderby=rand) …

Pour nous faciliter la vie, Pods propose encore une autre fonctionnalité très pratique, les magic tags , ainsi pour afficher un champs de notre Pods, il suffit de mettre {@nom_du_champs}. 🙂

On obtient ce template

slovenie-pods-template2

 

 

Qu’il suffit alors de sélectionner dans notre widget :

slovenie-template-widgetet voila le résultat :

slovenie-pods-finalJe peux aussi utiliser ce template dans une page « destinations » avec un shortcode :

slovenie-page-destinations Le résultat n’est pas très heureux, mais il me suffit de créer un autre template pour cette page. Vous pouvez créer autant de template que vous voulez, et les utiliser sur autant de pages que vous le jugerez nécessaire.

Voila qui clos cette série de tutoriels, une fois mes templates finis, je vous proposerai ici de télécharger l’ensemble…

 

Custom Post Type “Offre Spéciale” Avec Pods (3/*)

Voila, j’ai créé un contenu de base pour mon site slovenie-tourisme.com

Voici des copies d’écran (car il va beaucoup évolué..):

Homepage

slovenie-tourisme-homepageL’article ce trouve à gauche, au milieu je voudrais mettre les destinations (pas possible avec ce template, il faudra modifier cela). On remarque la page « offres spéciales » dans le menu en haut.[clear]

Page « offres spéciales »

slovenie-tourisme-offresJ’ai simplement créé une page avec un shortcode. Pour ajouter un shortcode a votre page, il suffit de cliquer sur le petit icone à cote de « Ajouter un média », une popup apparait avec un formulaire comme ici .[clear]

Page « Ljubljana »

slovenie-tourisme-ljubljanaJ’ai ajouté un shortcode, mais cette fois j’ai indiqué la destination « Ljubljana » , ici.
[clear]

Article « Visitez Ljubljana »

slovenie-tourisme-visite-ljuJ’ai exactement la même chose que pour la page.[clear]

 

 

 

Pour le deuxième colonne, je voudrais lister mes destinations, malheureusement, après investigation dans le code du template, il ne s’agit pas d’un widget (pourtant ça y ressemble), mais simplement une liste aléatoire de 10 articles (je n’en comprend pas vraiment l’utilité ??). Je vais devoir changer cela.

Widgetiser un template WordPress

Le plus simple est (sur Chrome) de pointer cette colonne, et faire « Procéder à l’inspection de l’élément« , on repère le code de ce morceau, et après on le recherche dans le code du template.

slovenie-screen-colonne

 

On trouve le code de cette colonne, que l’on va modifier en widget. Cela signifie que l’on va modifier notre thème (Je vous conseille d’utiliser un thème enfant … même si je ne vais pas le faire ici 😉

le code qui gère cette colonne est :

<?php $posts = get_posts('orderby=rand&numberposts=10'); foreach($posts as $post) { ?>
						<div class="post addon-post">
							<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="nofollow" id="featured-thumbnail">
								<?php if ( has_post_thumbnail() ) { ?> 
									<?php echo '<div class="featured-thumbnail">'; the_post_thumbnail('featured',array('title' => '')); echo '</div>'; ?>
								<?php } ?>
							</a>
							<div class="addon-post-content">	
								<h2 class="title addon-title">
									<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a>
								</h2>
								<div class="addon-post-info"><span class="theauthor"><span class="icon-user"></span><?php global $post; $author_id=$post->post_author; ?><a href="<?php echo get_author_posts_url($author_id); ?>"><?php the_author_meta( 'nickname', $author_id ); ?></a></span></div>
							</div>
						</div>
					<?php } ?>

on va le mettre de coté (il nous servira pour notre template Pods), et le remplacer par une widget.

<?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('colonne') ) ?>

Il faut bien sur déclarer cette widget dans notre fichier functions.php .Le mieux est de rechercher la fonction register_sidebar et placer notre code au même endroit.

on obtient le code

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
        'name' => 'Sidebar',
	'before_widget' => '<div class="widget_sidebar">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
      ));
register_sidebar(array(
        'name' => 'colonne',
	'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
      ));	  
	}

J’ai supprimé tous les paramètres de base d’une widget, car ils sont inutiles.

On vérifie que tout est ok:

slovenie-colonne-ok

 

Maintenant, on va pouvoir afficher nos Pods destination, et c’est la qu’intervient la puissance de Pods, cela se fait très simplement, aussi facilement qu’un shortcode dans une page/article !

Pods dispose de ses propres widgets, il suffit de choisir : Pods – List items

slovenie-pods-list-items2

 

On obtient ceci :

slovenie-colonne-sans-template

 

Voila, nous avons fini, il reste à mettre en forme, car pour l’instant ce n’est pas très joli… Ce sera l’objet du prochain tutoriel…

 

Custom Post Type “Offre Spéciale” Avec Pods (2/*)

Activation des composants de Pods

Avant de démarrer la création d’éléments de Pods, il va falloir activer quelques composants.

Advanced Content Types / Table Storage

Ce sont pour moi, 2 composants essentiels dés que l’on sort de l’utilisation standard de WordPress, pour le transformer en « vrai CMS ».

Pods permet de séparer la partie « blog » (post,page,taxonomies), du reste de vos contenus (offres, destinations), pourquoi faire cela ?:

  • Pour les performances, cela limite la taille votre base données ( cf. Compare Storage Types ).
  • On cas de problème, il suffit de supprimer la table où sont enregistré vos contenus.
  • Pour le partage : il est plus facile de relier votre système à un autre (pour proposer vos contenus à un autre site, ou pour intégrer le contenu d’un partenaire par exemple).

Migrate: Packages

Pas toujours utile, mais il va me permettre de vous proposer en téléchargement le résultat de ce tuto (pour les feignants 😉 , et permet de faire des tests en local, puis exporter/importer facilement vers votre installation distante (sans devoir tout recommencer ou importer la base dans son ensemble).

Templates

Va permettre de créer des templates pour vos Pods.

Création des Custom Post Types

Si ce n’est pas déjà fait, je vous invite à lire mes tutos précédents qui expliquent comment créer un Pods, les shortcodes etc…

Voila mes Pods:

Ou si vous préférez directement les télécharger : Pods

Quelques explications

Pods destination : rien de particulier, il n’y a pas de description, car le contenu sera dans une page « standard » de WordPress. Le champs « ordre » va me permettre de choisir l’ordre d’affichage (pas seulement alphabétique).

Pods offre : Les champs « début » et « fin », va me permettre de trier les offres en cours de celles passées ou futures (et aussi de facilement les supprimer si cela est nécessaire). Un champs « destination » qui va relier cette offre à une destination.

Pour un autre type de contenu, il suffit de changer « destination » et d’ajouter les champs qu’ils vous semble pertinent…

Création du contenu

On va créer un page « offre », une page par destination, puis les Custom Post Types « destination » qui vont avec, et enfin quelques offres.

Sans oublier un article de présentation d’une offre.

Dans le prochain épisode on verra comment afficher ces contenus dans notre template…

 

 

 

Custom Post Type "Offre spéciale" avec Pods (1/*)

Cela faisait un petit moment que je n’avez pas parlé de Pods

En discutant avec Amanda, je me suis rendu compte que j’avais le même besoin sur mon/mes site(s), autant faire un petit tuto, comme ça tout le monde en profitera. De plus j’ai noté dans ses remarques une certaine incompréhension de ce qu’est un « Custom Post Type » dut en partie je pense à son nom lui même !

Un Custom Post Type n’est pas toujours un Post !

Pour prendre l’exemple qui nous intéresse ici, une « offre spéciale » est un ensemble de données ( date, prix, photo, description…) . Mise bout à bout, toutes ces donnes ne forment pas les 300-500 mots standard d’un article, il serait donc judicieux de ne pas les afficher sur une page propre, dans le cas contraire, cela va créer des pages avec un contenu « pauvre » (et si vous copier la description fournie par votre partenaire, vous risquez un « Duplicate Content« ) . Et si vous avez du contenu pour une offre en particulier, rien ne vous empêche d’en faire un article en plus qui en parle.

On s’approche ainsi un peu plus vers le concept de CMS ( Content Manager System), où « Content » peut être toute sorte de choses…

3 études de cas

Je vais vous présenter 3 études de cas, puis la mise en oeuvre qui sera pratiquement identique pour les 3…

J’ai pris le parti de faire simple (pas besoin de beaucoup de programmation et de modification du template, grâce à l’utilisation des shortcodes de Pods), pour des besoins plus compliqués/spécifiques… contactez-moi 🙂

Site de tourisme

Je voudrais présenter des offres de voyages par rapport à une destination.

Page destinations: Page avec la liste des destinations.

Page destination: Détails d’une destination en particulier, avec une liste des offres, toujours avec un shortcode

Page offres : L’ensemble des offres du site

Custom Post Type : offre, avec un champs « destination » (qui permettra de trier par destination) et d’autres champs : prix, discount,date….

Custom Post Type : lieu, qui est en fait redondant avec destination, mais c’est plus facile à gérer ainsi, et cela permet d’éviter une adresse de type domaine.com/destination/ljubljana, je préfère domaine.com/ljubljana, je souhaite centrer le site par rapport à une destination. Mais sur un site plus étoffé j’aurai choisi domaine.com/destination/ljubljana (Comme toujours, il faut s’adapter à son besoin).

Site de mode

Il suffit de remplacer « destination » par « marque » juste au dessus 🙂

Site d’aide « WordPress »

Cette fois « destination » devient « type de produit », comme plugin, template, formation, ebook etc…

 Mise en oeuvre sur slovenie-tourisme.com

Je vais montrer sur ce site, le résultat de mon tuto, j’utiliserai le thème Pinstagram, que je trouve plutôt sympa pour ce type de site.

La première étape sera de mettre en place les Custom Post Type, et ajouter du contenu.

Ensuite, il faudra modifier le thème pour qu’il affiche notre contenu correctement, cette étape est presque toujours nécessaire, les thèmes n’étant jamais vraiment 100% comme on le voudrait.

Stay tuned… comme on dit 🙂

Advanced WordPress widgets with Pods

Even if you are not a PHP guru, you can feel the power of Pods with simple WordPress features as widgets and shortcodes.

(for french visitors, you can read this in french , for Shakespeare.. sorry 😉 

Lot of premium themes use (and abuse) widgets and shortcodes, but if your needs don’t fit with all features coded by the developer you will be armless with poor « text widget »…

How to add image, link, list… on widget ? Why it’s not easy as writing article ?

With Pods… it will be !

You can write 2 types of widgets : WYSIWYG widget or Template widget

WYSIWYG widget

It’s the most simple widget, you just need a Pod with a WYSIWYG ( Visual Editor) field, and show it on your widgets area with a shortcode.

WordPress doesn’t allow shortcode in widgets by default, you have change it,

by yourself, with a single line in « functions.php » file from your theme.

add_filter('widget_text', 'do_shortcode');

Or with another plugin as Shortcode Widget.

Then you can add a simple text widget with this code

Pod not found

or

Pod not found

For further information about shortcode in Pods : Shortcode in Pods

Template widget

If you need a structured widget to fit with your design or to show a Google Map for example, you should use template widget.

Instead of a single content field, you will create a field for each data you have to display. For example to display a product : a name (Plain text), a pics ( File Image), a description and a link (Plain text).

Create a template on Pods (you may have to activate a component), it could look like :

<a href="{@link}">{@image}</a>
<br/>
<a href="{@link}">{@name}</a>
<br/>
{@description}

Then you can display your pod with this shortcode:

Pod not found

More features…

Saved widget

When you update a widget, the old version is lost, with pods, you change have to change shortcode, all datas are saves in pods, if you want to display anither product, you need only change Id. For Christmas, you can create a « Christmas widget », display few days, and switch later to the « normal » widget.

List widget

To display your 3 best sellers products :

Pod not found

Rotative widget

To display one randomize product

Pod not found

They are just examples to show you the power of Pods for widget, let your imagination start !

If you need more features, you should look at this plugin : Dynamic Widget (fully compliant with Pods)

Tuto Pods : 4. Dopez vos widgets !

Le système de widget de WordPress est très pratique, beaucoup de thèmes premium en usent (et en abusent), mais lorsqu’on a besoin d’une widget pas prévue par le thème, on se trouve bien dépourvu avec la « widget texte », bien trop limitée aussi bien en taille d’affichage qu’en fonctionnalités…

En effet, comment ajouter une image ? Il faut l’envoyer dans la bibliothèque de WordPress, puis trouver son adresse, la copier dans un code HTML que l’on mets dans le widget, etc… Et si c’était aussi simple que d’écrire un article ? …

…grâce à Pods c’est possible ! 🙂

Il existe 2 options, la widget WYSIWYG (avec un éditeur de texte comme pour les articles), la widget Template (avec un template, comme dans le tuto précédent).

J’ai utilisé cette méthode sur un des derniers site que j’ai mis en ligne (lien), toute la homepage est gérée avec des widgets, une mini formation au client sur les shortcodes, et roulez jeunesse ! 🙂

Avant de démarrer, il faut activer 2 nouveaux composants : Advanced Content Types, Table Storage (je ferai un article détaillant chaque composant très prochainement).

Widget WYSIWYG

C’est la widget la plus simple, il suffit de créer un Pod avec un champ WYSIWYG, qu’il faudra afficher dans notre widget.

Créons notre Pod:

tuto-pods-widget-WYSIWYG

 

On choisi « Type de contenu avancé ( séparé de WordPress) », disponible grâce aux 2 composants qu’on a activer un peu plus tôt.

Etape suivante :

tuto-pods-widget-WYSIWYG2

 

Vous pouvez supprimer tous les champs et ne garder que « Name » (je ne sais pas trop pourquoi ces champs sont automatiques, je vais voir avec la Team…)

Voila notre pod près à être utiliser

tuto-pods-widget-WYSIWYG3

 

On oublie pas de « save Pod », puis on passe à l’écriture de notre Pod, une ligne s’est insérée dans votre admin, vous pouvez ajouter des Pods exactement comme si vous écriviez un nouvel article.

tuto-pods-widget-WYSIWYG4

 

J’ai volontairement mis aucun espace,accent,majuscule dans le champ « Name » (celui en haut), pour que le slug soit identique, ce champ ne sera pas affiché.

Maintenant, il faut afficher ce Pod dans notre widget, malheureusement, WordPress ne permet pas cela par défaut, il faut activer les shortcodes dans les widgets, pour cela il faut ajouter une ligne dans la fichier « functions.php » de votre thème:

add_filter('widget_text', 'do_shortcode');

Si vous ne voulez absolument pas modifier votre thème, il y a des plugins qui font cela : Shortcode Widget.

Il suffit ensuite créer une widget text et d’y mettre notre shortcode

Pod not found

ou

Pod not found

Vous trouverez l’Id en éditant votre Pod, l’adresse est de type : « /wp-admin/admin.php?page=pods-manage-widget_wysiwyg&action=edit&id=1« 

Widget Template

Vous remarquerez que les widgets sur fond vert du site (lien) ont une structure très stricte: une image, un titre et un sous-titre.

Pour cela, j’ai utilisé le même principe que pour la recette de cuisine, je créé une Widget Template, comme l’exemple précédent, mais au lieu d’avoir un seul champ contenu, j’ai un champ « File Image », 3 champs « Plain Text » : Titre, Sous Titre, Lien.

Je créé le template de ma widget, qu’il suffit ensuite d’indiquer dans mon shortcode comme cela:

Pod not found

Encore plus de puissance !

Widgets événementielles

Lorsque vous modifiez une widget « normale », l’ancienne version n’est enregistrée nulle part… en cas d’erreur, votre texte est perdu ! Avec Pods, il suffit de créer une nouvelle version, et de changer l’Id dans le shortcode. Par exemple, en janvier, vous voulez mettre un message « Bonne année », vous pourrez en février remettre le message du reste de l’année !

Widgets rotatives

Vous voulez afficher du texte aléatoirement ? Il suffit de créer un shortcode « liste »:

Pod not found

RAND() signifie aléatoire en langage SQL.

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 ! 🙂