Guide complet d’installation d’un serveur Web et de WordPress sur Localhost

Tout développeur WordPress devrait pouvoir développer sur un serveur Web local. C’est un moyen rapide et direct de voir votre code en action. Dans cet article, je vais passer en revue l’installation et la configuration d’une application de serveur Web sur votre ordinateur (à la fois Windows et MacOS), y compris comment résoudre les problèmes qui peuvent survenir.

Il existe de nombreuses solutions pour configurer un serveur Web local, par exemple en utilisant Docker, Vagrant ou une simple application de serveur Web. Le dernier est certainement le plus simple. Cet article passera en revue le processus de configuration de WampServer pour Windows et XAMPP pour MacOS. Accédez au système d’exploitation de votre ordinateur :

Installation de WampServer sous Windows

L’installation d’un serveur Web pour Windows est assez simple. Il s’agit principalement de suivre l’assistant de configuration, donc je n’entrerai pas dans les détails ici.

La première étape consiste à télécharger l’application du serveur Web. Cliquez sur le lien pour accéder à la page Web de WampServer et cliquez sur "Télécharger" dans le menu.

Vous avez le choix d’installer un 64bit ou un 32bit. La plupart des ordinateurs d’aujourd’hui prennent en charge 64 bits, donc j’opterais pour cela. En cliquant sur le bouton de téléchargement, un formulaire apparaîtra, mais vous pouvez simplement cliquer sur le lien en haut qui dit "vous pouvez le télécharger directement". Cela vous mènera au téléchargement proprement dit.

Une fois le fichier téléchargé, cliquez sur le fichier .exe pour démarrer l’installation. Suivez le processus de configuration. Gardez à l’esprit que l’emplacement dans lequel vous choisissez d’installer WampServer est l’endroit où vous devrez placer vos fichiers WordPress et tout autre projet de site Web que vous pourriez vouloir faire. S’il vous demande votre navigateur par défaut, sélectionnez le programme du navigateur (normalement situé dans un sous-dossier dans C:Program Files (x86)).

Lorsque l’installation est terminée et que WampServer est démarré, il apparaîtra dans la barre d’état système de Windows (le côté droit de la barre des tâches, près de l’horloge).

Lorsque l’icône est verte, WampServer exécute le serveur Web avec succès. Lorsqu’il est orange ou rouge, le serveur est hors ligne. Cliquez sur l’icône WampServer dans la barre d’état pour configurer et démarrer/redémarrer/arrêter les services.

Pour tester si le serveur Web fonctionne, ouvrez votre navigateur et accédez à http://localhost/. Vous devriez voir la page d’accueil de WampServer.

Si vous avez démarré le serveur Web avec succès, passez directement à « Installation de WordPress» ! Si quelque chose ne va pas, consultez la section intitulée "Problèmes possibles et correctifs pour WampServer" pour tenter de résoudre le problème.

Installer XAMPP sur MacOS X

Configurer un serveur Web et faire fonctionner correctement WordPress sur un MacOS est certainement un défi. Après l’avoir fait plusieurs fois, j’ai trouvé le processus avec le moins d’étapes et le meilleur résultat.

Allez sur le site Web de XAMPP et trouvez la grande zone de téléchargement verte. Cliquez sur "XAMPP pour OS X".

Suivez le guide d’installation et, lorsque vous y êtes invité, faites glisser l’icône vers le dossier Applications. Cliquez sur Ouvrir dans les boîtes de dialogue qui vous demandent si vous êtes sûr d’ouvrir l’application téléchargée sur Internet. Une fois la configuration terminée, démarrez l’application XAMPP à partir du lanceur.

Lorsque XAMPP démarre pour la première fois, vous devrez cliquer sur le bouton "Démarrer".

Au bout d’un moment l’indicateur devrait passer du rouge au vert et vous devriez voir apparaître votre IP. À ce stade, le serveur Web et le serveur de base de données sont opérationnels à l’adresse IP fournie. Mais nous voulons utiliser une belle URL localhost au lieu de l’IP. Cliquez sur l’onglet "Réseau" et sur la ligne "localhost:8080" cliquez sur le bouton Activer.

Une fois que cette ligne devient verte, ouvrez l’URL http://localhost:8080/ dans votre navigateur. Vous devriez voir la page d’accueil de XAMPP. Cela signifie que le serveur Web est opérationnel.

