CHAPITRE V

Installer un thème pour modifier le design de son site

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é. 

Sommaire chapitre 5 :

Trouver un thème pour son site WordPress

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

Accéder aux thèmes déjà installés sur notre site :

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 :

Theme wordpress installer

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 : 

  1. On parcours la bibliothèque WordPress.
  2. On va le chercher sur des sites spécialisés dans les thèmes. 

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 :

ajouter theme wordpress

Et on accède (comme pour les plugins) à la bibliothèque de thèmes WordPress

bibliotheque theme wordpress

Trouver un thème depuis la bibliothèque 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

theme lovecraft wordpress

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 : 

installer theme wordpress lovecraft

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 

theme installé tableau de bord wordpress
Le nouveau thème est maintenant présent dans la liste de nos thèmes installés.

Activer un thème installé sur notre site :

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

activer theme wordpress

Une fois qu’on a la confirmation que le thème est activé : 

theme active confirmation

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

aller sur site wordpress

Et on voit directement le changement de design qu’il y a eu par rapport au thème par défaut : 

visualiser theme installé wordpress

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. 

Paramétrer les thèmes installés sur son site WordPress

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. 

Paramétrer le design général :

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. 

personnaliser theme wordpress

Identité du site :

Premier onglet Identité du site, va nous permettre de gérer : 

  • Le titre du site
  • Le slogan ou sous-titre
  • La favicon qui va apparaitre sur l’onglet du navigateur et en icône de favoris. 

Donc c’est ici qu’on va pouvoir faire ces changements : 

personnaliser theme wordpress

Options spécifique au thème :

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. 

barre mobile theme wordpress

Couleur du thème :

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 : 

couleur theme wordpress

Logo du site :

On continu avec le Logo, ici on va pouvoir en ajouter un ou le modifier : 

logo theme wordpress

Image d'en-tête du site :

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

image en tete theme

Le menu du site :

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. 

image en tete theme

Les widgets :

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

pied de page theme wordpress

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

widget theme wordpress

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

paramétrer theme wordpress

Et on a bien les articles récents qui sont apparus dans la colonne latérale

articles recent theme wordpress

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 : 

ordre articles paramétrer theme wordpress

Ce qui nous donne bien : 

paramétrer theme wordpress

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 : 

pied de page paramétrer theme wordpress

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

articles recents pied de page paramétrer theme wordpress
Dans la première colonne on va mettre 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 :

pied de page paramétrer theme wordpress
Dans la seconde colonne une fonction 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 : 

pied de page paramétrer theme wordpress
Dans la troisième colonne on va mettre la liste de nos 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

Réglage de la page d'accueil :

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.

page d'accueil paramétrer theme wordpress

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 : 

paramétrer theme wordpress
Voici à quoi ressemble maintenant la page d'accueil du site.

Passer sur un thème professionnel (mais gratuit) pour son site

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

  • Responsive, donc qui s’affiche proprement sur mobile, tablette et ordinateur.
  • Dont le design est propre et correspond à notre besoin
  • Et qui soit maintenu par son créateur, c’est à dire qu’il y ait des mises à jour dessus pour suivre les mises à jour de wordpress. 

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.

Les sites de themes 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 :

installer theme professionnel my theme shop
Mythemeshop est un site de thèmes wordpress professionnels dont certains sont gratuits.

Puis sur le tag Free :

installer theme professionnel

On obtient une liste de thèmes gratuits que l’on peut installer sur notre site et provenant de MyThemeShop : 

installer theme professionnel my theme shop
L'ensemble de ces thèmes sont gratuits et peuvent être installés sur notre site.

Même chose sur atheme qui disposent d’une bibliothèque de template professionnels gratuits : 

installer theme professionnel

Et sur colorlib, et c’est ce dernier qu’on va utiliser : 

installer theme professionnel colorlib

Voir une démo d'un thème professionnel :

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 :

installer theme professionnel demo

Et en bas de page il y a un bouton Démo :

installer theme professionnel bouton demo

Qui une fois cliqué ouvre une démo du thème directement dans le navigateur :

installer theme professionnel demo navigateur

