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

8

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.

CROSP
la source

Réponses:

9

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

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.

bynicolas
la source
Merci pour la bonne réponse, cela n'affectera-t-il pas les performances si je veux des wp-register-style/scriptscripts / styles pour toutes mes pages dans functions.php? Quels sont les avantages d'enregistrer tous les styles et de ne les mettre en file d'attente qu'en cas de besoin?
CROSP
2
Normalement non, vous ne verrez pas de problèmes de performances, il est même recommandé de le faire de cette façon . Je mettrai à jour ma réponse avec les principaux avantages
bynicolas
1
réponse mise à jour!
bynicolas
4

" 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.

zendka
la source
PS: J'ai eu la même idée il y a quelques années: pourquoi ne pas diviser un gros fichier CSS en fichiers CSS spécifiques à des pages plus petites? Cela ressemblait à une optimisation évidente jusqu'à ce qu'un de mes collègues m'explique pourquoi cela ralentirait réellement le site Web.
zendka
3
Excellente réponse, j'en ai parlé un peu dans ma réponse mais vous l'avez bien dit. Cela peut ne pas être intuitif au début, mais le fait que tout soit mis en cache accélérera les choses. J'ajouterais que minimiser 1 fichier CSS plus grand serait encore plus avantageux que de charger plusieurs plus petits
bynicolas
bon point sur la minimisation!
zendka
Merci, j'ai peut-être décrit mon idée un peu floue, mais je vais avoir au maximum deux fichiers CSS, le premier common.csset le second sont spécifiques à chaque page.
CROSP
3

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' );
Nate Allen
la source
Je pense que votre réponse manque le point. L'OP veut savoir comment charger un style spécifique sur une page spécifique. pas comment ajouter une classe CSS à une page.
bynicolas
J'ai ajouté des informations sur la mise en file d'attente d'une feuille de style pour une page spécifique, mais l'intérêt de la fonction body_class est que vous n'avez pas à le faire de cette façon.
Nate Allen
1
Je comprends cela et c'est bien dans de nombreux cas, mais l'OP ne voulait PAS charger 1 grande feuille de style pour l'ensemble de son site. Donc, votre solution ne s'appliquerait pas ici
bynicolas
1
J'ai voté pour votre réponse car elle s'applique mieux à la question. Je garderai ma réponse ici au cas où quelqu'un la trouverait utile.
Nate Allen
1
@KhushbuVaghelaif ( is_page( 'careers' ) || is_page( 'portfolio' ) ) {}
Nate Allen