Où ajouter du CSS personnalisé dans WordPress • WPShout

Il y aura des moments où vous travaillez sur un site WordPress lorsque vous souhaitez ajouter du CSS personnalisé.

Pourquoi voudriez-vous faire ça? Cela peut être dû à l'une des raisons suivantes:

1. Pour ajouter un nouveau style à un thème qui n’a pas été défini (par exemple, ajouter une nouvelle requête multimédia pour un point d’arrêt particulier).
2. Pour changer le style d'un élément dans un thème que vous utilisez.
3. Pour ajouter ou modifier les styles par défaut d'un plugin.

Dans les premier et deuxième cas, si vous n'avez qu'une petite quantité de code à modifier, l'ajout d'un extrait de code CSS personnalisé est généralement le moyen le plus simple d'obtenir l'effet souhaité.

Nous allons bientôt examiner les différentes façons d'ajouter du CSS personnalisé WordPress, mais voyons d'abord comment fonctionne le CSS.

La cascade CSS

le Cascade est l'ensemble de règles qui décide lequel des nombreux styles sera appliqué. Étant donné que généralement un seul style peut être appliqué à un élément, une règle CSS doit l'emporter sur les autres.

Il existe quelques exceptions et solutions de contournement à ce principe, comme cette méthode pour créer des arrière-plans multicolores en CSS:

Mais en général, la règle tient.

Deux choses aident le navigateur à décider du style à appliquer: largeur et spécificité.

• La bonne largeur = le bon choix d'élément (s) HTML et pas d'autres.
• La bonne spécificité = votre déclaration CSS l'emporte sur les autres qui ciblent le ou les mêmes éléments.

Pour éviter de vous déchirer les cheveux, lisez l'article de Fred sur le changement de CSS de la bonne manière. Il contient des exemples pratiques vous montrant comment cibler correctement vos styles.

Si vous souhaitez approfondir la spécificité CSS, je vous recommande de lire CSS Specificity Wars d'Andy Clarke, qui explique magnifiquement ce concept. (C'est encore plus gratifiant si vous êtes un fan de Star Wars!)

Comment le CSS est-il appliqué dans WordPress?

Si vous avez déjà inspecté le code d'un site WordPress typique, vous aurez remarqué qu'il existe généralement de nombreuses feuilles de style chargées à partir de plusieurs sources.

Comment WordPress décide-t-il lequel charger en premier? Il a un ordre spécifique dans lequel les styles CSS sont mis en file d'attente.

L'ordre général est, du premier au dernier:

1. Plugins
2. Thème enfant
3. Thème parent
4. Personnalisateur

L'autre facteur déterminant est priorité de crochet. Si vous n'êtes pas familier avec les hooks, lisez notre article sur les hooks WordPress pour une introduction.

En un mot, les hooks sont des emplacements dans les thèmes ou les plugins où les fonctions peuvent être exécutées. Comme plusieurs fonctions peuvent être attachées à des hooks, WordPress a besoin d'un moyen de déterminer l'ordre dans lequel elles seront exécutées. C'est là que priorité entre.

La priorité par défaut pour une fonction accrochée – ou rappel – est 10. Un rappel avec un nombre inférieur à celui-ci s'exécutera plus tôt, et une fonction avec un nombre plus élevé s'exécutera plus tard.

Pour les styles CSS, cela signifie que si vous essayez de remplacer un style, vous voulez que votre code soit chargé avec une priorité plus élevée que la feuille de style d'origine.

Où vous pouvez ajouter du CSS personnalisé WordPress

Voici trois endroits principaux où vous pouvez ajouter du CSS personnalisé à WordPress.

• Thèmes
• Plugins
• Personnalisateur WordPress

Jetons un coup d'œil à ces derniers.

1. Votre thème style.css Fichier

La manière la plus évidente de modifier le style d’un thème consiste à modifier le style.css fichier.

En supposant que vous n'écrivez pas votre propre thème à partir de zéro, il existe plusieurs façons de procéder. Voyons celui que vous devriez ne pas faire en premier.

