Dans ce tuto, nous verrons comment installer et configurer votre site internet WordPress en seulement 60 minutes !
La vidéo ainsi que cet article vous montreront comment choisir un nom de domaine un hébergement se créer une boite e-mail pro puis comment installer configurer et personnaliser votre premier site wordpress !
Impatient ?
C’est parti !
Pour vous retrouver dans ce tuto complet voici le sommaire détaillé.
De quoi à-t-on besoin pour rendre public un site ?
Le nom de domaine
Le nom de domaine, c’est l’adresse que vous donnez à votre site internet sur Internet. C’est aussi le nom qui va apparaître dans la barre d’adresse de votre utilisateur. Sachez que ce nom de domaine se loue pour une durée minimum d’un an. il faudra veilliez à renouveler celui-ci.
L’hébergement
C’est le service le plus important en charge de faire tourner votre site internet.
Vous devez pouvoir compter sur un service disponible 24h/24h fiable rapide et avec un bon support technique en cas de pépin.
Ce service a bien sûr un prix et il faudra donc choisir avec soin un hébergement adapté à votre site.
Autre point important concernant l’hébergement :
On n’a pas les mêmes besoins selon que l’on ait un petit site avec quelques centaines de visiteur par jour VS un site e-commerce avec des centaines de milliers de visiteurs par heure. La capacité à s’adapter à vos besoins au fil du temps est aussi critère important dans le choix de votre hébergeur.
Pourquoi choisir Hostinger ?
Nous allons prendre Hostinger car il répond à l’ensemble des critères d’un bon hébergeur
- Un Support accessible en ligne facilement et multilingue.
- Un hébergement performant avec des extrêmement rapides
- La possibilité de faire évoluer son plan et notamment d’héberger plusieurs sites
- Une garantie de disponibilité de 99,9%
- Des sauvegardes quotidiennes ou hebdomadaires gratuites.
Mais d’autres fonctionnalités sont particulièrement intéressantes dans notre usage de WordPress par exemple :
- Une installation simplifiée de WordPress via un panneau de contrôle intuitif (hPannel)
- Un serveur optimisé pour WordPress
- Un nom de domaine gratuit pour tout abonnement premium
- Une garantie de remboursement de 30 jours.
- Des datacenter (Les lieux ou sont installés les serveurs) présents dans 10 pays dont la France.
De plus Hostinger qui est le partenaire de ce tuto offre une remise exclusive pour les lecteurs de WPmarket sur votre facture avec le code promo ci-dessous merci à eux !
WPMARKETPrêt(e) à créer votre premier site WordPRess ? Suivez le guide !
Comment choisir son nom de domaine ?
Vous avez plusieurs options de possible pour le choix de votre nom de domaine :
- Votre nom de marque (ex : WPmarket.fr)
- Votre nom prénom (ex : vincentmary.com)
- Un prénom descriptif (ex : outilsduformateur.com)
Chaque option à ces avantages et ces inconvénients dans l’idée choisiront la solution la plus simple la plus facile à écrire et mémoriser et bien sûr celle qui est disponible.
Configuration de Hostinger
Commander son hébergement
01. Cliquez sur ce lien puis sur le plan premium de votre choix
02. Choissisez la périodicité de votre plan
03. Cliquez sur « Vous avez un code promotionnel ? »
04. Tapez « WPMARKET » dans le code promotionnel pour bénéficier de 10% de réduction supplémentaire.
05. Cliquez sur « Appliquer »
06. Finaliser votre commande et décider de votre mot de passe pour l’accès a votre compte.
Lancer l’assistant de configuration de Hostinger
Passons à l’installation de WordPress qui sera automatique avec Hostinger.
01. Cliquez sur « Commencez maintenant »
02. Cliquez sur « Sauter »
03. Cliquez sur « Sélectionner » de l’onglet Créer un nouveau site web
04. Cliquez sur « Sélectionner » de WordPress
05. Choissisez un login (e-mail) et mot de passe pour votre futur site WordPress
06. Cliquez sur « Continuer »
07. Cliquez sur « Sauter, je n’ai pas besoin d’un modèle »
Comment choisir son nom de domaine ?
Il existe plusieurs stratégies pour choisir un nom de domaine
- Votre nom de marque (ex : wpmarket.fr)
- Votre nom prénom (ex : vincentmary.com)
- Votre activité (ex outilsduformateur.com)
Quelle stratégie choisir ?
Cela dépend de plusieurs critères à étudier soigneusement :
- Y a-t-il de la concurrence ?
- Nom facile a écrire ? À prononcer ? À retenir ?
- Nom évocateur pour votre public cible ?
Et le plus important : Votre nom est il disponible ?
Vous avez une liste ? Des idées ? Parfait Allopns voir comment commander votre nom de domaine.
Commander son nom de domaine
01. Cliquez sur « Sélectionner »
- 02. Tester la disponibilité de votre nom de domaine.
03. Nous vous recommandons les extensions .fr (si vous êtes en France) ou .com.
04. Cliquez sur « Rechercher »
05. Votre nom de domaine est disponible ? Parfait ! Cliquez sur continuer !
06. Modifier l’emplacement de votre serveur afin qu’il soit le plus proche possible du lieu de vos futurs visiteurs
07. Sélectionner la liste déroulante
08. Taper : Europe
09. Sélectionner la France.
10. Cliquez sur « Changer »
11. Cliquez sur « Terminer la configuration »
Ces informations sont légales, elles servent à vous identifier comme propriétaire de nom de domaine .
12. Choisir selon votre contexte :
13. Tapez « fran »
14. Choisir la France.
15. Compléter ensuite TOUTES les données de contact puis valider.
16. Cliquez sur « Terminer l’enregistrement »
Configurer sa boîte e-mail
01. Cliquez sur le rond ci-dessous
02. Cliquez sur « Accueil »
03. Cliquez sur « Gérer » dans la rubrique e-mail.
04. Cliquez sur « Sélectionner »
05. Cliquez sur « Créer un compte e-mail »
06. Choisissez le nom de votre boîte e-mail (dans la plupart des cas on mettra « contact »)
07. Tapez « contact »
08. Choisissez maintenant le mot de passe de votre future boîte e-mail.
09. Cliquez sur « Créer »
De multiples informations sont disponibles ici pour installer votre boîte e-mail sur Outlook ou gmail n’hésitez pas à Cliquez sur le bouton en savoir plus ou à contacter le support technique d’hostinger disponible en français et accessible directement en bas à droite en cliquant sur l’icône de tchat pour qu’il vous aide dans l’installation de votre messagerie.
10. Dans notre cas nous allons simplement utiliser la version webmail de Hostinger qui ne nécessite aucune installation.
11. Cliquez sur « Compléter »
12. Cliquez sur « Webmail »
Mettez cet URL en favoris dans votre navigateur pour un accès plus rapide à votre messagerie professionnelle.
13. Pour accéder à vos e-mail il vous suffit de remplacer votre adresse e-mail et votre mot de passe.
Vérifier quelques paramètres avant de se connecter a son site
Avant de nous connecter à notre site WordPress nous allons désactiver le cache du serveur cela nous permettra d’éditer notre site en étant sûr que chaque modification soit prise en compte instantanément.
Pourquoi ? À quoi sert le cache ?
Pour avoir une haute performance en effet Hostinger utilise un système de cache qui garde une copie de votre sit. C’est une super fonctionalitée seulement lorsque l’on modifie son site très souvent (comme c’est le cas au départ) cela peut provoquer de fausses erreurs de réactualisation. Le cache doit être vidé systématiquement pour obtenir la dernière version du site. Autant le désactiver lors de la création de son site donc.
Bon à savoir
il sera tout à fait possible de remettre le cache par la suite lorsque le design de votre site sera définitif Vous devrez alors refaire ces étapes en sens inverses. Tout simplement.
Sachez toutefois que si vous oubliez ce n’est pas grave ! Le cache est surtout utile pour les sites a fort trafic mais il n’est pas indispensable.
01. De retour sur Hostinger cliquez sur hébergement nous allons vérifier quelques points importants avant d’aller sur notre site WordPress
02. Cliquez sur WordPress
03. Puis « Tableau de bord »
04. Si ce n’est pas déjà le cas Cliquez sur « Installer » dans la rubrique SSL certificate
05. Cliquez sur « Installer SSL »
06. Cliquez sur « Fermer »
Tant que notre site n’est pas finalisé il nous faudra vérifier que certaines options soient bien désactivées cela aura pour effet de nous éviter de « fausses erreurs » Le cache peut en effet empêcher le site de se réactualiser correctement pour cela voici deux étapes
07. 1. vérifier que Lite Speed est décoché.
08. 2. Rendez-vous dans la rubrique avancée
09. Puis « Gestionnaire de Cache »
10. Vérifier que cache automatique est désactivé.
11. Revenez sur le Tableau de bord en cliquant ici.
Premiers pas avec WordPress
Se connecter à l’interface d’administration
01. Cliquez sur le nom de votre site pour y accéder.
Félicitations vous êtes sur votre site mais comme un simple visiteur.
Nous allons maintenant nous connecter à l’interface d’administration afin de pouvoir le modifier !
02. Cliquez sur la barre d’adresse et positionnez votre curseur à la toute fin de votre nom de domaine.
03. Taper « /:wp-admin » puis tapez sur votre touche entrée.
/wp-admin04. Remplissez vos informations de connexion, adresse e-mail et mot de passe de site WordPress.
05. Cliquez sur « Log In »
Tour de l’interface : Faisons le ménage (partie 1)
Dans un premier temps nous allons passer notre site en français et supprimer tout le contenu inutile.
L’idée nous voulons une interface la plus minimaliste et le plus simple possible pour se concentrer sur l’essentiel.
01. Passons notre site en français pour cela Cliquez sur Settings.
02. Dans site language changer pour français.
03. Taper « fr » pour retrouver plus facilement l’option Français.
04. Sauvegarder vos changements.
Nous allons alléger l’interface de notre site WordPress pour qu’il soit plus rapide et sécurisé tout en faisant un petit tour….
05. Cliquez sur le tableau de bord.
06. Cliquez sur « Ignorer » dans la publicité WordPress
07. Cliquez sur « Options de l’écran »
08. Cliquez sur Cliquez sur le rond ci-dessous Éléments de l’écran groupe
09. Cliquez sur Cliquez sur le rond ci-dessous Éléments de l’écran groupe
10. Cliquez sur Cliquez sur le rond ci-dessous Éléments de l’écran groupe
11. Décocher toutes les cases.
Nous allons supprimer tout le contenu démo.
12. Cliquez sur les articles.
13. Cliquez sur « Corbeille »
14. Cliquez sur « Corbeille «
15. Cliquez sur « Supprimer définitivement »
16. Cliquez sur page
17. Cliquez sur « Tout sélectionner »
18. Cliquez sur « Actions groupées »
Cliquez sur « Mettre à la corbeille »
Cliquez sur « Appliquer »
19. Cliquez sur « Corbeille «
20. Cliquez sur « Tout sélectionner »
21. Cliquez sur « Actions groupées »
22. Cliquez sur « Supprimer définitivement »
23. Cliquez sur « Appliquer »
24. Cliquez sur « Extensions »
25. Cliquez sur « Tout sélectionner »
26. Cliquez sur « Actions groupées »
27. Cliquez sur « Désactiver »
28. Cliquez sur « Appliquer »
29. Cliquez sur « Tout sélectionner »
30. Cliquez sur « Actions groupées »
31. Cliquez sur « Supprimer »
32. Cliquez sur « Appliquer »
33. Cliquez sur le bouton OK
Installer Kadence thème
01. Cliquez sur Apparence
02. Cliquez sur « Ajouter »
03. Cliquez sur « Rechercher des Cliquez sur le rond ci-dessous »
04. Tapez « kadence puis sur [[Entrer]] »
05. Cliquez sur « Installer »
06. Cliquez sur « Activer »
Nous allons maintenant désinstaller les Cliquez sur le rond ci-dessous inutilisés.
07. Cliquez sur un des thèmes (autre que Kadence)
08. Cliquez sur « Supprimer »
09. Confirmer la supression
10. Recommencer cette opération pour chaque thème inactif.
Il ne doit rester plus que Kadence.
Créer et organiser du contenu
Créer des pages vierges
01. Cliquez sur le menu page puis ajouter.
02. Fermer l’assistant.
03. Taper un titre à votre page.
04. Par exemple : « Home page »
05. Cliquez sur « Publier »
06. Re-Cliquez sur « Publier »
07. Cliquez sur « Ajouter une nouvelle page »
08. Recommencer cette opération en créant les pages suivantes :
Page « contact »
Page « À propos »
Page « Nos services »
09. Sortons maintenant de l’éditeur de page pour cela Cliquez sur le logo WordPress.
Installer le plug-in Kadence blocs
01 Dans les extensions choisissez Ajouter.
02. Dans le moteur de recherche taper : « Kadence »
03. Tapez [[ENTRER]] »
04. Cliquez sur « Installer maintenant » du plug-in Gutenberg Blocks
05. Cliquez sur « Activer »
Créer son menu principal
À retenir :
Si une page n’est pas disponible dans votre menu c’est qu’elle n’est pas publiée pensez donc à bien publier vos pages.
01. Allez maintenant dans Apparence -> Menu
02. Cliquez sur « Nom du menu »
03. Tapez « menu principal »
04. Cliquez sur « Primary » parmi les emplacements disponibles.
05. Cliquez sur « Créer le menu »
06. Cliquez sur « Tout voir «
07. Cliquez sur « Tout sélectionner »
08. Cliquez sur « Ajouter au menu »
09. Cliquez sur Accueil.
10. Cliquez sur « Retirer »
11. Vous pouvez réordonner les pages du menu comme vous le souhaitez.
12. Cliquez sur « Enregistrer le menu »
Importation des modèles de pages
01. Cliquez sur « Toutes les pages »
02. Cliquez sur « Modifier »
03. Cliquez sur « Design Library »
04. Cliquez sur « Starter Packs »
En ayant des modèles de page variés les starter Kit vous feront gagner beaucoup de temps choisissez soigneusement celui le plus adapté à votre projet.
05. Dans cet exemple nous prendrons le kit qui s’appelle Single Product.
06. Choisissez le modèle adapté à notre page.
07. Cliquez sur « Mettre à jour »
Nous allons modifier un paramètre dans l’interface de Gutenberg pour passer plus facilement d’une page à l’autre.
08. Cliquez à cet endroit.
09. Cliquez sur « Mode plein écran »
10. Cliquez sur « Toutes les pages »
11. Cliquez « Modifier »
12. Recommencer les mêmes étapes pour toutes les autres pages toujours en sélectionnant le même kit comme sous cette animation.
Super du contenu a été ajouté mais il va falloir modifier les paramètres de votre Cliquez sur le rond ci-dessous afin d’éviter les trop grosses marges entre notre contenu et le titre de nos pages.
Optimiser son site
Modifier l’apparence de son site
01. Cliquez sur « Personnaliser »
02. Cliquez sur « Posts/Pages Layout »
03. Cliquez sur « Page Layout »
04. Décoher « Show Page Title ? »
05. Choisir la mise en page suivante
06. Enfin choisir l’option Uboxed comme cela votre contenu prendra le maximum de place possible !
07. Cliquez sur « la flèche Retour 2x »
08. Cliquez sur « Header »
09. Cliquez sur « Sticky Header »
10. Cliquez sur « Yes – Only Main Row »
11. Cliquez sur « Yes – Only Main Row également pour la version mobile »
12. Cliquez sur l’onglet « DESIGN »
13. Cliquez sur le rond
14. Choisissez une couleur de fond (ici par exemple blanc).
15. Cliquez sur » Retour »
16. Cliquez sur « Transparent Header »
17. Cliquez sur « Enable Transparent Header? »
L’onglet Design est accessible d’un peu partout et vous permet de modifier les couleurs par exemple en cliquant directement sur notre titre de site pour modifier sa couleur.
18. Cliquez sur le crayon du titre de votre site.
19. Sélectionner le rond en dessous de site Title Font
20. Choisissez une couleur depuis la palette ou le nuancier.
21. Cliquez sur GÉNÉRAL
22. Cliquez sur « Sélectionner un logo »
23. Ici, vous pouvez ajouter directement l’image de votre logo. Vous n’avez pas encore de logo ? Pourquoi ne pas envisager de le faire avec le logiciel gratuit canva ?
24. Ici vous pouvez aussi modifier le titre de votre site ou votre slogan.
25. Pensez bien à modifier votre slogan car celui par défaut n’est vraiment pas terrible !
26. Ici par exemple pour rester dans le Cliquez sur le rond ci-dessous de notre site on va mettre « votre nouvel assistant vocal »
27. Cliquez sur « Publier »
28. Cliquez sur la croix en haut à gauche pour sortir de l’éditeur de Cliquez sur le rond ci-dessous.
Notre site est bientôt prêt mais problème, la page d’accueil est vide plutôt que d’afficher celle que nous voulions… Allons donc modifier cela dans les réglages.
Les paramètres de WordPress (partie 2)
Changer la page d’accueil du site
01. Cliquez sur « Tableau de bord »
02. Cliquez sur « Réglages »
03. Cliquez sur lecture puis choisissez Une page statique
04. Cliquez sur « Home page »
05. Cliquez sur « Enregistrer les modifications »
Les permaliens
À retenir
Modifier ces paramètres le moins souvent possible.
01. Cliquez sur Permaliens
02. Cliquez sur Titre de publication
03. Cliquez sur « Enregistrer les modifications »
Comment modifier ses pages ?
L’idée : Pas besoin de maîtriser sur le bout des doigts chaque bloc de contenu.
Pour réaliser votre premier site faites simple !
Partez de templates préexistants car vous permettra d’atteindre un résultat professionnel plus rapidement. Vous verrez alors comment sont construites les mises en pages pour vous les reproduire.
Comment faire pour apprendre Gutemberg ?
3 choses :
- Pensez votre mise en page comme un tableau avec des lignes et des colonnes
- Apprenez à cliquer sur les trois boutons les plus importants (voir le tuto en image)
- Tester ! Changer tous les curseurs du panneau inspecteur pour voir en temps réel l’impact de vos modifications
Vous voulez apprendre à créer une interface et un design unique ?
Cette formation vous aidera à prendre en main gutenberg en profondeur.
Petit tour d’horizon des boutons les plus importants
- Le panneau Vue en liste :
Accesible ici
il vous permettra de voir comment est structuré votre design et d’aller sélectionner facilement n’importe quelle partie de votre design que cela soit une ligne une collone ou un élément en particulier.
Notez qu’a. Chaque élément sélectionné un encadré bleu apparaît pour vous fournir un repère visuel sur la sélection en cours.
- Le panneau inspecteur
Accessible en cliquant ici :
C’est ici que vous pourrez tout changer !
Couleur de texte de fond typographie nombre de colonnes. Comportement sur mobile.. ce panneau s’adapte dynamiquement à la section en cours.
Quelques exemples de curseur intéressant :
Je peux changer le nombre de colonne si je sélectionne une ligne.
Également la couleur de fond des sections
Ou bien encore la taille des caractères
Le plus simple est encore de ne pas avoir peur de tester c’est comme ça que vous apprendrez a prendre en main l’interface.
- Crtl + Z
L’outil indispensable puisque je vous fais confiance vous allez tester des choses ! Soyez rassuré vous pourrez toujours revenir en arrière en cas d’erreur.
01. Selectioner le mot sur lequel vous désirez ajouter un lien
02. Un menu contextiel apparait, cliquer sur l’icone lien
03. Cette boîte apparaît. Vous pouvez soit entrer l’url si vous la connaissez directement et taper sur entrer soit commencer à taper le nom de page (si c’est une page de votre site) pour demander a WordPress de vous trouver la bonne page.
Par exemple ici je commence à taper : home
77. Click the URL combo box
78. Type « home »
Enfin cliquer sur le résultat pour valider votre lien.
Comment renforcer la sécurité de son installation ?
Allons activer les mises à jour automatiques sur notre site !
Cela permettra qu’il soit toujours a jour c’est important car beaucoup de mises ces jours corrigent des failles de sécurité.
01. cliquer sur Extenssions
02. Cocher la ou les extensions pour lesquelles vous souhaitez activer les mises à jour automatiques.
03. Aller dans actions groupés pour sélectionner cette option-ci dessous :
04. Cliquer sur appliquer
05. Cliquer Apparence -> Thème
06. Cliquer sur le thème actif (ici Kadence)
07. Cliquer sur Activer les mises à jour auto.
Voici qui conclut la réalisation de votre tout premier site sur WordPress !
Si vous désirez aller plus loin sur Elementor votre SEO ou la sécurité le choix des plug-in ou des thèmes je vous invite à consulter la page des formations en ligne premium ou vous trouverez forcément votre bonheur.
Merci d’avoir fait confiance à WPmarkt pour la réalisation de votre premier site WordPress et félicitations à vous !
Un commentaire ? Une question ? L’espace commentaire est là pour cela n’hésitez pas 😉
À très vite pour un prochain tuto.
Vincent
