Un nouveau look pour WPFormation

La nouvelle année 2015 est proche, le temps des bonnes résolutions aussi... Après 2 ans et demi de bons et loyaux services, j'ai remisé au placard mon vieux thème WordPress Sahifa pour un tout nouveau look sur WP Formation.

Avant / Après

D'un simple coup d’œil, les principaux changements de la page d'accueil.

AVANT-APRES-WPF

Pourquoi changer ?

Sahifa commençait à se faire vieux (actuellement en version 4.3.2), visuellement notamment ! C'est un très bon thème mais il est bourré d'options que je n'utilisais pas (BuddyPress, BBpress, WooCommerce). La gestion des images était quelque peu limitée et il convenait d'avantage à un pur magazine.

Une des choses qui me dérangeait également c'était la largeur utile proposée par Sahifa pour les posts: 618px hors sidebar. C'est trop peu pour moi ! J'aime lire sur le web et pour un vrai confort de lecture je suis un adepte des fonts confortables;)

J'avais également trop bidouillé ce thème et modifié des templates sans avoir pris la précaution de tout noter, ni d'utiliser un thème enfant (oui, je sais c'est pas bien;).

Ce qu'il a fallu faire pour changer !

La première des choses a été de sauvegarder mon WordPress, j'ai ensuite placé cette copie sur un espace clone et j'ai commencé à tester le nouveau thème. Une fois les tests concluants (compatibilité, CSS, SEO), j'ai suivi les recommandations de l'article 13 choses à faire avant de changer son thème.

Tous les plugins étaient compatibles avec mon nouveau thème mais certains faisaient redondance, j'ai donc procédé à un allègement salutaire d'extensions.

Ne pas oublier de nettoyer les shortcodes du thème précédent... Et c'est là qu'on se dit qu'il vaut mieux utiliser un plugin pour ces derniers plutôt que ceux du thème. Pour gagner du temps, j'ai utilisé le plugin Search & Replace qui, comme son nom l'indique, permet de rechercher et de remplacer tout et n'importe où!

Il a également fallu régénérer les thumbnails (vignettes) des images car ces dernières sortaient pixelisées sur le nouveau thème. Pour ce faire, un petit coup de Regenerate Thumbnails et hop des images à la bonne taille.

Je change donc j'en profite...

Sur l'ancien thème, j'utilisais quelques tags comme pages de silo (en savoir + sur les silos WordPress) mais je voulais repasser en catégories depuis quelques temps, l'occasion du changement m'étant donné, quelques redirections et le tour est joué!

Le menu principal a également été retravaillé et fortement réduit. Pour plus de simplicité, j'ai réduit les items du menu principal à 4 tout en gardant les top et bottom menus.

Cette fois ci plus de risques inutiles, thème enfant et mu-plugins sont de la partie !

Le logo a été légèrement relifté mais nécessite encore le travail d'un vrai graphiste (à bon entendeur;)

Qu'apporte le changement ?

A mon sens, plus de place au contenu et aux articles et les images sont d'avantage mises en valeur. La largeur utile des posts passe de 618 à 760px, j'ai donc augmenté la taille de la police et celle des titres (fini les majuscules).

J'ai principalement essayé de mettre l'accent sur l'expérience utilisateur, le choix et la disposition des menus/barres latérales vont dans ce sens. J'ai bien sûr conservé le sticky menu et le retour en haut, apprécies par de nombreux lecteurs.

Le site a également été allégé en requêtes et en poids, de fait les temps de chargement sont nettement meilleurs...

pingdom-WPF

Sur les articles apparaissent désormais les metas suivants : le temps de lecture, l'auteur, le nombre de vues et la date de parution.

metas-WPF

A noter également en haut de chaque post le fil d'Ariane by SEO Yoast qui permet une navigation ergonomique et une meilleure indexation.

breadcrumb-WPF

Les articles en rapport sont bien plus adaptés car principalement liés à leur catégorie. Le système des commentaires est repassé en natif car il offre d'avantage de flexibilité et de souplesse. On peut également s'abonner directement à la newsletter en commentant.

Enfin une vraie page 404 avec laquelle j'ai commencé à m'amuser... Il reste encore un peu de travail pour changer le menu de cette page d'erreur mais j'ai déjà trouvé l'image d'illustration;)

Et maintenant ?

Et bien maintenant j'essuie les plâtres, je regarde les bugs de ci de là. On ne peut pas penser à tout, donc il doit bien rester quelques shortcodes orphelins auxquels je n'ai pas pensé, des mises en forme disproportionnées sur certains articles/pages...

Mais le plus important c'est vous ! Qu'en pensez-vous ?
Est-ce que ce nouveau design vous plaît ou préfériez-vous celui d'avant ?

N'hésitez pas à me faire part dans les commentaires de vos retours, de vos avis éclairés, des bugs constatés... En attendant, je vous souhaite de joyeuses fêtes et une très belle année à venir :)

A propos de l'auteur...

WPFormation

