Lipaonline

Menu

Maillage interne avec Visual Site Mapper (gratuit)

Le maillage interne est une des principales pierres angulaires de l’optimisation d’un site Internet. Je vous propose de découvrir et tester avec vous un outil gratuit que je viens de découvrir avec ma veille sur Twitter. 
Avant de passer au test, revenons sur la notion de maillage interne.

Maillage interne pourquoi faire ?

Lorsque je développe un site web, je donne toujours la priorité à l’utilisateur final du site (dans le but qu’il devienne « client »).
C’est pour cela que pour moi, le maillage interne sert avant tout au visiteur du site pour sa navigation, elle doit être claire et pertinente.
Ensuite, les robots (de Google et d’autres moteurs) vont parcourir le site, pour essayer de comprendre de quoi il parle et le référencer dans leurs index.
Avec ce maillage, vous allez pouvoir mettre en avant certaines pages (les pages cibles), celle où vous voulez emmener votre visiteur, pour se transforme en client (au sens large, cela peut être simplement l’inscription à une newsletter, le téléchargement d’un ebook…).
Et pour les blogs qui ne vendent rien, sans newsletter, ces pages cibles seront optimisées pour le référencement naturelle, elles gagneront du traffic en étant bien classées.

Pour la partie compréhension (la sémantique), je vous conseille un autre plugin : WP Search Console

L’outil dont on va parler aujourd’hui s’intéresse uniquement à l’aspect technique du lien lui même.

Le maillage parfait

Lorsque l’on lit la littérature parlant de maillage interne, on entend souvent parler de silo, de cocon ou grappe sémantique, il s’agit en fait ni plus ni moins que de trier vos contenus, selon une logique qui répond en général à l’intention de recherche de vos visiteurs (Il ne viendrait pas à l’idée aux éditions Robert de ne pas classer les mots de son dictionnaire par ordre alphabétique..).
Une fois ce maillage réalisé en théorie, avec un mindmap (il existe des logiciels pour cela, mais un papier et un crayon peuvent faire l’affaire), il faut le mettre en oeuvre pour vos visiteurs (et Google bien sur).

Et c’est la qu’intervient souvent le problème.. vous connaissez votre sujet, mais vous ne savez pas si vous en « parlez bien » sur votre site, dans le sens, si tout est bien organisé sur votre site, pour que le visiteur sache de quoi vous parlez, et si vous l’orientez bien vers les bons contenus.

WordPress et maillage interne

WordPress est un CMS très flexible, avec une communauté très active, et c’est cela qui le rend très puissant en terme de SEO, on peut pratiquement adapter son site à toutes les situations possibles.
Par conte, il faut avouer qu’à la base (et c’est structurellement toujours le cas), c’est un moteur de blog, avec son aspect de contenus chronologiques, cela n’aide pas à la mise en oeuvre des concepts cités au paragraphe précédent.
Ajoutez des développeurs de thème/plugin qui ne connaissent rien en SEO.
Il devient facile de faire n’importe quoi.

Passons à un exemple concret : https://lipaonline.com/ (oui le site où vous être en train de lire cette article !).

Je suis en train de ré-organiser ce site, les contenus sont toujours présent, mais j’ai changé de thème.
Cela ressemble plus à une constellation inconnue qu’à un cocon vous ne trouvez pas ?
Ce thème est ultra-basique, ce qui va me laisser la pleine maitrise de l’optimisation au référencement… je ne manquerai de vous montrer les changements au fur et à mesure de l’avancement…
Voici à quoi ressemble à maillage « réussi » ? :

Ce n’est pas par hasard si ce site appartient à l’équipe qui développe WP Search Console !

Attention, il s’agit d’un maillage « technique », on peut produire un cocon parfait avec cet outil, qui ne sera en rien sémantique. 

Et vous, votre maillage ressemble à quoi ?
Testez sur : visualsitemapper.com
N’hésitez pas à m’interpeller sur twitter avec vos sites… 🙂

WPTech = WPHumain, une belle première pour moi ! :)

Me voila de retour à la maison après mon grand périple (tout est relatif comparé aux aventures que je lis régulièrement sur certains blogs « voyages ») pour le WPTech 2015.

Si vous voulez savoir ce qu’il s’est passé lors de cet évènement, je vous conseille un très bon résumé réalisé par Alex de WPMarmite ou le site officiel WPtech.

