• 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 20/12/2018

Ajustez votre thème WordPress

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nos débuts en matière de personnalisation de thème vont se passer directement au sein du personnaliseur de thèmes, accessible via Apparence > Personnalisation dans la barre latérale du tableau de bord WordPress. Ces modifications vont vous aider à comprendre l’esprit de WordPress en matière de design, des mises en pages grandioses aux menus et widgets individuels.

Le thème Sydney sera la base de chaque exemple de ce chapitre, mais la plupart des opérations de personnalisation que je vous montrerai sont également disponibles avec d’autres thèmes WordPress. Nous verrons comment modifier les éléments du menu suivants :

  • Page d’accueil statique

  • Titre / sous-titre / logo du site

  • En-tête

  • Pied de page

  • Couleurs

  • Widgets

Pour rappel, voici à quoi ressemble le thème Sydney par défaut. Il n’y a pas un grand rapport avec le groupe de rock qui me commande ce site, mais à la fin de ce chapitre, le site aura des images personnalisés et des menus et des textes spécifiques au contenu.

Apparence par défaut du thème Sydney
Apparence par défaut du thème Sydney

En parcourant les thèmes, vous vous rendrez compte que nombre d’entre eux ont des menus de personnalisation très similaires. Ce que nous allons voir sur le thème Sydney vous sera utile, quel que soit le thème que vous utiliserez !

La page d’accueil statique

Un inconvénient, quand on change de thème (comme nous venons de le faire en passant du thème WordPress par défaut à Sydney), est que les paramètres de disposition de la page d’accueil et de celles des posts sont parfois réinitialisés. Ce sont les paramètres que nous avions modifiés dans Réglages > Lecture pour changer la page qui servirait de page d’accueil. Mais pas d’inquiétude ! Le menu de personnalisation de Sydney nous fournit un onglet pour effectuer cette manipulation directement : il suffit de se rendre en bas du menu de personnalisation, de cliquer sur Page d’accueil statique, et de remettre “Accueil” comme page d’accueil, et “Blog” comme page de posts.

Ou sinon, vous pouvez aussi retourner dans Réglages > Lecture, exactement comme vous l’avez fait précédemment.

Titre, sous-titre et logo

Je vais maintenant vous montrer comment gérer le titre et le sous-titre du site (également accessibles via les paramètres généraux). Personnellement, je ne suis pas fan des sous-titres, sauf si il y a vraiment besoin d’une ligne supplémentaire pour décrire le site. Dans ce cas, on peut l’ajouter dans le panneau de personnalisation !

La mise en ligne d’un logo est une fonctionnalité disponibles dans de nombreux thèmes WordPress, ce qui nous arrange bien puisque l’un des critères du groupe était d’avoir son logo en haut à gauche du site.

En théorie, votre client devrait vous avoir fourni son propre logo, mais puisque Cat Avalanche n’existe pas réellement (chuuut, ne le dites pas !), j’en ai fabriqué un en utilisant Logomakr. Il est toujours utile de savoir comment faire un logo.

Les graphismes de Halloween et de nuage de neige ont proviennent de Freepik de Flaticon et sont sous licence CC BY 3.0.

Ajout d’un logo
Ajout d’un logo

L’en-tête

Il y a 4 sections dans cette zone de personnalisation ! Nous allons voir les options de disposition de l’en-tête, et tout ce qui va avec. Dans le thème Sydney, l’en-tête est une partie très importante des éléments visuels du site, et vous saurez bientôt comment lui donner un maximum de punch.

Le type d’en-tête

Dans cette section, vous pouvez régler l’essentiel de l’apparence de chaque page, que ce soit un diaporama en plein écran ou une simple (mais élégante) image d’en-tête tout en haut. Moi, je choisis de laisser les valeurs par défaut : un en-tête en plein écran pour notre page principale qui comporte un diaporama (car elle doit restituer l’univers du groupe), et une image statique en haut des autres pages.

Réglage de la disposition de la page
Réglage de la disposition de la page
Le diaporama d’en-tête

Le groupe m’a envoyé deux photos, je vais donc mettre un bon gros diaporama en plein écran sur la page principale, pour un effet visuel au top. 😎Je choisis de laisser les durées par défaut, mais je pourrais tout aussi bien modifier le nombre de millisecondes si je voulais que les photos passent plus vite ou plus lentement. En cochant “Stop the text slider”, j’évite que le texte ne change à chaque diapositive. Les dimensions de mes images sont 1920x1275, mais Sydney ajustera l’image quelle qu’elle soit, pour l'afficher au mieux !

À présent, définissons un texte pour nos deux diaporamas. En bas, on peut également définir un bouton “call to action.” Comme mon groupe cherche avant tout à faire la promotion de ses tournées, je vais choisir de faire de mon bouton un lien vers la page des tournées.

La page actualisée avec sa nouvelle disposition
La page actualisée avec sa nouvelle disposition
Image d’en-tête

De nombreux thèmes proposent au moins deux types de disposition différents que vous pouvez appliquer aux pages en fonction de leur contenu. En ce qui concerne Sydney, on nous propose le cas d’un diaporama dynamique comme ci-dessus, ainsi qu’un cas statique. L’onglet image d’en-tête vous permet de personnaliser ce second type de disposition.

J’ai choisi une photo en noir et blanc du groupe en guise d’en-tête passe-partout.

L’image d’entête actualisée
L’image d’entête actualisée

Le pied de page

Vous pensez que les pieds de page sont des éléments accessoires ? Tout faux ! Un pied de page propre et simple est votre dernière chance d’amener le visiteur vers d’autres pages de votre site ou de lui donner accès à du contenu crucial avant qu’il n’ait la flemme de remonter… Et heureusement, WordPress intègre les pieds de page comme des éléments à part entière de chaque page. Lorsque vous concevez de grands éléments comme les en-têtes, les pieds de page et les barres latérales dans WordPress, vous devez les imaginer comme un assemblage de blocs de contenu appelés widgets.

