Comment charger des scripts / styles spécifiques à une page

Je sais que selon le processus de démarrage Wordpress par défaut, tout d'abord functions.phpest appelé, après cela va tout le thème. Mais je vais actuellement refactoriser complètement mon thème pour l'optimiser. Mon idée est d'avoir un fichier CSS de base pour les propriétés communes, normaliser, couleurs. Ou pour conserver un seul fichier CSS, mais dans ce cas, je dois coder en dur le boîtier de commutation functions.phpafin de déterminer la page. Et un autre spécifique pour chaque page, car cela n'a pas de sens de charger un énorme fichier de style CSS avec tous les styles définis.

Donc, ma question est quel est le meilleur endroit pour accrocher pour charger un script / style spécifique?

Doit-il s'agir d' header-xxx.phpun autre fichier? Peut-être existe-t-il un moyen de mettre en œuvre cette idée de manière plus évolutive et élégante?

Je vous serais reconnaissant pour toute l'aide apportée.

Tout dépend de l'échelle de vos personnalisations et de la façon dont vous organiserez vos affaires. Mais il y a 2 façons principales de le faire. functions.php et fichiers modèles

La façon dont j'aime le faire, est d' enregistrer tous mes scripts / styles dans functions.php donc je sais avec quoi je vais travailler mais je ne mettrai en file d'attente que ce dont j'ai besoin quand j'en ai besoin.

Vous pouvez mettre en file d'attente toutes vos informations de manière conditionnelle dans votre fichier functions.php ( if( is_page( 'blah') { //... enqueue stuff }) ou vous pouvez utiliser des fichiers de modèle pour styliser des catégories / balises / publications / pages spécifiques, etc.

Ensuite, dans ce fichier de modèle, vous y appelez vos fichiers de script / style de mise en file d'attente . Cela permet également de comprendre ce qui est chargé où.

Mais certainement, si vous souhaitez décomposer votre feuille de style en fichiers plus petits, vous devrez utiliser

• wp_register_style
• wp_enqueue_style

La même logique s'appliquerait au script avec les fonctions d' enregistrement / de mise en file d'attente correspondantes

En outre, prenez en compte le nombre de demandes dans votre stratégie.Si vous divisez vos données en plusieurs fichiers, essayez de garder le nombre de fichiers chargés faible afin de ne pas affecter négativement le chargement des pages de cette façon.

Il y a une autre chose que vous pouvez faire pour accélérer le chargement des pages. Si vous dites au navigateur de mettre en cache vos feuilles de style, alors peut-être 1 (ou quelques-uns) aurait plus de chances d'être chargé à partir du cache, alors si vous avez plusieurs fichiers partout sur votre site et qu'ils doivent toujours être récupérés depuis le serveur car c'est une nouvelle demande de fichier sur chaque nouvelle page chargée. Gardez cela à l'esprit.

Quoi qu'il en soit, la mise en cache d'un ou de plusieurs actifs est une bonne approche et augmentera la réactivité perçue de votre site Web en termes de vitesse du site.

Si vous avez besoin de plus d'informations sur l'utilisation de ces fonctions, faites-le nous savoir.

ÉDITER

Les principales raisons de l'enregistrement des scripts sont les suivantes

• Facilite l'appel d'un script / style lorsque nous en avons besoin
• Permet d'utiliser un script / style enregistré comme dépendance pour un fichier que nous devons charger.
• Empêchez-vous d'écrire le même code plus que nécessaire, simplifiant efficacement notre code
• Plus de choses auxquelles je ne pense peut-être pas en ce moment

REMARQUE

Un script / style qui a été enregistré n'a pas besoin d'être mis en file d'attente s'il est répertorié comme l'un $depsdes fichiers que vous êtes en train de mettre en file d'attente.

Un exemple (pas nécessairement comment vous devez le faire, mais vous comprenez donc le but)

je me suis inscrit

• common-style.css
• navigation.css
• buttons.css

Maintenant, ces styles sont enregistrés, donc si je vais sur une page spécifique et que je souhaite y appliquer un style différent. Je fais la queue sur cette page (soit par instruction conditionnelle dans functions.php ou dans mon modèle de page) specific-style.csscomme ça.

add_action( 'wp_enqueue_scripts', 'my_specific_style' );
function my_specific_style(){
  wp_enqueue_style( 'specific-style', get_stylesheet_directory_uri() . '/path/to/specific-style.css', array( 'common-style', 'navigation', 'button') );
}

Notez que le tableau dans wp_enqueue_styleest un tableau des poignées de styles déjà enregistrés. WP chargera commodément les 4 fichiers dans le bon ordre pour respecter la dépendance.

Vous pouvez cascader la dépendance en enregistrant simplement chaque script / style avec la bonne dépendance

c'est-à-dire boutons.css dépend de navigation.css qui dépend de common-style.css

Si je m'inscris avec cette logique à l'esprit, je n'ai besoin que de mettre en file d'attente specific-style.css avec buttons.css en tant que dépendance et WP enchaînera le chargement pour respecter l'ordre.

" refactoriser ", " optimiser ", " évolutif ", " élégant ". De grandes inquiétudes! Vous êtes sur la bonne voie. Cependant, la division d'un fichier CSS en plusieurs n'est pas la réponse à ces préoccupations. Voici pourquoi:

Les navigateurs mettent en cache les fichiers CSS. Ainsi, une fois la première page chargée, le navigateur ne demandera pas le même fichier CSS pour la page suivante. Oui, le premier chargement de page sera légèrement, sensiblement plus lent. Mais le reste des pages en bénéficiera.

Moins de demandes est l'un des moyens les plus importants d' optimiser la vitesse d'un site Web. (voir Steve Souders ou cet article ).

Une autre optimisation consiste à minimiser votre CSS. (voir l'article Google PageSpeed .) Merci @bynicolas pour la suggestion.

Bien sûr, vous pouvez dire, mais qu'en est-il de l' élégance ? Voici la bonne nouvelle: Sass et LESS . Ils vous permettent d'écrire moins de code, de le diviser en plusieurs fichiers qui sont compilés en un seul fichier CSS, et bien plus encore.

Vous pouvez certainement faire une condition pour vérifier sur quelle page quelqu'un se trouve et mettre en file d'attente une feuille de style spécifique pour chaque page, mais il vaut mieux cibler la page avec CSS.

Dans votre fichier header.php, assurez-vous que la body_classfonction est dans la balise body, comme ceci:

<body <?php body_class(); ?>>

Cela insérera des classes dans la balise body que vous pouvez utiliser pour cibler des fonctionnalités spécifiques de la page.

Par exemple, si je veux que le H1 sur une page spécifique soit rouge, je pourrais faire:

body.page-id-12 h1 {
    color: #ff0000;
}

Donc, sur la page avec l'ID 12, il appliquerait ce style.

Pour cibler un modèle de page spécifique, vous pouvez faire:

body.page-template-template-about h1 {
    color: #ff0000;
}

Cela ciblerait les pages avec le modèle "à propos" appliqué. Regardez simplement les classes dans la balise body sur la page que vous souhaitez styliser.

Cependant, si vous souhaitez toujours mettre en file d'attente une feuille de style spécifique pour une page spécifique, vous pouvez le faire:

function na35_enqueue_styles() {
    if ( is_page( 12 ) ) {
        wp_enqueue_style( 'page-12-styles', get_template_directory_uri() . '/css/page-12.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'na35_enqueue_styles' );