• Paru le 20 septembre 2017- mis à jour le 25 septembre 2017

Refonte du blog : je vous dis tout (ou presque)

1739 mots - 7mn

Refonte du blog : je vous dis tout (ou presque)

1024 678 Tout sur WordPress

Ça y est ! La v3 du blog est lancée : un nouveau logo, plus de barre laté­rale, plus de noti­fi­ca­tions push mais une lettre d’information, un nouveau design… genèse, thème, exten­sions, je vous dit tout sur tout.

Ces derniers mois ont été riches en projets, avec (entre autre) la refonte d’un site insti­tu­tion­nel (mairie), la créa­tion de sites « vitrine » et d’un site e-commerce. De quoi m’occuper… et de quoi me donner des idées et surtout l’envie de revoir la struc­ture et le design de mon propre blog.

Mais une refonte ne s’improvise pas… et même si « ce n’est qu’un blog » sans grande préten­tion, autant tout faire pour que tout se passe bien. J’ai donc mené ce projet comme je l’aurais mené pour un client – enfin dans les grandes lignes : les discus­sions avec le client par exemple, oui mais non, je n’allais pas discu­ter en tête à tête avec moi-même 😉

Première étape…

Le cahier des charges

Indispensable pour bien défi­nir le péri­mètre des actions à mener. Ceux qui prétendent s’en passer en ont souvent un d’informel – ceux qui s’en passent vrai­ment jouent avec le feu.

Le mien tenait sur une feuille de bloc note, avec tout plein de gribouillis en prime :

  • design
    • chan­ge­ment de logo 
    • suppres­sion du méga-menu
    • suppres­sion de la barre laté­rale
    • suppres­sion des noti­fi­ca­tions push
    • menu haut fixe même sur mobile
    • prio­rité abso­lue au contenu
    • refonte de la page À propos de…
  • fonc­tion­na­li­tés
    • ajout d’un module d’inscription à la lettre d’information
    • suppres­sion du module articles phare

Chaque choix était mûre­ment réflé­chi, après étude de l’impact poten­tiel des modi­fi­ca­tions.

Le logo par exemple, datait des premières heures du blog – à un moment où je n’avais pas décidé de son orien­ta­tion rédac­tion­nelle. J’avais envie d’un blog léger, life­style… je n’en ai pas aban­donné l’idée, j’en ai juste repoussé sa mise en œuvre aux calendes grecques.

Et après une année à subir ce fichu logo à chaque fois que je passais sur mon blog, j’ai fina­le­ment réussi à m’en débar­ras­ser !

Logo v2

Logo v3

Le méga-menu n’apportait rien en termes de visi­bi­lité, les retours que j’en avais était même plutôt néga­tifs. Exit le méga-menu, place à un menu bien plus sobre et qui va à l’essentiel.

Pour la barre laté­rale, la ques­tion était de savoir si mes lecteurs sont réel­le­ment inté­res­sés par les articles phare, ou si une recom­man­da­tion en cours ou en fin d’article ne serait pas plus porteuse. Exit donc la barre laté­rale, ses articles phare et son module de pub dont je n’étais pas très fan (mais le beurre dans les épinards, je n’étais quand même pas contre…).

Notifications push ou lettre d’information ? Je me suis aperçu que mon lecto­rat était bien plus deman­deur d’une lettre d’information que de noti­fi­ca­tions instan­ta­nées.

Vu que je ne change pas la struc­ture du site, je n’ai pas eu à me préoc­cu­per de l’impact sur le réfé­ren­ce­ment.

Voila pour l’essentiel. La feuille de route établie, il ne restait plus qu’à se mettre au travail. Et le travail, dans le cas présent, c’était…

Le choix du thème

Gratuit ou premium ? La ques­tion ne se posait pas en termes de support tech­nique, mais en termes de qualité, et de fonc­tion­na­li­tés.

Thème ou frame­work ? J’ai testé Genesis, mais très honnê­te­ment, je n’avais pas suffi­sam­ment de temps à consa­crer à son appren­tis­sage, dans l’immédiat. Mais ce frame­work m’a séduit, et j’y revien­drai certai­ne­ment dans un avenir proche.

J’ai testé une dizaine de thèmes, gratuits, payants, avant d’arrêter mon choix sur Blade. Un autre thème me plai­sait tout autant : Barcelona. J’ai testé l’un et l’autre avant que le premier ne l’emporte défi­ni­ti­ve­ment, prin­ci­pa­le­ment parce que j’ai rencon­tré quelques bugs liés à l’affichage des rubriques avec le modèle masonry sur Barcelona, deman­dant d’aller trifouiller dans le code javas­cript – ce n’est pas ma tasse de thé.

Blade n’est pas exempt de défauts, mais j’ai réussi à venir à bout de chaque problème, parfois au prix d’une modi­fi­ca­tion dans le thème parent (oui, pour ceux qui se pose­raient la ques­tion, j’ai créé un thème enfant). En chan­geant par exemple  get_template_directory() en  get_stylesheet_directory() pour que le fichier pris en compte soit celui du thème enfant. Si les créa­teurs de thèmes suivaient les recom­man­da­tions offi­cielles de WordPress, la vie serait plus (trop ?) simple.

Mais le thème ne fait pas tout, il fallait aussi…

Choisir les extensions

Bien sûr, j’ai repris une bonne partie des exten­sions utili­sées dans la v2. Mais certaines ne sont plus main­te­nues (dont Crayon Syntax Highlighter, mais il fonc­tionne toujours très bien et je n’ai hélas pas trouvé d’extension aussi perfor­mante – si quelqu’un en connaît une, je suis preneur).

