Créer un site web peut sembler complexe pour les débutants sur WordPress.
Sans une bonne compréhension, on risque de perdre du temps et d’obtenir un site inefficace.
Cet article vous guide pas à pas pour construire efficacement votre site WordPress.
Maîtrisez WordPress de A à Z et créez votre site vitrine sans coder
Dans ce chapitre, nous allons créer un site web WordPress. Nous explorerons également toutes les étapes importantes et les aspects essentiels liés à la création d’un site web
Accueil
A propos
Services
Contact
Installer WordPress et supprimer les pages et articles
Pour installer WordPress, commencez par accéder à phpMyAdmin sur le site /phpmyadmin/ de votre hébergeur pour gérer vos bases de données.
Puis cliquez sur » new » et entrez le nom de votre base de données comme indiqué ci-dessous
Pour compléter le formulaire, suivez l’exemple fourni ci-dessous. Assurez-vous de remplir chaque champ en vous basant sur les indications données pour garantir la précision des informations soumises
Si l’installation réussit, un message de confirmation apparaîtra à l’écran, comme indiqué ci-dessous
Remplissez les informations de votre site web en suivant l’exemple fourni ci-dessous.
Ensuite, utilisez vos informations de connexion pour vous connecter, comme indiqué ci-dessous.
Tout d’abord, nous devons supprimer tous les articles et pages par défaut. Ensuite, procédez à la vérification pour vous assurer qu’ils ont été correctement supprimés
Suppression des articles
Pour commencer, ouvrez l’onglet » Tous les articles « . Ensuite, sélectionnez tous les articles dans la liste. Ensuite, choisissez » Mettre à la Corbeille » dans la liste déroulante, comme indiqué ci-dessous. Enfin, cliquez sur le bouton » Appliquer »
Après avoir appliqué les modifications, visitez l’onglet « Corbeille » pour vous assurer que les articles ont été correctement supprimés
Pour continuer, sélectionnez tous les articles dans l’onglet » Corbeille « . Par la suite, choisissez » Supprimer définitivement » dans la liste déroulante. Enfin, cliquez sur le bouton » Appliquer »
Suppression des Pages
Ouvrez l’onglet « Toutes les pages ». Ensuite, sélectionnez toutes les pages dans la liste. Par la suite, choisissez « Corbeille » dans la liste déroulante, comme indiqué ci-dessous. Enfin, cliquez sur le bouton « Appliquer ».
Après avoir appliqué les modifications, visitez l’onglet » Corbeille » pour vérifier que les pages ont été correctement déplacées. Ensuite, sélectionnez toutes les pages dans l’onglet » Corbeille « . Puis, choisissez » Supprimer définitivement » dans la liste déroulante. Pour terminer, cliquez sur le bouton » Appliquer « .
Déclaration des Pages du site
Suppression des thèmes
Premièrement, nous devons supprimer tous les thèmes par défaut de WordPress. Pour ce faire, accédez à l’onglet « Apparence » puis sélectionnez « Thèmes »
Ensuite, choisissez les thèmes par défaut que vous souhaitez supprimer et cliquez sur « Supprimer ».
Création des Pages
Maintenant, passons à la création des pages du site web. Pour commencer, accédez à l’onglet « Pages » dans votre tableau de bord. Ensuite, cliquez sur « Ajouter une nouvelle page »
Pour la première page définissez le titre de la page comme « Accueil ». Après cliquez sur « Publier » pour rendre la page accessible sur votre site
Et faire la même chose pour les autres pages, A propos, Services et Contact
Ainsi, une fois que vous avez publié les pages, revenez à l’onglet « Pages ». Vous y remarquerez les nouvelles pages que vous avez ajoutées
Définir la navigation du site
Si vous ouvrez votre site web, vous constaterez que tous les liens vers vos pages ont été automatiquement ajoutés à la barre de navigation
Question : Comment pouvez-vous modifier ou réorganiser les liens ?
Pour ajuster la position des liens dans la barre de navigation, rendez-vous d’abord dans l’éditeur de thème
Ensuite, cliquez sur le bouton « Navigation » pour accéder aux options de gestion des liens dans la barre de navigation
Après avoir ouvert l’éditeur de navigation, vous pouvez alors glisser-déposer les liens pour les réorganiser selon vos préférences
Après avoir réorganisé les liens, n’oubliez pas de sauvegarder vos modifications.
Ensuite, confirmez les changements en cliquant sur le bouton dans le pop-up qui s’affichera
Comment Régler l’accès à la page d’accueil
Étape | Description | Action à Réaliser |
|---|---|---|
Vérifier le lien vers la page d’accueil | Assurez-vous que le lien vers la page d’accueil ne redirige pas incorrectement. | Vérifiez la configuration actuelle du lien. |
Configurer la page d’accueil | Configurez la page d’accueil pour qu’elle soit correctement liée à la racine du site web. | Accédez aux réglages de lecture dans WordPress. |
Accéder aux réglages de lecture | Visitez l’onglet « Réglages » puis le sous-onglet « Lecture ». | Cliquez sur « Réglages » et ensuite « Lecture ». |
Choisir une page statique | Cochez la case « Une page statique (choisir ci-dessous) ». | Sélectionnez cette option dans les paramètres. |
Sélectionner la page d’accueil | Choisissez « Accueil » dans la liste déroulante pour la page d’accueil. | Sélectionnez la page « Accueil ». |
Enregistrer les modifications | Enregistrez les modifications pour appliquer la nouvelle configuration. | Cliquez sur « Enregistrer les modifications ». |
Vérifier la page d’accueil | Assurez-vous que la page d’accueil s’affiche correctement à la racine du site web. | Vérifiez l’affichage de la page d’accueil. |
Régler l’accès à la page d’accueil
Lorsque vous cliquez sur le lien « Accueil », il ne s’ouvre pas à la racine du site web. Cela peut indiquer un problème de configuration du lien ou de redirection
La solution consiste donc à configurer la page d’accueil pour qu’elle soit correctement liée à la racine du site web
Pour ce faire, visitez d’abord l’onglet » Réglages « . Ensuite, accédez au sous-onglet « Lecture »
Ensuite, cochez la case » Une page statique (choisir ci-dessous) « . Après cela, sélectionnez « Accueil » dans la liste déroulante, comme indiqué ci-dessous.
Pour terminer, veillez à enregistrer les modifications
Maintenant, vous pouvez trouver la page d’accueil à la racine du site web, comme prévu
Comment Définir un template pour la page d’accueil
Pour créer la page d’accueil, nous allons utiliser l’IA, il faut donc visiter le site web tyler.com puis décrire le contenu de la page d’accueil
Faites défiler la liste jusqu’en bas. Ensuite, choisissez le modèle qui vous convient le mieux
Après avoir choisi votre modèle, cliquez sur » Generate the Content » (Générer le contenu) pour créer le contenu de la page d’accueil
Après avoir généré le contenu, cliquez ensuite sur le bouton » copy the entire page » pour copier le contenu de la page d’accueil
Après avoir copié le contenu, collez-le ensuite dans votre page WordPress pour intégrer le contenu de la page d’accueil
Modification du Modèle existant
Pour modifier le modèle en supprimant le nom du titre en haut de la page, commencez par cliquer sur le lien « Page », comme indiqué ci-dessous
puis cliquez sur « modifier le modèle » comme indiqué ci-dessous
Vous ouvrirez alors l’onglet modifier
Sélectionnez le titre et cliquez sur « Supprimer », comme indiqué ci-dessous
Assurez-vous de bien enregistrer les modifications
Comment définir un template pour la page A propos
Comme vous l’avez fait pour la page d’accueil, retournez sur le site tyler.com et cliquez sur le bouton « About » dans la barre de navigation. Ensuite, générez le contenu de cette page et copiez-la en entier, exactement comme vous l’avez fait pour la page d’accueil
Comme indiqué ci-dessous
Après avoir copié le contenu de la page « About » sur tyler.com, retournez sur WordPress. Ensuite, accédez à la page « À propos » et collez le contenu copié pour mettre à jour la page
Veillez enfin à enregistrer les modifications pour que les changements soient appliqués
Si vous ouvrez la page « À propos », vous remarquerez que le nouveau contenu a été appliqué correctement
Comment définir un template pour la page Services
Dans cet exemple, nous utilisons cette page et comme pour les pages précédentes, générez le contenu de cette page, puis copiez-la en entier
Accédez donc à la page « Services » dans votre WordPress. Ensuite, collez le contenu copié pour mettre à jour la page
Veillez enfin à enregistrer les modifications
Comment définir un template pour la page Contact
Visitez donc la page de contact dans le modèle et de la même manière que les autres pages, générez le contenu et copiez la page entière
Retournez ensuite à la page « Contact » dans votre WordPress et collez le contenu copié pour mettre à jour cette page
puis veillez à enregistrer les modifications
Comment Téléverser les images de la page d’accueil
Pour changer l’image, commencez par cliquer sur l’image existante. Ensuite, cliquez sur le bouton « Remplacer » pour ouvrir le menu indiqué ci-dessous. Après cela, cliquez sur le bouton » Ouvrir le médiathèque »
Il se peut donc que votre médiathèque soit vide. Dans ce cas, vous pouvez glisser-déposer toutes les images que vous utiliserez sur votre site web dans la médiathèque. Ainsi, il sera plus facile d’y accéder et de les utiliser pour votre site
Il suffit ensuite de cliquer sur le bouton de sélection pour modifier l’image actuelle
Modification du point de vue des bandeaux
Pour changer le « point de vue des bandeaux », commencez par sélectionner l’image et ensuite, personnalisez l’affichage selon vos préférences, comme illustré dans l’exemple ci-dessous
Après avoir enregistré les modifications, vous pouvez voir le résultat dans votre image d’arrière-plan, comme illustré dans l’exemple ci-dessous.
Modification de l’opacité des bandeaux
Pour changer l’opacité de l’image il suffit de la sélectionner puis d’aller dans les styles et dans « Opacité de la superposition » vous pouvez changer l’opacité comme vous le souhaitez
Vous avez également la possibilité de changer la couleur de l’image comme indiqué ci-dessous
Comment Arrondir les bords des images
Pour modifier le rayon de la bordure, commencez par ouvrir le bloc des styles, comme vous l’avez fait pour l’opacité. Ensuite, dans la section » Rayon « , personnalisez le rayon selon vos préférences
Changement de la taille de l'image
Pour modifier la taille de l’image, accédez d’abord à la section mentionnée ci-dessous. Ensuite, dans cette section, vous pouvez soit choisir une taille à partir de la liste déroulante, soit entrer une taille personnalisée en chiffres
Par exemple
L’ajout et la suppression d’une section
Nous devons retourner sur le site tyler.com, ensuite, sélectionnez la section comme indiqué ci-dessous pour continuer avec le processus
Ainsi, après avoir copié la section comme illustré dans l’exemple, retournez à la page » À propos » et ensuite, cliquez sur le bouton mentionné ci-dessous. Puis, cliquez sur les trois points de la section où vous souhaitez ajouter la nouvelle section et sélectionnez « Ajouter après », comme indiqué ci-dessous
Afin de pouvoir coller la section copiée
Par exemple
Modification de l’entête des pages
Tout d’abord, accédez à l’éditeur de thème, comme indiqué ci-dessous
puis cliquez sur le bouton modèle
puis choisir la section « pages » telle qu’elle est mentionnée ci-dessous
Ainsi, toutes les modifications que vous avez apportées seront automatiquement appliquées à l’ensemble des pages du site web
par exemple, si nous modifions le nom du site web dans la barre de navigation et que nous enregistrons les modifications
il s’affichera sur toutes les pages, comme dans l’exemple ci-dessous
L’ajout d’un bouton dans la Nav
Pour ajouter un bouton dans la barre de navigation, cliquez simplement sur le bouton » + »
Ensuite, cliquez sur « Ajouter un bloc » comme indiqué ci-dessous
et enfin vous devez choisir le bouton dans la liste
comme dans l’exemple ci-dessous
vous avez également la possibilité d’insérer un lien pour le bouton par le bouton mentionné ci-dessous
et vous pouvez également personnaliser votre bouton en accédant au bloc de styles mentionné ci-dessous
Modification sur le pied de page
Comme la barre de navigation, si vous faites un changement dans le pied de page, il s’appliquera à toutes les pages du site web
dans l’exemple ci-dessous, nous modifions le mot mentionné
et comme vous le voyez dans l’exemple ci-dessous, il a été modifié dans toutes les pages
vous pouvez ajouter des liens et le personnaliser à votre guise, comme dans l’exemple ci-dessous
et vous avez la possibilité d’ajouter un nouveau lien en cliquant sur le bouton mentionné ci-dessous
L’ajout d’un logo sur l’entête du site
Il faut donc cliquer d’abord sur le titre du site, puis sur l’icône mentionnée ci-dessous. Ensuite, cliquez sur le bouton « Logo du site », comme indiqué ci-dessous
Cliquez ensuite sur le bouton bleu mentionné ci-dessous et sélectionnez votre logo
après l’avoir sélectionné, assurez-vous de bien enregistrer les modifications
et voilà l’exemple ci-dessous
Comment Télécharger l’extension Wpforms
Allez d’abord dans le sous-onglet « Ajouter des extensions », ensuite, dans la barre de recherche, tapez « WPForms » et dans les résultats, cliquez sur le bouton « Installer » de l’extension qui est mentionnée dans la capture d’écran ci-dessous
Une fois l’installation terminée, assurez-vous d’activer l’extension
Étape | Description | Action à Réaliser |
|---|---|---|
Accéder à « Ajouter des extensions » | Naviguez vers la section pour ajouter des extensions. | Cliquez sur « Extensions » puis sur « Ajouter ». |
Rechercher « WPForms » | Utilisez la barre de recherche pour trouver l’extension WPForms. | Tapez « WPForms » dans la barre de recherche. |
Installer WPForms | Cliquez sur le bouton « Installer » à côté de l’extension WPForms dans les résultats. | Cliquez sur « Installer ». |
Activer l’extension | Une fois l’installation terminée, activez l’extension pour l’utiliser. | Cliquez sur « Activer ». |
Télécharger et activer l’extension WPForms
L’installation du formulaire de contact
Pour créer un formulaire, accédez d’abord à l’onglet WPForms. Ensuite, allez au sous-onglet « Tous les formulaires » et cliquez sur le bouton » Créez votre formulaire »
Vous devez donc commencer par donner un nom à votre formulaire
Ensuite, choisissez le type de formulaire que vous souhaitez utiliser
Vous pouvez ajouter n’importe quel type d’entrée dans votre formulaire en utilisant la liste des options mentionnée ci-dessous
Vous avez également la possibilité de personnaliser vos entrées selon vos préférences
Veillez à enregistrer les modifications apportées à votre formulaire pour garantir que toutes les personnalisations sont sauvegardées
Retournez ensuite à la page de contact. Vous trouverez alors la liste déroulante de WPForms où vous pourrez choisir le formulaire que vous avez créé
et voilà l’exemple ci-dessous
Création d’un compte Brevo
Le problème étant que l’email ne peut pas être envoyé, vous devez donc installer un serveur SMTP pour résoudre ce problème.
Il faut donc ouvrir le sous-onglet « SMTP », comme indiqué ci-dessous. Ensuite, cliquez sur le bouton » Installer WP Mail SMTP » pour procéder à l’installation
Nous avons donc besoin d’un fournisseur de serveur web. Pour cela, vous pouvez utiliser une plateforme telle que « Brevo.com »
Ensuite, créez un compte sur cette plateforme pour commencer.
vous pouvez ensuite choisir votre offre
Déclaration de votre site WordPress
Donc, sur votre tableau de bord de » Brevo « , cliquez d’abord sur le bouton mentionné ci-dessous. Ensuite, sélectionnez » Expéditeurs, domaines et IP dédiées » pour poursuivre la configuration
ensuite sur la section « Domaines »
Il suffit alors de cliquer sur le bouton mentionné ci-dessous
et entrez votre nom de domaine
Voilà, vous avez ajouté votre nom de domaine. Vous pouvez maintenant procéder à l’authentification soit automatiquement, soit manuellement
Astuce Pratique : il est recommandé d’utiliser manuellement
Comment Authentifier les DNS manuellement
Ainsi, lorsque vous cliquez sur « Authentification manuelle », vous devez copier le code mentionné ci-dessous pour poursuivre le processus
Et vous devez visiter votre hébergeur et ajouter une entrée comme indiqué ci-dessous
puis, dans le champs étendus, sélectionnez TXT
Ensuite, il suffit de remplir le champ « Valeur » avec la valeur copiée de « Brevo » comme indiqué ci-dessous
Cliquez ensuite sur « Valider »
Après cela, vous devez retourner au Brevo et copier le Sous-domaine et la Valeur du bloc « Enregistrement DKIM » comme indiqué ci-dessous
retourner à votre hébergeur et ajouter une nouvelle entrée
puis remplir le formulaire avec les informations copiées de Brevo
et ajouter une nouvelle entrée de la même manière pour le bloc Enregistrement DMARC par les valeurs mentionnées ci-dessous
Comment Valider la propagation des DNS
Pour valider la propagation des DNS, il suffit de cliquer sur le bouton » Authentifier ce domaine de messagerie »
puis cliquez sur « voir la configuration » comme indiqué ci-dessous
et cliquez sur le bouton mentionné ci-dessous
Comment installer une extension SMTP
Retournez sur votre tableau de bord WordPress et ouvrez les paramètres dans le WPForms comme indiqué ci-dessous
- From Email :Vous devez donc d’abord saisir l’adresse e-mail qui vous permettra de recevoir les e-mails
- Force From Email :L’utilisation de l’option « Forcer à partir de l’adresse électronique » vous évite d’avoir plusieurs adresses d’expéditeur sur votre site web. Elle améliore également la délivrabilité des courriels, car ceux-ci sont envoyés à partir d’un serveur SMTP sécurisé
- From Name :vous devez également saisir le nom de l’expéditeur
- Mailer :vous devez alors choisir le Mailer utilisé , dans notre cas, nous utilisons Brevo
Comment générer une clé API
Pour générer votre clé API, vous devez donc ouvrir la section mentionnée ci-dessous dans Brevo
cliquez ensuite sur « Générer une nouvelle clé SMTP »
puis saisissez le nom de votre clé API
et comme vous le voyez dans l’exemple ci-dessous, il génère une clé API, vous devez donc la copier
Ensuite, vous devez retourner à votre WPForm dans WordPress et coller la clé API copiée
Envoyer un email de test
Pour envoyer un email en tant que test, vous devez ouvrir le sous – onglet outils dans l’onglet WPform comme indiqué ci-dessous
et dans cet onglet, vous trouverez l’email que vous avez défini et vous n’aurez qu’à cliquer sur » send email »
et comme vous le voyez dans la capture d’écran ci-dessous, il a été envoyé avec succès
Tester le formulaire
Allez sur le formulaire de votre site web, remplissez tous les champs et cliquez sur envoyer comme dans l’exemple ci-dessous
et voilà l’exemple de la capture d’écran ci-dessous, l’email est envoyé avec succès
Comment Modifier la police du site
Il faut donc d’abord installer un plugin nommé « Fonts Plugin ». Pour cela, ouvrez le sous-onglet « Ajouter des extensions », recherchez « Fonts Plugin », puis installez le plugin mentionné ci-dessous
Veillez donc à activer le plugin
Ensuite, vous devez ouvrir l’onglet « Customize Fonts » (personnaliser les polices) qui est mentionné ci-dessous
Vous devez alors cliquer sur le bouton mentionné ci-dessous
Vous devez ensuite cliquer sur le bouton » Basic settings » (Paramètres de base)
Vous pouvez donc choisir dans la liste ci-dessous et chaque catégorie a un rôle spécifique :
- Base Typography :Détermine la police utilisée pour le texte principal de votre site Web. Cela inclut les paragraphes, les listes, et tout autre texte non destiné aux titres. Choisir la bonne famille de polices ici garantit que le contenu est lisible et esthétiquement agréable
- Headings Typography :Définit la police utilisée spécifiquement pour les titres (comme H1, H2, H3, etc.). Utiliser une police différente pour les titres aide à créer une hiérarchie claire et une structure dans votre contenu
- Buttons and Inputs Typography :Choisit la police pour les champs de saisie (comme les barres de recherche et les formulaires de contact) et les boutons, afin de garantir la cohérence avec le design de votre site
Comment Déclarer les liens
Pour ajouter un lien à vos boutons, cliquez d’abord sur le bouton que vous souhaitez modifier. Ensuite, cliquez sur le bouton mentionné ci-dessous et entrez le lien que vous souhaitez ajouter
Pour insérer un lien dans le texte, procédez de la même manière que pour les boutons. Cliquez sur le texte que vous souhaitez modifier, puis utilisez le bouton mentionné ci-dessous pour entrer le lien désiré, comme illustré dans l’exemple ci-dessous
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment installer WordPress sur mon hébergeur?
Comment supprimer les articles par défaut dans WordPress?
Comment créer et publier des pages sur WordPress?
Comment modifier la navigation de mon site WordPress?
Comment ajouter un logo à l'entête de mon site WordPress?
Conclusion
En suivant ces étapes, vous aurez un site WordPress fonctionnel et personnalisé. Quelle fonctionnalité aimeriez-vous explorer davantage pour améliorer votre site?
