Le Thème est la peau de notre site.
Le thème est ce qui a fait la popularité de WordPress.
Lorsqu’on change un thème, on va changer d’un seul coup le design et les fonctionnalités de notre site.
Ici on va voir comment trouver un bon thème et l’installer sur notre site.
Ensuite on va voir comment le paramétrer et l’adapter à nos pages et notre activité.
Un thème va représenter deux choses essentielles pour notre site : un design et des fonctionnalités.
En gros un thème n’est pas totalement paramétrable. Une fois qu’il est installé l’ensemble du site va se plier à ce thème.
Donc c’est important de le choisir avec soin en fonction de ce que l’on cherche à faire de son site.
Ensuite un bon thème aura des mises à jour fréquentes de la part de son créateur et il sera responsive donc il doit permettre un affichage idéal sur ordinateur, tablette et mobile.
Pour accéder à la liste des thèmes déjà installés sur notre site il suffit d’aller dans Tableau de bord > Apparence > Thèmes :
Pour l’instant le seul thème installé sur notre site est le thème WordPress par défaut.
Ici la version est Twenty Nineteen.
Les thèmes par défaut sont peu ergonomique et on un très mauvais design.
Donc pour chercher des nouveaux thèmes on a plusieurs options :
On va donc commencer par la bibliothèque de thèmes.
Il suffit sur cet écran (donc dans Tableau de bord > Apparence > Thèmes) de cliquer sur le bouton au dessus Ajouter :
Et on accède (comme pour les plugins) à la bibliothèque de thèmes WordPress :
Maintenant qu’on est dans la bibliothèque WordPress, donc depuis Tableau de bord > Apparence > Thèmes > Ajouter, on va pouvoir chercher et tester des thèmes que l’on y trouve.
Pour l’instant on se base sur le design. L’important est que le thème qu’on va choisir ressemble à ce que l’on veut de notre site.
Si on a beaucoup de photo on va privilégier un thème pour les photos. Si on a un blog on va privilégier un blog etc.
On va donc prendre un exemple avec une thème qu’on trouve dans la bibliothèque : Lovecraft
Donc il suffit d’aller chercher ces deux thèmes dans la barre de recherche.
Ils sont juste à titre d’exemple pour qu’on comprenne bien comment chercher, installer et paramétrer un thème personnel.
Donc une fois qu’on trouve le thème dans la recherche, on va cliquer sur le bouton Installer qui apparait lorsque l’on passe la souris dessus et le thème va s’installer :
On retourne ensuite dans la liste des thèmes qu’on a installé donc dans Tableau de bord > Apparence > Thèmes.
Et on voit ici qu’on a un nouveaux thèmes disponibles qu’on vient d’installer
Pour l’instant seul le thème Twenty Nineteen par défaut de wordpress est activé.
On peut avoir plusieurs thèmes installés mais un seul d’actif. Et c’est celui qui est actif qui est utilisé sur notre site.
On va commencer par activer Lovecraft.
Donc on passe la souris dessus et on clique sur le bouton Activer :
Une fois qu’on a la confirmation que le thème est activé :
On va aller directement sur la version en ligne de notre site en cliquant dans la barre du haut sur le nom de notre site > Aller sur le site.
Et on voit directement le changement de design qu’il y a eu par rapport au thème par défaut :
Rien qu’en changeant le thème, on a déjà un design extrêmement propre, un beau menu, une image de mise en avant, les articles de blog qui apparaissent en dessous, une barre latérale etc. Donc en un coup d’oeil on peut tester un nouveau thème et voir s’il conviendrait pour notre site.
Maintenant si le thème nous plait, on va pouvoir le paramétrer.
Pour paramétrer un thème, il faut se rendre dans Tableau de bord > Apparence > Personnaliser.
Ici on va paramétrer toutes les options générales du thème, de couleur, de logo de design etc.
On va commencer par le premier donc on se rend dans Tableau de bord > Apparence > Personnaliser :
Ici on arrive sur les options générales de design comme vu dans le chapitre 4.
Donc ici c’est très simple, on fouille et on test.
Premier onglet Identité du site, va nous permettre de gérer :
Donc c’est ici qu’on va pouvoir faire ces changements :
Ensuite on a un onglet unique à ce thème Options pour Lovecraft, dans lequel on va pouvoir choisir d’afficher ou non la barre latérale sur mobile.
Le thème vient avec une barre latérale qui est bien pour un grand écran mais très peu ergonomique pour mobile donc on va laisser décoché ici.
Puis vient la couleur, par défaut ici on est sur un rouge avec la couleur des menus, des boutons, des liens.
On peut changer la couleur ici :
On continu avec le Logo, ici on va pouvoir en ajouter un ou le modifier :
Puis à nouveau une option propre à ce thème, il s’agit de l’image d’en-tête.
Ici on a une photo de montagne par défaut, on va pouvoir aller sélectionner une nouvelle photo pour modifier l’image d’en-tête :
Puis option déjà vue, on peut sélectionner le menu à utiliser.
Nous n’en avons créé qu’un seul dans le chapitre précédent mais on peut en créer plusieurs et ici choisir celui qu’on veut afficher.
C’est ici qu’on va pouvoir définir ce qu’on veut mettre comme module ou widget dans le pied de page et sur la barre latérale.
On va commencer avec la Colonne latérale.
On voit qu’actuellement il y a, dans la colonne latérale, un texte A Propos de ce blog et le menu de navigation.
Si par exemple je veux enlever le menu on le sélectionne et on clique sur retirer :
Ensuite si je veux ajouter un élément par exemple les derniers articles publiés sur le blog pour les mettre en avant, on clique sur Ajouter un widget et on sélectionne Articles récents :
Et on a bien les articles récents qui sont apparus dans la colonne latérale :
Et si je veux réorganiser mes widgets avec par exemple avoir Articles récents au-dessus d’A Propos de ce blog, il suffit de le prendre et le faire glisser au-dessus :
Ce qui nous donne bien :
On peut donc ajouter, supprimer ou modifier l’ordre des Widgets présents sur la colonne latérale qui va se retrouver sur toutes les pages de notre site : Home, Blog, Articles, à Propos etc.
Si maintenant on retourne en arrière, en plus de la colonne latérale, on a 3 pieds de pages que l’on peut paramétrer :
En gros avec ce thème, on va pouvoir placer jusqu’à trois colonnes dans notre pied de page.
On commence par la colonne n°1 avec le Pied de Page 1.
Comme pour la colonne latérale, on peut ajouter les mêmes Widgets.
Ici par exemple la liste des articles récents :
On revient en arrière et dans le pied de page n°2, on va ajouter par exemple un widget Recherche :
Et enfin dans le pied de page n°3 on va ajouter par exemple la liste de nos pages pour permettre aux visiteurs arrivés en fin de page de pouvoir accéder aux autres pages :
On vient ainsi de construire notre pied de page qui sera présent sur toutes les pages de notre site.
Pour tout valider, on clique sur Publier.
Enfin pour le dernier onglet de personnalisation, qui s’appelle Réglage de la page d’accueil, nous n’avons rien à faire car il permet de définir quelle page sera notre page d’accueil et quelle page sera notre page blog et nous l’avons déjà effectué dans le chapitre précédent.
Et pour rappel, on peut définir la page d’accueil et la page blog ici ou dans Tableau de bord > Réglages > Lecture.
Si on enregistre tout et que l’on retourne sur la version en ligne de notre site (en tapant l’url de notre site ou dans le tableau de bord en haut > Nom de notre site > Aller sur le site), on obtient un site visuellement très propre en quelques clics :
On a donc téléchargé un nouveau thème et on l’a installé et paramétré sur notre site.
Il est assez difficile dans la bibliothèque WordPress de tomber sur un bon thème.
Un thème qui soit à la fois
Maintenant qu’on a vu comment installer et paramétrer un thème depuis la bibliothèque, on va voir comment trouver et installer un thème depuis des sites professionnels de thèmes sur lesquels il existe des thèmes gratuits.
Il existe de nombreux sites qui proposent des thèmes professionnels.
En tapant WordPress Theme dans Google on tombe sur ces sites là. Ils vendent des templates premium mais ont systématiquement des template gratuits dans leur bibliothèque et souvent de très bonne qualité.
Pour en donner 3 par exemple, on a
Sur MyThemeShop, il suffit de se rendre sur leur page et de cliquer sur l’onglet Theme :
Puis sur le tag Free :
On obtient une liste de thèmes gratuits que l’on peut installer sur notre site et provenant de MyThemeShop :
Même chose sur atheme qui disposent d’une bibliothèque de template professionnels gratuits :
Et sur colorlib, et c’est ce dernier qu’on va utiliser :
La plupart des sites permettent de charger une démo du thème pour se rendre compte de ce qu’il vaut.
Par exemple sur Colorlib, il suffit de cliquer sur un thème :
Et en bas de page il y a un bouton Démo :
Qui une fois cliqué ouvre une démo du thème directement dans le navigateur :
Une fois qu’on a trouvé un thème qui pourrait nous aller on va le télécharger et l’installer.
Donc ici pour l’exemple, on va rester sur Colorlib et on va télécharger le thème pro mais gratuit Illdy :
On clique dessus puis tout en bas de la page on clique sur Download :
Ce qui lance le téléchargement du Thème :
Ce qu’on va faire une fois le téléchargement terminé c’est importer le thème dans WordPress.
Donc on va sur son tableau de bord dans Apparence > Thèmes.
Puis on clique sur le bouton Ajouter
Puis toujours en haut, sur le bouton Téléverser un thème :
On a alors la possibilité de faire glisser directement dans WordPress le fichier .zip de son thème qu’on vient de télécharger.
Ou on va le chercher en cliquant sur Choisir un fichier :
On sélectionne le fichier du thème et on clique sur Ouvrir :
Ensuite on clique sur Installer :
Et on obtient le message suivant lorsque WordPress a bien installé notre thème :
Et si on retourne dans Tableau de bord > Apparence > Thèmes, on peut voir que le thème a bien été installé :
Donc on vient de télécharger et d’installer un thème depuis un site de thème.
Comme pour le thème trouvé depuis la bibliothèque WordPress, on va maintenant voir ce qu’on peut paramétrer.
Chaque thème est assez différent mais c’est toujours au mêmes endroits qu’on va pouvoir les paramétrer.
Donc déjà on va activer le thème :
Une fois le thème activé on a plusieurs options :
Donc ici on vient d’activer Illdy et on a un message :
Donc puisqu’on est aiguillé on va suivre les indications en cliquant sur le bouton Get Started with Illdy :
On arrive donc sur le tableau de bord du thème (accessible ici depuis Tableau de bord > Apparence > About Illdy.
Ici on est guidé. On a une notification sur l’onglet recommended actions donc on va aller sur cet onglet :
Et il nous propose d’installer un plugin d’accompagnement du thème.
C’est très courant sur les thèmes professionnels car cela permet d’apporter beaucoup plus de fonctionnalité au thème.
On va donc installer les deux éléments recommandés ici en cliquant sur Install and Activate :
Puis un second message de Illdy qui nous demande d’activer Contact Form 7 qui va servir à créer des formulaires de contact et qui nous propose d’importer les contenus de la Démo.
On va activer Contact Form 7 mais on ne va pas importer les contenus de la démo. C’est en gros d’importer toutes les images et les textes de la version démo de Illdy. Ca ne m’intéresse pas et ça va surcharger mon site pour rien.
Donc on clique uniquement sur Activate Now du Contact Form 7 :
Une fois que c’est fait on va déjà aller voir à quoi ressemble le site en cliquant en haut à gauche sur le nom de notre site > Aller sur le site :
Et pour l’instant Illdy a mis en place une page d’accueil :
Et voici la page blog :
Et pour l’instant on est totalement dans un mélange entre notre contenu et le contenu du Template. Par contre on a une véritable page d’accueil et une page blog vraiment pro.
On va donc commencer à paramétrer le Thème, exactement comme pour l’autre, on va aller dans Tableau de bord > Apparence > Personnaliser.
On va donc personnaliser le thème donc soit directement à droite sur la preview du site, soit à travers les onglets.
On va aller à travers les onglets pour ne rater aucune option :
On prend le premier Onglet : General Options :
Puis sous Header, on va pouvoir paramétrer ici le menu.
Il nous propose l’option d’activer un menu collé. C’est à dire qui reste lorsqu’on descend plus bas dans la page.
Ca nous donnerai donc un menu toujours visible pour l’utilisateur.
Par exemple on l’active, ensuite on peut choisir la couleur et on voit sur la preview de droite que le menu est bien collé et descend avec nous :
Ensuite options suivante Preloader.
Ici on va pouvoir choisir d’activer la barre de chargement de la page et la couleur du fond et de la barre.
Si on va sur le site on voit bien la barre apparaitre pour indiquer l‘état du chargement de la page :
Ensuite on va passer à l’option suivante, le Logo.
On a ici la possibilité d’afficher un Logo et de régler sa taille :
En dessous de définir la Favicon qu’on a déjà vu plus haut (icône qui se trouve dans l’onglet du navigateur ou dans la barre des favoris lorsque le site est mis en favoris).
Et encore en dessous on peut ajouter un titre du site qui va venir remplacer le logo (et pour l’afficher il faut donc retirer le logo) :
On va passer à l’onglet suivant qui vas nous permettre de définir notre page 404.
C’est la page qui s’affiche lorsque quelqu’un cherche à afficher une page de notre site qui n’existe plus.
Par exemple si on change l’adresse url d’une page, le visiteur qui avait mis en favoris notre page ne pourra plus l’afficher parce qu’il n’y a plus rien sur l’ancien url. De même pour tous les liens qui pointent vers cette page s’ils ne sont pas modifiés. Ils vont pointer vers un lien cassé et donc afficher cette page d’erreur 404.
Donc ici il faut simplement écrire un message à l’attention des visiteurs et les inciter à revenir à l’accueil par exemple :
Ensuite on passe à l’onglet Footer ou pied de page.
Ici on va pouvoir paramétrer le pied de page avec 3 options :
La première concerne le fait d’afficher ou non un icone pour permettre à l’utilisateur de remonter en haut de la page au clic :
La seconde option permet d’afficher ou non les éléments qui se trouvent dans le pied de page :
Et la troisième options permet d’afficher ou non le copyright tout en bas du site.
Si on est une marque déposé par exemple c’est ici qu’on le met.
Ou on peut mettre une phrase du genre “tout contenu publié sur le site est la propriété exclusive de avalanchemate.com” etc.
Enfin le dernier onglet est l’onglet Classique Réglage de la page d’accueil qui permet de définir la page d’accueil :
Donc pour valider tous ces changements on clique sur Publier
Si on retourne en arrière on va passer à la Front Page Section qui, comme son nom l’indique, va nous permettre de paramétrer notre page d’accueil :
On arrive sur la liste de toutes les sections qui composent la page d’accueil avec illdy :
C’est ici qu’on va paramétrer le contenu et l’ordre de chaque sections.
Par exemple si je clique sur About Section : on va pouvoir éditer tous les éléments de la partie A propos de notre page d’accueil de site :
Et si on veut faire passer une section au dessous ou en dessous d’une autre, on revient à la liste et il suffit simplement de la faire glisser à la bonne place :
Et enfin pour montrer ou masquer une section, il suffit de cliquer dessus et de sélectionner l’option afficher ou masquer la section, Show this section ?
Donc pour l’exemple on va paramétrer d’abord la partie supérieure de la page d’accueil.
Donc il s’agit de la première section Jumbotron section :
On va commencer par changer la Headline ou phrase d’accueil du site ainsi que la sous Headline, phrase directement située sous cette phrase principale :
Et on continue de suivre tout ce que nous propose le thème avec ensuite les deux boutons.
Si on en veut seulement un seul, on supprime le contenu du second et on ajoute l’adresse de la page vers laquelle on veut pointer.
Par exemple ici je veux un bouton qui lorsque l’on clic amène sur le Blog.
On va donc ajouter le texte au bouton et coller dans le lien l’url de la page blog :
Puis dans l’onglet Background, on va pouvoir gérer l’image de fond.
On a la possibilité d’ajouter une image fixe, un slider donc plusieurs images qui vont changer ou une vidéo, soit en l’important dans notre bibliothèque Media WordPress (attention au poids de la vidéo car l’espace de stockage n’est pas illimité), soit en collant un lien YouTube.
Par exemple ici on va ajouter notre image de fond.
Et on va laisser l’option Repeat Background image en off (si l’image est trop petite, le site va dupliquer l’image en mosaïque pour couvrir toute la surface du fond, c’est en général totalement déconseillé car c’est extrêmement moche).
Juste en dessous on voit qu’on a le contenu de notre page d’accueil qui s’affiche (celle qu’on a créée au début).
Maintenant qu’on peut construire entièrement sa page d’accueil avec notre thème professionnel, elle n’est plus utile.
Donc on va retourner dans Tableau de bord > Pages > Toutes les pages > Page d’accueil, et on va supprimer tout le contenu qui se trouve dedans en ne laissant que le titre ici accueil.
Et si on retourne donc dans Tableau de bord > Apparence > Personnaliser > Front Page Sections, on a bien maintenant le contenu qui a disparu et on a directement la section à propos qui est venu se mettre à la suite :
Ensuite en dessous on veut afficher les derniers articles par exemple.
Donc on retourne en arrière et on a la section Latest News Section qui correspond aux derniers articles publiés sur le blog :
Donc on va faire remonter cette section juste en dessous de la première en la faisant glisser juste sous Jumbotron Section :
Et comme précédemment on va paramétrer la section en suivant toutes les possibilités offertes par le thème :
Donc on va créer comme ça notre homepage en ajoutant le contenu à la suite en fonction de ce que permet le Thème.
Et on va gérer les titres, sous titres, les couleurs, les images de fonds, etc.
Ils nous reste à voir ensuite la partie Widgets.
On va utiliser la section suivante pour voir comment utiliser les widgets de chaque section.
Comme on l’a déjà vu, les widgets sont des blocs qu’on va pouvoir faire glisser dans chaque section.
Si on prend donc la rubrique About Us section :
On va pouvoir la paramétrer en mettant son titre, son contenu et gérer les couleurs, comme pour la rubrique précédente.
Mais on voit aussi que cette rubrique contient 3 barres qu’ils appellent Skills Bar. Il s’agit d’un widget :
On va donc cliquer sur le bouton + Add & Edit skill bars :
Puis sur Ajouter un Widget.
On arrive alors à la liste des Widgets qu’il est possible d’ajouter pour cette section en particulier.
Ici on peut donc ajouter uniquement un widget qui s’appelle Skill et qui est propre au thème Illdy que nous avons installé.
Il s’agit donc du plugin qui permet d’afficher et de paramétrer les barres.
Et donc par exemple on va l’ajouter, mettre un titre, pourcentage, icone et couleur comme demandé et on obtient bien une barre personnalisée :
Et du coup cette section utilise bien des widgets, on va en ajouter ajouter une image en fond et ajouter 3 widgets pour terminer de paramétrer notre section à propos :
L’objectif est donc d’aller section par section :
Une fois la page d’accueil construite, il ne nous restera plus qu’à paramétrer le Footer ou pied de page.
Mais d’abord restons dans l’éditeur et on va juste avant paramétrer la page Blog.
On retourne en arrière, c’est à dire dans Tableau de bord > Apparence > Personnaliser > Blog Options :
Et on va simplement suivre les options pour faire nos réglages.
Par exemple si je vais sur la version en ligne de la page blog, on a une grosse photo en haut que je veux modifier :
Et dans la section Blog Options > Archive Headed Image, on a bien la possibilité de changer d’image mise en avant :
Donc on la modifie et on clique sur Publier :
Et on retourne sur notre site on a bien la nouvelle image qui s’affiche sur notre page blog :
Le menu suivant nous permet de paramétrer la palette de couleur du site :
Ici on va pouvoir sélectionner toutes les couleurs à utiliser sur son site :
C’est donc ici qu’on va pouvoir d’un seul coup changer l’ensemble de la palette de couleur de tout le site.
Enfin on retrouve l’onglet menu habituel qui nous permet de sélectionner le menu qu’on veut faire apparaitre sur le site.
Donc on a paramétré notre page d’accueil et notre page Blog.
Il nous reste maintenant à paramétrer le pied de page ou Footer :
Pour le paramétrer le pied de page, comme vu précédemment il s’agit de Widgets qu’on va faire apparaitre dans les différentes colonnes du pied de page.
Donc on peut :
1. Soit utiliser l’onglet Widget juste en dessous :
2. Soit aller dans Tableau de bord > Apparence > Widgets et ici on arrive sur la liste des widgets et des sections du site dans lesquelles on va pourvoir les glisser :
Dans tous les cas, c’est la même chose, simplement deux chemins d’accès.
On va simplement faire glisser les widgets dans la bonne colonne pour ajouter notre contenu, exactement comme on l’a fait avec le thème précédent.
Donc par exemple je vais faire glisser un Widget Texte dans Footer Sidebar 1 (qui correspond à la première colonne du Footer) et je vais ajouter un texte A propos :
Et on continue avec les autres colonnes, Footer Sidebar 2, 3 et 4 et on va ajouter par exemple,
Et on obtient :
Voila donc pour le Pied de page ou Footer.
Enfin, comme avec le template précédent, on a la possibilité de modifier la barre latérale que l’on retrouve sur la page et les articles du blog :
Et ça se passe, comme pour le pied de page dans Tableau de bord > Apparence > Widgets.
Si on regarde dans Blog Sidebar on retrouve bien les deux Widgets Texte et Rechercher :
Et c’est exactement comme on l’a déjà vu, pour modifier la barre latérale du blog, il suffit donc d’aller chercher les widgets à gauche et de les faire glisser dans la section Blog Sidebar : Par exemple ici le widget Page qu’on va ajouter à la Blog Sidebar :
Et si on retourne sur la page blog, on a bien la liste des pages qui est apparue dans la sidebar du blog :
Donc comme avec les autres thèmes, on construit la barre latérale qui va aller sur la page Blog et les Articles, en y ajoutant les widgets que l’on veut.
Donc ça va exclure la Page d’accueil mais il est également possible avec ce template d’ajouter une barre latérale à nos pages.
Si on va sur une des pages qu’on a créé, la page à propos, on voit qu’il n’y a actuellement pas de barre latérale sur le côté :
Si on retourne donc dans les widgets : Tableau de bord > Apparence > Widgets, on a une section Page Sidebar avec ce thème :
Donc il suffit d’aller chercher un widget par exemple Articles récents et on va le faire glisser dedans et enregistrer :
Et si on actualise la page A propos, on a bien une barre latérale qui est apparue et contenant la liste des 3 derniers articles du blog.
En une heure on a téléchargé un thème professionnel et on l’a paramétré pour obtenir un site bien plus pro que précédemment.
Si on retourne sur notre site, on est passé de quelque chose d’assez amateur à un design beaucoup plus attirant.
On a pu construire une belle page d’accueil :
Les thèmes sont puissants, il faut simplement comprendre ou chaque élément se paramètre.
La ou un thème c’est bien c’est qu’il pose déjà une structure et les bases d’un design.
C’est plus facile et rapide de créer un site en partant d’un thème. Si on a le contenu, il suffit de quelques heures maximum pour avoir un site et toutes ses pages en ligne en utilisant un thème.
La contrepartie c’est qu’un thème est extrêmement rigide.
Si on trouve le thème idéal alors c’est très bien parce qu’il va nous faire gagner beaucoup de temps. Il ne faut pas hésiter même à l’acheter si réellement c’est le thème qui convient à notre site.
Par contre si on veut faire quelque chose de très précis et personnel, ça ne va pas être possible. Et c’est ça qui a été beaucoup reproché aux thèmes.
La vitesse de création et la constance du design, mais pas l’optimisation.
Et c’est ce qu’on va voir dans le dernier chapitre, comment créer des pages exactement comme on le souhaite en utilisant le plugin WordPress Elementor.