Je n’avais pas de module d’inscription à une lettre d’information, par exemple. Et s’il y a bien quelque chose que je n’aime pas sur 99% des blogs, c’est ce bloc d’inscription qui appa­raît même quand vous êtes déjà inscrit. Alors j’ai opté pour Thrive Leads qui permet un affi­chage sélec­tif de ce bloc. Relativement chère (67$, mais avec des mises à jour illi­mi­tées) mais perfor­mante. Et je compte bien utili­ser leur mouli­nette pour faire dispa­raître le bloc d’inscription pour les visi­teurs déjà inscrits à la lettre d’information.

J’ai égale­ment testé certaines exten­sions répu­tées « légères » pour rempla­cer celles déjà en place : Monarch de la boutique Elegant Themes par exemple est vrai­ment au top pour ce qui est du partage sur les réseaux sociaux, bien plus légère que Social Warfare (la réfé­rence), surtout quand on n’a pas envie (ou besoin) de mettre en avant le nombre de partages pour chaque article.

Et puis il y a les exten­sions quasi-incontournables mais qui m’ont posé problème, comme Contact Form 7 (et je ne suis pas le seul à avoir eu des problèmes avec, a priori). Alors j’ai opté pour Gravity Forms, même si je n’en exploite pas (encore) tout le poten­tiel.

Et pour finir, il y a les exten­sions four­nies avec le thème, comme l’excellent Visual Composer que j’ai complété avec des add-ons : Massive Addons for Visual Composer, Ultimate Addons for Visual Composer et Ultimate Layouts Responsive Grid – Addon For Visual Composer pour la créa­tion de la page À propos de… et des archives par rubrique prin­ci­pa­le­ment.

En aparté, juste pour contre­dire ceux qui prétendent qu’il ne faut pas dépas­ser (n) exten­sions pour avoir un site perfor­mant, j’en utilise 53. Mais la 53ième fait toute la diffé­rence : il s’agit de Plugin Organizer 😉 La plupart sont surtout actives dans l’administration de WordPress, il y a donc rare­ment plus d’une dizaine d’extensions actives sur une même page.

Une fois le choix du thème et des exten­sions arrêté, il ne reste plus que…

La refonte

Et ce n’est pas une mince affaire.

Il y a déjà toutes les règles CSS que j’utilise quel que soit le thème et qui outre­passent les règles par défaut (l’icone après les liens externes par exemple). Reprise des règles exis­tantes, et ajus­te­ments – chaque thème ayant ses propres conte­neurs.

Il y a les réglages du thème. Pour les couleurs, pour les modèles (d’archives, d’articles, de pages…), pour la taille des blocs (j’ai réduit de moitié la hauteur du bloc d’en-tête, par exemple), pour la typo­gra­phie. Par bonheur, les options sont (rela­ti­ve­ment) limi­tées sur Blade. Il y en a assez pour une person­na­li­sa­tion avan­cée, sans que ce soit pour autant une usine à gaz.

Il y a la mise à jour de certaines pages – sur ce blog ce sont les pages À propos de…Contact et Prestations qui ont subi une refonte complète, en plus de la page d’accueil.

Et comme la mise en page des archives par rubrique ne me conve­nait pas vrai­ment, j’ai tenté une mise en page person­na­li­sée, avec Visual Composer et Ultimate Layouts Responsive Grid – Addon For Visual Composer. Avec un modèle d’en-tête que j’ai d’ailleurs réuti­lisé pour chaque page créée.

Une fois tout géré, tout testé, sur écran 22″ (avec Chrome, Firefox, Edge, Opera), sur portable, sur tablette, sur termi­nal mobile (android) – je dis tout, mais c’est un bien grand mot, parce qu’on oublie toujours quelque point pour­tant essen­tiel voire critique… c’est le moment crucial où l’on procède à…

La mise en ligne

Ce n’est pas sans appré­hen­sion que j’ai mis en ligne la version 3 du blog. Tout semble fonc­tion­ner correc­te­ment sous Chrome, je teste sur Firefox et Opera. Et là, catas­trophe ! Mon site ne s’affiche pas, c’est un fichier binaire qui est télé­chargé.

A priori un mauvais réglage du serveur NGINX dans la section dédiée à la gestion du cache WP Rocket. Je ne fais pas dans la dentelle (en fait je ne sais pas faire dans la dentelle) – je désac­tive WP Rocket, supprime le code incri­miné, et remets en service WP Super Cache couplé à Fast Velocity Minify et à CDN Enabler. Bon, ça fait trois exten­sions au lieu d’une, mais au moins, tout fonc­tionne correc­te­ment. Et pour­tant, la même confi­gu­ra­tion, sur le même VPS, ne posait pas problème pour la version de déve­lop­pe­ment. Comme quoi…

Et voila, la v3 est en place, à voir si elle a autant de succès que la v2 (plus j’espère), il reste quelques derniers réglages à effec­tuer, mais le plus gros est fait.

Et vu que j’ai abordé le sujet, je m’en vais de ce pas vous prépa­rer un petit article pour mener à bien la refonte de votre blog 🙂

Et vous, que pensez-vous de cette refonte du blog ?

Certains liens de cet article sont des liens affi­liés, c’est à dire que si vous ache­tez un thème en les suivant, je touche­rai éven­tuel­le­ment une petite commis­sion, mais vous, vous ne paye­rez pas un centime de plus.

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

Laisser une réponse

La modération des commentaires est activée. Votre commentaire peut prendre un certain temps avant d'apparaître.

    Partager…

    Rapport de faute d’orthographe

    Le texte suivant sera envoyé à nos rédacteurs :