La voie dangereuse est d'aller à Apparence> Éditeur de thème directement. Si vous essayez ceci avec votre thème actif, vous verrez un avertissement comme celui-ci:

Le problème avec cette méthode est que vous modifiez le fichier directement sur le serveur. Si vous faites une erreur et que vous l'enregistrez, vous ne pourrez pas récupérer votre original style.css fichier de retour. Autrement dit, sauf si vous avez une sauvegarde, ou supprimez le thème et réinstallez-le. Dans les deux cas, vous perdrez vos dernières personnalisations.

le plus sûr est de créer un thème enfant, comme l'indique le message. De cette façon, vous laissez votre thème parent intact si le pire devait arriver. Les thèmes enfants sont également les meilleures pratiques pour WordPress et sont essentiels si vous souhaitez modifier des modèles ou des fonctions de votre thème.

Lorsque vous avez créé un thème enfant, vous devez modifier votre style.css fichier dans un éditeur de texte et téléchargez votre fichier modifié via FTP. Si vous souhaitez être plus avancé, vous pouvez utiliser un système de contrôle de version comme Git pour suivre les modifications de fichiers sur votre ordinateur local.

2. CSS personnalisé WordPress dans les plugins

La plupart des plugins de création de pages vous offrent une grande influence sur les styles. Par exemple, dans Beaver Builder, vous pouvez ajouter des styles à des lignes ou des modules individuels via leurs contrôles:

Cette couleur d'arrière-plan est ajoutée à une feuille de style distincte générée par Beaver Builder.

Vous pouvez également modifier les styles des éléments sur une seule page:

Mais que faire si vous ne pas comme les styles d'un plugin, mais ils sont quand même chargés?

Les bons développeurs de plugins WordPress incluront l'option de désactiver les styles dans leur plugin si vous souhaitez ajouter le vôtre. Cela peut vous éviter d'avoir à écrire des règles de style avec !important en eux pour essayer de remplacer les styles existants.

Une autre option consiste à utiliser le wp_dequeue_style () pour retirer les styles que vous ne voulez pas charger. Le hic, c'est que vous devez d'abord les identifier. Pour en savoir plus, lisez le didacticiel de Jeff Starr sur la suppression des scripts et des styles de plug-in.

Pour supprimer plus facilement les CSS indésirables, vous pouvez essayer le plugin Perfmatters, qui vous permet de contrôler les styles et les scripts du plugin jusqu'à un niveau par page.

3. Ajout de CSS dans le personnalisateur WordPress

Le personnalisateur WordPress, qui est arrivé dans WordPress 4.7, est un outil utile pour ajouter votre propre CSS, car votre CSS personnalisé est chargé après tous les autres styles.

Vous accédez à l'éditeur CSS WordPress via Apparence > Personnaliser > CSS supplémentaire dans le menu, ou simplement Apparence> Modifier le CSS, qui y redirige.

Grâce à la magie d'AJAX, tous les styles que vous ajoutez à l'outil de personnalisation seront mis à jour dans la fenêtre d'aperçu en temps réel. Une fonctionnalité utile est que vous pouvez consulter une page Web en vue de bureau, tablette ou mobile.

N'oubliez pas d'utiliser le Publier bouton pour enregistrer vos styles.

Notez que vos styles de personnalisation sont chargés en ligne dans le de votre thème. Voici un exemple:

Ainsi, le Customizer peut être utile pour tester les styles. Une fois que vous en serez satisfait, vous pourrez les transférer ultérieurement dans un thème enfant.

Où sont stockés les styles CSS personnalisés?

Vous savez probablement que le CSS personnalisé est stocké dans votre base de données WordPress. Ce que vous ne savez peut-être pas, c'est que le CSS personnalisé est un type de publication qui a révisions.

Voici une requête pour les trouver:

SELECT post_title, post_name, post_content, post_type FROM wp_posts WHERE post_type = 'custom_css';