Pour ma part, je voudrais surtout mettre l’accent sur l’aspect humain, car même si le WPtech est un évènement technique dédié à WordPress, les techos, derrière leurs corps de rêve et leurs cerveaux hookés, il y a des hommes et des femmes (encore peu nombreuses) ! 🙂

Même si vous connaissez pas grand chose en « technique » WordPress, ce genre d’évènement peut vous donner envie d’essayer, et surtout vous faire rencontrer « la communauté WordPress« , qui est le point fort de ce CMS.

Avec trampolinn.com, j’ai partagé la maison d’un très sympathique photographe (vous pouvez retrouver une partie de ses photos sur son site  photokarhu.fr ), avec 5 – non moins sympathiques (enfin sauf un ! 😉 – confrères dans la grande famille WordPress : Aude , Didier , Jérome, Fx , JB . Avant de descendre en covoiturage avec 2 de mes nouveaux amis vers Bordeaux pour retrouver mes associés.

Ce fut aussi pour moi, ma toute première conférence et qui plus est en tant qu’orateur ! Moyennement satisfait de ma prestation (qui a été filmé ! ), mais je n’ai reçu que de bons retours… alors, on va dire que pour une première, cela ne devait pas être si mal 🙂

Le support de ma conférence se trouve ici : https://bitbucket.org/lipaonline/wp-tech/overview , pour la vidéo et l’ITW…. ça arrive.. patience…

Je tiens à remercier:

Daniel, Willy pour l’organisation (et tous les bénévoles),

Déborah pour l’ITW,

Céline pour le before,

Amanda pour les encouragements,

sans oublier bien sur Isaure et Amaury ,mes ninjas préférés , pour un after fort agréable 🙂

Pour certains, j’aurai le plaisir de les revoir à Paris pour le WorldCamp , et j’espère à l’année prochaine pour le WPTech 2016 !

WP Tech et autres news…

Cela faisait un bon moment que je n’avais pas publié sur ce blog… le vieil adage du cordonnier vous connaissez ?

Quoi de neuf ?

Pleins de choses.. et d’autres qui vont arriver… je l’espère 🙂

Depuis maintenant 1 an, je travaille en étroite collaboration avec deux autres freelancers comme moi, Jean-Michel (Jmsil Communication) et Benjamin (Bewod). Avec mes 2 comparses, nous avons déjà réalisé quelques beaux projets… et je ne doute pas que d’autres arriveront très bientôt 🙂

WP Slovenija

J’ai donné ma première conférence à Ljubljana lors d’un meetup, j’essai de dynamiser la communauté WP en Slovénie (qui est en devenir..).

WP Tech

La « grosse actu » du moment, c’est ma prochaine conférence lors du WP tech à Nantes le 5 décembre !!

J’y parlerai Custom Post Field avec un framework que j’utilise CMB2.

A ce propos, j’ai réservé un appartement grace à mon partenaire (je suis ambassadeur) :  trampolinn.com .

Si vous cherchez un hébergement pour cette évènement, il y a de la place (et c’est gratuit ! ), la réservation est prise du jeudi 3 au dimanche 6.

Il y aura déjà Jean-Bernard Huet, que certains connaissent sur les groupes WP sur Facebook…

(EDIT)

2 nouveaux pensionnaires :

Didier : http://www.wptrads.com/

FX: https://fxbenard.com/

Et deuxième chose, je suis à la recherche d’une solution pour « descendre » sur Bordeaux après la conférence.. Si vous venez de cette région, un covoiturage serait idéal.

 

SEO : cocons sémantiques pour les nuls

Les « cocons sémantiques » est une notion que je pratique depuis longtemps, sans vraiment le savoir, et surtout avec une rigueur plus ou moins aléatoire. Les articles ici et la ,puis une discussion sur Parlons Blog et enfin un appel à « témoignage » chez Mitambo m’ont amené à écrire cette article pour démystifier cette notion qui peut paraitre compliquée, mais, pour peu que votre besoin en optimisation ne soit pas extrême (dans le cas contraire, je vous conseille de faire appel à un expert… j’ai des noms si vous voulez…) , est en fait assez simple 🙂

A travers un exemple concret, sur mon blog eSlovénie, je vais vous montrer UNE (et pas LA)  mise en oeuvre possible de cette notion.

Pré-requis et outils pour le SEO

Il faut tout d’abord avoir une idée clair de son site, ce qu’on veut dire, faire ressentir. Sa concrétisation en site web nécessite des bases en HTML pour le SEO (les balise H1, title…), une assez bonne connaissance du fonctionnement de WordPress (si votre site utilise ce CMS bien sur !), un peu de codage PHP (cela peut se limiter à du copier/coller de codes trouvés dans des tutoriaux… mais je préfère toujours comprendre ce que je fais…) , et connaitre les bons plugins, qui, utilisés avec parcimonie, peuvent être d’un grand secours.

Ensuite, il existe des outils pour vous aider dans ces tâches, et vérifier si vous obtenez ce que vous voulez… car les effets en matière de SEO sont rarement immédiat. voici une liste non exhaustive:

Etapes de la mise en oeuvre

Ré-organisation du blog

J’ai ouvert le blog eSlovénie, sans but précis, au bout d’un an, je me suis retrouvé avec un beau bordel… il fallait réagir.

Le première chose à faire : débordéliser le blog et le réorganiser en fonction de ce que mes potentiels visiteurs recherchent ( on attrape pas les mouches avec du vinaigre… avant que le visiteur puisse lire mes articles, il faut le faire venir… si je parle par exemple d’un lieu que j’affectionne, mais que personne connait, il va falloir jouer « d’artifices SEO » pour le faire découvrir à mon lecteur).

La première source de bordel avec WordPress, est les taxonomies (catégories, tags), je vous invite à lire ces articles : SEO & WordPress : Mots Clés Et Catégories puis Comment Bien Organiser Son Blog Avec WordPress ?

Ensuite, pour identifier ce que recherche les internautes, il y a deux sources principale : Google Trends et les forums spécialisés (lire les questions des membres est une mine d’or ! A vous d’y répondre…). Il y a aussi le Adwords KeywordPlanner, mais je trouve cet outil trop orienté « publicité ».

Pour mon site eSlovénie, deux champs sémantiques en ressortent: les destinations (en particulier : Ljubljana, Bled et Portoroz), et les activités (randonnée, rafting, VTT).

Pour ne pas tout perdre de ce qui a déjà été fait, je vais garder les tags qui concerne les destinations, et supprimer tous les autres…

Nettoyage des pages

Une page web, n’est pas constituée uniquement du contenu de votre page/article WP. Elle contient aussi un header, une sidebar et un footer.. en général. Il faut supprimer tout ce qui pourrait gêner la compréhension de vos pages par les moteurs de recherche, tout en gardant une bonne ergonomie pour vos visiteurs. Pour vérifier à quoi « ressemble » votre page pour Google  comment Google comprend votre page, testez la avec alyze.info

Création d’une Homepage statique

Les homepages que l’ont trouve généralement sur des blogs WP, reprennent vos derniers articles, j’explique dans cet autre article Blog & SEO : Anatomie D’une Homepage Parfaite pourquoi j’ai changé. Pour faire ceci, cela dépend de votre thème. Le mien est géré par des widgets, il y a quelques mois de cela, j’aurai pesté contre le dev, mais depuis que j’ai découvert Pods et ses possibilités en matière de widget, cela est très pratique. Une autre solution est d’utiliser des plugins « Page Builder » pour créer votre page (et d’autres). La dernier est de mettre les mains dans le code, refaire votre page comme vous la souhaitez… mais cela nécessite pas mal de connaissance en PHP et Codex WordPress.

Création des « cocons destinations »

Toujours avec Pods, j’ai créé des Custom Post Type « destinations » comme Ljubljana , pour y mettre toutes les informations relatives à cette destinations, dont les articles du blog, que je peut trier grâce au tag que j’ai conservé. Ce travail n’est pas fini, mais les cocons sont créés, reste à les nourrir pour qu’ils grandissent :). il va falloir aussi relier ces articles à cette page.