Fabrice Ducarme, formateur WordPress je suis éditeur, auteur et fondateur du site WP Formation.com. Conférencier lors des WordCamp Paris 2013 & 2015 ainsi qu'au WP Tech Nantes 2014, je vous propose plus de 400 articles & tutoriaux à propos de WordPress, mes trucs & astuces mais aussi des coups de gueule...

42 commentaires pertinents à ce jour ;)

  • Lauren dit :
    Je suis fan, beau boulot !!!
    PS: quel est le thème utilisé?
  • WPFormation dit :
    Salut et merci !
    Il s’agit de Voice chez TF et non pas de The Voice chez TF1 :p
  • ma boite a peche dit :
    Bonjour,
    Pour moi qui suis un malade des thèmes,c’est un régale.Rapide ,ergonomique,c’est le thème qui fait envie.Un design superbe et sûrement un gros travail derrière tout ça.Je suis fan aussi.Bravo……
  • GraphikoPhil dit :
    Sympa cet article qui sert un peu de guide pour réussir à changer de thème sans (trop d’)encombres. En tout cas, bon choix que ce thème pour une migration (semble-t-il) maîtrisée de bout en bout. Et je vois que tu as déjà pris de l’avance en indiquant © 2015 dans le footer ;)
  • WPFormation dit :
    merci ;) C’est clair qu’on peut vite devenir accro aux thèmes… Le + dur reste encore de trouver le bon!

    migration en 6h00 top chrono mais avec un travail de préparation préalable… C’est vrai que j’ai anticipé de quelques jours pour 2015, je vais mettre l’année en automatique cela sera plus simple:)

  • Mathias dit :
    Bravo, j’adore ce thème, léger, simple et efficace.
  • Denis dit :
    Force Regenerate Thumbnails est un peu mieux pour les vignettes :)
  • franckwylliams dit :
    Chouette thème, les changements sont peut visible sur les articles mais sur l’accueil c’est un changement total… j’aime ;-)
    Amicalement, joyeuses fêtes
    PS : on pourrait gagner sur le poids des images et passez sur un proche 500ko, ta bannière te bouffe le plus de temps sur tes requêtes.
  • mathieu dit :
    Nickel, j’aimerais faire ça pour mon propre blog ! Mais je pense avoir un peu plus de boulot ;-)

    A+

  • Yannick dit :
    J’aime bien ce thème est sobre, simple (ce qui permet de bien mettre en avant le contenu) et surtout il est responsive (s’adapte aux mobiles), ce qui est de plus en plus important car le nombre de personnes qui utilise un smartphone ou une tablette pour naviguer sur le web est de plus en plus important.
  • WPFormation dit :
    merci !

    pas encore essayé, je suis habitué à Regenerate Thumbnails mais je testerais!

    , merci de ton retour! Oui, il reste encore un peu de taf et les images en font partie.

    , ravi que cela te plaise. Tu verras les 760px pour les posts et les images c’est sympa ;)

    , oui le mobile n’est plus à négliger, toutes mes stats vont dans ce sens là.

  • Julien dit :
    Joli redesign, ça fait du bien de plus voir sahifa dans le coin :) j’aime aussi le fait que t’ais moins de widgets on se focalise plus sur le contenu, qui est bon, t’as fait de l’optimisation ? J’ai l’impression que ça charge mieux.
  • WPFormation dit :
    Merci :)
    J’ai effectivement recentré le site sur le contenu et l’ergo (enfin j’espère). L’optimisation consiste principalement en la suppression du superflu… et quelques petits trucs;)
  • ghallo dit :
    J’apprécie, superbe travail,…..bravo
  • Amanda dit :
    Un gain de visibilité superbe ! j’aimerai avoir le courage de refondre mon blog aussi et surtout ne pas me planter dans le processus !
  • WPFormation dit :
    Merci , c’est gentil :)
    Une bonne sauvegarde, quelques prises de notes, une bonne To Do list pour ne rien oublier, un peu de temps et le tour est joué!
  • WPFormation dit :
    Merci :)
  • Gaston dit :
    Bonjour !

    Félicitation pour ce changement, je suis un adepte de WpFormation et c’est effectivement non seulement plus agréable de lire les articles mais aussi plus pratique de s’y retrouver !

    Petite question, quel est le nom du plugin de partage sur les réseaux sociaux sur la gauche ? Je le trouve super !

    Une année 2015 qui démarre bien, bonne continuation

    Merci !

    Gaston

  • WPFormation dit :
    Merci et bonne année 2015 également ;)

    Le plugin en question est Monarch de chez ElegantThemes, test et review à paraître sur WpFormation.

  • Gaston dit :
    Merci de l’info !
    Je vais attendre ton test & review dans ce cas :-)
  • akari dit :
    Bonjour , bravo pour votre site et bonne année 2015 avec plein de réussite ! Très joli thème.
    Quel plugin utilisez vous pour afficher les partages sur les réseaux sociaux sur la gauche du site ? Merci !
  • akari dit :
    Désolé , j’aurai dû lire les commentaires avant :/
    Bonne journée !
  • WPFormation dit :
    Aucun problème ;)
    Merci de vos encouragements !
  • Grégory dit :
    Bonjour,
    ce nouveau theme donne un vrai coup de jeune à WPFormation, c’est chouette :-)

    Juste un détail qui me chagrine, le bloc « Nos formations WP » sur la droite, il clignote quand on est en bas de page, juste au moment où l’on scroll vers le haut.

  • WPFormation dit :
    merci de ton retour !

    Afin que je débugge pourrais-tu me dire sous quel navigateur ? Merci ;)

  • Grégory dit :
    J’ai testé sur chrome 39, sur Mac OSX. Mais j’ai le même clignotement sur safari même si il me parait moins prononcé sur ce navigateur.

    Au fait, le plugin de pour mentionner une personne dans un commentaire, c’est très sympa!

  • Jérôme dit :
    Bonjour Fabrice !

    Je me joins aux autres venant féliciter ton travail. WP Formation est pour moi la référence en terme d’informations en français sur WordPress. Merci pour toutes ces informations partagées.

    J’aime beaucoup le nouveau thème Voice. Très bon choix. C’est lisible et épuré. As-tu hésité avec d’autres thèmes ?

    Jérôme

  • WPFormation dit :
    merci de ton commentaire, c’est gentil et ça fait plaisir :)

    Pour répondre à ta question, oui j’ai eu beaucoup de mal à choisir… Trop de choix, tue le choix ! Au final ce thème me convient et les retours sont plutôt bons. Quelques modifs, quelques retouches et j’arrive à peu près à ce que je voulais.

  • Karl dit :
    Très joli changement ! Ca donne envie de changer de thème.
  • Karl dit :
    : Grâce à toi, j’ai fait le grand saut, je suis en cours de changement de thème sur mon site. Après avoir fait le tour, j’ai également choisi Voice.
    Question concernant les réseaux sociaux : qu’utilises tu comme barre flottante de partage sur la gauche ? Idem concernant les liens sociaux dans le menu top : est-ce natif au thème ?
    Merci d’avance :)
  • WPFormation dit :
    bon choix ;)

    Pour ce qui est des réseaux sociaux (partages + liens), il s’agit du plugin Monarch

  • karl dit :
    merci pour ta réponse (rapide qui plus est !).
    Je regarde ce plugin. Merci.
  • Karl dit :
    Je viens de déployer ce thème sur mon site et il est affectivement formidable ! Les possiblités de customization sont énormes.
    Je bute par contre sur un seul point que j’ai soumis à leur support : le déploiement du nombre de vues en tête de chaque poste. J’ai peuplé dans la base (wp_postmeta) les valeurs des view (que j’avais par ailleurs sur mon ancien thème), mais j’ai l’impression qu’il y a un problème de séparateur de milliers. Si j’ai 31012 views il m’affiche à l’écran « 31 vues ».
    N’as tu pas eu de problème avec les vues ?
  • WPFormation dit :
    aucun problème de mon côté mais je n’ai pas modifié les vues, je suis entièrement reparti de zéro ;)
  • Christophe dit :
    J’ai une question d’ordre technique. Je risque d’être intéressé par l’achat de ce thème, mais une question me trotte !
    Sur mon blog actuel, j’ai environ 2000 articles rédigés, sans jamais avoir sélectionné d’image à la une dans chacun de mes articles. La raison est toute simple, mon thème actuel met automatiquement une image à la une sélectionné dans les photos uploadées dans l’article.
    Ce thème permet-il cela ou faut-il reprendre article par article pour sélectionner les images à mettre à la une. Si c’est le cas, c’est rédhibitoire pour moi.
    Merci pour le retour.
  • WPFormation dit :
    à l’instar des thèmes les plus récents, celui là le fait aussi!
    Je vous conseille de bien lire la doc et de tester la démo ;)
  • Christophe dit :
    super, merci pour ce retour, je sens bien que je vais me laisser tenter !
  • TheDancer dit :
    Hello Fabrice,

    tout d’abord bravo pour la migration, toujours une étape cruciale ;)

    Je me posais une question : il semble que tu n’aies pas gardé le plugin Hidemywp, peut on savoir pourquoi ? tu l’avais pourtant conseillé et installé il y a un an :

    https://wpformation.com/securiser-wordpress-hidemywp/

    Merci de ton retour car je m’apprete à acheter ce plugin

  • WPFormation dit :
    merci de ton retour, c’est sympa !

    Concernant HydeMyWp, l’article date d’il y a 2 ans maintenant. Entre temps le plugin a été sorti de la plateforme CodeCanyon puis il est revenu.. Pour certains utilisateurs, il a même causé des crashs et des erreurs !

    Je pense à terme que j’éditerais la review du plugin après l’avoir (re)testé à nouveau, mais de prime abord je pense que je serais moins tendre avec lui.

  • TheDancer dit :
    Ok, merci de ton retour, je vais le tester

    Au fait, il n’y a pas de lien vers un commentaire en particulier, si je veux partager un commentaire en particulier, ton theme ne le permet pas semble t-il

  • WPFormation dit :
    C’est voulu et bien meilleur en terme de SEO, cela évite de diluer le jus de l’article!
Tweet37
Share26
Share1
Buffer52