Former à WordPress – Essai n°2

Je vous présente ici les conclusions que j’ai pu tirer de ma deuxième tentative à former un indépendant à WordPress. On y discute personnalisation de thème, intégration de visite virtuelle, installation de WordPress à côté d’un site existant et que WordPress va remplacé et affichage du dernier article d’une catégorie.

Contexte psychologique

La scène se passe en janvier et février 2016. Je revenais de 3-4 jours passés à Barcelone et j’avais quitté la luminosité et la douceur catalane pour retrouver la grisaille et la pluie bretonne. Refaire une formation WordPress alors que j’en avais déjà dispensé une en novembre ne m’enchantait guère, ayant une grande difficulté naturelle à faire deux fois la même chose, l’ennui ayant très vite raison de ma santé mentale. Bref, j’y suis quand même allé, parce que je m’étais engagé et qu’un travail modérément ennuyant vaut toujours mieux que bosser à l’usine ou n’avoir aucun travail du tout, et donc de grandes difficultés à se définir socialement.

Ma cliente

Ma cliente tient avec sa sœur une crêperie à Vannes qui s’appelle « Balade en Crêpanie ». Pour info « ballade » fait référence à la forme musicale tandis que « balade » renvoie à la promenade. Ma mission auprès d’elles était de les former à refaire leur site. Un site avait été réalisé en 2011 par un de leurs amis, avec le logiciel iziSpot.

Balade en Crêpanie - ancien site

Balade en Crêpanie – ancien site, réalisé sous iziSpot (archive)

On y retrouve des classiques de mauvaises pratiques qu’on voyait il y a des années, et qui était d’ailleurs un peu tristes de voir, même en 2011. Texte défilant, site web non responsive, sous-menus qui ne comportent qu’un item, intitulés pas clair, texte trop petit, absence de titres, etc.

Mais bon, en 2011, avoir un site web n’était pas encore perçu comme indispensable. Je rappelle qu’on parle d’une époque où le taux d’équipement en smartphone et son usage au quotidien était bien moindre qu’aujourd’hui. La 4G n’existait pas. Bref, à l’époque, c’était déjà pas mal d’avoir un site tout court.

A l’issu de la formation (j’aurais dû le faire au début), j’ai interrogé ma cliente pour savoir pourquoi elle avait choisi la formation plutôt que de faire appel à un prestataire. Elle m’a répondu que c’était surtout pour avoir le sentiment de maîtriser les choses. C’est une question qu’il me semble toujours intéressant de poser, car ça permet d’orienter le cours en fonction. Ça nous donne une bonne indication du niveau de détail souhaité notre interlocuteur.

Ma cliente avait quelques notions de HTML, mais qui dataient d’il y a un bout de temps. Ça aura quand même été un plus durant le cours car concepts ont été plus faciles à comprendre pour elle que pour quelques autres de mes clients.

Personnaliser un thème WordPress

Suite à mes déboires du premier cours avec Theme Tweaker, j’ai pris le parti de faire utiliser l’extension Child Theme Configurator à ma cliente pour faire un thème enfant basé sur Sela, le thème qu’elle avait choisi. En effet, dans Sela, les options de personnalisation des couleurs ne sont pas mirobolantes.

Je lui ai donc proposé d’utiliser la barre d’outils pour développeurs web de Firefox pour trouver les sélecteurs CSS qui nous intéressaient et les personnaliser dans l’éditeur CSS de WordPress. On a utilisé la fonction CSS > Voir les CSS d’un élément particulier. Globalement ça a fonctionné, mais je n’avais pas suffisamment préparé cette partie là et rétrospectivement, je me dis que j’aurais dû lui enseigner les bases de HTML / CSS, à savoir : sélecteur, propriété, valeur.

Rétrospectivement encore, j’aurais mieux fait de lui faire installer Jetpack, qui vient avec son éditeur de CSS à coloration syntaxique, plutôt que Child Theme Configurator.

Migrer une visite virtuelle Giroptic

Mes clientes avaient fait appel à un prestataire il y a quelques années pour mettre en place une visite virtuelle, qui est encore accessible ici :
http://dsc360.giroptic.com/client/popup/7643d80f2583

Giroptic s’étant entre temps reconverti dans la vente de caméras 360, j’ai cherché un moyen d’inclure la visite virtuelle dans le site. J’ai envoyé un mail pour leur demander s’il existait un moyen d’intégrer leur lecteur de visite virtuelle sur un site web. Je leur ai envoyé le mail le 17 janvier… il ne m’ont répondu que le 28 avril. J’ai apprécié qu’ils me répondent, même si ça a été pour le moins… tardif. Bref, du coup entre temps il a fallu que je trouve un moyen d’intégrer la visite virtuelle par moi-même.

J’ai fait plusieurs tentatives infructueuses pour essayer de faire fonctionner leur lecteur hors-ligne. Si mon souvenir est bon, ça bloquait parce qu’il y avait un .swf qui était caché dans une partie inaccessible de l’arborescence. Du coup ce que j’ai fait c’est que j’ai récupéré les images de la visite virtuelle et les ai intégrées dans une autre solution technique. Pour récupérer les images, il m’a fallu aller chercher un peu dans le code source, accéder au fichier xml.php déclaré dans la variable flashvars du code javascript et aller chercher les images par ce biais là.

