Formation « Développer un thème WordPress sur mesure »

Mettre en ligne un site WordPress local

Lecture : 7 minutes • 0

Vous êtes fier de votre site local ? Il va falloir maintenant le mettre en ligne ! Et pour cela il existe plusieurs solutions : la méthode simple via une extension, ou la méthode classique à la main, via FTP. On va voir les deux !

La mise en ligne d’un site est quelque chose qui peut faire peur, mais grâce à ce cours ce sera bientôt de l’histoire ancienne.

Si vous n’êtes pas développeur, je vous présente en tout premier lieu une méthode simple à l’aide d’une extension.

Mais si vous êtes développeur et que vous suivez toute la formation, j’ai pour vous une solution manuelle, « à l’ancienne ». Elle s’avère assez intéressante puisqu’elle permet de bien comprendre comment fonctionne WordPress et sa base un peu plus en profondeur.

La méthode simple via une extension

Pas envie de vous embêter ? Alors comme souvent avec WordPress, il y a une extension pour ça ! Celle que je vous recommande pour migrer votre site sans effort s’appelle :

All-in-One WP Migration

All-in-One WP Migration

Déplacez, transférez, copiez, migrez et sauvegardez un site en un seul clic. Rapide, facile et…

ServMask

Il existe également Duplicator, mais je sais d’expérience qu’il a la fâcheuse tendance à causer des soucis !

Ici on va procéder en 2 étapes : dans un premier temps on va exporter le site dans un fichier, puis on va ensuite créer un site neuf en ligne, qui servira de réceptacle pour importer notre fichier.

On commence par le site local :

  1. Installez l’extension et activez-la ;
  2. Allez dans le menu All-in-One WP Migration > Exporter ;
  3. Choisissez Exporter vers Fichier ;
  4. Téléchargez votre export en cliquant sur le bouton qui s’affiche à l’écran.
Capture d'écran de All-in-One WP Migration montrant l'interface d'export de site
Première étape : exporter le site

Le fichier téléchargé est une archive au format .wpress qui peut vite peser plusieurs centaines de Mega octets.

Maintenant, ça va se passer en ligne :

  1. Créez un nouveau site vierge en ligne (via Softaculous par exemple) ;
  2. Installez l’extension là aussi ;
  3. Allez dans All-in-One WP Migration > Importer
  4. Cliquez sur Importer depuis un fichier cette fois ;
  5. Sélectionnez le fichier sur votre ordinateur.
Capture d'écran de All-in-One WP Migration montrant l'interface d'import de site
Seconde étape : importer le site

L’import va donc remplacer votre site vide avec le contenu de votre site local.

À l’issue de la migration, les identifiants de connexion seront donc bien à nouveau les mêmes qu’en local ! En fait l’extension écrase toutes les données de votre site en ligne, qui a au final simplement servi à installer All-in-One pour procéder à la migration.

Conseil

All-in-One s’occupe automatiquement de changer vos URL .local par l’URL du site en ligne. Pratique !

Si ça ne fonctionne pas, et que l’import reste bloqué à 100% sans bouger, All-in-One fournit une solution de secours via une deuxième extension à installer. Celle-ci solutionne en général le problème la plupart du temps.

Si malgré tout ça ne marche pas, ou que votre serveur est trop limité par rapport à la taille de votre site, je vous invite à passer à la migration manuelle.

La méthode manuelle classique en 7 étapes

Cette méthode à l’ancienne et à l’huile de coude se montre plus complexe, plus longue, mais elle vous permettra de bien comprendre comment fonctionnent WordPress et la base de données sur un hébergement, c’est donc la méthode que je conseille aux développeurs de thèmes.

Bien entendu, il existe des méthodes de déploiement plus propres et plus modernes, en passant par git par exemple, que l’on abordera dans la formation industrialisation de sites.

Étape 1 : importer les fichiers via FTP

La première chose à faire va être de prendre tous les fichiers de votre site, et de les envoyer en ligne via votre logiciel FTP favori. Parmi les logiciels FTP vous avez Cyberduck, Filezilla ou encore Transmit sur Mac.

Mais vous pouvez également envisager de passer par le gestionnaire de fichier du cPanel si votre hébergement en dispose d’un. Il permet d’envoyer une archive zip et de la décompresser une fois reçue.

Si vous utilisez Local pour vos sites, vous trouverez l’emplacement des fichiers du site sous le titre :

