Share
Sans CSS, vous avez un choix très limité de styles pour vos pages Web. Et sans inclusion CSS appropriée dans WordPress, vous pouvez rendre extrêmement difficile la personnalisation du style du thème pour les utilisateurs de votre thème..
Dans ce tutoriel, nous allons examiner la bonne façon de mettre en file d'attente CSS dans WordPress.
WordPress est actuellement le système de gestion de contenu le plus populaire au monde et compte des dizaines de millions d'utilisateurs. C'est pourquoi, pour réussir un thème, nous devons penser comme chaque utilisateur de WordPress, essayer de lire les pages du livre et de charger correctement nos fichiers CSS dans nos thèmes..
Au fil des ans, WordPress a développé son code afin de le rendre de plus en plus flexible, et la mise en file d'attente de CSS et de JavaScript a été un pas dans cette direction. Nos mauvaises habitudes sont restées pendant un moment, cependant. Sachant que WordPress avait introduit la mise en file d'attente CSS et JavaScript, nous avons continué à ajouter ce code dans notre header.php des dossiers:
… Ou nous avons ajouté le code ci-dessous dans notre functions.php fichiers, pensant que c'était mieux:
Accentsconagua
"; add_action ('wp_head', 'add_stylesheet_to_head');?> Dans les cas ci-dessus, WordPress ne peut pas déterminer si les fichiers CSS sont chargés dans la page ou non. Cela pourrait être une terrible erreur!
Si un autre plugin utilise le même fichier CSS, il ne pourra pas vérifier si le fichier CSS a déjà été inclus dans la page. Ensuite, le plugin charge le même fichier une seconde fois, ce qui crée un code en double..
Heureusement, WordPress offre une solution assez simple à des problèmes comme celui-ci: enregistrement et mise en file d'attente des feuilles de style.
Comme nous l’avons dit précédemment, WordPress a beaucoup évolué au fil des ans et nous devoir pensez à chaque utilisateur WordPress dans le monde.
En plus d’eux, nous devons également prendre en compte des milliers de plugins WordPress. Mais ne laissez pas ces gros chiffres vous effrayer: WordPress a des fonctions très utiles pour nous permettre de charger correctement les styles CSS dans WordPress.
Regardons.
Si vous voulez charger des feuilles de style CSS, vous devez d’abord les enregistrer avec le wp_register_style () une fonction:
$ handle (chaîne, obligatoire) est un nom unique pour votre feuille de style. D'autres fonctions utiliseront cette "poignée" pour mettre en file d'attente et imprimer votre feuille de style.$ src (chaîne, obligatoire) fait référence à l'URL de la feuille de style. Vous pouvez utiliser des fonctions comme get_template_directory_uri () pour obtenir les fichiers de style dans le répertoire de votre thème. Ne pensez jamais à le coder en dur!$ deps (array, facultatif) gère les noms des styles dépendants. Si votre feuille de style ne fonctionne pas s'il manque un autre fichier de style, utilisez ce paramètre pour définir les "dépendances".. $ ver (chaîne ou booléen, facultatif) est le numéro de version. Vous pouvez utiliser le numéro de version de votre thème ou en créer un, si vous le souhaitez. Si vous ne souhaitez pas utiliser de numéro de version, définissez-le sur nul. Par défaut, faux, ce qui fait que WordPress ajoute son propre numéro de version.$ media (chaîne, facultatif) correspond aux types de support CSS tels que "screen" ou "handheld" ou "print". Si vous n'êtes pas sûr d'avoir besoin de l'utiliser, ne l'utilisez pas. La valeur par défaut est "Tous".Voici un exemple à la wp_register_style () une fonction:
L'enregistrement de styles est un peu "facultatif" dans WordPress. Si vous pensez que votre style ne sera pas utilisé par un plugin ou si vous n'utiliserez aucun code pour le charger encore, vous êtes libre de mettre le style en file d'attente sans l'enregistrer. Voyez comment cela se fait ci-dessous.
Après avoir enregistré notre fichier de style, nous devons le "mettre en file d'attente" pour le rendre prêt à être chargé dans notre thème. section.
Nous faisons cela avec le wp_enqueue_style () une fonction:
Les paramètres sont exactement les mêmes avec le wp_register_style () fonction, donc pas besoin de les répéter.
Mais comme nous l'avons dit le wp_register_style () la fonction n'est pas obligatoire, je devrais vous dire que vous pouvez utiliser wp_enqueue_style () de deux manières différentes:
Gardez à l'esprit que si un plugin doit trouver votre feuille de style ou si vous avez l'intention de la charger dans différentes parties de votre thème, vous devez absolument l'enregistrer en premier..
Nous ne pouvons pas simplement utiliser le wp_enqueue_style () fonctionner n'importe où dans notre thème - nous devons utiliser des "actions". Il y a trois actions que nous pouvons utiliser à différentes fins:
wp_enqueue_scripts pour charger des scripts et des styles dans le front-end de notre site web,admin_enqueue_scripts pour charger des scripts et des styles dans les pages de notre panneau d'administration,login_enqueue_scripts pour charger des scripts et des styles dans la page de connexion WordPress.Voici les exemples de ces trois actions:
Il existe une annonce importante dans Make WordPress: "Utiliser wp_enqueue_scripts (), ne pas wp_print_styles ()!". Il vous informe d'une possible erreur d'incompatibilité avec WordPress v3.3.
Il existe dans WordPress des fonctions très utiles concernant les CSS: elles nous permettent d’imprimer des styles en ligne, de vérifier l’état de mise en file d’attente de nos fichiers de style, d’ajouter des métadonnées pour nos fichiers de style et d’annuler les styles.
Regardons.
wp_add_inline_style () Si votre thème comporte des options pour personnaliser le style du thème, vous pouvez utiliser le style en ligne pour les imprimer avec le wp_add_inline_style () une fonction:
Rapide et facile. Rappelez-vous cependant: vous devez utiliser le même nom de hadle avec la feuille de style à laquelle vous souhaitez ajouter un style inline après.
wp_style_is () Dans certains cas, nous pourrions avoir besoin des informations sur l'état d'un style: est-il enregistré, est-il mis en file d'attente, est-il imprimé ou en attente d'impression? Vous pouvez le déterminer avec le wp_style_is () une fonction:
wp_style_add_data () Voici une fonction géniale appelée wp_style_add_data () qui vous permet d'ajouter des métadonnées à votre style, y compris des commentaires conditionnels, le support RTL et plus!
Vérifiez-le:
add_data ('mytheme-ie', 'conditionnel', 'lte IE 9'); * wp_style_add_data () est plus propre, cependant. * / add_action ('wp_enqueue_scripts', 'mytheme_ie_style'); ?> Génial, n'est-ce pas?
[Si je ne me trompe pas, ceci est le premier tutoriel jamais écrit sur cette petite fonction, mais utile.
wp_deregister_style () Si vous avez besoin de "désenregistrer" une feuille de style (pour pouvoir la ré-enregistrer avec une version modifiée, par exemple), vous pouvez le faire avec wp_deregister_style ().
Voyons un exemple:
Bien que ce ne soit pas obligatoire, vous devriez toujours ré-enregistrer un autre style si vous en désenregistrer un - vous risquez de casser quelque chose si vous ne le faites pas..
[Il y a aussi une fonction similaire appelée wp_dequeue_style (), qui supprime les feuilles de style mises en file d'attente comme son nom l'indique.
Félicitations, maintenant vous savez tout sur l’inclusion correcte de CSS dans WordPress! J'espère que vous avez apprécié le tutoriel.
Avez-vous des conseils ou des expériences que vous souhaitez partager? Commentez ci-dessous et partagez vos connaissances avec nous! Et si vous avez aimé cet article, n'oubliez pas de le partager avec vos amis!