J’ai ensuite importé les images dans MakeVT.com. J’avais fait pas mal de recherches sur ce qui existait, et finalement mon choix s’est porté sur MakeVT parce que la mention de leur nom est discrète, que leur service est gratuit et que l’interface de création de panorama en ligne est assez simple. Le problème avec MakeVT, c’est que par défaut les visites ne sont pas compatibles mobile. Ils font mention du problème sur une page dédiée. Il est possible de payer 5$ par visite virtuelle pour la rendre compatible mobile.

La visite virtuelle de Balade en Crêpanie se trouve ici.

Les transitions (Hotspot) dans MakeVT

A l’époque, je ne comprenais pas tout à MakeVT, et il y a notamment une chose que j’ai mal fait : les transitions. Dans MakeVT, lors d’une transition, on peut choisir sur l’image de destination à quel endroit sera centrée la vue. Il suffit pour ce faire, lors de la création d’un hotspot de transition, de cliquer sur l’image de destination à l’endroit où on veut centrer, afin de déplacer l’œil (qui représente l’endroit le centre de l’angle de vue qu’on aura après le déplacement).

Définir un ratio cohérent

Encore une chose que j’ai mal faite. Dans le code par défaut que fournit MakeVT, les dimensions sont définies comme suit :

width="960" height="750"

soit un format « paysage ». Le problème c’est que lors que la largeur dédiée au contenu est inférieure à 960 px (ce qui arrive facilement si on a un menu latéral) on se retrouve avec un format paysage, qui ne semble pas trop naturel. L’idée est alors de trouver la largeur max pour le contenu et de faire une règle de 3 pour définir des dimensions appropriées. On peut aussi utiliser le modèle de page « pleine page » (fullwidth) lorsqu’il est disponible dans le thème choisi par le client.

Mise en valeur du dernier article de chaque catégorie

Ma cliente avait 2 types d’actualités à partager sur son site. D’une part « la galette du moment », qui est une galette qui change toute les semaines. D’autre part « l’expo du moment », qui correspond à l’exposition (photos, tableaux, etc.) qui a lieu dans leur crêperie à ce moment là.

Nous avons donc choisi de définir deux catégories « galette du moment » et « expo du moment », pour classer chaque article dans la catégorie idoine. Nous avons aussi utilisé l’extension Recent Post Widget Extended, pour faire apparaître le dernier article de chaque catégorie sur la page d’accueil via 2 widgets (un pour la « galette du moment » et un pour « l’expo du moment »). Le thème Sela dispose de 3 zones de widget destinées à la page d’accueil et d’un modèle de page intitulé « Page d’Accueil » : c’est sur la page qui possède ce modèle de page que s’affichent les widgets insérés dans les zones « Première zone de de la page d’Accueil », « Seconde zone de la page d’Accueil » et « Third Font Page Widget Area » (j’ignore pourquoi cette troisième zone n’est pas traduite en français).

Noter que l’extension Recent Post Widget Extended dispose aussi d’un shortcode pour une utilisation dans une page (ou un article). Dans l’attribut cat="", il faut noter non pas l’identifiant textuel de la catégorie, mais l’identifiant numérique, qu’on trouve dans l’interface d’administration des Catégories en observant l’URL lorsqu’on modifie une catégorie, après &tagid

Bien expliquer la différence entre pages et articles

Une erreur que j’ai commise c’est de ne pas avoir passé assez de temps à expliquer la distinction entre pages et articles. Récemment je me suis rendu compte que ma cliente modifiait à chaque fois le même article « galette du moment ».

C’est dommage parce que du coup les dates ne sont pas valide et l’info n’est pas trop pertinente pour le visiteur qui ne voit en arrivant sur le site qu’un article intitulé « la galette du moment », avec une date trop ancienne pour qu’il puisse penser qu’il s’agit réellement de la galette de la semaine en cours.

J’aurais dû prendre le temps de bien lui expliquer que Recent Post Widget Extended allait automatiquement chercher le dernier article de chaque catégorie, et que de ce fait la façon de faire optimale était de créer un nouvel article pour chaque nouvelle expo et chaque nouvelle galette.

Installer un WordPress à côté d’un site déjà existant

Un autre soucis qu’on a rencontré c’est qu’il existait déjà un site d’installé. Le site avait été réalisé avec iziSpot, ce qui fait qu’il existait un fichier index.htm et qu’on ne voulait pas que WordPress prenne le dessus avant que nous ayons fini de peaufiner le site.

On a donc du bidouiller les paramètres dans Règlages > Général. Il y a eu un moment où le site a cassé et où nous ne pouvions plus accéder du tout à l’interface d’administration. J’ai donc dû aller modifier directement les paramètres via PHPMyAdmin. Il s’agit des paramètres siteurl et home, dans la table options.

Ce qu’on aurait pu faire dès le départ, ça aurait été installer WordPress dans un dossier dédié (genre wp par exemple) et modifier le paramètre « Adresse web du site (URL) » au moment de la publication définitive du site, pour que celui-ci apparaisse comme étant à la racine.

Au besoin, vous trouverez plus d’explications sur la procédure à suivre ici :

https://codex.wordpress.org/fr:Donner_à_WordPress_son_Propre_Dossier


 

Commenter avec...

Laisser un commentaire

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

Loading Facebook Comments ...