Ecrasement d’un site WordPress par un autre avec Divi, sur Infomaniak

J’explique ici la longue liste des actions à réaliser pour déplacer le contenu d’un site de tests (développement) vers le site de production. En écrivant celà, je conserve une trace de tout ce qu’il faut faire et vérifier avant de déclarer que le site a été modifié avec succès.

Ce tutoriel s’applique en totalité dans le cas suivant :

  • Votre ancien site utilise WordPress et est hébergé sur Infomaniak et n’utilise pas l’un des thèmes Premium mis gratuitement à disposition par Infomaniak ;
  • Votre nouveau site utilise WordPress et sera toujours hébergé sur Infomaniak et utilisera le thème Divi (ou sans doute un autre des thèmes Premium) ;

Si vous utilisez un thème que vous pouvez télécharger via votre tableau de bord WordPress, ou que vous pouvez installer en FTP, le changement sera un peu plus simple puisque vous n’aurez pas à gérer l’installation du thème par le serveur Infomaniak.

Le principe général

J’ai un site de développement, qui s’appelle test.exemple.com. Il est finalisé et je veux que ce soit le site qui sera disponible sur exemple.com. Exemple.com est mon site de « production », le site que les internautes voient. Je souhaite que le transfert génère le moins de perturbation possible.

Pour l’essentiel, c’est simple :

  • importer les tables de la base de données de test (corriger le prefixe dans wp-config si nécessaire) dans la base de données du site à transformer ;
  • Copier les fichiers contenus dans wp-content du site de test vers le site à transformer ;
  • Eventuellement désactiver toutes les extensions puis les réactiver.

