Créer son site avec WordPress #5 - Personnalisation : Les thèmes

Vous voulez créer un site avec Wordpress mais vous ne savez pas comment vous y prendre ? Grâce à cette série de tutoriels vous allez apprendre pas à pas de façon complète comment créer un site, avec comme exemple le mien que je vais construire en même temps que vous.

In this article, I show how to install, choose and customize wordpress themes in general step by step in detail.

Sommaire de la série :

- WordPress #1 : Installation

- WordPress #2 : Premier démarrage

- WordPress #3 : Paramétrage et mises à jour

- WordPress #4 : Les articles

---

Aujourd’hui nous allons voir comment installer un thème, l' utiliser et le personnaliser.

Installer un thème

Ici nous allons voir en détail l' installation d' un thème.

Choisir son thème

Vous l' aurez deviné, avant d' installer un thème, il faut le choisir ^^ .
En effet, il existe des tonnes, mais alors des tonnes de thèmes !! ;-) Il est parfois impossible de se décider !

C'est pourquoi je vous ai préparé une petite liste de mes thèmes favoris ^^.

Mes thèmes favoris

• Nisarg
• BlueStreet
• Hestia
• Codilight Lite
• Dublin

Notez que vous pouvez tout à fait trouver un thème qui vous convient encore mieux sur WordPress ( voir partie suivante )

Faites attention :

• Aux fonctionnalités
• A la compatibilité (avec des extensions)
• Au style (subjectif)

Voilà, avant d' aller plus loin; je vais peu-être vous montrer comment installer un thème, non ?

Installer un thème

Pour installer un thème, il faut tout d' abord aller dans Apparence > Thèmes :

Vous accédez ainsi aux thèmes installés sur votre WordPress. Les thèmes déjà présent sont ceux fournis par défaut.

Pour ajouter un thème, cliquez sur la dernière case : Ajouter un thème. Vous arriverez sur une page semblable à celle-ci :

Regardez maintenant le menu en haut :

Par défaut, nous sommes dans la catégorie Mis en avant, ceux sont des thèmes choisis par WordPress et, comme le nom l' indique, mis en avant.
Mais je vous conseille de plutôt de vous diriger vers la catégorie populaires, c'est là que sont placés les meilleurs thèmes.

Dans le menu, vous pouvez également rechercher un thème par son nom (à droite).
Maintenant, choisissez votre thème. Ici, j' ai pris l' exemple du thème Nisarg.

Une fois choisi, placez votre souris sur son encadré :

C' est ainsi que le menu Détails et prévisualisation va apparaître.

Vous pouvez installer le thème sans passer par cette étape, mais elle est préférable pour bien choisir son thème.

Cliquez dessus. Vous vous retrouverez dans une interface semblable à celle-ci :

A gauche, tout les détails sur le thème :

• Son auteur
• Sa note (sur 5 étoiles)
• Sa version
• Son nom ^^
• Sa description

A droite c'est la prévisualisation : Un exemple de site utilisant le thème.
Cela vous donne l' idée générale du thème, mais ne vous fiez pas totalement à celle-ci, car elle est sans images. Or, je peux vous garantir que le thème Nisarg est vraiment beau avec des images.

Si vous êtes convaincu et que vous voulez utiliser ce thème, cliquez sur Installer :

Une fois cliqué, le thème va s' ajouter à la galerie de vos thèmes. Mais il n' est pas activé. Si vous voulez l' activer, cliquez sur le bouton Activer :

Et voilà, votre thème et installé et activé ! Vous pouvez dés à présent vous rendre sur votre site. Vous verrez que l' interface à radicalement changée :

Si le thème ne vous plaît pas, vous pouvez toujours en choisir un autre.

Personnaliser son thème

Ici je vous montre l' exemple du thème Nisarg. En fonction du thème les options présentées peuvent légèrement changer, mais les changements son minimes. Si vous avez des questions, posez-les en commentaires. Je serais ravi de vous répondre ;-)

Le thème, installé, se présentera comme ça dans la galerie (Apparence > Thèmes) :

Cliquez sur Personnaliser.
Vous avez ainsi à gauche le menu de personnalisation et à droite la prévisualisation des résultats.

Allez tout d' abord dans le menu Identité du site :

• Dans Titre du site, mettez le titre du site.
• Dans Slogan, ajoutez le slogan/sous-titre de votre site.
• Vous pouvez cocher la case Affiche le titre [...] ou non pour afficher ou non le titre et le slogan sur la page d' accueil. Je vous conseille de laisser l' option activée.
• Vous pouvez ici ajouter l' icône du site. Pour cela cliquez sur Ajouter une image. Cela va définir l' icône du site (que vous voyez dans la barre d' onglets) et l' icône d' application (exemple sur iOS, quand vous enregistrez un site sur la page d' accueil, ...)

Vous voyez ainsi le résultat en temps réel à droite de l' écran. Pour sauvegarder, cliquez sur Publier, sinon continuez la personnalisation en cliquant sur la flèche à côté du nom du menu.

Allez ensuite dans le menu Couleurs :

Ici, vous pouvez changer les couleurs principales du thème.

Dirigeons-nous vers le menu suivant : Image d' en-tête.

Vous pouvez sélectionner l' image d' en tête de votre blog. La taille recommandée est de 1600x400 px. Je vous recommande Canva si vous voulez y placer une bannière.

Dans le menu Image d' arrière plan, vous pouvez choisir une image de fond pour votre site. Faites bien attention, car trouver une bonne image de fond est souvent une tâche hardue ;-).

Nous allons passer le menu Menu pour le moment, nous verrons cela dans un prochain tutoriel.

Allez donc dans le menu widgets. Vous pouvez ici gérer les widgets disponibles à droite de votre page. Cliquez sur un widget pour voir ses paramètres et cliquez sur Ajouter un Widget pour en ajouter. Il existe une large sélection de widgets par défaut.

Notez que je vous conseille de supprimer le widget Méta car il mène vers la page de connexion, c'est un risque de sécurité (nous allons voir comment sécuriser la page de connexion dans un autre tutoriel).

Personnellement, j' ai ajouté un widget html personnalisé avec les liens vers mon blog Steemit et Busy.
Cliquez ici pour voir l' image

Le menu Réglages de la page d' accueil à déjà été vu dans les paramètres.

Les autres menus ne sont pas très importants et certains sont très complexes.

---

Si vous avez aimé, n' hésitez pas à upvoter / commenter / resteemer ! ;-)

A bientôt !

---

Posted on Utopian.io - Rewarding Open Source Contributors

---