Comment créer un site Web WordPress du début à la fin

Avec plus de 35 % des sites Web alimentés par sa technologie, WordPress.org est l’un des créateurs de sites Web les plus anciens, les plus fiables et les plus utilisés. Ce logiciel principalement gratuit et à code source ouvert (open source) permet à quiconque de créer un site Web WordPress, quelles que soient ses compétences en codage ou ses talents de concepteur. Et pourtant, aussi convivial qu’il soit, ses capacités sont suffisamment larges et flexibles pour attirer les utilisateurs avancés, y compris les grandes entreprises comme Disney, MTV et Sony.

Bien que WordPress soit utile pour les non-développeurs, le démarrage implique une certaine courbe d’apprentissage. Pour te faciliter la tâche, nous avons élaboré le guide suivant qui explique comment créer un site Web WordPress du début à la fin. Et pour parcourir chaque étape avec toi, nous allons créer notre propre site Web WordPress pour l’une de nos entreprises familiales préférées, totalement réelle : Bluth’s Frozen Banana.

Comment créer un site Web WordPress en 6 étapes

  • Préparer le contenu de ton site Web
  • Enregistrer le domaine et l’hébergement
  • Installer WordPress
  • Configurer ton site Web WordPress
  • Personnalises le design de ton site WordPress
  • Lances ton site Web WordPress terminé

Étape 1 : Prépares le contenu de ton site Web

Avant de construire ton site, commence par préparer son contenu. WordPress étant un système de gestion de contenu, tu peux toujours modifier ou ajouter du contenu après la mise en ligne du site. Mais le fait de préparer la majeure partie de ton contenu à l’avance facilite non seulement la construction du site, mais te donne aussi une idée plus claire de ce que ton site doit faire et à quoi il doit ressembler.

À cette fin, il est également utile de dresser un plan simple du site, en indiquant le nombre et l’objectif des pages (page d’accueil, page d’information, page de contact, page de la boutique, blog, etc.) Voici quelques exemples de contenu commun que tu veux préparer :

  • Logo et image de marque (y compris les couleurs de la marque et la typographie)
  • Médias (photographies, illustrations, icônes, vidéos)
  • Contenu écrit
  • Titres
  • Sous-titres 
  • CTA (appel à l’action) et d’autres boutons
  • Corps du texte

Pour Bluth’s Frozen Banana, ils disposent déjà d’un logo et d’une mascotte sur lesquels ils peuvent travailler, et ils utilisent le sélecteur de couleurs de Photoshop pour obtenir le schéma de couleurs à partir de ces matériaux. Dans ton cas, tu devras peut-être acheter ton propre logo. Pour les images, tu peux soit engager un photographe, soit utiliser des photos et des icônes de stock.

Étape 2 : Enregistrement du domaine et de l’hébergement

Un domaine de site web est l’adresse unique du site web que les gens utilisent pour accéder à ton site WordPress. Idéalement, cette adresse doit être simple, comme le nom de ta société si tu es une entreprise ou le nom et prénom si tu es un particulier.

Tu dois également te procurer un hébergement, c’est-à-dire un serveur qui stocke les fichiers de ton site Web. De nombreuses plateformes d’hébergement proposent également l’enregistrement du nom de domaine dans le cadre de leur service. Lorsque tu recherches un site d’hébergement, fais attention à des éléments tels que les limites de stockage de données et la bande passante, mais surtout au fait qu’il soit compatible avec WordPress. Dans cet exemple, nous choisirons Bluehost parce que WordPress le recommande, mais il y a beaucoup d’autres options parmi lesquelles choisir.

Dans la plupart des cas, tu dois payer pour ton domaine et ton hébergement. Bluehost, par exemple, propose l’enregistrement du domaine à 12,99 $ et facture 7,99 $ par mois pour la première année (facturation annuelle et non mensuelle). Une fois que tu as cliqué sur le lien “Get Started” sur la page d’accueil de Bluehost, entre l’adresse du domaine que tu as choisi, et s’il est disponible, tu peux l’acheter à la page de paiement.

Une fois que tu as acheté un plan, tu seras invité à créer un mot de passe et à te connecter à ton compte. Bluehost te propose de te guider dans la création de ton site WordPress, mais nous te recommandons de sauter ces étapes car les modèles qui en résultent te coûteront plus cher.

Étape 3 : Installer WordPress

