Introduction

Cela faisait maintenant plusieurs années que je reculais devant l’obstacle de l’éditeur Gutenberg de WordPress. C’est sans doute dû à ma grande habitude de l’éditeur classique (j’ai commencé à maintenir un blog personnel en 2005 et à utiliser WordPress pour mon blog pro en 2009) et au fait que tous mes tutoriels ont été réalisés avant l’arrivée de l’éditeur de bloc !

Toujours est-il que jusqu’ici j’utilisais les extensions « Classic Widgets » et « Classic Editor » pour publier des contenus sur mon blog. Seulement voilà, à la rentrée le BTS TC est rénové et la conception de sites et de contenus web font une arrivée en force… En plus, depuis la version 5.9, l’utilisation des blocs s’étend, via l’éditeur de site, partout dans WordPress.

Je n’avais donc plus trop le choix et j’ai donc décidé de sauter le pas pour mettre à jour mes connaissances et mes supports de cours sur WordPress.

Comprendre le Full Site Editor

Mon blog professionnel a encore une fois été un précieux outil pour me faire la main et comprendre comment cela marche. Je me suis échauffé sur un blog de test pendant deux semaines et lundi dernier, je me suis lancé sur la remise à plat du blog du prof TIM.

Désolé pour les visiteurs qui auraient trouvé ça et là des pages en chantier durant ce laps de temps !

Thème

Si vous voulez vous frotter au FSE, il vous faudra installer un thème compatible. Pour ma part, je suis resté sur le thème officiel Twenty Twenty-Two. Cela m’offre deux garanties : il sera maintenu longtemps et la communauté des utilisateurs sera importante et donc le support sûrement très bon.

Pour trouver un thème compatible, faites une recherche en filtrant sur Édition complète du site.

Au niveau global, le thème vous permet de choisir une batterie de cinq couleurs (Apparence > Éditeur de site). On peut aussi choisir une police, mais pas celle que j’utilise (Mulish). J’ai donc laissé installé le plugin Fonts Plugin.

J’ai installé une extension, en cours de développement, qui permet d’améliorer le paramétrage du thème et des blocs : Twentig. Elle propose un plus grand choix de polices et la possibilité de gérer la largeur du contenu sur le site (1000 px pour moi). Par contre, je n’ai pas trouvé d’endroit pour paramétrer la taille et la couleur des titres. Je l’ai donc fait avec quelques lignes de CSS dans l’outil de personnalisation de WordPress (Apparence > Personnaliser).

Avant d’aller plus loin, j’ai dû me convaincre de troquer mon menu à rallonge pour une page d’accueil avec plusieurs sections de contenus. C’est dans l’air du temps, mais ça ne correspond pas, par défaut, à ma façon de visiter un site web ! J’ai aussi supprimé ma colonne de Widget. Comme me l’a fait remarqué mon neveu de 11 ans : « Ça fait blog à l’ancienne » … Un peu rude avec tonton, mais ça a le mérite d’être sincère !

Au final, je suis content du résultat.

Exit les widgets, bienvenus aux blocs

Ce nouveau système signifie sûrement à terme la fin des widgets. Tout ce qu’ils apportaient peut-être réaliser avec des blocs. Si vous n’installez aucune extension supplémentaire, vous en aurez déjà beaucoup de disponibles : Paragraphe, Titre, Liste, Citation, Tableau, Image, Galerie, Bannière, Youtube, Bouton, Colonnes, Lignes, Espacement… La liste est très longue. Pour ma part, j’ai installé Jetpack, j’accède donc à une tripotée d’autres blocs et widgets !

Bloc réutilisable et Élément de modèle

À partir d’une combinaison de ces blocs on peut créer des « Blocs réutilisables » et des « Éléments de modèle » . J’ai mis un peu de temps à comprendre, mais les deux servent à la même chose :

• Les blocs réutilisables sont disponibles dans l’éditeur de pages et d’articles. Si vous modifiez un bloc, il sera modifié partout où vous l’avez inséré. J’en ai créé quelques uns (Stats-témoignages, 3 colonnes).
• Les éléments de modèle sont disponibles dans les modèles de page et de publication et de la même manière, si vous modifié un élément dans un modèle, il sera modifié partout où il est utilisé. C’est particulièrement pratique pour les en-têtes et pieds de page, mais pas que. J’en ai créé 9 : Stats-temoignages, En-tête-Accueil-TIM, Youtube, Publications, Cours, Enseignement, Formation, Page-unique et Barcamp. J’ai aussi modifié une bonne partie de ceux qui sont proposés par défaut : En-tête (petit, sombre), Pied de page et En-tête.

Compositions

Le thème propose aussi des « compositions » de blocs qui permettent de gagner du temps dans l’agencement des blocs et de trouver de l’inspiration sur le design. Twentig en ajoute quelques-unes. Une fois personnalisées, ces compositions peuvent devenir assez facilement des éléments de modèle ou des blocs réutilisables. 😉

J’espère qu’à l’avenir, on pourra créer et enregistrer ses propres compositions. Pour l’instant, je n’ai pas trouvé d’endroit où le faire. Du coup, j’ai utilisé des copier/coller de mises en forme entre plusieurs publications.

Modèles

Les modèles permettent de gérer la mise en page d’articles ou de pages sur le même thème. Par défaut, il y en a onze. J’en ai personnalisé six : Recherche (Modèle utilisé pour afficher les résultats de recherche.), 404 (S’affiche lorsqu’aucun contenu n’est trouvé.), Archive (Affiche les catégories d’articles, les étiquettes et autres types d’archives.), Page (Affiche une page unique.), Publication unique (Affiche un article unique.) et Accueil (S’affiche en tant que page d’accueil du site, ou en tant que page du blog si vous n’avez pas mis en place de page d’accueil statique.)

J’en ai aussi créé quatre : Cours (Affiche les pages de TP/TD et les fiches/tutoriels.), Enseignement (Affiche les pages sur les progressions, cahiers de texte, etc…), Formation (Affiche les pages de formations.) et Barcamp (Affiche les pages des barcamps).

Et la formation dans tout ça ?

J’ai déjà enregistré dix-sept tutoriels vidéos. Il va me falloir un peu de temps pour monter tout cela et le partager avec vous sur le blog ! Ce grand nombre s’explique par le fait qu’une bonne partie des capacités visées par le bloc 5 du nouveau BTS TC UJAC peuvent être étudiées et mises en œuvre sur un site WordPress ! Il me reste quelques points à voir comme l’utilisation de WooCommerce et des Widgets (car le Full Site Editing sera sans doute un peu trop complexe pour le temps dont je disposerai avec les étudiants).

Conclusion

Avec du recul, 80 % du travail résidait dans la personnalisation de la page d’accueil ! Il ne faut pas se rater, car c’est le point central du site !

Au passage, j’ai pris le temps de faire un travail qui me tenait à cœur depuis longtemps, mais que je n’avais jamais eu le temps de mettre en œuvre. Je me suis replongé dans les 474 contacts reçus sur le site (depuis 2012) pour m’en servir de témoignages sur mon travail dans les pages du site.

Cela représente 180 demandes d’aide, 46 offres de partenariat (échange de lien, promotion de solutions, proposition de formation, etc) et 236 remerciements (qui constituent une vraie reconnaissance de mon travail, ce qui est rare qu’en on est prof). Il y a aussi quelques inclassables et surtout un seul utilisateur chagrin pour critiquer le blog !

Je n’ai pas inclus les 377 commentaires par manque de temps, mais merci mille fois à toutes et à tous pour votre soutien. Cela constitue ma seule rémunération pour ce blog.

Kenavo.