Vous verrez que titre de l'article et après le nom les deux correspondent au thème slug et au Publier un contenu contient vos règles CSS personnalisées.

Bien qu'il soit rassurant de savoir que votre CSS personnalisé est sûr au cas où vous le supprimeriez accidentellement (!), Il n'y a pas de moyen simple d'accéder à vos révisions CSS comme vous pouvez le faire avec des révisions de publication.

Sauf si vous ajoutez un plugin.

Outils CSS personnalisés supplémentaires avec Jetpack

Les développeurs ont des opinions partagées sur le plugin Jetpack - certains l'adorent, tandis que d'autres le détestent.

Jetpack a eu une mauvaise réputation car il s'agit en fait de plusieurs plugins en un, et certaines de ses fonctionnalités sont automatiquement activées, que vous en ayez besoin ou non.

Pour mémoire, nous avons constaté que Jetpack possède des fonctionnalités utiles telles que la connexion de votre site Web à WordPress.com.

Cependant, les améliorations CSS personnalisées de Jetpack sont vraiment intéressantes.

Pour les activer, une fois que vous avez installé Jetpack, vous devez aller à Jetpack> Paramètres et basculer le Améliorer le panneau de personnalisation CSS.

En utilisant Jetpack, vous pouvez:

Voir vos 25 dernières révisions CSS personnalisées de la manière habituelle.

Vous pouvez également afficher le CSS personnalisé pour tous les autres thèmes auxquels vous l'avez ajouté.

Définissez une largeur de contenu différente pour les images en taille réelle. Vous devrez régénérer vos tailles d'image existantes si vous utilisez ce paramètre.

Nouveau départ avec CSS, en désactivant complètement le CSS de votre thème.

Cela signifie que si vous utilisez un thème parent plutôt qu’un thème enfant, vous conserverez le balisage PHP et HTML du thème, mais votre thème style.css ne sera pas chargé - vous donnant effectivement une ardoise vierge.

Si vous utilisez un thème enfant sans CSS ou avec un minimum de CSS, il se peut que vous ne voyiez aucune différence si vous utilisez cette option.

Utilisation Préprocesseurs CSS comme Sass ou LESS. Pour commencer, activez LESS ou Sass (syntaxe SCSS) dans la zone de sélection Préprocesseur.

C'est un moyen particulièrement simple de démarrer avec un préprocesseur si vous en êtes nouveau.

Lisez le message de Fred si vous voulez savoir pourquoi Sass est génial.

Voici un exemple simple, utilisant des variables Sass pour changer la couleur des liens de titre de publication dans le thème Twenty Twenty:

/ * Sass - Syntaxe SCSS * /
$ couleur1: # c6538c;
$ couleur2: # a7a7a7;
.entry-title 
une 
famille de polices: MS Serif, -serif;
arrière-plan: -webkit-linear-gradient ($ color1, $ color2);
-webkit-background-clip: texte;
-webkit-text-fill-color: transparent;

Aide, mon CSS personnalisé ne fonctionne pas!

Si votre CSS personnalisé n'apparaît pas sur la page, vérifiez les points suivants:

1. Avez-vous des règles de style dans le Customizer qui remplacent les styles que vous souhaitez appliquer? Vous pouvez vérifier cela en utilisant Inspect Element sur votre navigateur.
2. Utilisez-vous le (s) sélecteur (s) CSS correct (s)?
3. Est votre style spécifique assez? N'oubliez pas qu'en CSS, certains sélecteurs l'emportent sur d'autres.

L'ajout de CSS personnalisé WordPress est facile lorsque vous savez comment

Si vous ajoutez du CSS personnalisé dans WordPress, vous avez quelques options.

Déterminez d'abord ce que vous voulez réaliser avant de décider quelle est la meilleure façon de le faire. Cela peut être de remplacer quelques lignes de code CSS, de créer un thème (enfant) ou de faire correspondre les styles d'un plugin à votre image de marque.

Et n'oubliez pas d'investir du temps dans l'apprentissage des règles CSS, afin de pouvoir créer et modifier des styles comme un pro.