Capture d'écran du logiciel Local. Entouré en rouge, le chemin du dossier.
L’emplacement des fichiers est indiqué sous le nom du site

Vous allez devoir envoyer les fichiers situés à la racine de votre site. On retrouve les 3 dossiers wp-admin, wp-content, wp-include ainsi qu’une quinzaine de fichiers :

Capture d'écran du système de fichiers, avec les fichiers WordPress à envoyer via FTP
Les fichiers à envoyer vers votre FTP

Dans Local ils se trouvent dans app/public/.

Connectez-vous ensuite avec votre logiciel FTP et rendez-vous dans le dossier racine de votre hébergement, qui s’appelle en général public_html sur o2switch ou www chez OVH.

Capture d'écran du logiciel FTP montrant le dossier racine de l'hébergement distant
Le dossier www dans votre client FTP

Faites glisser vos fichiers et le transfert commence. Selon votre débit Internet ça peut prendre un petit moment (parfois plus de 10 minutes), du coup profitez-en pour passer à l’étape suivante !

Étape 2 : Exporter la base de données

On va maintenant s’occuper de la base de données. On va commencer par exporter notre base locale. Sur Local justement, il faut aller dans l’onglet Database, puis choisir Open Adminer.

Capture d'écran de l'interface d'Adminer, pour exporter la base de données du site
Export de la base à partir d’Adminer
  • Cliquez ensuite sur Exporter à gauche ;
  • Sélectionnez gzip dans Sortie ;
  • Cliquez enfin sur Exporter.

Sur d’autres systèmes comme Mamp, vous aurez phpMyAdmin dont le fonctionnement est équivalent.

Étape 3 : Importer la base en ligne

Maintenant, ça va se passer en ligne ! Les hébergeurs proposent généralement phpMyAdmin comme interface de gestion de la base de données. Rendez-vous sur votre interface de gestion d’hébergement et sélectionnez phpMyAdmin.

Capture d'écran de phpMyAdmin pour importer la base en ligne
Import de la base en ligne à partir de phpMyAdmin

Sur o2switch, passez d’abord par l’outil Assistant de base de données MySQL si vous n’avez encore de base disponible. Créez une base avec un utilisateur du même nom rattaché, avec tous les droits. Chez OVH, elle est généralement déjà créée.

Une fois sur phpMyAdmin :

  • Choisissez la base à gauche ;
  • Cliquez ensuite sur l’onglet Importer ;
  • Sélectionnez votre fichier ;
  • Ne touchez à aucun autre réglage et validez.

Étape 4 : Changer l’URL du site

Une fois votre base importée, ne quittez pas tout de suite l’interface de phpMyAdmin, il nous reste une dernière étape qui consiste à changer l’URL du site.

Capture d'écran de phpMyAdmin dans la table wp_options
Changer les URL dans la table wp_options

Car en effet, c’est toujours l’URL locale qui est enregistrée en base. Du coup si on tente d’accéder maintenant à notre site, on sera redirigé sur l’URL local. Pour changer ça, c’est facile :

  • Cliquez sur votre base à gauche ;
  • Sélectionnez la table wp_options ;
  • Repérez les 2 premières entrées : siteurl et home ;
  • Modifiez les valeurs en double cliquant dessus.

Ces 2 URL ne finiront donc plus par .local mais par votre extension de domaine, par exemple .fr.

Vous pouvez d’ailleurs ajouter le S à https:// si ce n’est pas déjà le cas. Dans le prochain cours on va justement voir comment générer un certificat SSL.

Vous pouvez maintenant fermer phpMyAdmin car on n’en aura plus besoin.

Étape 5 : Modifier le fichier de configuration

De retour sur le FTP, on va maintenant aller modifier le fichier wp-config.php en ligne.

Le but va être d’indiquer au fichier de configuration de WordPress les identifiants de connexion à la base de données de votre hébergement en ligne.

Votre hébergeur vous les a fournis à la création de l’hébergement. Sur o2switch, si vous avez tout juste créé votre base à la main, vous devriez les avoir notés.

PHP
wp-config.php

En général l’utilisateur porte le même nom que la base donc DB_NAME et DB_USER devraient être identiques.

Avec o2switch l’hôte de la base est toujours localhost, mais sur OVH ce sera plutôt nombase.mysql.db.

Au passage, on va retirer la constante permettant d’activer le Debug mode dans WordPress, qu’on avait abordé au début de la formation. Pour cela il suffit de passer cette constante à False :

