Former à WordPress – Expérience n°1 auprès d’un restaurateur

Comment enseigner WordPress ? Voici les conclusions que j’ai tirées de ma première expérience en tant que formateur auprès d’un restaurateur, ce qui a bien marché et ce qui aurait dû être fait différemment.

Mon parcours

J’ai commencé le développement web en autodidacte en 2005 grâce aux cours du Site du Zéro (devenu depuis openclassrooms). J’y ai passé une grosse partie de mon temps libre pendant le lycée. Puis je suis allé à la fac. La première année s’est bien passé, la seconde beaucoup moins. J’ai laissé l’informatique de côté pendant quelques temps, et j’avais l’idée de m’y remettre en octobre 2014, en créant une boite de développement web. La vie a fait que ça n’a pas été possible à ce moment là. Le 30 octobre 2015, j’ai postulé pour une offre d’emploi, trouvée sur Pôle-Emploi.fr.

Il s’agissait de 12h de formation. En me contactant, l’organisme de formation m’informe que c’est du face à face, un seul client à la fois, et que je peux définir les horaires en fonction de ma convenance et de celle du client. Nous nous sommes mis d’accord avec mon premier client pour faire une séance de 3h par semaine, pendant 4 semaines. Je devais dispenser mon premier cours le 18 novembre.

Difficile de s’y remettre au début. Ma capacité de concentration excédait rarement 1h30. Après avoir passé 25h (j’ai compté) de temps de préparation pour la première séance, et presque autant pour la seconde, j’ai fini par adopter un rythme de croisière où je bossais principalement les mardis et lundis pour préparer les cours du mercredi.

Les technologies à utiliser étaient laissées à mon bon vouloir. J’ai naturellement choisi WordPress, pour son côté intuitif, et ses milliers de thèmes disponibles. Je suis tombé sur quelques questionnements à ce sujet.

Faire personnaliser un thème WordPress en seulement quelques heures de formation

Difficile d’imaginer pouvoir enseigner à son client comment personnaliser un thème WordPress afin que son site ait les couleurs de son enseigne en 12h, alors qu’il y a plein d’autres choses à apprendre. Lui enseigner CSS, les thèmes enfants ? 12 h seront un peu courtes. J’ai alors choisi le plugin pour WordPress intitulé Theme Tweaker.

Theme Tweaker

Theme Tweaker va rechercher dans le fichier style d’un thème toutes les couleurs notées en hexadécimal, et vous fournit un tableau de correspondances qui ressemble à ça :themeTweaker

Plutôt pas mal à priori. Ça marchait bien avec le thème Mace, sur lequel on était parti au début. Mais quand mon client a décider d’utiliser le thème Sixteen… catastrophe. Dans Mace, la plupart des couleurs sont définies dans le fichier style.css. Dans Sixteen en revanche, beaucoup de couleurs sont définies dans css/main.css, et toutes ne sont pas en hexa : on trouve du rgb(), et même du rgba(). Alors comment faire ?

Une solution (pas la meilleure)

J’ai décidé d’utiliser Child Theme Configurator pour créer un thème enfant de Sixteen. Child Theme Configurator, une fois installé est accessible via Outils > Child Themes. Il est parfois nécessaire, dans l’onglet Parent / Child, sous Stylesheet handling, de changer l’option utilisée, pour Enqueue both parent and child stylesheets. Une fois ceci fait, on peut aller dans Apparence > Éditeur, pour donner des valeurs arbitraires à toutes les couleurs qu’on souhaite modifiables par le client :

themeTweaker_02

Modifier les couleurs dans le CSS du thème enfant

Ce processus est un peu long. J’ai utilisé l’extension web developer toolbar pour Firefox (elle n’est pas aussi complète sous Chrome) pour repérer les éléments qui m’intéressaient via CSS > Voir les styles d’un élément particulier.

Web developer toolbar fr

Voir les styles d’un élément particulier

Une fois ceci fait, j’obtiens un thème Sixteen Child personnalisé très bariolé (pour que les couleurs soit plus identifiables à l’œil). Ça ressemble à ça :

Thème enfant de Sixteen bariolé par l'éditeur CSS de WordPress

Thème enfant de Sixteen bariolé par l’éditeur CSS de WordPress

J’ai volontairement exclu l’utilisation de nuances de roses car elles constituaient la palette de couleurs de mon client.

Grâce à Theme Tweaker, on peut obtenir quelque chose comme ça :

Sixteen modifié via Theme Tweaker

Pour l’utilisation par mon client, je lui ai proposé un plugin de pipette pour Chrome (ColorZilla) afin qu’il puisse plus facilement identifier à quel élément (menu, contenu, etc.) correspondait chaque couleur.

Au final

J’avais choisi Theme Tweaker car je pensais que ça permettrait à mon client d’être autonome sur la personnalisation de thèmes. En l’état actuel de cette extension, ce n’est pas le cas pour tous les thèmes, et il n’est pas facile pour mon client de savoir a priori quels thèmes seront compatibles avec Theme Tweaker.

Nous avons quand même réussi à obtenir quelque chose de personnalisé :

Le résultat final

Le résultat final

mais c’est surtout dû au fait que j’ai modifié les CSS.

Rétrospectivement

J’aurais aussi bien pu lui apprendre à utiliser l’extension Firefox web developer : ça n’aurait peut-être pas été plus compliqué qu’utiliser ColorZilla. Mon client aurait terminé plus indépendant dans la personnalisation de thèmes. Ça m’aurait par contre obligé à lui enseigner les bases de la syntaxe du CSS, ainsi que les deux propriétés color et background-color.

Enseigner The GIMP

Nous devions personnaliser un template de newsletter MailPoet. J’ai été surpris de constater qu’il est possible de faire saisir les concepts de base de la manipulation graphique (calques, transparence, sélections, masques de calques, alpha vers sélection…) en moins de 2h. Mon client n’avait vraisemblablement jamais touché à un logiciel de manipulation d’images, et a été rapidement à l’aise avec les concepts de The GIMP.

Nous avons pu personnaliser un modèle de newsletter dont certains éléments graphiques (entête et pied de page) comprenaient des bords arrondis, donc de la transparence, donc des sélection via « alpha vers sélection » et des coups de pot de peinture sur toute la sélection. Mon client s’en est très bien sorti, et a eu l’air d’avoir compris rapidement ces concepts qui me semblent pourtant compliqués.

Commenter avec...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Loading Facebook Comments ...