Installer un thème et le personnaliser

Ajouter et configurer le squelette de votre site web

Rendez-vous dans l’onglet « apparence » pour visualiser les thèmes par défaut de wordpress déjà enregistrés. Nous on va installer Kadence pour cet exercice, donc « ajouter un thème » tout en haute de la page. On accède à la bibliothèque de thèmes wordpress, même aspect que celle des plugins, on recherche Kadence, on l’installe et on l’active.

Personnaliser notre thème

Deux façons d’accéder à la personnalisation de notre thème :

soit en direct depuis l’onglet apparence,
soit depuis une page de notre (front end) dans les outils de la barre admin en haut.

Petit exercice pour demain

Celui qui me présentera la meilleure image demain pour présenter son thème construit en php aura un bonus sur sa note finale.

Colors & font

Colors

Palette de couleur (une fois enregistrées, vous les retrouverez depuis vos constructeurs de pages facilement)
Site background, définir une couleur d’arrière plan de votre site global
Content background, définir une couleur d’arrière plan de vos sections
Title above content background : couleur du titre dynamique de vos pages (si vous utilisez des titres dynamiques)
Link color : couleur des liens au repos et au survol (de manière générale, la deuxième couleur proposée à définir en ligne est celle du survol, la troisième est celle de l’élément actif, sur un menu, par exemple)

Typographie

base font : définir la typographie de votre corps de texte sur tout le site
définir la taille, couleur et le style de vos polices d’écritures qu’il s’agissent de votre titres ou de votre corps de texte
Pour la taille et pour une bonne responsive, on va préférer le format REM au lieu du format pixel, qui s’adaptera mieux d’un écran à l’autre.

Base button styles

Couleur du texte, de l’arrière plan, des bordures, du rayon de bordure pour arrondir un peu les bords de notre bouton, le padding et l’ombre. Le but est de concevoir notre style de bouton principal réutilisable facilement, rien ne nous empêche de modifier son look en fonction de son utilité ou des pages.

Général

Layout

Vous permet de définir les nouveaux réglages par défaut en termes de marges, de tailles de sections.

Sidebar

Vous pouvez définir une sidebar, pratique quand vous avez des articles ou des produits pour y ajouter des informations dynamiques. Vous configurer votre sidebar depuis votre tableau de bord et son apparence depuis cet onglet.

Images

Vous pouvez définir un rayon de bordure sur toutes vos images par défaut pour obtenir des bords plus arrondis (en fonction de votre charte graphique ou du type d’activité pour laquelle vous travaillez)

Scroll to top

Kadence vous propose d’ajouter un bouton « scroll to top » qui comme son nom l’indique, redirige l’utilisateur vers le haut de la page. Cela peut être utile si vos pages sont longues et que votre header n’est pas fixe, pour éviter à l’utilisateur de scroller pour pouvoir à nouveau rejoindre le menu.

404 page layout

Vous ne construisez pas votre page 404 avec le theme mais vous pouvez configurer son apparence

Comments

vous pouvez supprimer de votre site tous les champs permettant à des utilisateurs de laisser des commentaires (la plupart des commentaires reçus sur un blog sont des spams malheureusement, ouvrir les commentaire vous assure une charge de travail supplémentaire de régulation de ces derniers).

Breadcrumbs

le breadcrumbs c’est le chemin de pages réalisé pour atterrir sur une page. En anglais la référence c’est donc le « chemin de miettes de pain » qui vient des comptes pour enfants, en français, on utilise « le fil d’Ariane de la mythologie. Via cet onglet on peut connecter notre plugin SEO avec notre breadcrumbs, concretement, cela aide google à comprendre précisément l’arborescence de votre site web.

Social link

définir nos liens de réseaux sociaux et définir que le lien s’ouvre dans un nouvel onglet par défaut

Performances

Vous permet d’activer ou non certaines fonctionnalités afin de gagner en vitesse

Header

