Comment personnaliser un thème WordPress Avec CSS
Lorsque vous voulez apprendre à personnaliser un thème WordPress avec CSS, l’une des premières choses que vous devez savoir est de savoir comment éditer des fichiers dans le thème lui-même.
Le processus d’édition des fichiers de thème est effectivement le même que vous cherchiez à personnaliser CSS ou HTML, et dans les tutoriels précédents de cette série, nous avons déjà couvert ce processus, dans le but de modifier HTML.
Donc, pour éviter de rechaper le même terrain, jetez un œil à « Comment éditer du HTML dans un thème WordPress » et « Comment installer WordPress Localement Avec XAMPP » pour en savoir plus:
- Édition de fichiers via l’éditeur de thème
- Téléchargement et téléchargement de fichiers via FTP ou une connexion à distance
- Pourquoi devriez-vous envisager d’apporter vos modifications dans un thème enfant
- Édition hors ligne via XAMPP
Avec les méthodes d’édition de fichiers de thème déjà couvertes, dans ce tutoriel, nous resterons concentrés sur la façon de modifier css dans WordPress en apprenant sur ces sujets:
- Comment ajouter du CSS personnalisé via le personnalisateur de thème
- Comment identifier la ou les feuilles de style qu’un thème utilise
- Comment identifier quel CSS doit être modifié et où, afin de personnaliser une partie spécifique d’un thème
Remarque: Cet article suppose que vous avez une connaissance de base du CSS, mais pas nécessairement de la façon dont pour modifier CSS dans WordPress.
Thèmes et plugins WordPress Premium
Avant de commencer, n’oubliez pas que vous pouvez explorer les milliers de thèmes WordPress sur ThemeForest et les plugins WordPress sur CodeCanyon. Achetez ces thèmes et plugins WordPress de haute qualité et améliorez l’expérience de votre site Web pour vous et vos visiteurs.
Comment modifier CSS dans le personnalisateur de thème WordPress
WordPress dispose d’un espace dédié dans lequel vous pouvez ajouter votre propre code CSS personnalisé. Ce code sera chargé au bon moment pour s’assurer qu’il remplace le style par défaut du thème, et l’utilisation de cette approche n’apporte aucune modification directe aux fichiers de thème.
Dans le menu latéral gauche de votre panneau d’administration WordPress, accédez à Apparence > Personnaliser:
Cela vous mènera à la zone de personnalisation du thème, où vous pouvez cliquer sur l’élément de menu CSS supplémentaire:
Un grand champ apparaîtra, dans lequel vous pourrez ajouter n’importe quel CSS personnalisé que vous aimez:
Enregistrez vos modifications en cliquant sur le bouton bleu Publier en haut de la barre latérale gauche lorsque vous avez terminé d’ajouter du code personnalisé.
Comment identifier la ou les feuilles de style d’un thème
Si vous ne souhaitez pas utiliser la zone CSS supplémentaire dans le personnalisateur de thème et que vous souhaitez plutôt modifier directement le CSS du thème, vous aurez besoin d’un moyen de savoir quels fichiers un thème utilise réellement pour le style.
Dans la plupart des cas, les thèmes utiliseront la structure standard de WordPress et auront un fichier nommé « style.css » dans le répertoire racine du thème. En fait, il s’agit d’un fichier de thème essentiel, vous le trouverez donc toujours dans n’importe quel thème.
Cependant, lorsque vous l’ouvrez pour l’édition, vous pouvez trouver qu’il est vide de code et que le développeur charge le style d’ailleurs dans le thème. Ou, vous pouvez même trouver qu’ils se chargent dans plusieurs fichiers de feuille de style.
Il existe deux façons de vérifier quelles feuilles de style sont utilisées par un thème.
Code de la tête d’inspection
La première méthode consiste à inspecter le code <head> du thème. Vous pouvez le faire en cliquant avec le bouton droit de la souris n’importe où sur la page et en choisissant Afficher la source de la page, puis en localisant les balises <head>...</head>.
Entre ces balises, recherchez les éléments <link> qui ont également rel='stylesheet'. Ensuite, regardez lesquels proviennent du répertoire de votre thème. Les URL des feuilles de style vous indiqueront où les trouver dans la structure du thème.
Notez que si vous exécutez un plugin qui combine et réduit toutes les feuilles de style de votre site en un seul fichier, cette technique ne fonctionnera pas, car tout ce que vous verrez est l’URL de ce fichier unique. Au lieu de cela, utilisez la technique deux, en vérifiant le fichier de fonctions.
Vérification du fichier de fonctions
Chaque fois qu’un thème utilise une feuille de style, il doit indiquer à WordPress quel fichier il souhaite utiliser, via une fonction nommée wp_enqueue_style(). Ainsi, nous pouvons voir exactement quelle (s) feuille(s) de style le thème charge en trouvant son utilisation de cette fonction.
Chaque thème a un fichier nommé « fonctions.php » situé dans son répertoire racine. L’utilisation de la fonction wp_enqueue_style() se trouve généralement dans ce fichier, alors ouvrez-la et commencez à rechercher le nom de la fonction.
Lorsque vous localisez des instances de la fonction wp_enqueue_style(), recherchez entre les parenthèses le deuxième paramètre, c’est-à-dire le bit de texte après la première virgule. Ce texte vous indique l’emplacement de la feuille de style. Exemple:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
Dans le code ci-dessus, le deuxième paramètre est:
get_template_directory_uri() . '/css/mainstyle.css')
Cela nous indique que la feuille de style se trouve dans un sous-répertoire de thème nommé « css » et que son nom de fichier est « mainstyle.CSS ».
Comment identifier les CSS à modifier
Une fois que vous savez comment ajouter ou modifier des CSS de thème, la prochaine chose à apprendre est de savoir quel code vous devez réellement changer.
La meilleure façon de le faire est d’utiliser les outils de développement de votre navigateur, idéalement Chrome ou Firefox en raison de la qualité de leurs outils.
Disons, par exemple, que vous souhaitez modifier la taille de la police de vos titres de publication. Faites un clic droit sur l’un des titres de publication et sélectionnez l’option Inspecter:
Cela ouvrira le panneau Outils de développement. Recherchez dans son onglet Styles une propriété font-size.
Si vous n’en voyez pas, le navigateur peut vous montrer un élément parent ou enfant, donc dans l’onglet Éléments, essayez de cliquer sur les éléments à proximité jusqu’à ce que vous trouviez un élément qui met en évidence avec précision la forme du texte du titre de l’article et possède une propriété font-size:
Maintenant, dans l’onglet Styles, essayez de modifier la valeur de la propriété font-size. Si le texte change de taille dans la fenêtre du navigateur, vous savez que vous avez trouvé le bon CSS.
Pour savoir où se trouve ce CSS dans la feuille de style, regardez en haut à droite de l’endroit où vous venez de modifier la valeur font-size. Vous devriez voir un nom de fichier, puis deux points, puis un nombre.
Le nom de fichier vous indique dans quelle feuille de style se trouve le code et le numéro après les deux points vous indique sur quelle ligne vous trouverez ce code. Par exemple, l’image ci-dessus montre le code du « style.fichier css » à la ligne 4054. Si vous modifiez directement la feuille de style du thème, vous pouvez maintenant l’ouvrir, accéder au numéro de ligne en question et modifier le CSS.
Si vous travaillez dans le champ CSS supplémentaire du Personnalisateur de thème, ou dans un thème enfant, vous devrez également cibler le même sélecteur que le CSS d’origine, afin de pouvoir le remplacer avec votre propre style.
De retour dans les outils de développement du navigateur, recherchez le sélecteur situé au-dessus de la propriété font-size que vous venez de modifier. C’est à gauche du fichier de feuille de style et de la spécification du numéro de ligne que nous venons de regarder.
Copiez tout ce sélecteur et collez-le dans votre code personnalisé, puis utilisez-le pour cibler correctement votre valeur font-size modifiée.
Vérifiez toujours les options de thème intégrées
Avant de vous donner la peine de personnaliser CSS, vérifiez toujours dans le Personnalisateur de thème les options que le développeur a peut-être déjà intégrées au thème.
Les thèmes ont souvent des options de personnalisation assez complètes qui ne nécessitent pas de code personnalisé. Ainsi, avant de modifier un CSS, vous pouvez vous faire gagner beaucoup de temps en voyant s’il existe déjà un moyen par bouton-poussoir d’apporter la modification dont vous avez besoin.
Comment personnaliser un thème WordPress Étape par étape
Maintenant que nous avons parlé de la façon de personnaliser le CSS et le HTML d’un thème WordPress, vous ne savez peut-être pas par où commencer. Résumons donc les choses à une liste de base des étapes à suivre:
- Vérifiez le Personnalisateur de thème pour voir s’il existe déjà une option disponible qui peut faciliter la modification que vous souhaitez apporter
- Sinon, et vous devez ajouter du CSS personnalisé simple, utilisez le champ CSS supplémentaire dans le personnalisateur de thème
- Si vous devez effectuer des personnalisations plus étendues en HTML ou CSS, envisagez de les faire dans un thème enfant
- Pour apporter de petites modifications directement à le thème, utilisez l’éditeur de thème intégré WordPress
- Pour des modifications plus approfondies directement sur un thème, utilisez FTP, une connexion à distance ou travaillez complètement hors ligne avec XAMPP
- Une fois votre méthode d’édition sélectionnée, identifiez la ou les feuilles de style du thème en inspectant le code
<head>de votre site ou en consultant les « fonctions » du thème.php « pour l’utilisation de la fonctionwp_enqueue_style() - Localisez les lignes spécifiques de CSS que vous devez modifier, et leurs sélecteurs associés, en utilisant la fonction d’inspection des outils de développement Chrome ou Firefox
Lorsque vous creusez dans tout ce qui précède et que vous vous familiarisez, vous commencerez à voir à quel point WordPress est personnalisable.
Avant de le savoir, vous créerez vos propres thèmes enfants complètement originaux et créerez vos propres designs.
Et il se trouve que l’apprentissage de « Comment créer un thème Enfant dans WordPress » est le prochain tutoriel à venir dans cette série. Restez à l’écoute !