Dans le cas de Sydney, l’onglet de personnalisation du pied de page ne vous demande pas d’ajouter un contenu spécifique, mais uniquement de renseigner le nombre de widgets (sections de contenu) que vous souhaitez avoir. Une liste des pages du site et des informations de contact feraient un beau pied de page, non ? Pour inclure ces deux éléments, je vais sélectionner deux widgets, que j’ajouterai plus tard.

Sélection des widgets de pied de page
Sélection des widgets de pied de page

Les couleurs

Tous les thèmes WordPress vous permettent de changer les couleurs, que ce soit à l’aide de l’éditeur (HTML ou CSS) ou directement dans le personnaliseur de thème. Mais comment fait-on pour choisir les bonnes couleurs ?! Si vous utilisez déjà des images pour construire votre site, il serait bon de choisir des couleurs qui viennent compléter ces images. Dans le cas contraire, si vous réalisez un site pour une entreprise, pensez bien à demander leur charte graphique ; en général, ils connaissent les codes hexadécimaux (couleur à 6 chiffres qui commence par un dièse) utilisés dans leur logo et leurs autres éléments graphiques !

Comme Cat Avalanche m’a donné des photos cool à utiliser sur leur site, je vais rapidement ouvrir Photoshop et sélectionner un jaune présent dans mon image, pour l’utiliser comme “couleur primaire”. #ffcf63  a l’air plutôt sympa, et s’accorde bien avec la photo !

J’ai également défini le noir comme couleur d’arrière-plan, mais ça rend l’espace autour du texte un peu serré à mon goût. Je pourrai changer ça dans l’éditeur au prochain chapitre !

Harmonisation des couleurs du site avec l’image
Harmonisation des couleurs du site avec l’image

Les menus

Dans l’onglet de personnalisation du menu, je peux ajouter un menu et l’appeler Navigation principale. Ensuite, je vais “Ajouter un élément”, sélectionner des pages, et ajouter individuellement toutes les pages que je veux dans mon menu supérieur. Je coche la case pour en faire mon menu principal, ce qui va automatiquement le placer en haut de mon site ! Lorsque vous ajouterez vos propres menus, glissez et déposez les éléments du menu pour les réorganiser de gauche à droite.

En cochant la deuxième case, on peut aussi ajouter automatiquement les pages de premier niveau à ce menu.

Menu de navigation supérieur
Menu de navigation supérieur

Les widgets

La section “Widgets” vous permet, en général, de décider de ce que seront vos widgets et de l’endroit où vous allez les mettre. La première option de ce menu est “Sidebar”. Personnellement, je préfère les barres latérales minimalistes voire inexistantes. Je peux donc choisir de supprimer tous les éléments présents dans la barre latérale un à un, en particulier les fonctionnalités de blog qui ne sont pas pertinentes pour mon client, à la recherche d’un site plus général.

J’enlève tout sauf la recherche de ma barre latérale.
J’enlève tout de ma barre latérale, sauf la recherche.

À présent, souvenez-vous de ce que je vous ai dit concernant l’ajout de blocs de contenu aux principaux éléments du site comme le pied de page. Nous pouvons désormais ajouter ces blocs comme nous le souhaitons. Dans ce menu, le pied de page est présenté comme un conteneur de widgets. Dans Pied de page 1, j’ajoute la liste de mes pages, et le titre “Cat Avalanche”.

La liste des pages ajoutée au pied de page
La liste des pages ajoutée au pied de page

Dans le deuxième widget du pied de page (Pied de page 2), j’ajoute le texte du menu afin d’avoir le HTML approprié :

<a href="http://twitter.com">Twitter</a> - <a href="http://facebook.com">Facebook</a> - <a href="http://instagram.com">Instagram</a></p>
<p><strong>Adresse :</strong></p>
<p>9862 E. 14th St #7A</p>
<p>New York, NY 10014</p>
<a href="mailto:>catavalanchenyc@gmail.com">catavalanchenyc@gmail.com</a>

 

Mon pied de page final avec 2 widgets (pages et contact)
Mon pied de page final avec 2 widgets (pages et contact)

Un bien joli pied de page ! Voici la liste de tous les widgets que vous pourriez inclure à un endroit ou un autre de votre site, tel que le pied de page ou la barre latérale. C’est à vous de décider comment ils s’assembleront :

  • Archives : Les archives mensuelles de vos posts.

  • Calendrier : Un calendrier de vos posts.

  • Catégories : Une liste ou un menu déroulant des catégories.

  • Menu personnalisé : Pour ajouter un menu personnalisé à votre barre latérale.

  • Pages : La liste des pages de votre site.

  • Commentaires récents : Les derniers commentaires de votre site.

  • Posts récents : Les derniers posts de votre site.

  • RSS : Les titres de n’importe quel flux RSS ou Atom.

  • Recherche : Un moteur de recherche pour votre site.

  • Nuage de mots-clés : Un nuage des mots-clés les plus utilisés sur votre site.

  • Texte : N’importe quel texte ou HTML.

Vous commencez désormais à bien comprendre comment personnaliser un thème directement à l’aide du personnaliseur de thème. Ce dernier pourra varier un peu en fonction du thème que vous aurez choisi, mais le procédé restera très similaire. Pour pouvoir personnaliser encore plus notre thème, nous allons à présent mettre le nez dans le CSS, ainsi que dans les plugins qui vont nous permettre d’étendre des fonctionnalités du site.

Exemple de certificat de réussite
Exemple de certificat de réussite