Vous voulez lancer dans la création de site WordPress,
mais vous ne savez pas par où commencer. Et bien vous êtes au bon endroit,
croyez-moi ce tutoriel est bel et bien conçu pour vous. Avec ce tutoriel dédié
à la création de site WordPress professionnel, vous serez capable de prendre en
main votre site web rêvé depuis bon nombre de temps.
Dans un laps de temps, en 7 étapes très simples, nous allons procéder à la
réalisation d’un site Web :
1- Inscrire et créer un compte sur le serveur
2-Installer WordPress
3-Installer un thème
4-Configurer le paramètre de WordPress
5-Personnaliser le thème
6- Installer des plugins essentiels
7- Modifier le contenu
Je vais choisir un hébergement gratuit pour la
réalisation de cet article, je fais ce choix en imaginant que vous n’avez pas
d’argent pour commencer, mais il est déconseillé d’utiliser un serveur gratuit dans
la vraie réalité. L’hébergement qu’on va utiliser c’est Infinityfree.
Inscrire et Créer un
compte sur le serveur Infinityfree
Création d’un compte sur Infinityfree
1-
Cliquez sur ce InfinityFree
2- Remplir tous les champs proposés puis
cliquez sur s’inscrire (sign up)
3- Allez
sur votre email puis cliquez sur Verify Email Address
4- Entrez
votre email et votre mot de passe puis cliquez sur Sign in
les images correspondant puis cliquez sur Valider
Voilà, on est sur le serveur Infinityfree
Création du compte
1-
Cliquez
sur Create Account
2- Dans l’espace subdomain, donnez un nom à votre
site web, ex : infostechno puis choisissez une extension dans la
zone Domain Extension puis cliquez sur Check Availability
3- Cliquez
sur Create Account
4- Cliquez
sur Finish
On a
terminé avec la création de notre compte, nous allons installer WordPress sur
le serveur.
Installation
de WordPress
1- Cliquez
sur control Panel
2- Cliquez sur I Approve
3- Déroule l’ascenseur vertical jusqu’à ce que vous voyez Softaculous Apps Installer puis cliquez
là-dessus
4- Cliquez
sur Install qui est au-dessous de WordPress
5-Déroule l’ascenseur vertical puis remplir Admin
username, Admin Password Puis choisissez la langue de votre choix
dans la zone Select language, choisissez un theme par exemple : Twenty
Twenty Three
6-Cliquez sur Select Theme puis cliquez sur No
7- Maintenant cliquez sur Install
Bravo l’installation est terminée, Cliquez sur l’url qui
se trouve devant Administrative URL pour aller dans le Bashboard de votre site web. Regardez-en haut au coin gauche vous voyez le nom de
votre site web, cliquez là-dessus pour accéder à votre site.
Connectez-vous
au dashboard WordPress
En
général, pour vous connecter à l’interface d’administration d’un site
WordPress, il faut vous rendre sur l’URL de votre site par exemple : infostechno.com/wp-login.php,
qui est l’URL de connexion par défaut. Vous pouvez aussi aller sur l’URL du dashboard
infostechno.com/wp-admin qui vous redirigera automatiquement vers cette
dernière.
Vous pouvez
alors saisir votre username or Email Address ainsi que votre Password
puis cliquez sur Log In pour vous connecter.
Configuration
le paramètre de votre site web
Rendez-vous
dans le dashboard
1-Cliquez
sur Settings(paramètre) puis General
2-Changer la langue puis cliquez sur save, moi je l’ai mis en français
Changer le titre (site Title)
Donnez un titre à votre site web.
Slogan du site
Le slogan est lui aussi visible dans les résultats de recherche, et essentiel pour le SEO.
Adresse web de WordPress (URL) et adresse
web du site (URL)
Faites attention à cette zone, si vous l’avez modifié vous risquez de casser le site. Il est réservé aux utilisateurs professionnels lors d’un changement de nom de domaine.
Les autres options de la page de réglages généraux
Adresse de messagerie
Comme indiqué, c’est l’adresse à laquelle seront envoyées toutes les notifications. Pas la peine d’y toucher, à moins qu’elle ne soit pas celle souhaitée.
Inscription
Vous donnez aux utilisateurs la possibilité de s’inscrire sur votre site. Mais pour un site vitrine, ce n’est pas nécessaire.
Rôle par défaut de tout nouvel utilisateur
Cela n’a d’intérêt que si vous laissez les visiteurs s’inscrire sur le site ; nous n’y touchons donc pas. Les autres options sont assez évidentes et vous pouvez les modifier comme bon vous semble !
Écriture
Cliquez sur “Écriture” puis déroule l’onglet Catégorie par défaut des articles pour choisir la catégorie de votre article, ici nous n’avons pas encore de catégorie.
Lecture
Cette rubrique permet de modifier l’affichage de la page d’accueil en choisissant soit les derniers articles soit une page statique. Si vous choisissez une page statique, vous avez deux options : Page d’accueil (Choisissez votre page d’accueil) et pages des articles (si vous avez des articles, choisissez la page de vos articles ici).
Inscription
Vous donnez aux utilisateurs la possibilité de s’inscrire sur votre site. Mais pour un site vitrine, ce n’est pas nécessaire.
Cochez la case Demander aux moteurs de recherche de ne pas indexer ce site pour qu’il ne soit pas visible aux utilisateurs sans avoir terminé. N’oubliez pas de les décocher quand vous avez terminé totalement avec la création du site.
Configurez les paramètres de commentaires
Si cela vous intéresse, les paramètres de discussion vous permettent de décider si les visiteurs peuvent laisser des commentaires sur vos pages et articles en laissant cocher la case “Autoriser les commentaires sur les nouvelles publications »
Un permalien est une “URL permanente”, c’est-à-dire l’URL principale par laquelle accéder à un contenu donné. Vous pouvez laisser cocher “Date et titre”.
NB.- Après la terminaison de vos modifications de chaque rubrique, il faut cliquer sur enregistrer les modifications.
D’accord c’est bon, on a terminé avec la configuration du paramètre de votre site web.
Installation de thème
Au cours de
l’installation de WordPress, nous avons installé le thème Twenty Twenty
Three, mais on va installer un autre thème qui est Ocean WP pour le besoin de ce tutoriel, mais il en a des milliers de thème WordPress qu’on puisse utiliser.
Thème
Un thème WordPress est un ensemble de fichiers qui contrôlent l’apparence et la mise en page d’un site web fonctionnant sur le CMS (système de gestion de contenu) WordPress. Les thèmes WordPress sont utilisés pour personnaliser l’apparence d’un site web sans avoir à modifier le contenu ou la structure de base.
Comment installer un thème ?
1- Allez dans le dashboard
2- Cliquez sur apparence puis sur thèmes
3-Cliquez sur ajouter
4- Dans la zone Rechercher des thèmes qui se trouve à droite, tapez le nom du thème (Ocean WP)
5- Amenez le pointeur sur le thème Ocean WP pour pouvoir cliquer sur installer puis cliquez sur activer
6- Cliquez sur Install & Activate Ocean Extra pour installer le plugin et autres recommandations de Ocean WP
Ocean WP dispose d’une fonctionnalité un peu particulière s’appelant Assistant de configuration(Démo), ça va nous permettre de gagner du temps. La démo qu’on va importer c’est Gym.
Importation de la démo Gym
1- Cliquez sur Ocean WP dans le Dashboard
2- Cliquez sur Allow & Continue
3- Cliquez sur Installer des demos puis déroulez l’ascenseur vertical pour voir la zone Rechercher des demos
4- Dans cette zone tapez gym puis enter sur le clavier
5- Cliquez sur importer qui se trouve sous la démo Gym
6- Cliquez sur les trois (3) Installer Maintenant (Ocean Social Sharing, Elementor, WP Forms)
puis cliquez sur aller à la prochaine étape
7- Cliquez sur Installer Cette Démo
8- Cliquez sur voir le Résultat
NB : – Cette démo est installé avec un constructeur de page qui est Elementor, Ce dernier donne la possibilité de personnaliser la mise en page de votre contenu sans même une ligne de code par un glisser-déposer. Il y a aussi WP Forms, pour créer formulaire de contact.
Personnaliser le thème
1- Allez sur le site, nous allons ajouter le logo de notre site web
2- Cliquez sur personnaliser en haut à gauche
3- Cliquez sur le petit crayon de GYM CLUB pour changer le logo
4- Dan la barre latérale à gauche, cliquez sur changer le logo
5- Cliquez sur téléverser des fichiers puis sélectionner des fichiers pour choisir le logo du site sur votre ordinateur
6- Cliquez sur sélectionner, vous pouvez recadrer l’image ou pas, moi je clique sur pas de recadrage
vous pouvez augmenter la larguer et/ou la hauteur de votre logo en changeant la valeur qui se trouve dans la zone largeur max et celle de la zone hauteur max puis cliquez sur publier.
Continuez avec la personnalisation dans la colonne contextuelle à gauche, on a la possibilité de personnaliser : identité du site, Menus, Widgets, Réglages de la page d’accueil, Typographie, etc.
Après avoir terminé avec la personnalisation, cliquez sur publier
puis cliquez sur la croix au coin gauche pour la fermer.
Installation de quelques plugins sur votre site web
Il est important d’installer quelques plugins essentiels sur votre site web, pour savoir ces plugins et les installer, cliquez sur Les 11 plugins essentiels à installer sur votre site Web WordPress
Modifier la page d’accueil du site
1- Cliquez sur Modifier avec Elementor
Sur la gauche, il y a une colonne contextuelle dédiée aux fonctionnalités Elementor.
Sur la droite, vous voyez le rendu de votre page.
La
colonne de gauche dispose de deux panneaux principaux :
Le premier, affiché par défaut et accessible via l’icône présentant 6 petits
carrés en haut à droite, liste les modules disponibles pour créer votre page.
Vous pouvez ajouter ces modules à votre page en glissé-déposé.
Le second est le panneau contextuel d’édition des modules, colonnes ou
sections. Pour l’afficher, cliquez sur le crayon bleu au survol d’un module.
Modifier le hero de la page d’accueil
Modifiez le titre
· Cliquez sur “DISCOVER
YOUR POTENTIAL”
·
Modifiez le contenu en
tapant « Bienvenue sur mon site Web » et mettez-le en
P(paragraphe) dans la zone balise HTML
·
Cliquez sur l’onglet “Style”
· Cliquez sur “Typographie”
et sélectionnez la taille de 60 px, le poids de 900 noir et transformation capitaliser
Modifiez le sous-titre
·
Cliquez droit sur le
sous-titre puis cliquez sur effacer
·
Maintenant cliquez sur T(Titre)
puis glissez déposez dans le même emplacement
·
Cliquez dans l’espace
situant à gauche pour taper par exemple : Création de site web
WordPress Professionnel
·
Cliquez sur style puis alignez
au centre dans l’espace alignement et sélectionnez “H1”
dans le champ Balise HTML.
·
Dans l’onglet “Style”,
choisissez la couleur “blanc”, cliquez sur “Typographie”
et choisissez la taille 21
Il
existe différents niveaux de titres en HTML.
·
H1 : titre de la page, doit être unique et doit contenir l’expression
de recherche principale sur laquelle on souhaite positionner le site.
·
H2 : titre secondaire, ne doit pas être utilisé plus de 3 ou 4 fois.
· H3 : titre de niveau trois, Etc.
Modifiez le background image
Pour la modifier, survolez-la et cliquez sur l’onglet bleu contenant 6
petits points en haut de la section.
1- Cliquez sur style puis
cliquez sur
2- Amenez le pointeur sur l’image situant à gauche, cliquez sur choisissez
une image puis sur Téléverser des fichiers.
3- Scrollez toujours dans la
colonne de gauche et cliquez sur “Forme de séparation”.
4- Cliquez sur “Bas”, déroule l’onglet type puis
choisissez “vague”.
Modifiez le style et la couleur des boutons
· Cliquez sur le bouton
de gauche dans la section de prévisualisation.
· Cliquez sur “Style”
dans la colonne de gauche.
· Mettez 30 dans le champ “Rayon
de bordure”.
· Cliquez maintenant sur “Couleur
de l’arrière-plan” et sélectionnez le bleu de notre palette.
· Cliquez ensuite sur
l’onglet “Au survol”, cliquez sur “Couleur de
l’arrière-plan”, sélectionnez le bleu.
· Cliquez maintenant sur
l’onglet “Contenu” en haut de la colonne de gauche, saisissez
le texte “A Propos” à la place de “Learn more”
Désigner
le deuxième bouton Maintenant.
· Cliquez droit sur le
bouton que nous venons de designer et cliquez sur “Copier”.· Cliquez droit sur le
deuxième bouton et sélectionnez “Coller le style”.· Le style a bien été
copié, mais le bouton est maintenant à droite !· Sélectionnez le bouton
· Cliquez sur l’icône “justifié
à gauche” pour le repositionner correctement dans Alignement· Changer le texte par “Contact”
· Allez dans “Style”
et changez la couleur d’arrière-plan et la couleur d’arrière-plan au survol.
Ajoutez des animations sur les boutons
· Sélectionnez le bouton de
gauche, cliquez sur “Avancé” dans la colonne de gauche· Dans l’espace Effets
de mouvement Sélectionnez “Fade in left” dans la section “Animation
d’entrée ” ;· Sélectionnez le bouton de
droite, cliquez sur “Avancé” dans la colonne de gauche· Dans l’espace Effets
de mouvement Sélectionnez “Fade in right” dans la section
“Animation d’entrée”.
Après
toutes ces modifications cliquez sur mettre à jour.
Modifions la première section de la page d’accueil
1- Cliquez sur le premier texte qui est Build your body by unleashing your potential pour le modifier, l’image ainsi que le deuxième texte.
Après avoir terminé avec la première section, cliquez sur la deuxième ainsi de suite pour embellir votre site web.
Vous voyez que le menu de notre site web contient plusieurs pages, nous allons supprimer les pages qui nous n’avons pas besoin pour laisser que les pages Home, about et contact.
1- Allons dans le dashboard, cliquez sur pages puis toutes les pages
2-Amenez le pointeur sur la page à enlever puis cliquez sur corbeille
Maintenant nous allons changer le nom de nos pages, elles sont en anglais. On va les mettre en français.
1- Cliquez sur apparence puis sur menus
2-Déroule l’onglet de la page home, effacer home qui se trouve dans la zone de titre de navigation pour taper Accueil. Faites de même pour les autres puis cliquez sur enregistrer le menu.
Modifier la page de contact
Si vous voulez qu’on puisse établir contact avec vous, il faut créer un formulaire de contact. Pour cela, cliquez sur Contact puis regardez la vidéo ci-dessous afin de préparer votre formulaire de contact.
Protégez votre site des hackers
Protéger au maximum le site contre des hackers qui ne tarderont pas à s’en prendre à lui une fois en ligne. N’oubliez pas d’installer un plugin de sécurité comme Wordfence (gratuit) ou SecuPress (payant, mais très complet). Pensez à modifier votre URL de connexion en installant l’extension gratuite WPS Hide Login. Le plugin Updraft Plus est de mise aussi pour sauvegarder au quotidien votre site web. Ces pratiques là vous aideront un peu à protéger votre site contre les hackers.