La difficulté c’est que le thème employé (DIVI) et certaines extensions (elegant theme (monarch, divi builder et bloom) sont fournies gratuitement par Infomaniak et doivent être installées à partir de l’interface Infomaniak pour que l’on dispose automatiquement des mises à jour ensuite. Si on les installe en FTP, la mise à jour automatique ne fonctionne pas.

La phase 1 : Préparation

Check list récapitulative : Phase 1 Préparation

« Photos » de l’ancienne version du site
Exporter les réglages du thème Divi ou son thème enfant
Dans site test Désactiver le thème DIVI et toutes les extensions, ou au moins les extensions Elegant Theme (Divi builder, bloom et Monarch)
Dans site test, mettre en mode maintenance
Sauvegarder la base de données du site de test
Sauvegarder la base de données du site à modifier
Faire une copie de wp-config.php du site à modifier
Faire une copie de wp-config.php du site de test
Copier les fichiers de wp-content du site à modifier
Copier les fichiers de wp-content du site de test
Supprimer les répertoires Divi, divi builder, bloom et monarch de la copie du site de test

Garder des traces de l’ancien site

On peut faire des « photos » des pages intéressantes du site qui va disparaître (exemple.com). J’ai utilisé les captures d’écran des outils de développement Chrome (article en anglais ici) .

Exporter les réglages du thème Divi

Si le site à transformer utilise le thème Divi, ou un thème enfant de Divi, il vaut mieux en exporter tous les réglages également, pour avoir une copie en cas de problème. Tout est expliqué dans cet article : Importer et exporter des paramètres et modèles du thème Divi pour WordPress.

Désactiver les extensions et changer de thème sur le site de test

Dans le tableau de bord WordPress du site test, désactiver le thème Divi et les 3 extensions Elegant Theme (monarch, divi builder et bloom). En effet, c’est Infomaniak qui gérera l’installation et l’activation de ces thèmes et sites.

Mettre le site test en mode maintenance

On devrait mettre le site de test en mode maintenance, de manière à ce que ce mode soit immédiatement appliqué dans le site à transformer. Pour ce faire, on peut se lire cet article, How To Put WordPress Site Into Maintenance Mode, ou utiliser l’extension « Maintenance Mode« , de Lukas Juhas.

Exporter une copie des bases de données

Sur le compte Infomaniak, les bases de données peuvent être exportées dans le menu bases de données d’infomaniak.

Infomaniak : exporter une base de données

Pour les options, on choisit Gzippé, DROP Table et CREATE TABLE IF NOT EXIST

Infomaniak : exporter une base de données, réglage des options

On exporte la base de données du site de test et la base de données du site à modifier.

Copier les fichiers de wp-content et wp-config.php

Avec le FTP en ligne d’infomaniak (en tous cas pour ceux qui ont des connexions lentes et ne veulent pas rapatrier les fichiers dans leur ordinateur), faire une copie des fichiers et répertoires suivants vers un répertoire ald-utils/site-date/ que j’ai mis à la racine de l’hébergement :

  • wp-config.php
  • fichiers de wp-content/plugins
  • fichiers de wp-content/themes
  • fichiers de wp-content/uploads

A faire pour le site à transformer au cas où.

A faire pour le site de tests. Pour celui-ci-, dans le répertoire de destination de la copie (je l’ai appelé ald-utils/test-exemple-2017-10-10/, j’ai supprimé les fichiers du thème Divi et des extensions Divi Builder, Bloom et Monarch. Je les réinstallerai via l’interface Infomaniak.

Phase 2 : transformer le site !

A partir de maintenant, toutes les actions concernent exclusivement le site cible. 

Durant cette phase, le site de production entre en maintenance pour une durée de l’ordre de 10 à 15 minutes, plus si on veut faire les phases suivantes en maintenance aussi.

Check list récapitulative : Phase 2 transformation !

Mettre le site à transformer en maintenance
Copier les fichiers (sauf extension de maintenance)
Modifier si nécessaire le préfixe de base de données du site à transformer
Importer la base de données de test dans la base de données cible
changer les adresses des liens dans cible avec Search-Replace-DB-master
vérifier que tout fonctionne
Désactiver les extensions du site
Dans le tableau de bord Infomaniak, vérifier les réglages
Installer Divi et les extensions Elegant Theme souhaitées
Activer les extensions
Régler le thème enfant de Divi (ou le thème Divi)

Mettre le site à transformer en maintenance

mettre le site en maintenance, comme pour le site de test dans la phase de préparation.

Copier les nouveaux fichiers dans wp-content du site à transformer

copier les fichiers du site de test dans wp-content de la cible : répertoires plugins, themes et uploads. On supprime d’abord ceux qui sont présents (à l’exception de l’extension de maintenance) puis on fait la copie.

wp-config.php : Modifier si nécessaire le préfixe de base de données

Il faut que ce soit le préfixe de la nouvelle base que l’on va importer.

Importer la base de données de test dans la base de données cible

Importer la base de données de test dans la base de donnée de la cible.

changer les adresses des liens dans la cible avec Search-Replace-DB-master

On remplace https://test.exemple.com par https://exemple.com. Dans mon cas, 16 437 valeurs ont été changées !

On n’oublie pas de supprimer le répertoire dans lequel on a placé Search-Replace-DB-master.

vérifier que tout fonctionne

On vérifie pour :

  • le mode maintenance si on n’est pas connecté en tant qu’administrateur
  • le site si on est connecté en tant qu’administrateur
  • le tableau de bord WordPress si on est connecté en tant qu’administrateur

ATTENTION AU CACHE DE CHROME…

pour une raison que j’ignore chrome redirige la cible vers test mais pour autant firefox affiche correctement, et via « voir le site » d’infomaniak ça fonctionne aussi… Dans chrome il faut taper https://exemple.com/?donotcachepage pour que ça fonctionne sans rediriger… aussi https://exemple.com/wp-login.php?donotcachepage

Désactiver les extensions du site

Dans le tableau de bord WordPress, désactiver toutes les extensions, sauf celle de maintenance

Dans le tableau de bord Infomaniak, vérifier les réglages

  • vérifier les réglages de l’hébergement :
    • version PHP 7.1
    • max_execution_time à 300 secondes
    • memory_limit à 640 Mo
    • Compression des fichiers ON
    • Module Google PageSpeed ON

Installer Divi et les extensions Elegant Theme souhaitées

  • Dans « mon site WordPress » >> Paramètres, activer le thème DIVI (sans importer le contenu de démonstration du thème)
  • installer (sans activer) Monarch et Bloom

L’extension Divi Builder est installée automatiquement lorsqu’on installe le thème Divi.

Activer les extensions

Nota : il vaut mieux ne pas activer WP Super Cache à ce stade.

Nota : le site doit avoir l’extension « Customizer Export/Import » de Beaver builder si on utilise un thème enfant de Divi.

Régler le thème enfant de Divi (ou le thème Divi)

Activer le cas échéant le thème enfant de Divi.

Importer les réglages de thème du site test (ils ont été exportés dans la phase 1 de préparation).

  • fichier en .dat si thème enfant pour la personnalisation (via Export/import tout en bas du menu de personnalisation du thème enfant) ou fichier Json si thème Divi utilisé directement
  • fichiers Json pour les options et la bibliothèque Divi

A ce stade, le site se présente exactement comme le site test initial. Il est cependant toujours en mode maintenance. On peut le remettre en production si on le souhaite.

activer et vérifier le réglage de google analytics
saisir les redirections dans l’extension redirections
dans réglages / lecture : autoriser la lecture par les robots
réactiver yoast seo
Vérifier que les widgets se sont correctement transférés
Désactiver le mode maintenance
activer WP Super Cache

Autres vérifications ou ajustements

L’extension Yoast SEO affichait qu’il y avait un problème de chargement de la page d’accueil. J’ai suivi les instructions de cette page d’aide Yoast et vérifié le site avec le test de sites pour mobiles de Google qui confirmait le problème. Ensuite, la page d’aide Yoast recommandait de faire « fetch the current status » dans le tableau de bord WordPress (fenêtre Yoast). Maintenant ça fonctionne correctement mais je n’ai pas du tout compris le problème…

Il y a eu une mise à jour du thème Divi et du Divi Builder dans les heures qui ont suivi la mise en ligne de la nouvelle version du site. Elle a fonctionné correctement. Mon protocole est donc bien adapté.

Et maintenant ?

Nous disposons maintenant d’une check-list précise de ce qu’il faut réaliser pour faire un changement important dans un site. Si vous avez des conseils à partager, vos commentaires seront bienvenus.

Laisser un commentaire

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