Il en est d’Internet comme du reste, il y a des modes, des tendances. Quand j’ai lancé ce site, la mode était aux habillages très denses, 3 ou 4 colonnes, souvent sur fond sombre avec plein de liens et de décors. J’ai choisi le thème Atahualpa qui est suffisamment personnalisable et j’ai commencé avec 3 colonnes, pour mettre plein de liens.
L’an passé, j’ai remarqué que les sites que je trouvais les plus agréables étaient plus aérés, n’avaient que 2 colonnes et j’ai allégé la disposition de mon blog en ne gardant que la colonne de droite et ajoutant de l’espace entre les billets sur la page d’accueil.
Après avoir mis en place et rôdé un nouveau moteur, je décide d’attaquer la carrosserie. J’apprécie toujours Atahualpa, très souple et performant, mais il n’est pas responsive : il ne s’adapte pas bien aux petits écrans des tablettes [mieux comprendre ici]. Aussi, plutôt que de faire une simple mise à jour du thème, je décide de changer de solution.
Choix du thème
WP est fourni avec des thèmes responsive que je teste. Toutefois, la typographie et la disposition ne me convainquent pas entièrement et surtout, la page d’accueil ne présente plus les extraits des billets. Je furette, teste différents thèmes et définis mes impératifs :
- un fond blanc, tout au moins très clair ;
- une typo aérée, sans empâtement, plutôt du genre Verdana, et grosse. C’est l’effet du vieillissement, je ne supporte pas les pâtes de mouches et je préfère voir la page du Figaro que celle de Libé (je parle du visuel, pas du contenu !) ;
- un texte en noir, ou très sombre qui offre un beau contraste et non pas des gris légers illisibles ;
- une liste d’extraits des derniers billets en page d’accueil ;
- une vignette sur les billets de la page d’accueil, qui respecte leur format original, pas un machin carré qui coupe les titres des livres ;
- une entête (header) avec un bandeau pas trop haut et contenant des images personnelles (bon moyen de rendre son site différent).
Et accessoirement, mais ça doit s’arranger en bidouillant le CSS :
- une liste à puce améliorée ;
- des belles mises en valeur pour les citations (blockquote).
En testant les différents modèles, j’ai éliminé le slider (diaporama) en page d’accueil, qui convient plutôt aux sites de photos, ainsi que la disposition magazine, en pavés de texte, que je trouve vite un peu lourde. Quelques essais plus tard, j’hésite entre deux thèmes fournis par WP : Twenty Eleven et Twenty Thirteen. J’opte pour le second dont la structure me semble plus proche de ce que je cherche et mon blog pourrait ressembler à cela :
Gros handicap : le thème est à dominante orange, or je bouffe déjà du orange toute la journée car les bataves ne savent pas qu’il y a d’autres couleurs… alors là, je vais éviter et adapter pour retrouver un graphisme proche l’existant à base de bleu-vert et de gris.
Thème enfant
J’ai appris qu’il ne fallait pas toucher aux données d’un thème sous peine de perdre les modifications lors des mises à jour ; j’ai donc commencé par créer un thème enfant [tuto ou vidéo] que j’appelle « 2013 et plus ». Grâce au thème enfant, on peut toucher à tout, modifier les différents fichiers constitutifs du thème et afficher le site pour vérifier le résultat. C’est là que l’installation en local a toute son utilité, car je peux patouiller dans les motifs et les couleurs sans perturber les visiteurs. Et je peux vous assurer que j’ai fait pas mal d’essais car j’ai tâtonné pour trouver des options satisfaisantes.
Bon, c’est pas le tout, j’ai créé mon thème enfant, je me retrouve avec un thème à personnaliser mais je prends les choses par quel bout ? Les thèmes élaborés proposent un tableau de bord pour personnaliser les éléments, ce n’est pas le cas de celui que j’ai retenu ; il faut donc mettre les mains dans le cambouis et aller modifier les fichiers. J’avais déjà copié des bouts de code pour mettre Google analytics ou modifier des petites choses, j’étais confiant et naïf, pensant que cela irait tout seul. Ouh la la, j’ai galéré !
En regardant sur les différent sites pour trouver des solutions, je comprends qu’il est impératif de s’aider de Firebug, une extension de Firefox qui permet de voir les codes CSS des pages affichées. La solution m’a paru d’abord presque pire que le problème car j’ai peiné pour en comprendre le fonctionnement mais, une fois pris en mains, ce programme m’a vraiment facilité la vie [comment utiliser Firebug, une vidéo en plus du tuto]. Je me rends compte aussi que je vais devoir aborder les rudiments de langues étrangères : HTML, CSS et PHP, je ne peux que bénir les tutoriels du Site du Zéro disponibles sur le site OpenClassrooms qui me permettent de comprendre les deux premiers. Pour le PHP, c’est une autre affaire…
J’ai consulté pas mal de sites et de forum pour quasiment chaque modification mais, au fil du temps, je comprends un peu mieux la structure des pages et des éléments et je progresse. Je ne fais que modifier de l’existant, je copie et intègre des bouts de code, je suis loin de pouvoir recréer un thème.
Header
J’attaque tout bêtement par le haut du site. A la réflexion, ce n’est pas la meilleure méthode car j’aurais dû d’abord adapter toute la structure puis modifier le design ; pas grave, j’ai touché à tout en même temps. Pour commencer, je ne veux pas le titre sur l’image du fond mais au-dessus, sur fond blanc. J’y arrive presque mais l’intégration de la petite rosace me cause des soucis [solution ici]. Je diminue la taille de la bannière et je reprends les images à y intégrer. La taille est différente, 1600 x 130 pixels, j’en profite pour faire un nouveau choix, toujours avec un dominante nature et mer.
Couleurs
Le menu est un autre élément constitutif de l’en-tête et je dois définir un premier jeu de couleur. Là encore, je me fais des nœuds au cerveau : certains sites recommandent de n’utiliser que 256 couleurs qui seraient restituées sur tous les ordinateurs. Les couleurs utilisées sont désignées de 2 manières : par la proportion de rouge, vert bleu (code RVB ou RGB), c’est la méthode utilisée dans les traitements de texte, ou en code hexadécimal à 6 caractères où les couleurs sont définies par une combinaison de lettres et de chiffres. Le blanc est noté #FFFFFF, le noir #000000 et les couleurs web idéales sont une combinaison de 0, 3, 6, 9, C, et F. Oui, mais la couleur que j’utilise est #2F4F4F qui s’appelle aussi Dark Slate Grey et ne figure pas dans la liste… Je trouve l’équivalent #336666 avec une nuance plus claire et j’ai une palette restreinte pour décliner cette couleur. Je teste mais je ne suis pas entièrement satisfait du résultat ; je reprends la couleur initiale sans me limiter, les écrans à 256 couleurs étant quand même du très vieux matériel, et je choisis une palette grâce à un outil complet qui définit les couleurs complémentaires ou opposées. Les combinaisons de couleurs proposées me semblent un peu trop ternes, j’opte pour une dominante différente, un peu plus lumineuse mais très proche #226666, le site aura donc une dominante verte :
certains tons sont toutefois trop foncés, je fais une nouvelle palette avec des dégradés plus clairs.
Je définis les couleurs du menu, gris et vert quand il s’active et, là encore, Firebug est une aide précieuse car il indique la ligne à rechercher dans le fichier CSS. J’en profite pour modifier la couleur des liens et des titres et je découvre que je dois parcourir l’ensemble du fichier de style pour trouver les différentes options, le fichier style.css grossit…
Police
Satisfait de ce premier choix, je continue et cherche la bonne typo. Je trouve que la typo du thème 2013, Open sans, n’est pas assez noire et donne une impression de grisé flou. De plus, je n’aime pas la police Bitter utilisée pour les titres. Pour les titres, pas de problèmes, je continue avec Verdana qui offre suffisamment de force, surtout utilisé en gras ; pour le texte, j’opte pour Roboto, police mise à disposition par Google Fonts. Roboto est une police plus étroite que Verdana, plus proche d’Arial, mais a un joli contraste et je la trouve très lisible. J’en profite pour augmenter la taille de la police et de l’interlignage, pour améliorer la lisibilité.
Page d’accueil
En mode natif, le thème affiche tous les articles à la suite mais il n’est pas question de mettre l’intégralité des articles en page d’accueil, je ne veux que des extraits. Je ne suis pas le seul à vouloir modifier cette fonctionnalité du thème car je trouve vite la ressource [affichage de l’extrait en page d’accueil et modification de sa longueur] et j’en profite pour ajouter de la mention « lire la suite » et le titre à la fin du billet. En revanche, j’ai un peu plus de mal à modifier la vignette. En implicite, le thème propose une vignette qui fait la largeur du billet, c’est assez joli quand on met des photos mais pas adapté à mon cas car j’utilise principalement des couvertures de livres, plus hautes que larges, et des images de petite taille pour ne pas surcharger le serveur. En revanche, j’agrandis la taille des vignettes qui faisaient maximum 80 pixels et deviennent ridicules dans ce nouvel environnement : je change la taille de la vignette, je la cale à gauche et je recrée mes vignettes à la nouvelle taille.
Sidebar
La page d’accueil commence à ressembler à ce que j’attends, il reste à modifier le pied de page, les éléments de navigation, la colonne de droite. Au fur et mesure des modifications, je découvre que Twenty Thirteen est un thème très graphique et complexe, je n’en finis pas de devoir modifier des éléments. Je m’aperçois aussi que la gestion des « sidebars » est complètement différente, l’emplacement privilégié est sous le post, pour pouvoir mieux s’adapter. C’est là que je mets les liens de connexion, de rss et d’archives. Et là, surprise : le pied de page a un comportement assez autonome… les extensions se positionnent de gauche à droite puis s’empilent en fonction de la place disponible ; j’ai un peu de mal à domestiquer les différentes boites mais j’y arrive. La barre de droite me pose plus de problèmes car la colonne de droite n’est que tolérée, elle ne s’intègre pas bien au design et déborde sur le bas du site si besoin. J’en profite pour élaguer les liens à dispo et décide de mettre à droite le lien vers d’autres billets car Related post que j’utilise dans les billets peut se positionner ici. Cela me plait car j’ai une colonne vivante qui met en valeur d’autre billets ; oui, mais voilà, cette extension ne fonctionne pas sur les pages générales, page d’accueil et pages de recherche. Je trouve un autre plugin pour afficher des billets au hasard, Random related post, mais je voudrais bien avoir une proposition contextuelle dans les billets. Je renonce assez vite à gérer des colonnes différentes en php car j’ai réussi à créer une nouvelle zone de widgets mais pas à la rendre active, et je trouve Widget Logic, un nouveau plugin qui gère les sidebars selon mes vœux.
Images
Un des éléments qui m’a fait choisir Twenty Thirteen est la disposition des images qui sortent du cadre à gauche, je trouve que cela donne une dynamique graphique. J’intègre un ombré vu dans le thème Twenty Twelve et je règle les formats des légendes. En revanche je m’aperçois que l’image décalée ne se gère pas si bien que cela quand on veut mettre plusieurs images côte à côte, elles se chevauchent et deviennent illisibles. Fort de mes connaissances toutes neuves, je définis un style CSS particulier pour ce cas et tout rentre dans l’ordre, à condition de donner les instructions pour chacune des images concernées.
J’ai deux pages qui sont un peu particulières : celle des recettes testées et celle des albums photos.Chaque image renvoie à un lien, dans ce blog ou sur un autre, là aussi j’ai du définir une classe spécifique pour que tout s’aligne correctement, j’ai repris entièrement les deux pages et je suis assez satisfait du résultat !
Autres éléments
J’aime bien l’encadré ombré, je l’attribue aussi aux tableaux. J’ai pris le parti de la simplicité, je garde des tableaux unis mais j’ai trouvé la ressource pour avoir un tableau rayé avec des lignes de couleur alternées.
Je modifie aussi la liste à puces. Celle qui est proposée me convient, assez stylée avec des puces carrées, mais il y a toujours un espace injustifié entre le paragraphe précédent et le début de première ligne. Je corrige cela vite fait en CSS, pas mécontent de commencer à m’y retrouver et j’en profite pour bien aligner les puces qui ont tendance à se décaler s’il y une image à gauche. J’aurais bien mis la puce de couleur, c’est faisable mais en utilisant des images, je décide de ne pas me compliquer la vie pour cela.
Il faut aussi revoir le bloc de citation que je veux mettre en valeur. Jusque-là, je mets les citations en gras ou en couleur, j’aime bien les sites qui les annoncent avec un joli guillemet ou une barre latérale. En cherchant de découvre que les guillemets « » sont des guillemets français, et les typos proposent plus volontiers des doubles apostrophes plus anglo-saxonnes “ ”, ou des apostrophes allemandes ‘ ’. Bien qu’incorrectes au niveau typographique, je choisis les doubles apostrophes visuellement plus marquantes.
Si vous avez un peu de patience, vous découvrirez qu’on peut utiliser les immenses ressources du Web pour perdre son temps avec une efficacité que vous n’aviez jamais osé imaginer.
Dave Barry
Césure
Les différents éléments que je peux avoir dans un billet standard sont configurés, il reste un point qui me chiffonne : les mots se coupent en bout de ligne et pas toujours à bon escient. C’est ainsi que j’ai des césures dans les titres, ce qui est très laid. J’ai repéré une fonction word-wrap que je n’arrive pas à domestiquer, et je tente des variantes mais que je mette normal ou break-word ne change rien jusqu’à ce que je trouve un piste : certaines instruction CSS ne sont pas universelles et doivent être adaptées pour les différents types de navigateur : Chrome, Safari, IE ou Firefox. Ainsi la fonction qui pourrait n’avoir qu’une variable ressemble à cela « -webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;-o-hyphens: auto; », avec un préfixe qui correspond aux différents navigateurs.
Autres pages
Au fur et à mesure des tests, j’ai découvert des pages avec une maquette non modifiée : pages d’archives, de recherche, erreur 404. J’en fait le tour et les adapte, mais je ne modifie pas les modèles de format des billets, je resterai avec un modèle standard, bien que les dernières versions WP propose des formats différent selon qu’il s’agit d’un lien, d’une galerie, d’une citation….
Test en vrai
Le thème est finalisé, le site ressemble à ce que j’avais envie et a un peu évolué. Je le teste dans un environnement Chrome et IE pour voir si tout va toujours bien et je vois que la typo ne réagit pas pareil selon les navigateurs, Roboto ressort beaucoup moins bien avec Chrome et le rendu sur Internet Explorer est très mauvais ; en revanche, sur un iPad le site est plus agréable à consulter, mission réussie.
Je modifie les url qui font appel à des éléments du thème (images, logo), prépare un copie d’écran 300 x 225 pixels pour le voir dans mon tableau de bord et je transfère tout via mon ftp favori.
Je me prépare à la vraie vie, je n’oublie pas désactiver les différentes extensions avant d’activer le thème, j’ouvre mon blog et …ça marche, ouf !
Il reste encore à relancer les extensions une à une, remettre en place les widgets de la barre latérale et du footer et reformater les vignettes avec Force Regenerate Thumbnails. Heureusement que j’ai le site en local, je peux vérifier la bonne configuration dès que j’ai un doute ! Dernière mise au point, je remets les éléments de stat (Google Analytics et Xiti) en place.
Extensions
Au fur et à mesure des tests, j’ai remplacé pas mal d’extensions et voila avec quoi je fonctionne à ce jour (plugins compatibles Free)
- Anti-spam : bloque les robots mais pas les commentaires
- Force Regenerate Thumbnails : pour mettre à jour la taille des vignettes (activé uniquement à la demande)
- Hyper-cache : accélère l’affichage (parait-il)
- Insert RSS thumbnail : pour avoir les vignettes dans le flux RSS et Facebook
- Social Juiz Sharer : assez sobre et moins gourmand que Share This
- Page links to : pour renvoyer un billet vers une page
- Random post with thumbnails : affiche les liens vers les billets au hasard, utilisé sur la page d’accueil
- Related post thumbnails : propose des liens en relation avec le billet affiché
- Shutter relaoded : pour que les photos s’affichent sur un fond noir quand
- TinyMCE Advanced : utilitaire pour la saisie des billets
- Widget Logic : permet l’affichage de widgets différents selon les type de pages
- WordPress Database Backup : parce qu’il ne faut pas oublier de faire des sauvegardes régulières !
- WP-Optimize :un outil pour nettoyer la base de données et les éléments inutiles
- WP Missed Schedule : pour être sûr que les billets écrits à l’avance soient publiés au moment voulu
[edit : wp4.0 est encore un peu plus gourmand et le site ralentit, j’ai supprimé Related post thumbnails, Widget logic et Shutter reload pour économiser un peu de ressources. J’ai ajouté Use jQuery jsDeliv qui met en cache 3 scripts un peu gourmands]
Et voilà le nouveau thème en place, j’ai mis du temps mais je suis content d’avoir réussi. J’attends vos réactions.
