Étiquettes conditionnelles pour charger les styles et les scripts dans WordPress

Points de base

• WordPress prend en charge les feuilles de styles de chargement conditionnelles et les scripts pour s'assurer que ces fichiers sont chargés uniquement en cas de besoin, accélérant ainsi le chargement du site Web et la réduction des téléchargements de données inutiles pour les utilisateurs.
• Le style et les scripts doivent être chargés conformément aux meilleures pratiques recommandées dans les normes de codage wordpress.org, l'utilisation de méthodes WordPress standard peut éviter les problèmes d'incompatibilité et s'assurer que le site Web reste efficace.
• WordPress fournit des fonctions wp_enqueue_style et wp_enqueue_script, qui sont utilisées pour inclure respectivement des feuilles de style personnalisées et des fichiers JavaScript. Ces fonctions garantissent que WordPress trouve tous les feuilles de styles et scripts requis et les télécharge dans le bon ordre.
• WordPress fournit des balises conditionnelles qui peuvent être utilisées en conjonction avec les instructions if...else pour déterminer le code à appliquer dans des conditions spécifiques. Ces balises peuvent être utilisées pour garantir que les feuilles et les scripts de style spécifiques ne sont téléchargés que lorsque les visiteurs visitent des pages spécifiques du site Web.

Cet article fait partie d'une série créée en collaboration avec Siteground. Merci de soutenir les partenaires qui ont rendu le point de point possible.

Si votre site WordPress n'a besoin que d'utiliser des feuilles de style spécifiques ou des fichiers JavaScript sur une page spécifique ou uniquement dans des conditions limitées, vous n'avez pas besoin de charger ces fichiers chaque place sur le site.

Cet article vous guidera sur la façon de charger les styles et scripts CSS uniquement si le site Web en a besoin. De cette façon, votre site Web se chargera plus rapidement et les utilisateurs qui ne visitent pas les pages contenant des fichiers supplémentaires n'ont pas besoin de télécharger des données inutiles dans leur navigateur.

Pourquoi les styles et les scripts devraient-ils être ajoutés dans WordPress?

S'il y a un anti-motif dans le développement WordPress, il s'agit d'ajouter des balises et <link> à la section <script></script> du document HTML pour charger la feuille de style et les fichiers javascript séparément, puis c'est fait.

L'exécution d'un site Web WordPress consiste à utiliser des feuilles de style et un code JavaScript à partir du logiciel lui-même, de nombreux plug-ins et de thèmes actifs.

Cela signifie que l'auteur du thème ou du plugin n'a aucune idée à l'avance quels styles et scripts fonctionneront pour une installation particulière ou l'ordre dans lequel ces ressources sont nécessaires. Par exemple, prenons la bibliothèque jQuery comme exemple. WordPress lui-même peut utiliser cette bibliothèque pour gérer les demandes AJAX et autres tâches, et elle peut également être utilisée par plusieurs plug-ins et thèmes actifs.

Si les auteurs du plug-in et du thème incluent les feuilles de styles et les scripts dont ils ont besoin en ajoutant des balises correspondantes directement au document HTML, cela peut entraîner des conflits, des ressources en cours de charge plusieurs fois et / ou un ordre de chargement incorrect.

C'est pourquoi vous devez toujours charger des styles et des scripts en suivant les meilleures pratiques recommandées dans les normes d'encodage wordpress.org:

Pour que tout fonctionne harmonieusement, il est important pour les thèmes et les plugins de charger les scripts et les feuilles de style en utilisant des méthodes WordPress standard. Cela garantira que le site Web reste efficace et qu'il n'y a aucun problème d'incompatibilité.

contient CSS et JavaScript - Manuel de thème

comment utiliser wp_enqueue_style et wp_enqueue_script

La fonction de base pour inclure une feuille de style personnalisée dans le thème est la suivante:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Seuls les deux premiers paramètres sont requis, d'autres paramètres sont facultatifs.

• Le paramètre est le nom de la feuille de style. Vous pouvez le nommer Main, portefeuille, etc. en fonction du but du fichier. Si vous incluez une feuille de style d'un plugin JavaScript, utilisez simplement le nom du plugin. $handle
• représente l'URL où réside la feuille de style. $src Le paramètre
• Spécifie si cette feuille de style dépend d'une autre feuille de style à fonctionner correctement. $deps
• Détermine le numéro de version de la feuille de style. $ver
• représente les types de médias qui s'appliquent aux feuilles de style, telles que tous, écran, imprimé, etc. $media

Par exemple, le code pour ajouter une feuille de style nommée portfolio.css à votre site Web WordPress peut ressembler à ceci:

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

Pour inclure les fichiers JavaScript, vous devez utiliser:

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

Ces paramètres sont similaires à ceux de

, sauf que le dernier paramètre, qui définit des valeurs vraies ou fausses selon que vous souhaitez placer la partie wp_enqueue_style ou <script> du document. <head> <body> Supposons que vous souhaitiez ajouter un portfolio.js à votre site Web, le code ressemble à ceci:

Ce code indique WordPress:

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