PHP
wp-config.php

Enregistrez le fichier modifié et renvoyez-le en ligne si nécessaire.

Information

Certains logiciels FTP ne permettent pas d’éditer le fichier directement en ligne. Dans ce cas téléchargez-le sur votre bureau pour le modifier et renvoyez-le ensuite.

Ne modifiez pas par contre le wp-config du site local, sinon vous allez casser la connexion à sa base de données.

Tentez maintenant d’accéder à votre site en ligne : à ce niveau là vous devriez voir la page d’accueil, mais également pouvoir vous connecter à l’interface d’administration.

Étape 6 : Remplacer les URL

Allez, une dernière étape et tout fonctionnera ! Le souci avec WordPress c’est qu’il enregistre les URL absolues dans les publications et réglages. Du coup, chaque image dans chaque publication porte une trace de votre ancienne URL locale.

On va devoir faire un chercher et remplacer sur tout le site pour mettre à jour les URL de la base.

Et pour cela on va installer cette extension :

Better Search Replace

Better Search Replace

Une extension simple pour mettre à jour les URL et tous les textes de votre base de données WordPress.

Delicious Brains

Une fois installée, allez dans Outils > Better Search Replace :

  • Indiquez l’URL locale à rechercher ;
  • Indiquez en dessous l’URL en ligne qui va la remplacer ;
  • Sélectionnez toutes les tables ;
  • Lancez le remplacement.
Capture d'écran du formulaire de Better Search Replace dans WordPress
L’interface de Better Search Replace

Vous pouvez même lancer un essai à blanc pour tester sans prendre de risque. Une fois que c’est fait, vous pouvez supprimer cette extension si vous le désirez.

Le saviez-vous ?

Si vous utilisez Elementor, passez plutôt par l’outil de remplacement intégré au constructeur de page, dans Elementor > Outils > Remplacer les URL.

Étape 7 : Réenregistrer les permaliens

Et pour finir, on va simplement enregistrer à nouveau la structure des permaliens, par précaution.

On va donc aller dans Réglages > Permaliens et simplement cliquer sur Enregistrer, afin de forcer WordPress a regénérer sa structure d’URL.

Attention

Si vous ne le faites pas vous risquez de vous retrouver avec des erreurs 404 sur certains liens.

Dépannage et vérifications

Et voilà ! C’est tout bon, votre site est en ligne ! Voici tout de même quelques vérifications à effectuer pour être sûr et certain que tout a fonctionné :

  • Vous avez une erreur ou une page blanche lorsque vous tentez d’accéder au site ? Peut-être que le transfert FTP n’a pas entièrement fonctionné. Retentez l’étape 1 ;
  • Vérifiez qu’en tapant l’URL de votre site, vous n’êtes pas redirigé vers le site local. Dans ce cas, vérifiez l’étape 4 ;
  • Si vous obtenez une erreur de connexion à la base de données, c’est que vous vous êtes trompé dans l’étape 5 ;
  • Coupez votre site local et vérifiez que tout marche bien sur votre site en ligne. Les images n’apparaissent plus ? C’est qu’elles pointaient encore vers votre site local ! Revoyez l’étape 6 !
  • Maintenant que votre site est en ligne, pensez à désactiver l’option Demander aux moteurs de recherche de ne pas indexer le site.
  • Pensez également à activer et configurer les extensions de sauvegardes, performances, sécurité…

Aparté: La vicieuse étape 6

Si vous ratez l’étape 6, une chose vicieuse va se produire : vous aurez l’impression que tout fonctionne car vous verrez bien les images s’afficher. Vous informez le client, et il vous dit qu’il ne voit aucune image ! Malédiction !

Ce qu’il se passe, c’est que le site en ligne appelle toujours les URL de vos images locales. Et comme votre site local tourne, votre navigateur réussira à joindre les URL.

Pensez donc bien à faire le test, ça ne coûte rien et ça vous évitera de tourner en rond sans comprendre pourquoi.


Vous savez maintenant mettre en ligne votre site, via 2 méthodes différentes. Il existe bien évidemment des méthodes de déploiement plus modernes via Git, mais on les abordera plus en détails dans la formation Industrialisation de sites.

Dans le prochain cours on va voir comment rapatrier en local un site en ligne, mais vous vous en doutez déjà, c’est la presque même procédure, dans le sens inverse !

0

Questions, réponses et commentaires

    Laisser un commentaire