Télécharger et installer un thème professionnel :

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

installer theme professionnel telecharger

On clique dessus puis tout en bas de la page on clique sur Download

installer theme professionnel bouton demo

Ce qui lance le téléchargement du Thème : 

telecharger theme professionnel

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 

installer theme professionnel

Puis toujours en haut, sur le bouton Téléverser un thème :

televerser theme professionnel

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

installer theme professionnel

On sélectionne le fichier du thème et on clique sur Ouvrir

installer theme professionnel

Ensuite on clique sur Installer

installer theme professionnel

Et on obtient le message suivant lorsque WordPress a bien installé notre thème : 

installer theme professionnel

Et si on retourne dans Tableau de bord > Apparence > Thèmes, on peut voir que le thème a bien été installé :  

theme professionnel installé

Activer son thème professionnel :

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 : 

activer theme wordpress telechargé

Une fois le thème activé on a plusieurs options : 

  • Soit on est aiguillé sur ce qu’on doit faire
  • Soit on va dans Apparence > Personnaliser, comme pour le thème précédent 
  • Soit on va dans Apparence > Widget pour paramétrer la Homepage, le Pied de page et la barre latérale s’il y en a la possibilité. 

Donc ici on vient d’activer Illdy et on a un message

theme professionnel wordpress activé

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 : 

theme professionnel wordpress actons recommandées

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

theme professionnel wordpress paramétrer

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

theme professionnel wordpress paramétrer

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 :

theme professionnel wordpress homepage

Et voici la page blog

theme professionnel wordpress paramétrer 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.

Personnaliser son thème professionnel :

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 : 

theme professionnel wordpress paramétrer

On prend le premier Onglet : General Options

theme professionnel wordpress paramétrer

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 : 

theme professionnel wordpress paramétrer menu

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. 

theme professionnel wordpress paramétrer couleur

Si on va sur le site on voit bien la barre apparaitre pour indiquer l‘état du chargement de la page

theme professionnel wordpress paramétrer barre chargement

Ensuite on va passer à l’option suivante, le Logo

On a ici la possibilité d’afficher un Logo et de régler sa taille :

theme professionnel wordpress paramétrer logo

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) : 

theme professionnel wordpress paramétrer slogan

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 : 

theme professionnel wordpress paramétrer page 404

Ensuite on passe à l’onglet Footer ou pied de page

theme professionnel wordpress paramétrer footer

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 : 

theme professionnel wordpress paramétrer bouton haut page

La seconde option permet d’afficher ou non les éléments qui se trouvent dans le pied de page

theme professionnel wordpress paramétrer 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. 

theme professionnel wordpress paramétrer mentions légales

Enfin le dernier onglet est l’onglet Classique Réglage de la page d’accueil qui permet de définir la page d’accueil :

theme professionnel wordpress paramétrer page accueil

Donc pour valider tous ces changements on clique sur Publier 

publier page

Modifier le contenu de la page d'accueil :

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

theme professionnel wordpress paramétrer page accueil

On arrive sur la liste de toutes les sections qui composent la page d’accueil avec illdy : 

theme professionnel wordpress paramétrer page accueil

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 :

theme professionnel wordpress paramétrer page accueil

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 : 

theme professionnel wordpress paramétrer page accueil

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 ? 

theme professionnel wordpress paramétrer page accueil

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

theme professionnel wordpress paramétrer header

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 : 

theme professionnel wordpress paramétrer headline

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

theme professionnel wordpress paramétrer menu

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). 

theme professionnel wordpress paramétrer banner

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).

theme professionnel wordpress paramétrer homepage

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.

theme professionnel wordpress paramétrer homepage

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 : 

theme professionnel wordpress paramétrer homepage

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 : 

theme professionnel wordpress paramétrer homepage

Donc on va faire remonter cette section juste en dessous de la première en la faisant glisser juste sous Jumbotron Section

theme professionnel wordpress paramétrer homepage

Et comme précédemment on va paramétrer la section en suivant toutes les possibilités offertes par le thème : 

theme professionnel wordpress paramétrer homepage

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