Vous souhaitez utiliser le fichier de portefeuille, qui est situé dans le sous-dossier JS dans le répertoire de la rubrique Active.

• WordPress exige que jQuery soit téléchargé avant de charger le portfolio.js, sinon ce dernier ne fonctionnera pas correctement (vous n'avez pas besoin d'importer jQuery, car il est déjà regroupé avec WordPress par défaut).
• WordPress exige que ce fichier soit ajouté dans la section
du document HTML.
• <body>
Vous devrez peut-être inclure plusieurs styles de styles ou fichiers de script, auquel cas, enveloppez tous les appels vers

et

dans une fonction, puis accrochez cette fonction à la connexion d'action WordPress appropriée. wp_enqueue_style() wp_enqueue_script() Ceci est un exemple. Si vous développez un thème WordPress, vous pouvez l'ajouter à votre fichier functions.php.

Maintenant, vous pouvez être assuré que WordPress trouvera tous les feuilles de style et scripts requis et les téléchargera dans le bon ordre.

function mytheme_styles_scripts() {
  // 主样式表，style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

  // 作品集部分的样式表
  // (与网站的其余部分不同)
  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  // 作品集部分的 JS
  wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);  
} 

// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );

Chargement de condition de feuilles de style et scripts

Le code ci-dessus fonctionne bien et suit les meilleures pratiques WordPress. Cependant, WordPress téléchargera à la fois le portfolio.css et le portfolio.js à partir de tous les endroits de votre site Web. Si vos visiteurs n'ont jamais visité votre page de portefeuille, cela est regrettable, mais peut se produire et le navigateur chargera deux fichiers inutiles.

Maintenant, allons plus loin et assurez-vous que WordPress contient à la fois le portfolio.css et le portfolio.js uniquement si les visiteurs accèdent à votre section de portefeuille.

Tag conditionnelle WordPress

WordPress fournit des balises conditionnelles qui sont utilisées en conjonction avec les instructions régulières if...else pour choisir facilement le code à appliquer dans des conditions spécifiques.

Par exemple, si vous souhaitez exécuter du code uniquement sur la page d'accueil de votre site Web et d'autres code ailleurs, vous écrirez quelque chose comme ceci:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Au lieu de cela, si vous souhaitez exécuter certains code n'importe où en dehors de la page d'accueil du site Web, vous écrirez:

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

WordPress fournit un grand nombre de balises conditionnelles, et vous pouvez afficher une liste complète dans la section Tags conditionnels du manuel du thème.

Vous pouvez utiliser la balise conditionnelle pour vous assurer que WordPress télécharge le portfolio.css et le portfolio.js uniquement si les visiteurs visitent la page du portefeuille de votre site Web.

Voyons quelques façons de le faire.

ID de page utilisateur

Vous pouvez utiliser la balise conditionnelle pour vérifier si l'utilisateur utilise l'ID de page de portefeuille sur le site Web.

Pour comprendre l'ID de la page, procédez comme suit:

• Connectez-vous au panneau d'administration de votre site Web WordPress.
• Cliquez sur la page pour accéder à une liste de toutes les pages du site Web.
• Cliquez sur le titre de la page qui vous intéresse et l'ouvrez dans l'éditeur.
• La page est maintenant ouverte dans l'éditeur, veuillez vérifier l'URL dans la barre d'adresse du navigateur. Vous devriez voir quelque chose comme Post = plus un nombre. Ce numéro est l'ID de page:

Maintenant que vous connaissez l'ID de la page, vous pouvez utiliser la balise conditionnelle pour modifier le code qui contenait auparavant la feuille de styles de thème et les scripts, comme indiqué ci-dessous:

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

Utiliser le titre de la page

L'étiquette conditionnelle de la page s'applique également au titre de la page. Si votre page de portefeuille a le titre "mon portefeuille", le code pourrait ressembler à ceci (je viens d'ajouter la section conditionnelle pour la concision):

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

Utiliser l'alias de la page

Vous pouvez utiliser la balise conditionnelle avec un alias de page, qui est l'URL conviviale de la page. Ce qui suit est à quoi il ressemble dans l'application réelle:

function mytheme_styles_scripts() {
  // 主样式表，style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

  // 作品集部分的样式表
  // (与网站的其余部分不同)
  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  // 作品集部分的 JS
  wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);  
} 

// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );

Conclusion

Dans cet article, je discute de la façon d'inclure des feuilles de style et des fichiers de script de manière conditionnelle dans un site Web WordPress. Dans certains cas, le nombre de styles supplémentaires est petit, il n'a donc pas beaucoup de sens de créer une feuille de style dédiée pour eux. Cela ne générera qu'une demande HTTP que votre site Web pourrait ne pas avoir besoin.

Cependant, dans des conditions appropriées, par exemple, la conception d'une page ou d'une zone de thème est différente du reste du site Web, le chargement sélectif des feuilles de style et des scripts suit les meilleures pratiques WordPress et garantit que le navigateur du visiteur télécharge uniquement des affichages. la quantité de données requises pour le contenu requis.

Comment incluez-vous des scripts et des styles personnalisés dans votre site WordPress? Cliquez sur la zone de commentaire ci-dessous pour partager.

