Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Parfois, vous pouvez constater que lorsque vous ajoutez du CSS personnalisé à votre site Web, il ne semble pas être appliqué correctement. Il y a plusieurs raisons pour lesquelles cela pourrait être le cas, mais la plus importante est le cœur du «C» dans le nom complet de CSS («Cascading Style Sheets») et comment WordPress met vos feuilles de style sur votre site.

Nous allons passer en revue ces bases afin que vous compreniez ce qui se passe, comment diagnostiquer le problème et comment le résoudre.

Que ce passe-t-il

Voici un exemple. Disons que vous en avez un Thème des enfants et vous avez un plugin avec sa propre feuille de style. Appelons cela « boutons de réaction » dans cet exemple. Si vous activez ce plugin, puis essayez de remplacer les styles de votre thème enfant, vous constaterez que cela ne fonctionne tout simplement pas.

Il y a une explication technique: le plugin met en file d’attente la feuille de style correspondante avec la mauvaise action. Le résultat, cependant, est que la feuille de style est plus tard sur votre page est ajouté et a donc la priorité sur tout style précédent.

Vous voyez, c’est la partie « en cascade » des « Feuilles de style en cascade », également connue sous le nom de CSS. Voici un autre exemple. Supposons que je veuille rendre tous mes éléments H2 rouges et tous mes éléments P bleus. Je pourrais faire ceci:

H2 {couleur: rouge;}
p {couleur: bleu;}

Mais si j’avais ensuite stylé le H2 orange, plus tard dans la même feuille de style, alors TOUS mes H2 seraient orange. Comme ça:

h2 {color: red;} / * ← ceci n’est pas utilisé /.
p {couleur: bleu;}
h2 {couleur: orange;} /
← car cela se produit plus tard dans le fichier * /

D’où le terme «en cascade». La même chose se produit avec plusieurs feuilles de style. Si cet orange h2 a été tapé dans une feuille de style plus tard que le rouge dans le est sortie, l’orange serait appliqué et le rouge serait entièrement ignoré.

Comment diagnostiquer le problème

Heureusement, il est assez facile de trouver et de diagnostiquer le problème. Accédez à n’importe quelle page de votre site Web et dans Chrome, cliquez avec le bouton droit de la souris et choisissez Vérifier. Cela ouvrira une nouvelle fenêtre avec toutes sortes de codes. Cherchez ça Élément et développez-le. Là, vous verrez une longue liste de Éléments. Ce sont vos nombreuses feuilles de style, tirées de diverses sources. Lorsque cela est fait correctement, chacun doit avoir un identifiant d’identification. Très probablement, vous constaterez que le style de votre plugin change en car votre style de thème est localisé.

C’est exactement ce qui se passe avec notre thème Poor Child et la feuille de style Reaction Keys. Voir:

Dépannage de CSS1

À noter: vous saurez également que vous avez ce problème lorsque vous commencez à ajouter du CSS et que vous devez en ajouter! Important pour tous vos styles. En règle générale, vous ne devriez jamais avoir à faire cela tant que tout est correctement mis en file d’attente.

Que faire?

Maintenant, nous comprenons «en cascade» et savons que l’ordre des feuilles de style est incorrect, mais comment corriger cela?

La réponse courte est que vous allez réorganiser les feuilles de style. Mais comment faites-vous cela spécifiquement dans WordPress? Dans ce cas, l’auteur du plugin doit mettre à jour le plugin pour mettre correctement en file d’attente la feuille de style. Mais que pouvez-vous faire en attendant?

Une partie de la façon dont WordPress imprime les feuilles de style sur la page consiste à demander si cette feuille de style est « dépendante » d’une autre feuille de style. Vous ne souhaitez pas modifier directement les fichiers du plugin, mais vous avez le contrôle sur votre sujet enfant et sur la façon dont il met sa feuille de style en file d’attente. Par exemple, la plupart des sujets enfants mettent leurs styles en file d’attente comme ceci:

wp_enqueue_style (‘total-enfant-css’,
get_stylesheet_directory_uri (). ‘/style.css’, Array (‘total-parent-css’), ‘1.0’, tous);

Entre les crochets, vous remarquerez que cinq arguments sont séparés par des virgules. Le troisième argument est « Dépendance». Dans ce cas, cela signifie que le sujet enfant dépend du sujet parent et l’appelle selon le « handle » du sujet parent.

Voici l’astuce: assurez-vous que la sous-section dépend ÉGALEMENT de la feuille de style des boutons de réaction. Tout ce que nous avons à faire est de trouver le « handle » de cette feuille de style et de l’ajouter à notre tableau de dépendances.

Malheureusement, WordPress ne permet pas de trouver facilement la poignée des feuilles de style. Vous pouvez procéder de deux manières:

  1. Vous pouvez ouvrir les fichiers du plugin Reaction Buttons et rechercher « wp_enqueue_style ». Le premier argument de cette fonction est que les feuilles de style « gèrent ».
  2. Si vous ne voulez toucher à aucun code, installez deux plugins: Barre de débogage, et Script de la barre de débogage et dépendances de style. Une fois activé, allez sur n’importe quelle page frontale et dans votre barre d’administration, vous verrez un lien appelé « Déboguer ». Cliquez dessus et sélectionnez l’onglet Dépendances de script et de style. Recherchez dans cette liste la poignée de la feuille de style du bouton de réaction. Voici à quoi ça ressemble:

Dépannage de CSS2

Maintenant, nous savons ce qu’est la poignée. Ajoutons-le à nos dépendances de sujets enfants comme ceci:

wp_enqueue_style (‘total-enfant-css’,
get_stylesheet_directory_uri (). ‘/style.css’, array (‘total-parent-css’, ‘react_buttons_css’), ‘1.0’, tous);

C’est ça! Désormais, si vous écrivez des styles personnalisés dans votre sujet enfant, ils écraseront automatiquement tous les styles du plugin Reaction Buttons.

La cascade peut devenir compliquée

Comme toutes les choses dans le développement Web, ce sujet peut devenir beaucoup plus compliqué. Par exemple, WordPress met en file d’attente tous les plugins par ordre alphabétique. Si vous créez un plugin de style et que vous voulez qu’il soit appliqué tardivement, vous êtes un peu coincé.

C’est aussi une question de spécificité CSS. Les sujets créent parfois des styles extrêmement spécifiques. Même si votre nouvelle feuille de style est plus tard dans est la sortie, ne remplacez les styles que si vous devenez plus précis. ToTheNew a un excellent article sur la spécificité, tout comme la façon dont Magazine fracassant

Enfin, comprendre la spécificité, l’héritage et la façon dont WordPress met en file d’attente les feuilles de style est extrêmement important pour les auteurs de plugins qui peuvent mettre plusieurs feuilles de style en file d’attente. S’assurer que les dépendances correctes sont en place réduira le temps d’écriture du CSS. N’oubliez pas, cependant, que si vous déclarez une dépendance et que la feuille de style n’est pas marquée comme sortie pour une raison quelconque, votre feuille de style ne sera pas non plus sortie.

Enfin

Dans cet esprit, le dépannage des problèmes de file d’attente et de cascade devrait être beaucoup plus facile pour vous. Éloignez-vous du contenu de votre cœur avec confiance et CSS!



Source link

Recent Posts