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

Mettre en ligne un site WordPress local

Lecture : 7 minutes • 38

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 fiable.

Par 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.

Par 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

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 !

38

Questions, réponses et commentaires

  1. Serge-Jérôme

    Le 10 février 2021

    Bonjour et merci beaucoup pour ces explications. Je vais mettre votre article en favoris pour pouvoir le suivre tranquillement.

  2. onguene

    Le 15 mars 2021

    Bonjour j’ai suivie et respecter toutes les étapes de votre tuto mais quand j’ouvre le site on me demande d’installer wordpress
    Pouvez m’aider

    1. Maxime BJ

      Le 23 mars 2021

      Je pense qu’une étape n’a pas été faite correctement. Les fichiers semblent bien transférés, maintenant je pense que c’est un souci soit au niveau de la base de données, soit au niveau du réglage du fichier de configuration. Tu peux tenter l’extension All in One WP Migration qui fera tout tout seul en cas.

  3. cd2969

    Le 3 juin 2021

    Merci pour ces explications claires et précises, qui m’ont permis d’afficher mon site wordpress correctement avec ovh!!!

  4. pp

    Le 30 juin 2021

    Comment pourrais actualiser/mettre à jour mon site local après avoir fais la mise en ligne ?

    1. Maxime BJ

      Le 30 juin 2021

      Normalement, une fois ton site en ligne, tu continueras désormais à travailler en ligne directement. Si plus tard tu as besoin de travailler sur une nouvelle fonctionnalité à l’abri des visiteurs, tu pourras migrer ton site en ligne vers le local avec la même méthode, ou alors en utilisant une extension comme WP Migrate DB Pro.

  5. Nathalie

    Le 16 juillet 2021

    Bonjour, merci pour vos tutoriels très intéressant.

    Je dois mettre un site en local sur un serveur 1&1, le site est trop gros pour utiliser AIO Migration.

    J’ai donc fait votre tutoriel manuel, mais j’ai cette erreur sur l’accueil :

    Warning: Cannot modify header information – headers already sent by (output started at …/wp-content/themes/Divi-Community/functions.php:1) in …/wp-content/plugins/coming-soon/app/render-csp-mm.php on line 279

    et sur l’admin une page blanche avec :

    Warning: Cannot modify header information – headers already sent by (output started at /wp-content/themes/Divi-Community/functions.php:1) in /wp-includes/pluggable.php on line 1329

    Warning: Cannot modify header information – headers already sent by (output started at /wp-content/themes/Divi-Community/functions.php:1) in /wp-includes/pluggable.php on line 1332

    J’ai refait le tutoriel à la lettre 2 fois.

    Une idée ?

    Merci beaucoup

    1. Maxime BJ

      Le 16 juillet 2021

      Le message d’erreur semble indiquer que c’est ton thème qui pose problème (themes/Divi-Community). Je te recommande de le retirer (et utiliser Divi tout court à la place ?) ou contacter l’auteur du thème pour lui faire part du problème.

  6. Pablo Maupoint

    Le 2 août 2021

    Bonjour, j’ai effectué toutes les étapes de votre tutoriel, mais lorsque je veux aller sur mon site en ligne, j’ai une « erreur 404 – page lost » qui s’affiche, d’où vient mon erreur ?

    1. Maxime BJ

      Le 2 août 2021

      Est-ce que tu as bien suivi toutes les étapes à la lettre ? Tu arrives à accéder à l’interface d’administration tout de même ?

  7. Sébastien

    Le 30 août 2021

    Bonjour,
    Je crée un site web pour remplacer un site déjà existant et je voudrait le mettre en ligne. Mon problème est qu’il faut payer wp business pour utiliser les extensions sur la version en ligne de wordpress, et je n’ai pas le budget pour. Il n’y a besoin de l’extension que pendant une dizaine de minutes alors comment puis-je faire pour passer mon site en local sur wp en ligne sans avoir à payer l’abonnement de 300€ ?
    Merci beaucoup si vous pouvez m’aiguiller.

    1. Maxime BJ

      Le 30 août 2021

      Il faut que tu héberges le site sur un hébergement indépendant, pas sur wordpress.com. Tu peux aller chez o2switch par exemple, Kinsta, Flywheel ou encore infomaniak… Mais tu seras forcément très limité sur wp.com

  8. Jenn

    Le 2 septembre 2021

    Merci beaucoup pour ce tuto très clair. J’ai d’abord tenter de le faire avec All in One Migration mais j’avais un soucis de limite de téléversement. je l’ai donc fait en manuel et ça a fonctionné. J’ai juste un soucis sur l’affichage du site sur le mobile mais je ne pense pas que ce soit lié à la migration. Qu’en pensez-vous?

    1. Maxime BJ

      Le 2 septembre 2021

      Je ne pense pas, si ton site marche parfaitement sur ordinateur après la migration il devrait également fonctionner sur mobile. Essaie de vider les caches au cas où !

  9. Razak

    Le 13 septembre 2021

    Moi je juste savoir comment trouver des hébergeurs gratuit car ce cette partie j’arrive pas à saisir sinon j’ai compris tout votre explication…
    Merci pour l’explication

    1. Maxime BJ

      Le 13 septembre 2021

      Les hébergeurs sont forcément payants ! Un site coûte en stockage, en électricité, en machines, en données… Ça ne peut pas être gratuit.

  10. Manon Csnv

    Le 8 octobre 2021

    Bonjour,

    Je vous remercie pour ces explications.
    Je pense avoir fait toutes les étapes comme il faut mais mon site n’est toujours pas accessible 🙁 Je ne comprends pas à quel endroit j’ai raté, même après avoir relu chacune des étapes…

    1. Maxime BJ

      Le 8 octobre 2021

      Salut Manon. Est-ce que tu as une erreur, une page blanche, est-ce que le site redirige vers local ? Les symptômes sont différents selon l’étape où il manque quelque chose. Sinon tu peux tenter une migration automatique à l’aide de l’extension All In One WP Migration.

  11. Maggy

    Le 4 novembre 2021

    Bonjour,

    Est-ce que la méthode s’applique de la même façon si je veux migrer mon site dans un sous repertoire de mon site et pas à la racine directement ?
    Dans ce cas lors du changement d’url dans wp-options, ce serait alors plutôt : https://mondomaine.com/monsite plutot que http://monsite.local

    1. Maxime BJ

      Le 4 novembre 2021

      Oui tout à fait, tu peux faire comme ça et c’est la bonne méthode à appliquer !

  12. Hakim

    Le 29 novembre 2021

    Bonjour,

    Merci pour ces explications très claires !

    Est-il possible de faire l’inverse ?
    J’ai un site web déja en ligne, et je souhaiterai me connecter avec en local ?

    Si oui, as-tu un tuto ?

    1. Maxime BJ

      Le 29 novembre 2021

      Ça va être exactement la même procédure, sauf qu’il faut préalablement créer un site vide en local dont les fichiers seront remplacés pendant les manipulations !

  13. John

    Le 14 décembre 2021

    Vraiment top toutes ces explications, j’appréhendais un peu la partie bdd mais finalement ça se fait en deux-deux via phpmyadmin.. merci beaucoup ! 🙂

  14. julien

    Le 23 janvier 2022

    Bonjour,
    Merci pour ce super tuto. Tout fonctionne au niveau du déploiement, par contre, il ne prend pas en compte mon théme enfant. Une idée?

    1. Maxime BJ

      Le 24 janvier 2022

      Normalement, il devrait ! Vérifie qu’il est bien listé dans Apparence > Thèmes et qu’il est bien activé ! Vérifie également qu’il y a bien le thème parent dans cette liste.

  15. Karine

    Le 13 avril 2022

    Bonjour
    Pourriez-vous me dire si en migrant un site Wamp local pour un site en ligne, il est possible de modifier totalement l’URL ou seul le S de http;// et le fait d’enlever local sont les seuls éléments qui peuvent être modifiés sur l’URL ?
    Merci

    1. Maxime BJ

      Le 15 avril 2022

      Je ne suis pas sûr de comprendre ta question mais il faut en tous cas que l’URL reflète exactement celle attendue à la destination afin que le site fonctionne.

  16. sarahmsd

    Le 13 mai 2022

    Helloooo, merci énormément pour ce article précis et concis. C’est la première fois que je déploie un site wp en ligne et grâce à se tuto tout s’est passé très bien.

  17. Patricia

    Le 30 mai 2022

    Bonjour,

    Merci pour l’explication mais j’ai des questions. Si je voudrais transférer un site que j’ai conçu en localhost vers un site qui existe déjà en ligne en guise de refonte, est-ce que je pourrai le faire avec wp all in one ? Et quel pourrait êtres les inconvénients sinon. Merci

    1. Maxime BJ

      Le 1 juin 2022

      Si l’ancien site est déjà un WordPress, tu vas pouvoir installer l’extension. Lors de l’import du fichier du nouveau site, l’extension va s’occuper de tout remplacer automatiquement. Mais si l’ancien site n’est pas un WordPress, tu vas devoir le supprimer préalablement (fichiers + éventuelle base de données).

  18. Valérie

    Le 3 juillet 2022

    Bonjour! Enfin des explications claires et faciles à comprendre. J’ai bien suivi toutes les étapes cependant, lorsque je tente d’accéder à mon site en ligne j’ai une erreur 403. Qu’est-ce que j’ai manqué?
    Merci

    1. Maxime BJ

      Le 3 juillet 2022

      L’erreur 403 indique un problème de droits en général. La migration ne devrait pas causer cela. Essaie peut-être de supprimer le fichier .htaccess afin qu’il soit recrée. Vérifie les droits sur le dossier principal de l’hébergement. Tu trouveras plus d’informations ici : https://kinsta.com/fr/blog/erreur-403-forbidden/

  19. Kablan

    Le 26 août 2022

    Bonjour Capitaine WordPress,
    je tiens vraiment à vous dire merci pour vos partage de connaissance et de cours. Celui ci m’a été vraiment utile particulièrement le déploiement manuel d’un site wordpress.

    1. Maxime BJ

      Le 26 août 2022

      Je te remercie !

  20. Alexia

    Le 2 septembre 2022

    Merci beaucoup pour toutes vos explications très claires ! C’est la meilleure ressource que l’on peut trouver sur internet. J’ai réussi à effectuer la migration facilement.

    1. Maxime BJ

      Le 3 septembre 2022

      Merci beaucoup ! Ravi d’avoir pu aider au travers de mes cours et tutoriels !

  21. Account Manager

    Le 14 septembre 2022

    Bonjour, est-ce que les dernières mis à jour WordPresse permettent de développer le site sur le local avant sa livraison?

    Merci.

    1. Maxime BJ

      Le 14 septembre 2022

      ça a toujours été le cas ! En fait ce n’est pas dépendant de WordPress. Pour fonctionner il a besoin d’un serveur web avec PHP et MySQL. Et il est impossible d’en installer un sur sa machine, soit avec des logiciels spécialisés WordPress comme LocalWP ou DevKinsta, ou avant avec Mamp/Wamp.

Laisser un commentaire