Dans cet article, vous allez découvrir comment travailler sur un site WordPress avec un environnement de développement.

Lors de la refonte d’un site WordPress, il est utile de pouvoir travailler sur une copie du site avec un environnement de développement similaire sans pour autant mettre le site en production en maintenance pendant ce temps. Pour faire cela, il est nécessaire de préparer un environnement de pré-production sur lequel sera dupliqué le site pour la refonte.

Il existe de nombreuses méthodes pour travailler avec WordPress. Dans le cadre d’un site réalisé avec un CMS, nous allons privilégier un environnement de développement côté serveur qui offrira l’avantage de travailler sur le même environnement que le site en production.

1. Création de l’environnement de pré-production

Création du site

La première étape est de créer le site sur lequel vous allez copier la version actuelle de votre site Internet. Il est donc nécessaire de créer un nouveau site (par exemple preprod.votre-site.com) avec un répertoire qui lui est propre sur votre hébergement Web. Pour faire cela chez Infomaniak, suivez simplement ce guide en prenant soin de créer un nouveau répertoire (par exemple /preprod) qui ne se trouve pas dans le dossier de votre site actuellement en production.

Création de la base de données

Après avoir créé le site qui accueillera la copie de votre site actuelle, il est nécessaire de préparer la base de données dans laquelle vous dupliquerez tout son contenu (pages, articles, commentaires, etc.). En cas de besoin, ce guide vous montre étape par étape comment créer une nouvelle base de données et un nouvel utilisateur pour votre environnement de développement.

Copie des fichiers et de la base de données

Une fois le site et la base de données de l’environnement de pré-production créés, il ne vous reste plus qu’à dupliquer les fichiers et le contenu de votre site dedans.

Pour copier les fichiers, nous vous recommandons d’utiliser notre FTP Manager ou de le faire en SSH pour aller plus vite. Pour la base de données, vous pouvez soit l’exporter et l’importer via notre Manager, soit encore une fois le faire en SSH si votre base de données est volumineuse (guide).

Adaptation du fichier de configuration de WordPress

La dernière étape est d’adapter les données suivantes du fichier wp-config.php du site en pré-production:

  • le nom de la base de données (DB_NAME)
  • l’utilisateur de la base de données (DB_USER)
  • le mot de passe de l’utilisateur de la base de données (DB_PASSWORD)

Si le site en production est en https, il sera également nécessaire d’activer un certificat SSL sur le site de pré-production (guide).

Enfin, nous vous conseillons de mettre en maintenance le site de pré-production afin d’éviter l’indexation de ce dernier par les moteurs de recherche. Pour faire cela, vous pouvez activer le mode maintenance d’Infomaniak.

2. Refonte du site sur l’environnement de pré-production

À présent que votre environnement de développement est prêt, vous pouvez librement travailler sur la refonte de votre site WordPress: installer un de nos 80 thèmes gratuits (Elegant Themes), tester des extensions, revoir en profondeur la structure du site, etc.

Si vous modifiez la structure de votre site et que les URLs de vos articles/pages changent, vous pouvez utiliser une extension gratuite comme Redirection pour créer automatiquement des redirections. Cela évitera à vos visiteurs de tomber sur des pages 404 le temps que les moteurs réindexent votre site ou si des sites externes font des liens sur votre site.

3. Mise en production du nouveau site

Lorsque vous avez terminé la refonte de votre site, tout ce que vous avez à faire est de modifier le répertoire cible du site en production vers le répertoire de l’environnement de production et de modifier les URLs du site de pré-production en fonction du nom de domaine du site en production grâce à une extension comme Velvet Blues Update URLs ou via phpMyAdmin.

Si vous utilisez une extension de cache comme WP-Rocket, W3 Total Cache ou encore WP Super Cache, il sera nécessaire de vider complètement tout le cache voire de désactiver puis réactiver le plugin.

Après les vérifications d’usage (images manquantes ? Liens erronés ? Etc.), il ne vous reste plus qu’à désactiver le mode maintenance de votre site et d’admirer le résultat 🙂

En résumé, voici les étapes à suivre pour mettre votre site en production:

  1. changer le répertoire cible du site votre-site.com vers /preprod
  2. utiliser le plugin Velvet Blues Update URLs pour remplacer les URLs dans les articles et pages de type preprod.votre-site.com vers votre-site.com
  3. vider voire également désactiver puis réactiver votre plugin de cache
  4. vérifier le bon fonctionnement de votre site
  5. désactiver la maintenance

4. Récupération des dernières modifications

Si vous avez continué à modifier votre site en production pendant la refonte de votre site, il sera nécessaire de récupérer vos modifications (articles, médias, pages, etc.).

****

Les hébergements et Serveurs Cloud d’Infomaniak sont optimisés pour WordPress et offrent de nombreux avantages pour ce CMS:

  • 80 thèmes gratuits (ElegantThemes, éditeur du célèbre thème Divi)
  • installation automatique de WordPress et du thème choisi
  • certificats SSL gratuits
  • bases de données MySQL illimitées
  • etc.

Découvrir l’hébergement WordPress d’Infomaniak