Maintenant que vous avez un site web vous voulez qu’il vous ressemble.
Avec WordPress, c’est chose facile via la notion de thème.
Un thème WordPress est l’ensemble des éléments nécessaires à l’affichage de votre site : du code + des options + des images.
Dans les chapitre ci-dessous nous allons voir comment choisir un thème qui répond à vos attentes mais aussi à celles de vos lecteurs. Puis je vous montrerai comment personnaliser votre thème pour qu’il ne ressemble qu’à vous.
Comme dirais une certaine exploratrice : Let’s go !
Bien choisir son thème
1e étape : Bien définir son besoin
Quel est le but de votre site : éduquer, partager, s’afficher, vendre
Penser déjà au futur contenu de votre site (écriture d’articles ? vidéos ? partages sur les réseaux sociaux ?)
Action
Prenez des feuilles et des crayons et dessinez les pages de votre site.
Ces pages doivent contenir tous les éléments (images, vidéos, etc.) que vous voulez mettre en avant.
2e étape : Rechercher un thème adéquat
Via l’interface d’administration
Dans le menu “Apparence” puis “Ajouter”
Vous pouvez filtrer le résultat par type de sites (blog, boutique, etc.), fonctionnalités et arrangements.
Via des sites spécialisés
Avec votre moteur de recherche préféré dans lequel vous aurez taper les termes “WordPress” et “thème”
Les “must have” d’un bon thème
– menus
– bas de page personnalisable
– “responsive” pour que votre site soit consultable sur tous les supports (ordinateur, tablette, téléphone)
3e étape : Installer et activer le thème choisi
Si le thème a été trouvé via l’interface d’admin
Cliquer sur le bouton “Installer” puis sur le bouton “Activer”.
Si le thème a été téléchargé d’un site tiers
Cliquer sur le bouton “Téléverser un thème” puis sélectionner le fichier “thème” que vous avez téléchargé.
Cliquer sur le bouton “Activer” pour que le thème soit appliqué sur votre site.
Personnaliser son thème
Via les options du thème
Menu “Apparence” puis “Personnaliser”
N.B. : Chaque thème peut être personnalisé selon les options qui le composent. Certaines thèmes auront plus d’options que d’autres.
Via du code CSS
Menu “Apparence” puis “Personnaliser” puis “CSS additionnel”
En savoir plus :
– Notre article “Personnaliser votre thème avec CSS additionnel“
– Le référentiel du CSS (en anglais)
– Les meilleurs tutoriels pour apprendre le CSS sur developpez.com
Un exemple de thème
Le thème “Lighthouse”
J’ai choisi ce thème car il contient tous les éléments nécessaires à un bon site web.
Chaque élément à une place définie ce qui facilite la lecture du site.
- En haut de la page : un menu, la description du blog
- Au mileu : le contenu et le menu “de côté” (“sidebar”)
- En bas : des emplacements personnalisables
Commençons la personnalisation !
Après avoir activé le thème, cliquez sur le menu “Apparence” puis “Personnalisation” de l’interface d’administration de votre site WordPress.
La partie haute
- Le nom du site : menu “Identité du site”
Il apparait en haut à gauche de la page et en haut au milieu de la page.
- Le slogan du site : menu “Identité du site”
Il apparait en haut au milieu de la page sous le nom du site.
- L’image d’en-tête : menu “Image d’en-tête”
Vous pouvez changer l’image qui apparait dans la partie haute de la page. Vous pouvez même définir plusieurs images qui apparaitront aléatoirement en cliquant sur le bouton “En-têtes chargés aléatoires” ou “En-têtes suggérés aléatoires”
- Le menu : menu “Menus” puis “Menu supérieur”
Dans ce menu vous pouvez ajouter pages, articles ou liens personnalisés qui composeront votre menu principal.
Il sera visible sur toutes les pages de votre site. Ne le surchargez pas trop.
- Les widgets “Top” : menu “Widgets” puis les menus “Top Widget Left”, “Top Widget Middle” et “Top Widget Right”
Les widgets “Top” sont des éléments affichables ou non après l’image d’en-tête de votre site.
Ils seront visibles sur toutes les pages de votre site. Ne les surchargez pas trop.
La partie du milieu
- La page d’accueil : menu “Réglages de la page d’accueil”
Le thème permet de type de page d’accueil : la liste des derniers articles de votre blog ou une page.
Je vous conseille de faire une page dédiée à l’accueil des visiteurs de votre site pour leur expliquer ce qu’ils pourraient y trouver.
- Le widget “Sidebar” : menu “Widgets” puis “Sidebar”
Cet élément permet d’afficher d’autres éléments sur la côté droit de la page de votre site.
Il sera visible sur toutes les pages de votre site. Ne le surchargez pas trop.
- L’image d’arrière-plan : menu “Image d’arrière plan”
Au lieu d’une couleur, une image d’arrière plan peut être définie. Elle s’affichera derrière toutes les pages de votre site.
C’est une option que je déconseille d’utiliser. Elle alourdit la page à charger et l’image est caché par les autres éléments de la page.
La partie basse
- Les widgets “Bottom” : menu “Widgets” puis les menus “Bottom Widget Left”, “Bottom Widget Middle” et “Bottom Widget Right”
Les widgets “Bottom” sont des éléments affichables ou non après le contenu de votre page ou article et avant le pied de page (footer).
Ils seront visibles sur toutes les pages de votre site. Ne les surchargez pas trop.
- Les widget “Footer” : menu “Widgets” puis les menus “Footer Widget Left”, “Footer Widget Middle” et “Footer Widget Right”
Les widgets “Footer” sont des éléments affichables ou non en pied de page.
Ils seront visibles sur toutes les pages de votre site. Ne les surchargez pas trop.
- La mention “Powered by” : c’est une mention en dur dans le code du thème que vous ne pourrez pas modifier via le menu.
Vous pouvez toutefois la modifier ou l’enlever en modifiant directement le fichier footer.php se trouvant dans le répertoire de votre thème (wp-content/themes/lighthouse).
Cette modification sera perdue lorsque vous installerez une nouvelle version de ce thème.
Si vous changez de thème, la mention “Powered by” du nouveau thème s’appliquera. Et vous devrez modifier le fichier footer.php de ce nouveau thème.
Les couleurs
Le menu “Couleurs” permet de modifier les couleurs présentes dans toutes les parties de la page (haut, milieu, bas).
Mais avant de jouer les apprentis sorciers ou les Valérie Damidot du web, il faut savoir harmoniser les couleurs entre elles.
Voici quelques sites qui pourront vous aider :
- Tout savoir sur les couleurs sur responsive-mind.fr
- 5 conseils et 11 sites pour harmoniser les couleurs d’un site sur outils-web.fr
- WebDesign : Les outils pour harmoniser les couleurs de son site web sur webiaprod.fr
J’ai choisi cette palette de couleurs pour mon site d’exemple
Le CSS additionnel
Vous voulez modifier un élément qui n’apparait sur la page de personnalisation du thème ?
Le CSS additionnel vous permet de le faire.
CSS est un langage permettant de décrire la typographie d’une page web : police, taille, couleur, marges, etc.
Pour en savoir plus sur le CSS additionnel, vous pouvez consulter notre article “Personnalisez votre site avec CSS additionnel“.
Modifier les couleurs
| Ce que je veux modifier | Élément/Classe | Attribut | Les lignes CSS |
| Couleurs du pied de page (footer) | .footer-widget-wrapper et .site-footer | background-color | .footer-widget-wrapper, .site-footer { background-color: #CCACAC} |
| Couleur du bandeau de menu (pour tablettes et téléphones uniquement) | #navigation_menu | background-color | @media (max-width:1024px) { #navigation_menu { background-color: #ccacac;}} |
Modifier les polices utilisées
| Ce que je veux modifier | Élément/Classe | Attribut | Les lignes CSS |
| Police du nom du site (partie haute à gauche) | .navbar-brand | font-family | .navbar-brand {“Lucida Handwriting”, “Comic Sans MS”,sans-serif} |
| Police du nom du site (partie haute au milieu) | .site-title | font-family | .site-title {“Lucida Handwriting”, “Comic Sans MS”,sans-serif} |
| Police du titre de page ou d’article | h2.entry-title | font-family | h2.entry-title {font-family: “Comic Sans MS”,sans-serif; text-transform: none; font-weight: normal;} |
| Police du titre des widgets “top” | .top-widgets h3 | font-family | .top-widgets>h3 {“Lucida Handwriting”, “Comic Sans MS”,sans-serif} |
Modifier l’alignement du texte
| Ce que je veux modifier | Élément/Classe | Attribut | Les lignes CSS |
| Titre de page ou d’article | h2.entry-title | text-align | h2.entry-title{text-align: left;} |
| Textes des widgets | .top-widgets | text-align | .top-widgets{text-align: left;} |
Modifier la taille des éléments
| Ce que je veux modifier | Élément/Classe | Attribut | Les lignes CSS |
| La partie basse (footer) | .site-footer | padding | .site-footer{padding:0;} |
Après d’autres modifications diverses et variées, mon site ressemble à ça.
