Installation de Xampp, Wampserver, WordPress et Elementor
Date de la dernière modification: 4 décembre 2020
Ayant terminé mes premiers pas avec Elementor sous WordPress (voir aussi Mes premiers pas avec mon site WordPress), il m’est venu à l’idée de reprendre l’installation d’un serveur Web sur mon PC. Mon fichier wampmanager.exe étant daté de septembre 2008, c’était aussi une opportunité pour moi de tout reprendre, depuis l’installation du server Web jusqu’à l’utilisation d’Elementor. Cette page a été concoctée avec Elementor.
Ce document pourra aussi être utile pour les débutants “zéro” avec des détails allant jusqu’au réglage SEO.
Le site de référence pour l’installation de Wampserver se trouve sur https://sourceforge.net/projects/wampserver/files/. Je ne l’ai ni utilisé, ni installé définitivement (juste un petit essai sur mon Laptop avant une désinstallation nécessaire).
J’avais le choix entre XAMPP et Wampserver64, et j’ai préféré utiliser XAMPP. J’avais eu autrefois quelques difficultés avec Wampserver64 sur mon laptop, j’ai un peu regardé quelques comparaisons sur le Web, et j’ai choisi XAMPP. J’ai fait l’installation sur un Laptop Windows et ensuite sur mon PC Windows. Pour vérifier l’installation j’ai évidemment repris mon document Restauration complète d’un site Web sur PC afin de reprendre un site Web Joomla, trois sites WordPress, les quatre utilisant une seule et même base de données mySQL.
Le fait que l’installeur de XAMPP indique qu’un anti-virus est installé et ralentir la chose, m’a fait comprendre que j’avais fait un bon choix. Avec Wampserver64 et un anti-virus actif on sera continuellement perturbé par des blocage durant l’installation
Installation de XAMPP
Le site de référence pour l’installation se trouve sur https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/ avec le fichier xampp-windows-x64-7.4.10-0-VC15-installer.exe.
Avant de débuter l’installation, j’ai conservé le répertoire WWW de mon ancien Wampserver, pour y récupérer éventuellement des informations, désinstallé wampserver avec unins000.exe, redémarré Windows en stoppant mon antivirus 360 Total Security pour l’installation qui va suivre.
Lors de l’installation on garde tous les modules recommandés et on choisit par exemple le répertoire d’installation D:\xampp. Comme il n’y a pas de version française, ce n’est pas grave du tout, on gardera l’english! La référence Bitnami est intéressante! Après l’installation, nous laisserons l’installateur lancé la fenêtre de contrôle:
Nous cliquerons sur les Start d’Apache et de mySQL pour lancer le server Web et sa base de données.
On n’oubliera pas de réactiver l’anti-virus.
J’ai déposé XAMMP Control dans ma barre d’outil inférieur de Windows car je l’utilise souvent et sans démarrage automatique.
Nous pourrons lancer l’administrateur 
pour examiner notre configuration.
On écrira une page toute simple test1.html avec Notepad++, idéal pour de l’HTML, dans le répertoire D:\xampp\htdocs\html comme par exemple celle de https://developer.mozilla.org/fr/docs/Apprendre/HTML/%C3%89crire_une_simple_page_HTML. L’accès se fera avec http://127.0.0.1/html/test1.html.
Dans mon cas j’ai installé mon serveur XAMPP en utilisant des sites extérieurs (FTP de mes hébergeurs) et base de données depuis phpAdmin de mon hébergeur. Dans mon cas le transfert FTP a pris 2 heures environs, pas seulement à cause de la grandeurs des sites, mais surtout à cause du nombre de fichiers!
J’utilise CoreFTP, il est facile et solide. On peut y définir des scripts de téléchargements, comme par exemple:
D:
cd D:\Program Files\CoreFTP
coreftp.exe -site New_FTP_OVH -d /www/javaraspberry -p I:\download
coreftp.exe -site New_FTP_OVH -d /www/images -p I:\download
pause
Le site New_FTP_OVH correspond à la configuration FTP que nous avons défini pour accéder à ce site via le GUI de CoreFTP.
Ici deux répertoires de mon site viendront télécharger sur le disque de mon PC dans le répertoire I:\download.
Le déroulement du téléchargement se fera comme si nous avions lancé l’application CoreFTP mais sans risque de transférer ou déplacer des fichiers à de mauvais endroits.
Attention de mettre les répertoires dans htdocs (sous wampserser) c’est www. Par exemple: D:\xampp\htdocs\wordpress pour mon site WordPress principal (Référence: https://www.boichat.ch/wordpress/).
Il y a plusieurs technique lorsque la base de données est trop grande: créé un fichier zip (l’import de XAMPP) de permet où faire de petits morceaux!
Je ne décrirai pas cette partie.
Voir: Restauration complète d’un site Web sur PC
Lorsque j’ai eu terminé: mon site Joomla était visible sur mon PC ainsi que mes sites WordPress.
Un nouveau site WordPress
L’article Introduction: Mes premiers pas avec WordPress Elementor donne aussi des informations sur la migration à WordPress. Ces dernières peuvent être complémentaires à ce qui est décrit ici.
Même si on a déjà un site WordPress, on aura peut-être envie d’en refaire un nouveau, simplement pour utiliser d’autres thèmes et extensions, ou simplement continuer ou reprendre son apprentissage sans tout casser son site précédent!
Nous trouverons le fichier d’installation sur https://wordpress.org/download/, wordpress-5.5.1.zip dans mon cas.
J’ai choisi le répertoire wptest, c’est à dire D:\xampp\htdocs\wptest pour moi, et décompressé les contenu du fichier zip (les fichiers wp_*.php et autres seront donc dans le répertoire wptest).
Avant de démarrer l’installation, il nous faut créer une base de données avec http://127.0.0.1/phpmyadmin/, l’administrateur de notre base de données locale mySQL. Nous donnerons le nom wptest à notre nouvelle base de données avec l’interclassement utf8_general_ci.
Pour l’installation nous utiliserons le lien http://127.0.0.1/wptest/ (notre server XAMPP doit être actif (Apache et mySQL)). Après la spécification de la langue française, nous recevrons l’invitation:
Nous recevrons une invitation pour Lancer l’installation, magnifique!
Nous donnerons ensuite un identifiant, par exemple WordPress test ainsi qu’un utilisateur et un mot de passe à conserver. Nous indiquerons notre adresse Email et cocherons Demander aux moteurs de recherche de ne pas indexer ce site.
Nous cliquerons ensuite sur le bouton pour démarrer l’installation.
A la fin de l’installation nous pourrons visionner la page principale du site: http://127.0.0.1/wptest/.
La “home” page de cette première installation est configurée sur l’article Bonjour tout le monde ! que
http://127.0.0.1/wptest/wp-admin/ …. avec l’utilisateur et le mot de passe spécifié lors de l’installation.
Sans autre configuration, et pour la version que j’ai installé il est possible de débuter avec le dernier thème standard installé: Twenty Twenty. Pour mes sites WordPress j’ai utilisé le thème Customify, comme décrit dans l’article WordPress avec le thème Customify. Nous retrouvons d’ailleurs ce thème dans la liste des thèmes conseillés et utilisable avec Elementor: 10 of the Best Free Elementor Themes in 2020.
La première extension essentiel pour débuter avec Elementor c’est son extension: Elementor Website Builder. Nous la téléchargerons avec le menu du tableau de bord de WordPress: Extension / Ajouter / Téléverser une extension et la rechercher avec “Rechercher des extensions …”. Nous l’installerons et l’activerons!
Afin de permettre le confort idéal pour l’édition des marges internes des sections d’Elementor, il faudra installer l’extension Style Kits for Elementor (par AnalogWP). En naviguant dans Réglage du site (les trois barres horizontales en haut à gauche (appelé Menu Hamburger!) lors de l’édition d’une page), nous pourrons alors choisir les espaces dans les sections avec Outer Section Padding.
Installation de Joomla
Nous ferons l’installation à partir de https://downloads.joomla.org/latest et nous unziperons le contenu dans D:\wamp64\www\joomla.
Une description de l’installation de Joomla se trouve sur https://docs.joomla.org/J3.x:Installing_Joomla/fr.
On fera l’installation avec http://127.0.0.1/joomla/installation/index.php.
Bien relire le paragraphe “Adapter la configuration pour Joomla” la page Restauration complète d’un site Web sur PC : pour un départ avec une installation sans données, il y a plusieurs possibilités, mais l’existence d’une base de données est nécessaire.