Refonte de mon portfolio : WordPress

Voici venue l'heure de vous parler de la refonte de mon site sous l'angle technique, après avoir abordé l'angle du branding et du design.

J'ai scindé ce billet technique en deux parties, sans quoi il vous aurait fallu trois semaines pour le lire en entier !… :smile:

Aujourd'hui, je vais donc vous raconter comment j'ai tordu WordPress pour faire aboutir la refonte de mon #PortfolioOfDoom.

Refonte de site sous WordPress : par où commmencer ?

J'ai développé mon site sous WordPress, mon CMS de prédilection. Je n'ai pas attendu que les maquettes graphiques soient terminées pour commencer le développement. En effet, j'ai dû vérifier que ce que j'avais en tête était réalisable techniquement, notamment au niveau des URLs générées par mes custom post types (« types de contenus personnalisés », que j'utilise notamment pour les projets listés dans mon portfolio).

Et puis, surtout, refondre un site existant apporte une difficulté supplémentaire par rapport à la création d'un site de zéro : il faut en récupérer et en adapter les contenus à la nouvelle mouture.

Ce n'était pas la seule difficulté imposée par cette refonte :

• Je changeais les URLs de mon site : suppression des www, et changement d'URL pour mon blog (je suis passée du sous-domaine http://blog.marieguillaumet.com, pas terrible pour le référencement, au « dossier » https://marieguillaumet.com/blog).
• J'avais jusqu'à présent toujours contribué les images de mon blog en 420 pixels de large maximum, ce qui allait me poser problème non seulement pour les images retina, mais aussi pour l'affichage général de mon blog, puisque le conteneur de mes billets autorise désormais que les images affichées fassent 640 pixels de large. N'oublions pas que, dans WordPress, quand on insère une image dans un billet de blog, WordPress écrit en dur le code HTML de cette image, ainsi que ses dimensions… ce qui révèlerait problématique pour mon nouveau thème.
• Je voulais désinstaller le WordPress multisite qui gérait jusqu'alors mon site et mon blog.

Bref, un paquet de particularités pour lesquelles je n'avais pas de tutoriel, et avec lesquelles j'ai dû pas mal tâtonner avant de sortir mon épingle du jeu.

WordPress en localhost

La grande nouveauté pour moi a été de développer cette refonte directement sur mon ordinateur.

Je le fais déjà systématiquement pour tous les nouveaux sites que je crée, mais jusqu'à cette refonte, je ne possédais pas de version de mon blog en local, pour la simple raison qu'en 2009, lorsque je l'ai mise en ligne, je n'utilisais pas encore de serveur local.

Aussi, développer la nouvelle version de mon site en localhost m'a permis de laisser en ligne la précédente version de mon blog en ligne jusqu'au tout dernier moment (la maintenance liée à la mise en prod de mon site a dû durer, allez, une heure à tout casser, et j'avais planifié cette mise en ligne pendant un créneau où mon site est peu fréquenté — aussi cela a limité la gêne pour mes lecteurs).

Installer WordPress sur son Mac

Pour installer WordPress sur un Mac, il faut tout d'abord disposer d'un serveur local. Je sais qu'il est facile de configurer ça quand on touche sa bille en ligne de commande ; comme ce n'est pas mon cas, j'ai installé le logiciel MAMP qui fait ça les doigts dans le nez. Pas besoin d'installer la version « Pro », la version simple et gratuite suffit !

Ainsi, une fois MAMP installé, on dispose d'un serveur PHP (qui va vous permettre d'afficher du PHP compilé dans votre navigateur) et d'une base de données MySQL — deux prérequis pour pouvoir utiliser WordPress.

Ensuite, il suffit d'installer les fichiers WordPress dans votre dossier de travail (moi, c'est mon dossier Sites, dans lequel j'ai créé un sous-dossier consacré à mon #PortfolioOfDoom), et d'accéder dans un navigateur à l'URL locale vers ce dossier.

De là, on installe WordPress normalement, en utilisant les identifiants par défaut de MAMP (accessibles depuis la page d'accueil de MAMP en local).

La seule différence avec une installation de WordPress en production, hébergée sur un serveur mutualisé OVH, c'est qu'il faut créer sa base de données à la main dans PhpMyAdmin, mais bon, ce n'est vraiment pas sorcier ! ;-)

Récupération de la base de données de prod vers la base de données locale

Lorsque WordPress est installé sur mon localhost, je n'ai plus qu'à récupérer une sauvegarde de ma base de données (aussi appelée « dump » en anglais) depuis la production, et de l'importer dans ma base de données locale.

Cela me permet de développer la nouvelle version de mon site, sans supprimer le site actuellement en prod tant que le nouveau site n'est pas prêt.

Attention : avant de faire ça, il y a une chose à faire pour que l'import se passe sans heurt.

Quand on installe un WordPress tout neuf, celui-ci contient par défaut un article, un commentaire et une catégorie par défaut. Ces trois éléments peuvent perturber l'import d'une base de données d'un WordPress existant.

C'est pourquoi je vous conseille, avant d'importer votre dump dans votre PhpMyAdmin local, de vider les tables suivantes dans votre base de données locale (il ne faut rien vider en production !) :

• wp_commentmeta
• wp_comments
• wp_links
• wp_postmeta
• wp_posts
• wp_terms
• wp_term_relationships
• wp_term_taxonomy

Ne videz pas les autres tables, sinon il vous faudra recommencer l'installation de WordPress de zéro !

L'outil d'export et d'import de WordPress

WordPress propose un outil d'export et d'import de base de données bien pratique.

L'outil d'export se situe dans Outils > Exporter. Cet outil vous permet d'exporter votre base de données selon certaines conditions (tout le contenu, seulement les posts, seulement certains custom post types, etc.). Je vous conseille donc d'utiliser cet outil sur votre site en production, et de sauvegarder précieusement le fichier XML généré sur votre ordinateur.

Ensuite, dans votre installation WordPress en local, il suffit d'importer ce fichier XML, et de veiller à bien cocher la case qui vous permet, en parallèle, de télécharger tous les médias distants que vous aviez uploadés dans votre WordPress en production.

On pourrait penser qu'il suffit de copier/coller le dossier wp-content/uploads depuis le serveur de prod vers le localhost pour récupérer les médias dans WordPress. Sauf que non : chaque média uploadé via WordPress est référencé dans WordPress grâce à la base de données.

Il faut ainsi non seulement les fichiers, mais aussi les entrées correspondantes dans votre base de données (ce que vous ne pouvez pas faire à la main, d'où l'utilité du fichier d'export XML).

Changer l'URL de son site WordPress local

Une fois l'import de base de données correctement effectué, il faut remplacer toutes les occurrences de votre URL de prod par l'URL de votre localhost.

NB : il ne faut pas utiliser http://localhost ou http://localhost:8888 (le port est ajouté par MAMP) quand on utilise WordPress en local, en effet cela pose plusieurs problèmes (par exemple, un WordPress multisite refusera de s'installer s'il détecte que c'est cette URL que vous utilisez).

Il vaut mieux utiliser votre IP locale fixe (sur Mac, j'utilise la petite extension IP Widget pour la connaître), par exemple http://192.168.1.1:8888.

Ainsi, j'ai cherché et remplacé toutes les occurrences de http://blog.url.com/ par http://192.168.1.1:8888/Sites/MonSite/blog.

Idem pour http://www.url.com que j'ai cherché et remplacé par http://192.168.1.1:8888/Sites/MonSite.

Il faut ensuite prendre le soin d'aller voir dans son tableau de bord local si tout est à sa place par rapport à la prod. Normalement, à ce stade-là, tout fonctionne et il ne vous reste plus qu'à développer votre nouveau site WordPress sur votre ordinateur.

Lorsque votre nouveau site sera fin prêt, il faudra faire l'inverse, c'est à dire transvaser vos contenus en local (fichiers FTP + base de données) vers votre serveur en production, sans oublier de remplacer toutes les occurrences de votre URL locale par l'URL de production dans la base de données en prod.

Edith : Lionel a créé un script de migration pour WordPress qui pourrait vous intéresser.

Edith 2 : Julien a publié un commentaire intéressant sur les autres points qui nécessitent votre vigilance pendant ce « transvasement ».

Mes plugins WordPress indispensables

J'utilise beaucoup de plugins sur mon site. Il faut dire que j'ai tordu WordPress pour qu'il fasse exactement ce que je voulais, et ce, même après avoir dégrossi et rationalisé mes besoins.

Voici quelques plugins triés sur le volet qui m'ont permis d'atteindre les objectifs que je m'étais fixés (j'indique « cocorico » lorsque les auteurs des plugins sont français : ça aide pour le support) :

• Advanced Custom Fields (ACF): ce plugin permet d'ajouter autant de champs que l'on veut sur n'importe quelle page d'édition de WordPress. C'est un outil formidable, que j'utilise systématiquement depuis que Samy me l'a fait découvrir.
• BJ Lazy Load : ce plugin ajoute la fonction de lazy loading sur mon site. Il est très facile d'utilisation.
• CodeStyling Localization : ce plugin permet de gérer très facilement la traduction d'un thème WordPress. (J'ai pour objectif de traduire tous les contenus de mon site, mais ce n'est pas demain la veille… Il faudrait, pourtant.)
• EWWW Image Optimizer : ce plugin permet de compresser les images lors de l'upload. Avant j'utilisais WP Smush It, mais il ne fonctionne plus depuis des mois.
• FD Footnotes : ce plugin permet de gérer élégamment les notes de bas de page. C'est une fonctionnalité dont j'ai toujours eu besoin, et ce plugin fonctionne merveilleusement bien¹.
• JM Last Twit Shortcode et JM Twitter Cards (cocorico) : deux supers plugins pour gérer l'interaction de votre site avec Twitter. Le premier permet d'afficher simplement votre dernier tweet (pleins d'options sont disponibles, notamment la possibilité de ne pas afficher les réponses et les retweets, et surtout, le tweet est affiché sans JavaScript !), et le second permet d'ajouter une Twitter card à chaque article. Je recommande !
• Login Security Solution : comme son nom l'indique, ce plugin ajoute une couche de sécurité à une installation WordPress — ce qui entre nous n'est pas du luxe ! Cela dit, ce plugin ne doit pas vous laisser penser que vous pouvez faire l'économie d'une sauvegarde régulière de vos fichiers FTP et de votre base de données, au cas où votre site se fait hacker. Ça n'arrive pas qu'aux autres.
• Regenerate Thumbnails : lorsque vous changez les dimensions par défaut de vos images dans WordPress (elles changent en général quand on opte pour un nouveau thème), ce plugin va vous regénérer toutes les nouvelles dimensions pour toutes vos images. Il suffit de cliquer sur le bouton et d'attendre que ça se passe (je vous conseille de faire ça en local, ça sera plus rapide, plutôt qu'en production). On peut aussi regénérer uniquement les dimensions d'une image précise si besoin.
  J'ai utilisé ce patch pour supprimer les fichiers aux anciennes dimensions dont je n'ai plus besoin. MAIS, attention, vu que WordPress écrit en dur dans vos articles le HTML des images, si vous appelez d'anciennes dimensions dont le fichier n'existe plus, vous allez vous retrouver avec de nombreuses erreurs 404. À manipuler avec précaution, donc !
• Search & Replace : ce plugin permet, depuis votre tableau de bord WordPress, de chercher et de remplacer n'importe quel terme dans votre base de données. Je m'en sers à chaque fois que je change d'URL. À utiliser avec précaution, car toute action est irréversible, et à désactiver voire à supprimer quand vous n'en avez pas l'usage.
• Simple Page Ordering : ce plugin permet de réorganiser, avec du drag and drop, l'ordre d'articles, de pages ou de custom posts dans le tableau de bord de WordPress. Je m'en sers pour maîtriser parfaitement l'ordre d'affichage des vignettes de mon portfolio.
• WordPress SEO by Yoast : simplement le meilleur plugin SEO pour WordPress. Ce plugin fait tout, même supprimer le mot « category » des URLs de vos catégories ! Je recommande.
• WP Retina 2x (cocorico) : après de nombreux et épuisants tests pour savoir comment gérer au mieux les images retina sur un site WordPress, mon choix s'est porté sur ce plugin. Il génère automatiquement les versions x2 de toute image (et de toute dimension) uploadée dans WordPress, et se charge ensuite de les afficher si besoin côté client. Une solution comme Adaptive Images ne correspondait pas à mon usage, car, contrairement à la majorité des sites responsive, le mien affiche parfois des images plus grandes en mobile que sur desktop ! NB : comme me le faisait remarquer Nicolas, ce plugin peut poser un problème lorsqu'on accède à mon site derrière un proxy.
• WP Rocket (cocorico) : un tout nouveau plugin de cache « tout en un », qui gère de façon transparente pour l'utilisateur le cache et permet d'augmenter de façon assez conséquente la rapidité de chargement. J'ai pu beta tester ce plugin, et bien que je n'en utilise pas toutes les fonctionnalités, il apporte un réel confort d'utilisation. Cependant, il est payant.

Pousser WordPress au niveau supérieur

Ce qui m'amuse le plus avec WordPress, c'est de le détourner de sa fonction initiale de moteur de blog, et de l'utiliser comme une pâte à modeler qui s'adapte à mes besoins, au cas par cas.

Cela dit, on ne peut qu'admirer la fréquence des mises à jour et d'ajout de nouvelles fonctionnalités dans le cœur de WordPress ; c'est aussi pour ça que je reste fidèle à ce CMS, il est souvent mis à jour et il y a une communauté hyper active derrière. On ne reste jamais bloqué bien longtemps !

Et, même quand on est habitué à utiliser l'outil, on découvre souvent des fonctionnalités au moment où on en a besoin.

Les commentaires imbriqués

J'ai adoré, par exemple, utiliser les commentaires imbriqués. C'est vraiment super comme idée, en plus on est libre de configurer le niveau d'imbrication souhaité, et grâce aux classes ajoutées par l'outil, il est simple de styler l'ensemble de façon conviviale !

Certes, les commentaires c'est très pénible à designer et à styler. N'empêche : pour un blog comme le mien qui n'a pas beaucoup de commentaires, je vois le design de cette partie très importante pour donner envie à mes lecteurs de laisser leur empreinte sur mes billets, et leur permettre de voir en un clin d'œil que je réponds quasiment à tout le monde.

Vu le nombre de blogueurs qui snobent leurs lecteurs et ne leur répondent jamais, voire qui désactivent carrément la fonctionnalité d'ajout de commentaire, je trouve que c'est très important de montrer que, chez moi, c'est différent.

Un shortcode pour gérer les images

Outre les custom post types, les custom taxonomies et la personnalisation de la contribution permise par le plugin ACF dont j'ai parlé plus haut, il y a un autre outil qui m'a permis de simplifier ma saisie d'articles dans WordPress : les shortcodes.

En particulier, j'ai créé un shortcode [image] (sur une suggestion de Geoffrey), qui est inséré à la place du code HTML qu'injecte normalement WordPress dans un champ de saisie, au moment où on envoie une image depuis la bibliothèque de médias vers le contenu d'un article.

Exemple de shortcode, qui permet de définir l'ID, l'alignement, la taille, la légende, le lien et la cible d'une image donnée :

[image id="6017" align="center" size="large" url="http://url.com/my/path/to/image.jpg" caption="false" link="true"]

C'est pratique car ça prend beaucoup moins de place, c'est simple à lire et à modifier, et surtout, tout le traitement de ce shortcode est géré côté thème, et non plus côté contribution !

Ainsi, lorsque je changerai de thème, libre à moi de décoder autrement ce shortcode, par exemple si je veux ajouter une classe, modifier une balise ou autre.

L'inconvénient, c'est qu'il faut modifier tous les billets contenant des images déjà publiés, et remplacer le code HTML appelant chaque image contribuée par le shortcode correspondant. :roll: Mais, comme les images que j'avais uploadées à l'époque dans ces billets n'excédaient pas 420 pixels de large, je devais de toute façon en ré-uploader la plupart. Donc… autant faire d'une pierre deux coups !

Je n'ai d'ailleurs pas encore terminé de « nettoyer » mes vieux billets, si jamais vous tombez sur un billet tout cassé, tout moche, n'hésitez pas à m'envoyer un petit message pour m'en informer ! :wink:

À suivre !

Pfiou ! Je vous avais bien dit que ces billets techniques seraient tartinesques ! J'ai bien fait de les scinder, je crois.

Le prochain billet technique concernera la refonte de mon site vue par le prisme du web design proportionnel et des media queries en EM. Je sais que certains d'entre vous l'attendent de pied ferme, ne perdez pas espoir, ça arrive !…

Merci de m'avoir lue jusqu'ici, n'hésitez pas à me poser vos questions dans les commentaires ! À bientôt ! 8-)