Pour accéder au dossier du projet Web dans lequel vous placerez WordPress et tout autre fichier de projet, vous devez accéder à l’onglet Volumes dans XAMPP. Cliquez sur le bouton "Monter".

XAMPP devrait maintenant exécuter le serveur Web et le serveur de base de données MySQL avec succès, prêt pour l’installation de WordPress. Suivez les étapes ci-dessous pour installer WordPress car plusieurs étapes supplémentaires sont nécessaires pour que XAMPP fonctionne correctement.

Installation de WordPress (WampServer et XAMPP)

Accédez à la page de téléchargement de WordPress et cliquez sur le bouton de téléchargement bleu. Il devrait vous donner un fichier zip qui, lors de l’extraction, créera un dossier "wordpress" avec tous les fichiers pour faire fonctionner WordPress.

Déplacez le fichier zip téléchargé dans le wwwdossier (pour WampServer) / htdocsdossier (pour XAMPP). Décompressez le fichier zip téléchargé. Une fois la décompression terminée, vous devriez avoir un sous-dossier "wordpress" dans le dossier de votre serveur Web. Cela signifie que WordPress sera accessible à partir de l’URL http://localhost/wordpress/ (pour WampServer) / http://localhost:8080/wordpress/ pour (XAMPP). Cependant, vous pouvez renommer le dossier si vous le souhaitez.

La prochaine étape consiste à créer une base de données pour WordPress. WampServer et XAMPP installent automatiquement phpMyAdmin pour que vous puissiez accéder aux bases de données. Pour WampServer : Cliquez sur l’icône WampServer dans la barre d’état système et cliquez sur "phpMyAdmin" ou allez jusqu’à l’URL http://localhost/phpmyadmin. Pour XAMPP : accédez à phpMyAdmin en accédant à l’url http://localhost:8080/phpmyadmin ou en cliquant sur l’élément de menu "phpMyAdmin" en haut à droite de la page d’accueil de XAMPP à l’ adresse http://localhost:8080. Connectez-vous avec le nom d’utilisateur ‘root’ et un mot de passe vide (les deux serveurs Web).

Dans la barre latérale à gauche, cliquez sur "Nouveau" pour créer une nouvelle base de données. Entrez la base de données souhaitée (par exemple "wordpress") et le classement de la base de données (utf8_general_ciest un bon choix).

Une fois la base de données créée, vous pouvez fermer phpMyAdmin. L’étape suivante consiste à configurer le fichier de configuration de WordPress.

Accédez à votre dossier WordPress. Faites une copie du fichier wp-config-sample.phpet renommez la copie en wp-config.php. Ouvrez wp-config.phpet modifiez les lignes suivantes (en supposant que le nom de votre base de données est ‘ wordpress‘);

• define( 'DB_NAME', 'wordpress' );
• define( 'DB_USER', 'root' );
• define( 'DB_PASSWORD', '' );

Laissez le reste tel quel, enregistrez et fermez le fichier.

Dans votre navigateur, accédez à http://localhost/wordpress/ (WampServer) / http://localhost:8080/wordpress/ (XAMPP) – ou à tout autre dossier dans lequel vous avez décompressé WordPress. Vous devriez être accueilli par l’écran de configuration de WordPress. Suivez les étapes pour configurer votre installation WordPress.

Pour les utilisateurs de Windows/WampServer, vous avez maintenant installé WordPress avec succès! Si vous rencontrez des problèmes, consultez la section « Problèmes possibles et correctifs pour WampServer ».

Pour les utilisateurs de MaxOS/XAMPP, il y a malheureusement quelques étapes supplémentaires pour que WordPress fonctionne correctement – veuillez passer à l’étape suivante.

Résoudre les problèmes d’exécution de WordPress sur XAMPP

L’installation de plugins/thèmes demande des informations FTP

Si vous essayez d’installer un plugin, vous pourriez obtenir cette boîte de dialogue demandant les informations d’identification FTP :

La solution que j’ai trouvée pour résoudre ce problème consiste à modifier votre wp-config.phpfichier. Juste après la WP_DEBUGdéfinition ajouter cette ligne

define( 'FS_METHOD', 'direct' );

Enregistrez et fermez le wp-config.phpfichier. WordPress ne demandera plus d’informations FTP, mais les plugins ne peuvent toujours pas être installés. Vous obtiendrez très probablement "L’installation a échoué. Impossible de créer le répertoire ». Cela se produit en raison d’une propriété et d’autorisations erronées sur les fichiers et les dossiers.