Pour donner plus de force aux 3 destinations vedettes, je les ai ajoutés dans le menu principal du site.

Testes et ajustements

Après avoir fait toutes ces modifications, j’ai demandé au plugin Mitambo de parcourir mes pages pour voir le résultat:

mitambo-eslovenie-showcase

Le but premier est atteint, reste maintenant les finitions

Créer un plugin WordPress extensible

A la recherche des bonnes pratiques pour créer un plugin WordPress (je dois revoir le code d’un plugin que j’ai codé il y a +2ans.. à l’époque, j’étais loin de connaitre aussi bien WP que maintenant), je vais vous parler d’un concept au coeur de WordPress, et pourtant assez peu utilisé des développeurs : créer des hooks (filter et action) pour ces propres plugins, et les rendre ainsi extensible.

La littérature en la matière est assez pauvre, je suis tombé sur cette article, qui m’a donné des pistes pour aller plus loin…

Pourquoi créer un plugin extensible ?

Si vous connaissez le principe des thèmes enfants, cela a à peu près les mêmes avantages, celui de permettre à d’autres, de modifier le comportement de votre plugin, sans pour autant toucher au code du plugin, et risquer de tout perdre à chaque mise à jour du plugin.

Ne vous est-il jamais arrivé de trouver le plugin « presque parfait », avec juste un petit « truc » qui ne répond pas à votre besoin ? Que faire dans ce cas ? Demander au développeur qu’il fasse une modification ? Pas sur qu’il ait le temps ou l’envie de le faire… Le refaire développer ? Cela peut couter très cher selon la complexité des modifications… alors que si le créateur du plugin avait prévu des hooks à son plugin, cela aurait été beaucoup plus simple… et si c’est un plugin payant… il vient de bêtement perdre une vente… car OUI, rendre un plugin extensible, c’est vraiment très simple !