Dans l’onglet “Mes sites” du tableau de bord de Bluehost, en sélectionnant “Ajouter un site”, tu seras invité à installer WordPress. Si tu as utilisé un autre service d’hébergement, tu devras suivre les instructions fournies par ce service, c’est pourquoi il est important de vérifier au préalable que le service s’intègre facilement à WordPress.

Une fois que WordPress est installé, appuie sur le bouton “Log in” avec le logo WordPress (également dans l’onglet Mes sites). Tu accèdes ainsi à WordPress.

Dans WordPress, tu verras une barre latérale sombre sur la gauche, et en cliquant sur chaque élément du menu, tu modifies le contenu de la page principale sur la droite. Parcourons brièvement les éléments les plus pertinents de cette barre latérale :

  • Bluehost (ou autre intégration d’hébergement) : 

En cliquant sur ce bouton, tu accèdes à ton compte sur Bluehost. Il n’y a pas grand-chose à faire ici, si ce n’est éventuellement lancer ton site (tant que tu ne l’as pas lancé, ton site n’est pas en ligne et le domaine que tu as choisi affiche un message Coming Soon à l’intention du public).

  • Tableau de bord : 

Le centre général de WordPress pour gérer et visualiser ton site. Il comprend des actions étape par étape, un journal du contenu actuel de ton site et des recommandations pour des fonctionnalités supplémentaires.

  • Articles : 

Où tu peux ajouter et gérer des pages de blog.

  • Médias : 

Ta bibliothèque de médias, où sont stockées toutes tes images et vidéos téléchargées.

  • Pages :

Permet d’ajouter et de gérer les pages de ton site Web.

  • Commentaires : 

Modère répond ou filtre les commentaires s’ils sont activés.

  • Apparence :

Le centre principal pour modifier le thème de ton site Web.

  • Thèmes : Où tu peux parcourir et installer des thèmes gratuits et premium.
  • Personnaliser : Modifies le style du thème que tu as choisi. La plupart des autres éléments du sous-menu peuvent être modifiés ici.
  • Plugins : 

Permet de gérer les plugins de ton site Web (intégrations de logiciels tiers qui ajoutent des fonctionnalités supplémentaires et spécifiques à ton site Web).

  • Plugins installés : Permet d’afficher, d’activer, de désactiver et de supprimer les plugins déjà installés sur ton site.
  • Ajouter un nouveau : Où tu peux parcourir et installer des plugins gratuits et premium.
  • Utilisateurs : 

Où tu peux gérer ton mot de passe et ton profil d’utilisateur, ainsi que visualiser/ajouter des membres d’équipe et gérer leur niveau d’accès à ton administration WordPress.

  • Paramètres : 

Géres les options spécifiques de ton site Web WordPress

Étape 4 : Configurer ton site Web WordPress

WordPress te fournit un contenu de base pour débuter, que tu peux visualiser sous l’onglet Pages. Cela peut être utile pour montrer comment les éléments d’une page web sont construits, mais il est préférable de commencer avec une ardoise vierge. Dans l’onglet Pages, sélectionnes toutes les pages existantes en les cochant et cliques sur le bouton Déplacer vers la corbeille.

Il y a deux façons de commencer à configurer ton site : le construire de A à Z ou utiliser un modèle. La première option dépasse franchement le cadre de cet article car elle nécessite des compétences en matière de développement Web (en d’autres termes, l’écriture de code). Nous aborderons brièvement afin que tu comprennes les options qui s’offrent à toi.

Créer un site WordPress à partir de rien

Encore une fois, à moins que tu ne saches comment concevoir et développer un site web toi-même ou que tu sois prêt à engager un concepteur WordPress, veuilles à passer à la section suivante.

Tout d’abord, tu devras configurer tes pages et ajouter ton contenu. Navigues vers Pages > Add New, et tu seras amené à l’éditeur de page WordPress.

Il existe deux versions différentes de cet éditeur, Visuel et Texte, qui peuvent être basculées via les onglets illustrés ici. L’onglet Visuel te permet de modifier un aperçu en direct de la page. Tu peux copier-coller du contenu textuel dans le canvas principal et utiliser la barre d’outils située au-dessus pour le styliser comme tu le ferais dans un programme de traitement de texte. Le bouton Ajouter des médias situé au-dessus de la barre d’outils te permet d’ajouter des vidéos et des images à partir de ta bibliothèque multimédia.