L’installation des plugins/thèmes échoue avec "Impossible de créer le répertoire"

Pour résoudre ce problème, ouvrez le Finder, cliquez avec le bouton droit sur votre htdocsdossier et cliquez sur "Obtenir des informations". En bas de la fenêtre, cliquez pour développer "Partage et autorisations". Cliquez sur l’icône du cadenas et entrez votre mot de passe administrateur pour accéder à la modification des paramètres. Sur "Tout le monde", définissez l’autorisation sur "Lire et écrire". Cliquez ensuite sur l’icône Cog et choisissez "Appliquer aux éléments inclus…". Cliquez sur OK dans la boîte de dialogue.

La dernière étape consiste à modifier les autorisations sur les fichiers et les dossiers à l’aide de chmod. Ouvrez le terminal (Commande + Barre d’espace, tapez "terminal" et cliquez sur Entrée). À l’invite, écrivez " cd" (y compris un espace après), puis faites glisser le dossier htdocs du Finder dans la fenêtre du terminal et cliquez sur Entrée. Sinon, vous devrez taper le chemin complet du dossier htdocs (voir la case grise ci-dessus). Une fois dans le dossier htdocs, tapez cette commande et cliquez sur Entrée :

sudo chmod -R 0777 *

Si votre mot de passe administrateur vous est demandé, saisissez-le et cliquez sur Entrée. L’invite doit rester un moment et s’actualiser soudainement vers une nouvelle invite lorsqu’elle est terminée.

Actualisez votre page d’administration WordPress et vous devriez maintenant pouvoir utiliser WordPress comme d’habitude !

Problèmes possibles et correctifs pour WampServer

L’icône WampServer dans la barre d’état système est orange et ne devient jamais verte

Essayez quand même http://localhost/ dans un navigateur. Si cela fonctionne, cela signifie probablement que WampServer est configuré avec plus de services que vous n’en avez besoin. Vous n’avez besoin que d’Apache (serveur Web) et de MySQL (base de données). J’ai constaté que WampServer par défaut tente également de démarrer MariaDB (un autre service de base de données). Mais parce qu’il ne peut pas démarrer MariaDB, l’icône reste orange – même si Apache et MySQL sont en cours d’exécution. Si tel est le cas, supprimez le service MariaDB.

Localhost ne fonctionne pas

Malheureusement, il peut y avoir plusieurs raisons à cela. Je commencerais par vérifier si les services Apache et MySQL fonctionnent. Cliquez sur l’icône WampServer dans la barre d’état > Apache > Administration des services. Si le "Service de démarrage/reprise" est vert et cliquable, cela signifie qu’Apache n’est pas en cours d’exécution.

Si Apache n’est pas en cours d’exécution, essayez de cliquer sur "Installer le service" dans ce même menu. Vous devriez obtenir une invite de commande indiquant qu’Apache a bien été configuré ou vous pouvez obtenir une invite expliquant pourquoi cela ne fonctionne pas.

Dans la plupart des cas, Apache ne peut pas démarrer car le port 80 est occupé par un autre programme. Vérifiez si Skype est installé. Google comment configurer Skype pour ne pas occuper le port 80 et réessayez WampServer.

Les jolis permaliens ne fonctionnent pas dans WordPress

Les (jolis) permaliens personnalisés dans WordPress nécessitent l’installation du module " rewrite_module" sur votre serveur Web. Cliquez sur l’icône WampServer dans la barre d’état système > Apache > Modules Apache – et dans la longue liste, recherchez et cliquez sur «rewrite_module». WampServer installera le module et redémarrera automatiquement le serveur Web Apache.

Ma taille de téléchargement maximale dans la médiathèque n’est que de 2 Mo

Par défaut, WampServer définit la taille maximale de téléchargement de fichiers à 2 Mo. C’est souvent trop petit pour télécharger des images plus grandes dans la médiathèque. Pour résoudre ce problème, nous devons modifier le php.inifichier d’Apache. Cliquez sur l’icône WampServer > PHP > php.ini. Il devrait ouvrir le fichier dans votre programme d’édition de texte par défaut.

Recherchez "upload_max_filesize" et augmentez la valeur M (Mb) en quelque chose comme ceci :

upload_max_filesize = 50M

Je recommande également de changer une dernière chose. Recherchez "post_max_size". Augmentez la valeur M (Mb) pour que la ligne ressemble à ceci :

post_max_size = 50M

Fermez le fichier et redémarrez Apache.