Utiliser les widgets de chaque sections pour paramétrer la page d'accueil :

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

theme professionnel wordpress paramétrer about us

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

theme professionnel wordpress paramétrer about us

On va donc cliquer sur le bouton + Add & Edit skill bars

theme professionnel wordpress paramétrer homepage

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.

theme professionnel wordpress paramétrer about us section

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

theme professionnel wordpress paramétrer about us section

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

theme professionnel wordpress paramétrer about us section

L’objectif est donc d’aller section par section : 

  • D’ajouter le contenu Titres, sous titres, paragraphes etc
  • De modifier les couleurs
  • De modifier le fond en ajoutant une image ou une couleur 
  • D’ajouter des widgets 
  • Et de mettre les sections les unes à la suite des autres 
  • De masquer les sections inutiles pour nous. 
theme professionnel wordpress paramétrer homepage sections
On masque les sections non utilisés et on paramètre les sections que l'on veut pour construire sa page d'accueil

Paramétrer sa page Blog :

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

theme professionnel wordpress paramétrer blog

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 : 

theme professionnel wordpress paramétrer blog

Et dans la section Blog Options > Archive Headed Image, on a bien la possibilité de changer d’image mise en avant : 

theme professionnel wordpress paramétrer blog

Donc on la modifie et on clique sur Publier

theme professionnel wordpress paramétrer blog

Et on retourne sur notre site on a bien la nouvelle image qui s’affiche sur notre page blog

theme professionnel wordpress paramétrer blog

Paramétrer la palette de couleur du site :

Le menu suivant nous permet de paramétrer la palette de couleur du site : 

theme professionnel wordpress paramétrer couleur

Ici on va pouvoir sélectionner toutes les couleurs à utiliser sur son site : 

  • La couleur de mise en avant
  • La couleur secondaire
  • La couleur des titres
  • la couleur des paragraphes 
  • Et la couleur des liens lorsque l’on passe la souris dessus. 

C’est donc ici qu’on va pouvoir d’un seul coup changer l’ensemble de la palette de couleur de tout le site. 

theme professionnel wordpress paramétrer couleur

Sélectionner le menu :

Enfin on retrouve l’onglet menu habituel qui nous permet de sélectionner le menu qu’on veut faire apparaitre sur le site. 

theme professionnel wordpress paramétrer menu

Paramétrer le pied de page :

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 :

theme professionnel wordpress paramétrer 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 : 

theme professionnel wordpress paramétrer widget

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 :

theme professionnel wordpress paramétrer footer

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

theme professionnel wordpress paramétrer footer

Et on continue avec les autres colonnes, Footer Sidebar 2, 3 et 4 et on va ajouter par exemple,

  • le menu,
  • la liste des derniers articles,
  • une barre de recherche 

Et on obtient : 

theme professionnel wordpress paramétrer footer
On utilise les Widgets et on les fait glisser dans la bonne section pour construire son pied de page.

Voila donc pour le Pied de page ou Footer

Construire la Sidebar des Articles du blog

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

theme professionnel wordpress paramétrer sidebar blog
Ici la barre latérale contient un widget texte A propos et un widget rechercher.

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 : 

theme professionnel wordpress paramétrer sidebar blog

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 :

theme professionnel wordpress paramétrer sidebar blog
Par exemple ici on va chercher le widget Page et on le fait glisser dans la section 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

theme professionnel wordpress paramétrer sidebar blog
Par exemple ici on va chercher le widget Page et on le fait glisser dans la section Blog Sidebar.

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. 

Construire la Sidebar des Pages de son site

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é : 

theme professionnel wordpress paramétrer a propos

Si on retourne donc dans les widgets : Tableau de bord > Apparence > Widgets, on a une section Page Sidebar avec ce thème : 

theme professionnel wordpress paramétrer sidebar

Donc il suffit d’aller chercher un widget par exemple Articles récents et on va le faire glisser dedans et enregistrer

theme professionnel wordpress paramétrer sidebar

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. 

pied de page theme wordpress

Conclusion

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 : 

theme professionnel wordpress paramétrer side bar

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