L’onglet Texte est l’endroit où tu travailles avec le code sur lequel ta page est basée. Bien que l’éditeur visuel t’offre certains outils pour styliser et organiser ton site Web, tu dois toujours savoir comment écrire dans les langages de formatage et le code pour vraiment construire un site Web dont l’apparence et le fonctionnement sont plus sophistiqués qu’un document Microsoft Word. C’est pourquoi nous déconseillons cette voie aux débutants ou à ceux qui ne sont pas prêts à engager des concepteurs et des développeurs.

Ensuite, parlons des thèmes WordPress. Les thèmes fournissent la mise en page, le jeu de couleurs, le choix des polices, la forme des boutons et bien d’autres choses encore pour l’ensemble du site Web – essentiellement, l’image de marque. Les concepteurs peuvent créer des thèmes WordPress personnalisés où tu peux choisir parmi les milliers de thèmes préfabriqués proposés par WordPress (remarque : dans les deux cas, la construction et la mise en page des pages doivent toujours passer par un développeur).

Après avoir téléchargé et organisé ton contenu, vas dans Apparence > Thèmes. Cela montre les thèmes que tu as déjà installés et tu peux les activer en cliquant sur le bouton correspondant lorsque tu survoles la vignette. Pour parcourir et installer de nouveaux thèmes, cliques sur le bouton Thèmes de WordPress.org en haut de l’écran.

Une fois que ton thème préféré est activé, tu peux le modifier en naviguant dans Apparence > Personnaliser. La barre latérale de gauche t’offre des options limitées pour tout modifier, de la typographie à la couleur en passant par la disposition de base des éléments tels que les menus et les en-têtes.

Créer un site WordPress à partir d’un modèle

L’option de bricolage la plus conviviale pour les débutants est de commencer par un modèle et de personnaliser ton site à partir de celui-ci. Pour ce faire, tu as besoin de ce que l’on appelle un plugin : des outils tiers que tu peux installer pour étendre les capacités de WordPress.

WordPress étant gratuit et open-source (ce qui signifie que tout le monde peut contribuer à son code), de nombreux développeurs ont créé leurs propres intégrations pour faciliter l’utilisation de WordPress ou rendre possible certaines fonctionnalités du site. C’est une bonne idée de rechercher certains plugins communs dont ton site web pourrait avoir besoin une fois que tu auras commencé à le personnaliser. Pour l’instant, nous allons installer un plugin de création de site web.

Vas dans Plugins > Add New. En utilisant la barre de recherche, entres un terme comme “sites de démarrage” ou “modèles”. Nous avons choisi de travailler avec le constructeur de sites Web Elementor, mais n’hésites pas à examiner tes options. Appuies sur le bouton Installer et accéde à Plugins > Plugins installés. Fais défiler l’écran vers le bas pour trouver ton nouveau plugin de création de site, puis cliques sur le lien Voir la bibliothèque. Cela t’amènera à un affichage de modèles gratuits et premium que tu peux parcourir.

Ce qu’il faut rechercher ici, c’est dans quelle mesure le modèle correspond à la quantité et à la nature de ton contenu. Par exemple, si ton contenu est composé essentiellement de texte, ne commences pas avec un modèle basé sur des images, comme un modèle de portfolio artistique. Cela dit, tu peux toujours tester un modèle, supprimer les pages et recommencer autant de fois que nécessaire pour trouver une bonne correspondance. Pour le stand de bananes Bluth, nous avons choisi le modèle Fresco Italian, car le site Web d’un restaurant est le plus proche de ce que nous faisons.

Lorsque tu es prêt, sélectionnes le modèle et choisis importer le site complet. Une fois le processus d’installation terminé, tu disposes d’un site Web de démarrage complet à partir duquel tu peux travailler.

Étape 5 : Personnalises ton design WordPress

(Pour le reste de cet article, nous supposons que tu as construit ton site avec un modèle).

Pour personnaliser ton modèle, navigues vers Pages, sélectionnes la page sur laquelle tu veux travailler (nous allons travailler sur la page d’accueil) et cliques sur le bouton Éditer avec Elementor sur l’écran qui suit.

Modifier le thème WordPress

Tu verras un menu latéral d’outils et un aperçu en direct de ta page Web, que tu peux directement modifier. Nous allons commencer par le thème.