Un exemple courant, arrivé très récemment : Sur la homepage du site d’un client, il y a un shortcode de slider reprenant les derniers articles, dans l’admin, on peut choisir de ne sélectionner qu’une catégorie, et le nombre d’article. Mais c’est tout ! Si le client veut filtrer sur une autre taxonomie, ou un Custom Post Type… cela n’est pas possible sans modification du code.

Comment écrire un plugin extensible ?

Pour cela, nous allons utiliser 4 fonctions déjà très utilisées si vous êtes un fan de Captain Hook : add_filter/apply_filter et dans une moindre mesure add_action/do_action. Pour être exhaustif, il y a aussi has_filter/remove_filter, has_action/remove_action, mais il n’est pas nécessaire d’en parler ici, pour expliquer comment cela fonctionne.

Les filtres : add_filter/apply_filter

C’est le concept le plus simple. Un filtre permet de manipuler des données (nombre, chaine, tableau…), typiquement l’exemple du slider, on va pouvoir filtrer les données qui nous intéresse. Cela peut être utile aussi pour modifier un shortcode. Dans l’article COMMENT AFFICHER VOS CUSTOM POST TYPE ? , on utilise le filtre pre_get_posts de la fonction get_posts de WordPress.

Les actions : add_action/do_action

Cette fois, on ne manipule pas des données, mais on réalise de réelles actions ( envoi d’un email, suppression d’un utilisateur, affichage d’un bouton…).

Passons à un cas concret, c’est souvent plus simple. Admettons que vous venez de créer un plugin pour gérer un petit catalogue de livres. Vous avez créé une widget pour afficher une liste de livres, le code pourrait ressembler à cela:

function widget_show_books() {
 
    $query_args = array(
        // récupérer les paramètres dans $options[] ... 
    );
 
    $books = new WP_Query( $query_args ) ;
   if( $books->have_posts() ) :
 
        echo '<div class="widget_books">';
 
            while( $books->have_posts() ) : $books->the_post()
 
                echo '<div class="widget_book">';
 
                    echo '<h3 class="widget_book_title">' . get_the_title() . '</h3>';
 
                echo '</div>';
 
            endwhile;
 
        echo '</div>';
 
    endif;
    wp_reset_postdata();
 
}