FAQ (FAQ) sur les balises conditionnelles et les styles de chargement et scripts dans WordPress

Quelles sont les balises conditionnelles dans WordPress et comment fonctionnent-ils?

La balise conditionnelle dans WordPress est une fonction PHP utilisée dans le fichier de thème pour modifier le contenu affiché sur une page spécifique en fonction des conditions que la page satisfait. Ils sont utilisés pour déterminer si une condition spécifique est remplie avant d'exécuter une fonction spécifique. Par exemple, vous pouvez utiliser la balise conditionnelle pour vérifier si une page est un seul post avant d'afficher une barre latérale spécifique.

Comment utiliser des balises conditionnelles pour charger les styles et les scripts dans WordPress?

Pour utiliser des balises conditionnelles pour charger des styles et des scripts dans WordPress, vous devez ajouter vos scripts et styles dans le fichier Functions.PHP du thème. Vous pouvez utiliser les fonctions wp_enqueue_script et wp_enqueue_style avec les balises conditionnelles. Par exemple, si vous souhaitez charger des scripts uniquement sur la page d'accueil, vous pouvez utiliser la balise conditionnelle is_home().

Quelles sont les balises conditionnelles courantes dans WordPress?

Certaines balises de condition couramment utilisées dans WordPress incluent is_single(), is_page(), is_home(), is_front_page(), is_category(), is_tag(), is_author(),

, etc. Chaque balise vérifie les critères spécifiques, tels que si la page est une seule publication, une page spécifique, une page d'accueil, une page d'accueil, une page de catégorie, une page de balise ou une page d'auteur.

Comment créer des extraits de code conditionnel dans WordPress?

if Pour créer un extrait de code conditionnel dans WordPress, vous devez utiliser la balise conditionnelle dans l'instruction PHP if. Le code de l'instruction if ne sera exécuté que lorsque la condition sera remplie. Par exemple, pour afficher les extraits de code uniquement sur la page d'accueil, vous pouvez utiliser la balise conditionnelle is_home() dans l'instruction

.

Pourquoi mon style ne se charge-t-il pas dans WordPress?

wp_enqueue_style Si votre style ne se charge pas dans WordPress, cela peut être dû à un certain nombre de raisons. La raison la plus courante est que les fichiers de style ne sont pas enregistrés correctement dans le fichier functions.php. Assurez-vous que vous avez correctement utilisé la fonction

. Vérifiez également que le chemin du fichier et les dépendances sont corrects. Si vous utilisez la balise conditionnelle, assurez-vous que la condition est remplie.

Comment charger les CS conditionnels dans WordPress de la bonne manière?

wp_enqueue_style Pour charger des CS conditionnels dans WordPress, vous devez utiliser la fonction is_home() pour enregistrer le fichier CSS dans le fichier functions.php du thème. Vous pouvez utiliser l'onglet Conditions pour spécifier les conditions dans lesquelles le fichier CSS doit être chargé. Par exemple, pour charger les fichiers CSS uniquement sur la page d'accueil, vous pouvez utiliser la balise conditionnelle

.

Puis-je utiliser plusieurs balises conditionnelles dans WordPress?

Oui, vous pouvez utiliser plusieurs balises conditionnelles dans WordPress. Vous pouvez les combiner à l'aide d'opérateurs logiques tels que et (&&) et (||). Par exemple, pour vérifier si une page est une seule publication et n'est pas une page d'accueil, vous pouvez utiliser les balises conditionnelles is_single() et !is_home().

Comment utiliser la balise conditionnelle pour charger différents styles pour différentes pages dans WordPress?

Pour charger différents styles pour différentes pages dans WordPress, vous pouvez utiliser les balises conditionnelles dans le fichier Functions.PHP du thème. Pour chaque style, utilisez la fonction wp_enqueue_style et vérifiez les balises conditionnelles pour une page spécifique. Par exemple, pour charger un style spécifique pour la page d'accueil et pour charger un style différent pour un seul post, vous pouvez utiliser les balises conditionnelles is_home() et is_single().

Quelle est la différence entre

et is_home() dans WordPress? is_front_page()

La balise conditionnelle

dans WordPress vérifie si la page d'accueil est affichée, tandis que la balise conditionnelle is_home() vérifie si la page d'accueil est affichée. Si vous avez défini votre page d'accueil pour afficher vos derniers messages, les deux balises reviendront vrai. Cependant, si vous avez défini la page statique en tant que page d'accueil, is_front_page() reviendra true pour cette page, et is_front_page() reviendra True pour la page qui est définie comme page de publication. is_home()

Puis-je utiliser des balises conditionnelles en dehors de la boucle dans WordPress?

Oui, vous pouvez utiliser des balises conditionnelles en dehors de la boucle dans WordPress. Cependant, certaines balises conditionnelles (telles que

et is_single()) peuvent ne pas fonctionner comme prévu lorsqu'ils sont utilisés avant la boucle. En effet, WordPress ne connaît que les détails de la requête après le début de la boucle. Par conséquent, il est généralement recommandé d'utiliser ces étiquettes conditionnelles dans ou après la boucle ou après le début. is_page()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!