Mettre en place une copie de développement de WordPress

Disposer d’une copie de développement de votre site WordPress est un bon moyen de le mettre à jour, le développer et le modifier sans agir sur la version en ligne. Il existe de nombreuses façons de configurer une copie de développement de WordPress. Cet article explique le procédé pour faire une copie d’un site manuellement et via une extension.

Si vous cherchez à installer votre site de développement en local, lisez également Installer WordPress sur votre ordinateur.

Procédé

Pour mettre en place une copie de développement de votre site, vous devrez copier ce dernier puis le coller à un autre endroit. Cet autre endroit peut être un dossier sur le même serveur que votre site en ligne, ou sur un serveur différent.

Les éléments qui seront copiés sont les suivants :

  • les fichiers de l’installation (fichiers de WordPress, thèmes, extensions, médias, etc.) ;
  • la base de données.

Avant d’aller plus loin, vous devez décider où vous souhaitez placer votre copie de développement : un dossier (example.com/site-test) ou un sous-domaine (site-test.example.com).

Dans les deux cas, vous devrez créer un dossier sur votre serveur afin d’y déposer les fichiers de WordPress. Si vous utilisez un sous-domaine, vous devrez le créer dans le panneau d’administration de votre hébergeur, et le faire pointer sur le dossier qui accueillera votre copie de site.

Haut ↑

Avec une extension

Il existe plusieurs extensions qui vont permettront, via le tableau de bord de votre site en ligne, de mettre en place une copie de ce dernier.

Faites une recherche avec le mot clé « staging » dans le répertoire des extensions afin de trouver celle qui vous correspond.

Haut ↑

Manuellement

La mise en place manuelle d’une copie de votre site sera plus longue qu’en utilisant une extension, voici les étapes à réaliser dans l’ordre.

Haut ↑

Sauvegarder

La première étape consiste à faire une sauvegarde des fichiers et de la base de données de votre site en ligne, que nous utiliserons ensuite pour créer la copie de ce dernier.

Haut ↑

Téléverser les fichiers

Tout d’abord, vous devez créer le dossier dans lequel votre copie de développement résidera. Pour cela, vous pouvez utiliser un client FTP ou le gestionnaire de fichiers de votre hébergeur.

Une fois votre dossier créé, vous devez y téléverser les fichiers de la sauvegarde réalisée à l’étape précédente. À nouveau vous pouvez utiliser un client FTP ou le gestionnaire de fichiers de votre hébergeur.

Vérifiez bien que tous les dossiers et fichiers de l’installation de WordPress ont bien été transférés (wp-contentwp-includeswp-admin, ainsi que tous les fichiers situés à la racine).

Haut ↑

Créer la base de données

Vous devez maintenant créer une nouvelle base de données pour votre site de développement.

Lorsque votre base de données est créée, vous y importerez la sauvegarde de la base de données de votre site en ligne.

Une fois la base de données importée, vous devez modifier le fichier wp-config.php de votre copie de développement, afin d’y indiquer les informations de connexion à cette nouvelle base de données :

  • Nom de la base de données ;
  • Utilisateur de la base de données ;
  • Mot de passe de la base de données ;
  • Adresse de la base de données.

Haut ↑

Modifier l’adresse du site

Une fois la base de données importée, il reste une dernière étape à réaliser : modifier l’adresse du site, en effet l’adresse de votre copie de site ne sera pas la même que celle de votre site en ligne.

Pour cela vous devrez à nouveau modifier votre fichier wp-config.php pour y ajouter ces deux lignes, en indiquant l’adresse de votre site de développement :

define( 'WP_HOME', 'http://example.com/site-test');
define( 'WP_SITEURL', 'http://example.com/site-test');

À ce stade, vous devriez pouvoir consulter la page d’accueil de votre site de développement, ainsi que vous connecter au tableau de bord en utilisant les mêmes informations de compte que sur votre site en ligne.

En revanche, certaines URLs vous redirigeront toujours sur votre site en ligne, car elles existent dans la base de données. Vous pouvez utiliser une extension pour remplacer, dans la base de données de votre site de développement, les URLs de votre site en ligne par celles du site de développement.

HOOK : Réparer et optimiser la base de données WordPress

Le fichier “wp-admin/maint/repair.php” est un fichier WordPress de base utilisé pour la réparation et l’optimisation de la base de données. Par défaut, ce fichier est accessible à toute personne connaissant l’URL. Cependant, si vous souhaitez restreindre l’accès à ce fichier afin que seuls les administrateurs connectés puissent y accéder, vous pouvez ajouter du code supplémentaire à votre site WordPress.

Voici un exemple de la façon dont vous pouvez y parvenir :

Ouvrez le fichier functions.php de votre thème ou créez un plugin personnalisé.
Ajoutez le code suivant pour vérifier si l’utilisateur est connecté et a le rôle d’administrateur avant d’autoriser l’accès au fichier repair.php :

function restrict_wp_admin_maintenance() {
    if (strpos($_SERVER['REQUEST_URI'], '/wp-admin/maint/repair.php') !== false) {
        if ( ! current_user_can( 'administrator' ) ) {
            wp_die( 'You are not allowed to access this page.' );
        }
    }
}
add_action( 'admin_init', 'restrict_wp_admin_maintenance' );

Ce code vérifie si l’URL demandée contient ‘/wp-admin/maint/repair.php’. Si c’est le cas, il vérifie alors si l’utilisateur actuel a le rôle « administrateur » à l’aide de la current_user_can()fonction. Si l’utilisateur n’a pas le rôle d’administrateur, il verra un message d’erreur et ne pourra pas accéder au fichier repair.php.

N’oubliez pas d’enregistrer les modifications apportées à votre fichier ou plugin functions.php, puis de tester la fonctionnalité en accédant au fichier repair.php à la fois en tant qu’administrateur connecté et en tant qu’utilisateur non administrateur.

Faire une « photo » d’une page web entière avec Chrome

J’ai parfois envie de « photographier » une page web entière, pour la visualiser dans sa globalité. Mais ce n’est pas facile du tout à faire lorsque la page est très longue. Heureusement, Google Chrome dispose d’outils pour le faire (source : un article en anglais ).

Imaginons que je veuille faire une capture de l’ensemble de la page d’accueil du site Parcours-Performance. Je commence par aller sur ce site avec le navigateur Chrome.

Dans le site, j’accède aux outils de développement de chrome par un Clic droit et « inspecter » ou par la combinaison de touches CTRL+MAJ+I .

Taper CTRL+ MAJ +P, commencer à écrire screenshot dans la fenêtre qui s’ouvre, après le >. Puis choisir screenshot  Capture full size screenshot

captures pleines pages avec Chrome

Et j’obtiens ce qui suit :

Source : Anne-Laure DELPECH en Mar 2019