Personnalisez l’apparence du site grâce au customizer

#Accédez au customizer et ajoutez votre logo

Regardez la vidéo de démonstration pour suivre les étapes clés.

Pour modifier l’apparence de son site WordPress, il y a un outil très pratique, le customizer. Pour l’utiliser, rendez-vous dans Apparence >> Personnaliser. 

La page se compose de deux sections : une colonne de gauche présentant les différentes options modifiables, et une zone de prévisualisation à droite permettant aussi de modifier directement certains éléments en cliquant sur l’icône crayon sur fond bleu.

Comme nous l’avons vu précédemment, le thème actuellement utilisé est le thème Twenty Seventeen. Nous verrons plus tard que, lorsque nous changerons de thème, les options décrites ci-dessous seront remplacées par des options bien plus complètes pour personnaliser l’apparence du thème.

#Ajoutez votre logo

1. Cliquez sur "Identité du site” dans la colonne de gauche.

2. Cliquez sur "Sélectionnez un logo” et sélectionnez le logo dans les fichiers que vous avez téléchargés au début du cours.

L’image est visible à gauche du titre !

#Ajoutez un favicon

Le favicon est la petite icône visible dans l’onglet de votre navigateur à gauche du nom de la page courante. Il est important de la personnaliser pour permettre aux utilisateurs de facilement identifier votre site parmi les onglets ouverts. WordPress permet de la personnaliser facilement, ainsi que les icônes de favoris qui apparaîtront sur mobile, etc., depuis le customizer.

Cette image devrait idéalement faire 512 px sur 512 px et être carrée. Préférez une image très simple sur fond transparent pour qu’elle soit lisible lorsqu’elle est affichée en très petit dans l’onglet.

1. Pour cela, cliquez sur “Sélectionnez l'icône du site” sous le titre “Icône du site” (la traduction de favicon).

2. Sélectionnez le favicon dans vos fichiers de travail.

#Modifiez les options d’apparence du thème

Regardez la vidéo de démonstration pour suivre les étapes clés.

Nous allons maintenant nous attaquer aux options du customizer qui sont liées au thème WordPress installé. Pour revenir à la liste des options, cliquez sur la petite flèche pointant à gauche à côté de “Identité du site”.

#Couleurs

1. Pour commencer, cliquez sur “Couleurs” dans la colonne de gauche. Vous aurez le choix entre différents “jeux de couleurs” : clair, foncé et personnalisé. 

2. Cliquez sur le bouton “foncé” et vous constaterez que l’arrière-plan de votre site passe instantanément de blanc à noir !

#Widgets

Les widgets vous permettent d'ajouter du contenu ou des fonctionnalités à des zones spécifiques de votre site web (barre latérale ou pied de page). Tout ça sans nécessiter de compétences en programmation avancée !

1. Cliquez sur “Blog” dans le menu de navigation. 

2. Faites quelques changements dans la colonne latérale du blog. Par exemple, ajoutez une image en dessous de la barre de recherche.

#Options du thème

1. Revenez à la liste des options en cliquant sur la flèche de gauche en haut de la colonne.

2. Sélectionnez maintenant “Options du thème”. 

Comme leur nom l’indique, les options proposées ici dépendent du thème utilisé. Vous pouvez voir que Twenty Seventeen propose des options relatives :

• à la mise en page du site (1 ou 2 colonnes) ;

• au contenu affiché dans les différentes sections de la page d’accueil.

Comme évoqué, nous allons changer de thème dans la suite du cours, il n’y a donc pas lieu de s’attarder sur ces options. N’hésitez cependant pas à jouer avec !

#En résumé

• L’apparence générale du site (logo, favicon, couleurs, mise en page…) se personnalise grâce au “customizer” dans Apparence >> Personnaliser.

• Le customizer permet de prévisualiser instantanément les modifications effectuées.

• Certaines options sont communes quel que soit le thème choisi, d’autres dépendent de ce dernier.

Voilà, nous avons fini notre tour d’horizon de l’interface d’administration WordPress. Vous allez maintenant pouvoir vous lancer dans votre projet de site !