Sélectionnes l’icône hamburger dans le coin supérieur gauche de la barre latérale et choisis Site Settings. Sous Style du thème, tu verras quatre options : Typographie, Boutons, Images et Champ de formulaire. Si tu cliques sur l’une d’entre elles, des options de style s’affichent pour chacun de ces éléments de thème, conformément aux directives de ta marque visuelle. Par exemple, dans la section Typographie, tu peux modifier la police, la taille, la couleur, le poids, etc., pour tous les différents niveaux d’en-tête de ton site Web, plutôt que de modifier chaque zone de texte individuellement.

Définis ton logo et l’identité du site

Accédes à la section Identité du site dans la même section Paramètres du site de la barre latérale. Tu peux y définir le nom et la description de ton site, ainsi que remplacer le logo par le tien et même ajouter un favicon. Lorsque tu as terminé, cliques sur le bouton Précédent dans la barre latérale et fermes la section Paramètres du site.

Comment ajouter, modifier et supprimer des sections de page

Les pages sont construites sur une grille, chaque section organisant les éléments du site (également appelés widgets) en un certain nombre de colonnes invisibles. Lorsque tu passes ta souris sur le haut de l’une de ces sections, un onglet bleu comportant trois icônes apparaît en haut de celle-ci :

L’icône plus, te permet d’ajouter une section au-dessus de la section actuelle. Pour ce faire, tu seras invité à choisir le nombre de colonnes. Tu peux ensuite faire glisser des widgets de la barre latérale vers la nouvelle section.

L’icône de grille de points fait apparaître les propriétés de l’ensemble de la section dans la barre latérale.

L’onglet Disposition te permet de modifier l’espacement et l’alignement de tous les éléments de cette section.

L’onglet Style te permet de modifier l’image d’arrière-plan et d’autres choix de thèmes spécifiques pour cette section.

L’icône x permet de supprimer la section.

Comment modifier le texte et les médias d’un site Web

Lorsque tu passes la souris au dessus des éléments dans l’aperçu en direct, tu remarqueras que des cases apparaissent, t’indiquant que tu peux les modifier. En cliquant sur ces éléments et en les faisant glisser, tu peux les déplacer dans leur section sur la grille.

La sélection d’un élément fait également apparaître ses propriétés dans la barre latérale, où tu peux modifier son contenu. Chaque widget aura ses propres propriétés spécifiques séparées par les onglets Contenu et Style. Pour supprimer des éléments, fais un clic droit et sélectionnes Supprimer.

Pour modifier des images, sélectionnes celle que tu veux changer. Dans la barre latérale, cliques sur Choisir une image. Cela fait apparaître la boîte de dialogue Insérer un média. Choisis l’onglet Télécharger des fichiers, et fais glisser l’image que tu as sélectionnée à l’intérieur. Tu l’ajoutes ainsi à ta médiathèque et, une fois le téléchargement terminé, tu verras une croix à côté de l’image. Dans la partie droite de la boîte de dialogue, tu peux modifier le cadrage, le texte alt, la légende et la description de l’image. Lorsque tu as terminé, cliques sur Insérer un média en bas à droite.

Il s’agit essentiellement de l’essentiel de ce que tu dois savoir pour travailler avec du contenu sur toutes les pages de ton site. Au fur et à mesure, n’oublies pas d’enregistrer ta progression en sélectionnant Mettre à jour en bas de la barre latérale. Si tu veux avoir un aperçu complet de ton site, retourne dans l’administration de WordPress, vas dans ton tableau de bord et sélectionnes Afficher ton site.

Étape 6 : Lances ton site WordPress terminé

Une fois que tu as fini de modifier ton contenu et d’installer les plugins supplémentaires, tu es maintenant prêt pour l’étape la plus courte et la plus facile : le lancement de ton site Web.

Revient à l’onglet Bluehost et cliques sur le bouton Lancer ton site. (Le bouton se transformera en Restaurer bientôt, au cas où tu changerais d’avis et aurais besoin de retirer ton site). Saisis le domaine de ton site dans l’URL et tu seras dirigé vers ton site WordPress terminé et en ligne.

Ton site WordPress est en ligne

WordPress est l’un des outils les moins chers et les plus populaires pour créer des sites Web, utilisés par tout le monde, des novices aux grandes entreprises. Mais aussi accessible qu’il soit, il faut un peu de temps et de pratique pour s’y habituer. Maintenant que tu as les bases en main, nous t’encourageons à profiter de la flexibilité offerte par WordPress pour intégrer des fonctionnalités de plus en plus avancées sur ton site Web.

How to make a WordPress website from start to finish – 99designs

Partage cet article !

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest

Tu aimeras aussi :