J’ai passé une bonne partie du mois de décembre et le début du mois de janvier à concevoir le nouveau site de l’EPL. J’ai profité de notre changement de logo pour me lancer.

L’ancienne version tournait avec le thème Twenty Fourteen de WordPress. Ça vous donne une idée de son âge… 😉 J’ai choisi de passer sur le thème Twenty Twenty-Two, bien plus moderne et compatible avec les dernières avancées de WordPress.

Pré-production

La dernière fois que j’avais eu à faire ce genre de travail, j’avais dû travailler sur une version locale du site avant de l’uploader à la place de l’ancien. Heureusement pour moi, les services proposés par notre hébergeur o2switch ont bien progressé en sept ans !

J’ai utilisé l’outil WP-Tiger de notre Cpanel pour faire une version de pré-production de notre site sur laquelle j’ai pu revoir le site de fond en comble. À ce stade, je croisais les doigts pour qu’à la fin de mon travail, la mise en ligne de la pré-production se passe sans encombre. Pour plus de sécurité, l’outil propose de faire des sauvegardes du site en un clic. Vraiment super pratique !

Une fois la pré-production créée, voici ce que j’ai fait :

• Bloquer les moteurs de recherche pour éviter qu’une copie de notre site se retrouve référencée. Je pense que WP-Tiger est conçu pour l’éviter, mais je ne voulais prendre aucun risque.
• Désactiver WP-Rocket, notre extension de cache, car ma licence personnelle ne m’autorise à booster que trois sites.
• Couper la connexion à JetPack, parce qu’il voyait la pré-production comme une migration de notre site.

Refonte de l’interface

J’ai ensuite commencé le travail de refonte du site. L’idée était de réduire le nombre de clics nécessaires pour atteindre une ressource depuis la page d’accueil. J’ai donc « découpé » l’accueil en plusieurs espaces accessibles via le menu dans le header : Aménagements Paysagers, Animalerie, Jardinerie, Fleuriste, Agriculture – Horticulture, Vie de l’apprenant.

Cela permet de donner un accès direct à toutes les formations que nous proposons. Chacun de ces « espaces » est un élément de modèle, ce qui permet de le rappeler dans le modèle des pages correspondants à ce secteur.

Exemple : L’élément de modèle « Aménagements Paysagers » est appelé dans le modèle des pages des formations BTS AP et Bac Pro AP. Cela permet de naviguer à l’intérieur d’un secteur sans avoir à revenir à l’accueil.

Une fois la page d’accueil quittée, le menu de navigation change. Il ne pointe plus vers des parties de la même page, mais vers des pages centrales qui redistribuent le visiteur vers les pages du même secteur. J’ai trouvé assez compliqué de faire en sorte que le menu proposé dans l’en-tête change selon l’endroit où on se trouve sur le site. J’ai bien créé plusieurs navigations dans l’éditeur de WordPress, mais ça n’a pas été simple de les assigner de façon indépendante aux différents en-têtes.

Je me suis aussi servi des compositions (qu’on peut synchroniser ou pas, c’est au choix) pour gérer les morceaux de page qui reviennent de manière récurrente, comme une barre de bouton de navigation par exemple.

Mise à jour des contenus

Est venu ensuite le temps des mises à jour ! Je ne voulais pas trop m’investir sur cette partie, mais au final, j’y ai passé de nombreuses heures. Je voulais conserver un espace en page d’accueil pour y mettre les rendez-vous importants de l’année. Merci Canva pour l’éducation qui m’a été très utile pour la création des nombreux visuels nécessaires à ce travail.

J’ai aussi pas mal utilisé Inkscape (pour manipuler le nouveau logo) et Gimp (pour préparer des photos).

J’ai ensuite demandé à mobiliser des collègues pendant deux heures pour faire des vérifications et apprendre à se servir de l’éditeur Gutenberg de WordPress pour pouvoir maintenir les pages à jour. Dix personnes ont répondu présent !

Mise en ligne

Après ces deux heures de formation, j’ai procédé à une ultime sauvegarde du site et j’ai cliqué sur le bouton « Mettre en ligne« . En quelques minutes, le transfert était réalisé.

J’ai tout de suite ré-autorisé les moteurs de recherche et réactivé WP-Rocket (J’ai utilisé la fonctionnalité d’import / export pour récupérer tous mes réglages). Enfin, j’ai reconnecté JetPack. J’avais peur de perdre tout l’historique de la connexion (notamment les statistiques), mais tout est revenu instantanément.

Seul petit soucis, la police Mulish (ou Muli) ne s’affichait pas sur le site malgré les réglages faits dans le plugin Twentig. J’ai pas mal lutté pour comprendre ce qui se passait. Twentig permet de servir les Google fonts depuis un répertoire local (pour éviter les soucis de RGPD) et cela ne fonctionnait plus.

En fait, il fallait supprimer le fichier CSS présent dans le répertoire /wp-content/fonts pour obliger l’extension à régénérer le fichier avec les bonnes URL et le problème était réglé !

Kenavo.