Latwal • Photo : Yann Levy
Latwal • Photo : Yann Levy

Refonte du site LATWAL

La vente en ligne avec  woocommerce

Des modifications importantes ont été apportées au site du groupe LATWAL. Une solution de vente en ligne [ WOOCOMMERCE ] a été intégrée. Il est tout fait possible de convertir un site vitrine en site marchand grâce à ce PLUGIN développé par WORDPRESS. J’essaye généralement d’éviter les plugins qui ont tendances à alourdir le temps de chargement des pages, mais dans le cas de woocommerce, il y a plusieurs avantages à l’utiliser. Il est d’abord facile à installer, gratuit (pour les fonctionnalités de base), sécurisé et bien construit. Pour l’exploiter au maximum, il est quand même nécessaire de maitriser le code PHP et les fonctions qui vont avec… A défaut, il faudra vous tourner vers d’autres PLUGINS spécifiques à woocommerce et passer quelques heures pour tout régler.

J’en profite pour rappeler que l’utilisation des plugins doit être limitée pour obtenir un meilleur référencement. Plus un site est lourd, plus il est lent, et plus la note technique attribuée par les moteurs de recherche sera faible. L’enjeu est donc de faire un site aussi rapide que possible en économisant les ressources. C’est une des raisons pour laquelle, les professionnels du web n’utilisent généralement pas de constructeurs comme DIVI, ELEMENTOR, ou VISUAL COMPOSER et privilégient le code [ HTML • PHP • CSS • JS ] en direct.

Avec Woocommerce, le groupe peut désormais gérer lui même ses ventes sans passer par BANDCAMP, qui reste malgré tout une très bonne solution quand on souhaite rapidement vendre ses productions. Une rubrique (ou catégorie en langage WORDPRESS ) a été rajoutée : SHOP ainsi que plusieurs pages :  PANIERMON COMPTE • VALIDATION DE COMMANDE et des articles-produits.

Un nouveau slider pour la page d’accueil

Pour la page d’accueil, nous avons remplacé l’image de Une en plein format (1920px  x 1280 px), par un système d’accordéon avec 4 images. Au survol, l’image apparaît dans sa totalité alors que les 3 restantes se rétractent un peu plus encore. Ce système est une bonne alternative au slider-carrousel devenu un peu trop classique. L’idée d’une page d’accueil étant d’attirer l’attention, ce système simple mais néanmoins peu commun et dynamique, nous a paru idéal. Tout est réalisé en CSS (Cascading Style Sheets), avec quelques réglages dans les transitions.
Pour la gestion de ce « slider-accordéon », nous avons crée une rubrique dédiée : SLIDER [ CUSTOM-POST « slider » ] qui permet de sélectionner facilement les images à mettre en une. Une boucle aléatoire modifie l’ordre de ces 4 images.

La rubrique « dernières actualités » a été modifiée. Les 4 précédentes vignettes laissent désormais la place a 2 vignettes plus imposantes disposées en damier. Le survol d’un article crée une animation de l’image et du bouton. Cela permet de créer un dynamisme et surtout de renforcer la compréhension dans la navigation.

Custom-post et widget pour les dates

L’AGENDA est une fonctionnalité incontournable pour un site WEB. Précédemment j’utilisais un plugin : EVENT ORGANISER. Mais comme je le disais au début, l’utilisation d’un PLUGIN n’est généralement pas souhaitable pour un site  pro, car il rallonge le temps de chargement des pages. Le mieux reste donc de créer sa propre fonction et d’économiser au passage du temps et de l’argent. C’est ce que nous avons fait pour ce site. En utilisant toujours les CUSTOM-POST, nous avons crée un format d’article calibré pour un agenda. Dans le tableau de bord, nous retrouvons  une rubrique DATES, avec des champs à remplir pour la date, l’heure de début, pour l’adresse et le lieu, ainsi qu’une METABOX pour l’url de l’événement.

La page de présentation des DATES a été simplifiée. Nous n’avons pas voulu reproduire le système un peu lourd et conventionnel de la page d’ARCHIVE (dénomination wordpress) avec les articles qui s’ouvrent au clic’. Un système de page d’archive avec un système d’accordéon ( et oui, à nouveau ) nous a paru plus digeste et dynamique. Toutes les dates sont affichées avec les infos essentielles et le détail apparait au clic’ sur la rangée.

Nous avons crée un WIDGET [ Tableau de bord > apparence > widgets ] qui active une section avec les 4 dernières dates de l’AGENDA. Il est possible de le déclencher sur la page d’accueil. D’autres zones de widget pourraient être créer sur d’autres pages, mais cela n’aurait que peu d’intérêt.

Enfin, le jeu de couleurs a été sensiblement actualisé. Le rouge reste identique mais le pourpre est remplacé par la couleur RebbecaPurple correspondant au code hexadécimal ( #663399 ). Nous avons ensuite décliné la couleur avec des variantes claires et foncées qui permettent ensuite de créer des contrastes et de faciliter la lecture de l’information.