Sur kadence, vous avez un nombre limité de row et surtout de widgets a allouer au header, suffisant pour la plupart des sites simples, cela peut devenir trop juste pour certains besoins, c’est pourquoi on peut vouloir changer de thème ou même construire notre header de A à Z avec elementor. Attention, comme je le disais le code de elementor est lourd, attention à ne pas en abuser.

Barre latérale : les options

Widget Logo : image de notre logo, type d’affichage, titre du site, slogan, site icon (favicon)
Widget Primary navigation : permet de sélectionner un menu existant ou d’en créer un (on peut le créer depuis le tableau de bord ou directement depuis cet onglet). Depuis l’onglet design on peut aussi définir un style de navigation et des couleurs particulières pour les éléments (au repos, survol et actif)

Les petits plus de Kadence

Transparent header : on peut activer le header sans fond sur notre site pour qu’il s’intègre plus joliment sur une image par exemple. On peut l’activer sur certaines pages, le désactiver sur mobile, définir la couleur de chaque élément de notre menu lorsque le header est transparent
Sticky header : permet de rendre fixe le header, optimisant ainsi l’accès à tout moment au menu pour vos utilisateurs. On peut choisir de fixe la ligne principale, toutes nos lignes si on un header qui se décompose en plusieurs lignes, on peut désactiver cette fonction sur mobile, définir un logo différent et définir la couleur de chaque élément lorsque le header est sticky.

Attention, si on a un header sans fond (transparent) et sticky lors du scroll, il faudra faire attention à ajouter un arrière plan lorsqu’il devient sticky sinon on n’y verra plus rien.

Egalement : si on souhaite choisir un layout contained donc sous forme de container et non en pleine largeur, l’arrière plan qui s’affichera lors du scroll ne prendra pas toute la largeur de l’écran, et ce sera plutôt vilain.

Les widgets

Les widgets sont les petits outils de votre theme et que vous apporteront les plugins. On vient de voir le widget logo et primary navigation, voyons ce qu’on a d’autres.

Secondary navigation

définir une autre navigation, on peut imaginer un site pour une association ou on utiliserait le top row pour un menu comme « rejoindre l’association », et « faire un don »

vous permet d’ajouter une barre de recherche un peu idiote qui va chercher ses résultats sur l’ensemble de votre site web. Si il faut cette fonctionnalité et que vous souhaité l’intégrer plus proprement, je vous conseille d’installer un plugin fait pour comme « ajax search lite » qui vous permet d’indiquer à la barre de recherche dans quels contenus chercher ses résultats.

Button

définir un bouton pour votre header, généralement, un bouton « devis » ou « contact » par exemple

Social

Définir les icones de réseaux sociaux, en lien avec l’onglet social ou l’on peut définir les liens vers nos réseaux sociaux

Html

permet d’ajouter un peu de code pour générer autre chose que ne propose pas les widgets disponibles, par exemple, un encadré promotionnel avec un lien, une phrase, un texte, etc..

Voila notre header en version ordinateur, à tout moment, l’on peut basculer d’un écran à l’autre pour vérifier notre responsive. Automatiquement votre primary navigation va devenir un menu burger, vous avez accès à quelques réglages pour en définir l’apparence et le comportement.

On revient à notre version ordinateur, en bas de notre colonne latérale on a les différentes icones de nos différents types d’écran qui nous permettent de basculer à tout moment d’un écran à l’autre.

Le footer

Construit de la même manière que le header, on a cependant plus de marges en termes de widget pour le footer, moins de risque de faire quelque chose de trop envahissant puisque le footer est tout en bas du site.

9 widgets + la possibilité de définir le nombre de colonnes pour chaque row

Roue crampté row

général : container width, columns, layout (pourcentage d’espace écran attribué à chaque colonne), espace entre les éléments et marges
design : définir l’apparence de tous les éléments des widgets de notre row d’un coup, le background du row, border, etc..

Composer un ensemble groupé de widgets

Le footer nous permet de composer des groupes de widgets : titre, texte, image. Nous laissant la possibilité de mettre beaucoup d’informations sur notre footer. On composera nos ensemble de widgets un peu de la même manière avec gutenberg.