Que ce soit en créant votre propre thème WordPress, un thème enfant de son parent ou en modifiant un thème, vous devrez ajouter votre propre feuille de style CSS personnalisée. Très probablement, vous voudrez également remplacer certains styles de la feuille de style de thème par défaut.
Il existe plusieurs façons d’ajouter vos propres styles et / ou de remplacer les styles par défaut. Alors, quelle est la meilleure façon de le faire? Les développeurs conviendront que c’est en créant vos propres fichiers CSS personnalisés et en les intégrant dans le thème WordPress sur lequel vous travaillez.
Façons d’ajouter du code CSS personnalisé aux thèmes WordPress
Nous ne parlerons pas de façons dépréciées d’ajouter des styles CSS dans des éléments HTML, ou d’ajouter des blocs < style >. De nos jours, ces méthodes sont abandonnées par les développeurs. De plus, ils ne sont pas adaptés au référencement, ce qui est une question importante à prendre en compte de nos jours.
Nous ne suggérerons même pas d’éditer la feuille de style CSS originale du thème (généralement style.css), ou en y ajoutant du code personnalisé. Ce fichier est souvent très volumineux et difficile à gérer. Toute petite erreur de frappe ou erreur de syntaxe pourrait entraîner le blocage de l’ensemble du site.
Dans cet article, nous allons vous montrer comment créer un fichier CSS personnalisé et l’intégrer dans un thème WordPress.
Il existe plusieurs méthodes pour ajouter du code CSS personnalisé aux thèmes WordPress. Quelle est la meilleure pratique?
Comment ajouter des fichiers de feuille de style personnalisés à des thèmes WordPress à l’aide de wp_register_style() et wp_enqueue_style()
La première étape de l’intégration de fichiers CSS personnalisés à WordPress consiste à ajouter des fichiers à votre thème. À l’aide d’un client FTP ou de votre gestionnaire de fichiers cPanels, localisez votre dossier de thème et ouvrez-le. Vous pouvez maintenant créer un nouveau fichier et un nouveau nom, par exemple personnalisé.css ou téléchargez le fichier CSS depuis votre ordinateur. Si vous devez ajouter plus d’un fichier CSS à votre thème WP, répétez cette étape.
Si vous avez terminé cette étape correctement, vous devriez voir votre ou vos fichiers CSS personnalisés dans votre éditeur de thème d’installation WordPress.
Liaison de fichiers CSS personnalisés la section head du site
Maintenant que vous avez ajouté vos fichiers CSS personnalisés à votre dossier de thème WP, il est temps de lier les fichiers à la section head < head > de votre site. De cette façon, le site peut appliquer vos styles personnalisés à ses éléments.
Vous pouvez simplement ajouter un élément <link > à la section <head > de votre site, de préférence juste avant la balise de fermeture </head >. De cette façon, les styles CSS personnalisés se chargent en dernier et remplacent les styles par défaut. La section < head > de votre site se trouve généralement dans l’en-tête de votre dossier de thème.fichier php et est accessible via l’éditeur de thème WordPress.
Voici un exemple de l’élément lorsque votre site se trouve dans le dossier « test-site » dans le dossier racine de votre serveur, votre dossier thème s’appelle « test-theme » et votre fichier CSS s’appelle « custom.css »:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">Cette solution simple fonctionnera bien, mais ce n’est pas la meilleure pratique d’intégrer des fichiers CSS dans des sites WordPress.
Intégrer un fichier CSS dans WordPress à l’aide des fonctions wp_register_style() et wp_enqueue_style()
La pratique recommandée pour intégrer des fichiers CSS personnalisés à votre site WordPress consiste à enregistrer votre feuille de style dans les fonctions de votre thème WP.fichier php utilisant les fonctions wp_register_style() et wp_enqueue_style(). De cette façon, vos fichiers CSS se chargeront au moment où l’action wp_head sera déclenchée. Votre feuille de style sera positionnée juste après la feuille de style par défaut du thème. et vous permettent de remplacer les styles par défaut.
La première chose à faire est de localiser les fonctions de votre thème.fichier php. Il est situé à l’intérieur de l’éditeur de thème WordPress. Vous pouvez également le faire en utilisant le gestionnaire de fichiers FTP ou cPanels. Si vous travaillez sur un thème enfant, modifiez le fichier de fonctions de thèmes enfants, pas celui du thème parent. De cette façon, vous éviterez de perdre votre code personnalisé lors de la mise à jour du thème parent. Faites défiler jusqu’au bas des fonctions.php et ajoutez l’extrait de code suivant:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );Personnaliser l’extrait de code: dans l’exemple ci-dessus, nous avons nommé la fonction d’enregistrement « additional_stylesheets » et enregistré un fichier CSS de feuille de style nommé « personnalisé.css », précédemment téléchargé dans notre dossier thème. Vous pouvez nommer la fonction comme vous le souhaitez et remplacer le nom de la fonction dans les rangées supérieure et inférieure du snipet. Si votre fichier de feuille de style est nommé différemment de custom.css remplacez le mot personnalisé dans le snipet par votre propre nom de fichier.
Si vous avez tout fait correctement, vous pouvez commencer à écrire votre propre code CSS dans votre feuille de style. Vous remarquerez que vos styles affectent le site lorsque vous enregistrez les modifications et rechargez la page. N’oubliez pas de nettoyer le cache de votre navigateur lors de l’actualisation de la page.
Intégration de plusieurs fichiers CSS de feuille de style personnalisés dans des fonctions.php utilisant wp_register_style() et wp_enqueue_style()
Avant d’ajouter plusieurs fichiers CSS à votre thème WP, prenez en considération le fait que cela provoque plus de demandes de serveur lors du chargement du site, ce qui affecte la vitesse de chargement de votre site. Essayez d’utiliser le moins de feuilles de style possible.
Maintenant, disons que vous avez un fichier de feuille de style distinct pour les styles de bureau nommé personnalisé.css et un deuxième fichier de feuille de style nommé responsive.css pour les appareils mobiles. Intégration des deux feuilles de style dans vos fonctions.le fichier php est simple et nécessite une légère modification de l’extrait de fichier unique illustré ci-dessus:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );Identique à la personnalisation de l’extrait de fichier unique, modifiez les noms de fichiers en fonction de votre situation.
En savoir plus sur les fonctions wp_register_style() et wp_enqueue_style()
Pour en savoir plus sur l’utilisation des fonctions wp_register_style() et wp_enqueue_style() pour enregistrer des feuilles de style, visitez la page dédiée du codex WP.