Avec ce type de code, il va falloir prévoir tous les cas de figures dans la configuration de la widget (ce qui est assez fastidieux), et le code d’affichage n’est pas modifiable. Nous allons ajouter des filtres et des actions partout ou cela semble nécessaire (vaut mieux en mettre trop que pas assez, mais pas la peine d’en mettre la où cela semble vraiment superflu.. de plus, rien ne vous empêche de faire des mises à jour de votre plugin (ou thème, cette méthode est aussi utilisable pour vos fonctions personnelles de votre thème), avec de nouveaux filtres/actions

Voici ce que nous allons « hooker » (la liste n’est pas exhaustive):

  • Modifier les paramètres de la requête WP_Query (-> filtre)
  • Ajouter du code HTML avant chaque livre, pour ajouter une vignette ( -> action)
  • Ajouter du code HTML après chaque livre, pour ajouter l’auteur ( -> action)
  • Modifier <h3 class= »widget_book_title »> , pour le SEO  (-> filtre)
function widget_show_books() {
 
    $query_args = array(
        // mettre les paramètres par défaut ... 
    );
 
    $books = new WP_Query( apply_filters( 'widget_books_query',$query_args) ) ;
   if( $books->have_posts() ) :
 
        echo '<div class="widget_books">';
 
            while( $books->have_posts() ) : $books->the_post()
                
 
                echo '<div class="widget_book">';
                do_action( 'widget_extra_data_before', get_the_ID() );
 
                    echo apply_filters( 'widget_books_title_before','<h3 class="widget_book_title">') . get_the_title() . apply_filters( 'widget_books_title_after','</h3>');
 
                do_action( 'widget_extra_data_after', get_the_ID() );
                echo '</div>';
 
            endwhile;
 
        echo '</div>';
 
    endif;
    wp_reset_postdata();
 
}

Maintenant, si on veut afficher les livres d’un auteur en particulier :

//
//Code à ajouter dans votre functions.php ou votre plugin 
//
function widget_alter_books_query( $args ) {
    $args['author'] = 3;
    return $args;
}
add_filter( 'widget_books_query', 'widget_alter_books_query' );

Pour ajouter une vignette à chaque livre

function widget_show_book_image( $book_id ) {
    echo get_the_post_thumbnail( $book_id, 'thumbnail' );
}
add_action( 'widget_extra_data_before', 'widget_show_book_image' );

Voila, maintenant à vous de jouer, plus aucune excuse pour ne pas écrire des plugins extensifs… le plus chiant fastidieux est d’écrire une documentation claire pour que les utilisateurs puissent se servir au mieux de votre plugin.

Plugin WordPress : TGM Plugin Activation

Aujourd’hui, je vais vous parler d’un plugin, ou plus exactement d’une classe que j’ai découvert il y a quelques temps, mais je ne l’avais pas jusqu’alors mise en oeuvre sur un site WordPress.

De quoi s’agit-il ?

TGM Plugin Activation, va vous permettre d’inclure des plugins à votre thème, ou à votre propre plugin.

Installation:

Il suffit d’inclure le fichier PHP qui contient la classe, et d’ajouter un hook à votre fichier functions.php s’il s’agit d’un thème, ou au fichier principal de votre plugin.

Quels plugin peut-on ajouter ?

Tous ! Aussi bien des plugins inclus dans votre thème, ceux sur votre serveur (ou tout autre endroit accessible via internet), ou ceux présent dans le répertoire officiel de WordPress.

2 choses à ne pas oublier tout de même :

  • Vérifiez les possibles incompatibilités entre plugins
  • Ne pas inclure des plugins pouvant avoir des failles de sécurité

Cette classe est téléchargeable sur Github : TGM-Plugin-Activation

Tips WordPress : Comment afficher vos Custom Post Type ?

Pour améliorer votre blog/site, vous avez créé des Custom Post Type (avec ou sans Pods), c’est très bien.. si si je vous assure ! 😉

Maintenant, à moins que vous vouliez être le/la seul(e) à les voir (pourquoi pas ?), il va falloir les afficher non ?

Avant, je fonçais tête baissée (pas sur que ça aille plus vite mais bon…) dans le code du template pour modifier les « loop » de WordPress…

Mais ça c’était avant que je devienne pote avec Captain Hook ! 🙂

Oui, avant faire quoique se soit sous WordPress, pensez à regarder si un hook pourrait vous rendre service !

Et c’est bien sur le cas pour nos CPT…

Il s’agit du hook « pre_get_posts« , qui va nous permettre de reprendre la main, avant que WordPress ne lance sa requête.

add_filter( 'pre_get_posts', 'my_get_posts' );
 
function my_get_posts( $query ) {
 
	
		$query->set( 'post_type', array( 'post', 'livre' ) ); // livre is our Custom Post Type
 
	return $query;
}

A noter que la fonction set nous permet de modifier n’importe quel paramètre de notre requête, pour plus de détails, reportez-vous à la classe WP_Query

Le problème avec ce code, c’est qu’il va modifier toutes les requêtes de votre site ! Il faut ajouter des restrictions à l’emploi de cette fonction.

ex: afficher les CPT uniquement sur la Home, et n’affecter que la requête principale (il peut y avoir plusieurs requêtes sur une même page !)

add_filter( 'pre_get_posts', 'my_get_posts' );

function my_get_posts( $query ) {

	if ( is_home() && $query->is_main_query() )
		$query->set( 'post_type', array( 'post', 'livre' ) );

	return $query;
}

Pour ajouter nos CPT à notre flux RSS, on ajoutera la condition is_feed()… ( Conditional Tag)

Vous trouverez certainement une utilisation de ce hook… c’est une bombe non ?? 🙂

Thèmes WordPress : Creativemarket vs. Themeforest

On ne présente plus Themeforest… En fait si, je vais vous présenter Themeforest (on a tous commencé un jour…), il s’agit d’un site où on peut acheter – entre autres – des thèmes pour WordPress. Il est devenu une référence en la matière, même s’il en existe bien d’autres.. et c’est d’ailleurs le propos de ce billet, vous présenter Creativemarket que j’ai découvert récemment.

A première vu, rien ne distingue vraiment l’un de l’autre, et à regarder de plus près, cet outsider mérite que l’on s’y intéresse. Ce type de site s’adresse à plusieurs types de public : Webmaster/Blogger , webmaster/affilié , webdesigner. Je vais comparer ces 2 sites pour chaque cas.

Webmaster/Blogger

Lorsque l’on recherche un thème pour son site (ou celui d’un client), avoir une nouvelle source un peu moins connue, permet d’avoir une certaine originalité, et évite d’avoir le même thème que tout le monde. Et paradoxalement, même si le nombre de thème est largement supérieur sur TF, je trouve que le choix est plus grand et diversifié sur CM.

En tant que webmaster « pro » (cad. je fais des sites pour mes clients), j’avoue en avoir un peu marre des « Multi-purpose Theme » de TF, de vrais usines à gaz fourre tout (le SUV du thème 😉 , dont 90% des fonctionnalités ne seront jamais utilisés !

Même si le prix est pour moi un critère secondaire, sur TF, pratiquement tous les thèmes « un minimum chiadés » sont à env. 50$, sur CM les prix varient de 2$ à 150$, certes en 2 et 150 dollars, vous n’aurez pas les mêmes fonctionnalités, mais cela peut vous suffire, pour un simple blog (surtout quand on débute) il vaut mieux se concentrer sur le contenu et l’ergonomie

Webmaster/affilié

Vous avez un site dont l’audience est plutôt constituée d’autres webmasters (Si vous avez un site de mode, laissez tomber ce genre d’affiliation, cela ne vous rapportera rien !) et vous voulez gagner un peu d’argent avec celui-ci, l’affiliation en est un bon moyen.. Si cela est bien fait évidemment.

La encore, je trouve le système de CM plus avantageux avec 10% des ventes pendant 1 an, plutôt que 30% sur le premier dépôt sur TF. Enfin, cela dépend du type de filleul que vous avez, mais je trouve ça plus « honnête » de reverser une commission sur vos ventes.

Autre chose non négligeable, lorsque vous naviguez sur CM (en étant connecté à votre compte) , les liens de partages sur les réseaux sociaux sont automatiquement trackés avec votre identifiant. Très pratique avec les « Free Goods Of The Week », en 2 clics vous avez un outils de promotion très puissant 🙂

Webdesigner

Si vous êtes créateur de thèmes WordPress (mais pas seulement, ce site propose aussi des thèmes Joomla, Drupal, des templates HTML, des illustrations, des plugins Photoshop…)…

Creativemarket vous reverse 70% de vos ventes, et ce même si vous ne leur donnez pas l’exclusivité ! Libre à vous de vendre vos créations ailleurs, sur votre site.. ou sur TF également !

De plus, pour vendre, vous ne serait pas obligé de succomber à la mode du « Multi-purpose Theme ».

Conclusion

J’espère vous avoir donné envie de découvrir Creativemarket, même sur Themeforest restera encore pour quelques temps une référence je pense, il est toujours intéressant d’aller voir le thème est plus vert ailleurs 😉

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.