WordPress Avancé

À propos de la leçon

Modifier un thème WordPress

Ayant choisi un thème WordPress pour votre site, il y a de fortes chance que vous ayez envie de faire des modifications graphiques, par exemple de masquer certaines indications.

Notamment, les “métadonnées” des articles, comme l’auteur, la date de publication, les catégories et étiquettes, sont des éléments qu’on peut souhaiter masquer.

Plusieurs solutions

Pour supprimer ces éléments inutiles, plusieurs approches sont possibles:

Intervention en surface: masquer les éléments avec des styles CSS personnalisés.
Intervention en profondeur: modifier les templates et la boucle du thème utilisé, idéalement en utilisant un thème enfant.

CSS personnalisé

procédons dans l’ordre :

Trouver un moyen pour ajouter du CSS personnalisé .
Identifier les éléments que nous voulons masquer.
Ecrire le CSS destiné à masquer ou modifier ces éléments.

il est a present possible ( depuis la version 4.7 )possible d’ajouter du CSS personnalisé avec l’outil Personnaliser.

Vous trouverez cette option sous Apparence > Personnaliser, dans la section nommée CSS additionnel. Les styles seront chargés dans l’en-tête de votre site. Voila donc un bon moyen de surchager les styles de votre thème.

Ajout de CSS additionnel

Le CSS personnalisé sera sauvegardé séparément pour chacun de vos thèmes.

Trouver le code à modifier

A present, nous devons trouver quel est le code correspondant à l’élément que nous souhaitons masquer ou modifier

Supposons que la présence des dates de publication au-dessus des titres nous déplait, et que nous souhaitons les masquer.

Nous allons utiliser l’inspecteur de notre navigateur, pour détecter les identifiants ou classes à utiliser pour masquer la date.

Faites un clic-droit sur l’élément qui vous intéresse, et choisissez “Inspecter”.

Avec l’inspecteur, vous pouvez parcourir le code, et trouver le nom( classe,ou id ) de l’element l’élément à masquer.

L’élément <header class="entry-header">contient la date et le titre. L’élément <div class="entry-meta"> contient la date uniquement.

C’est donc cet élément que nous souhaitons masquer.
Nous allons le cibler en utilisant sa classe, .entry-meta.

Si nous ajoutons le code suivant à notre CSS custom:

.entry-meta { display: none; }

Note: la propriété display avec la valeur none permet de masquer un élément.

Résultat: la date est masquée… mais il faudrait ajouter un peu d’espace au dessus du titre pour une meilleur presentation

L’inspecteur nous indique que la marge du bas (padding-bottom) est de 6px… et que la marge du haut est tronquée par le code suivant:

.entry-meta + .entry-title a { padding-top: 0; margin-top: -6px; }

Nous allons reprendre ce code, en modifiant les valeurs:

.entry-meta + .entry-title a { padding-top: 6px; margin-top: 0px; }

Un autre exemple…

Nous pouvons voir que chaque article affiche apres l’article une section “Posté dans… Tagué…” qui peut etre inutile

Ici encore, l’inspecteur nous donne le nom de cette zone:

<footer class="entry-footer">

Essayons le code CSS custom suivant:

.entry-footer { display: none; }

Conclusion

Il est assez facile en se servant de l’inspecteur du navigateur, de trouver les classes CSS des éléments que l’on souhaite masquer ou modifier.

Mais cette méthode a ses limites:

Vous ne pouvez pas faire de versionnement de votre code.
Vous ne bénéficiez pas des automatismes d’un éditeur de code qui pourrait vous aider à écrire du CSS correct.
Vous ne pouvez pas diviser votre code en plusieurs feuilles de style.
Vous ne pouvez pas modifier les templates ou fonctions du thème.

Pour éviter ces limitations et élargir les possibilités de personnalisation, il est recommandé de créer un thème enfant.

Autre méthode pour modifier l’apparence d’un thème WordPres

Les outils

Inspection les éléments à personnaliser sur notre site, vous pouvez d’ailleurs ouvrir votre inspecteur d’éléments dès à présent.

Google Chrome : Clique droit > Inspecter ou touche CTRL+Maj+I
Internet Explorer : touche F12
Firefox : Clic sur l’icon en haut à droite de votre navigateur Firefox

Un onglet s’ouvre, le code qui si trouve est le code de votre site . La lecture de ce code va nous permettre de repérer des éléments physiques dans le code, on va en gros inspecter les informations normalement cachés aux visiteurs pour pouvoir les repérer et les modifier rapidement.

Un autre outil va nous permettre ensuite de connaitre dans quels fichiers se trouvent le code de nos éléments , installez le plugin String Locator dans WordPress.

Le code CSS

Le CSS est un codage qui permet de definir un style sur votre texte, section, bloc, de mettre en forme votre design.
Avec le CSS on peu par exemple changer les couleurs, la taille, l’emplacement… d’un élément, que ce soit du texte, une image ou tout autres éléments que l’on souhaite personnaliser.

Le CSS est présent partout dans votre thème, on peu le changer en ajoutant des propriétés et ajouter des règles, voici la structure.

Dans un fichier ‘html’ on trouvera une règle(class ou id) suivi d’un nom autour d’un élément :

<div class=”nom-regle”>un texte,image, bloc...</div>
<div id=”nom-regle”>un texte,image, bloc...</div>
<span class=”nom-regle”>un texte,image, bloc...</div>

Dans la feuille de style.css de notre thème on nomme notre règle, et on lui ajoute des propriétés et des valeurs :

.nom-régle {
propriété-1: valeur;
propriété-2: valeur;
propriété-3: valeur;
}

Un exemple :

Dans un article ou un fichier je met une règle phraserouge autour de mon texte :

<div class="phraserouge">Cette phrase est écrite en rouge est mis en gras avec une taille de 15px</div>

Dans mon fichier style.css je met ma règle avec des propriétés et des valeurs :

.phraserouge {
font-size: 15px;
font-weight: bold;
color: #FF0000;
border: 1px solid #DDDDDD;
padding: 10px;
}

le résultat :

Cette phrase est écrite en rouge est mis en gras avec une taille de 15px

Qu’est ce que j’ai fait ?

– j’ai defini une taille de police avec la propriété font-size en lui donnant la valeur 15px
– j’ai mis le texte en gras avec la propriété font-weight en lui donnat la valeur bold
– j’ai mis le texte en rouge avec la propriété color en lui donnant une valeur rouge: #FF0000
– j’ai mis un contour avec la propriété border en ajoutant la valeur solid(trait solide) autour du texte avec une épaisseur de 1px et une couleur grise avec la valeur #DDDDDD
– j’ai agrandi la marge entre le texte et le contour avec la propriété padding et une valeur de 10px

On peut alors voir ce qu’on vient de faire avec l’inspecteur de code du navigateur.

Pour conclure

L’inspecteur d’éléments permet donc également d’apporter des modifications en direct sur le site, mais il faut ensuite reporter les modifications dans le fichier styles.css. On peut donc tester la personnalisation des éléments et voir le résultat puis les reporter dans le fichier styles.css.

Visits: 0