web-dev-qa-db-fra.com

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

Je sais que, selon le processus de démarrage par défaut de Wordpress, l’appel est d'abord appelé functions.php, après quoi tous les éléments de thème sont traités. 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 ne garder qu'un seul fichier css, mais dans ce cas, j'ai besoin de coder en dur la casse dans functions.php afin de déterminer la page. Et un autre spécifique à chaque page, car cela n’a aucun sens de charger un fichier de style css énorme avec tous les styles définis.

Ma question est donc de savoir quel est le meilleur endroit pour accrocher pour charger un script/style spécifique?

Devrait-il s'agir de header-xxx.php ou d'un autre fichier? Peut-être y a-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.

functionsthemescsswp-enqueue-scriptwp-enqueue-style
7
CROSP

Tout dépend de l'ampleur de vos personnalisations et de la manière dont vous organisez vos tâches. Mais il y a 2 façons principales de le faire.functions.phpetfichiers de modèle

La façon dont j'aime le faire est register tous mes scripts/styles dans functions.php, donc je sais avec quoi je vais travailler mais je vais enqueue seulement ce dont j'ai besoin quand j'ai besoin il.

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

Ensuite, dans ce fichier de modèle, vous appelez vos fichiers enqueue script/style. 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 à un script avec les fonctions register/enqueue correspondantes.

Tenez également compte du nombre de demandes dans votre stratégie. Si vous divisez votre travail en plusieurs fichiers, essayez de limiter le nombre de fichiers chargés de manière à ne pas affecter le chargement de page de cette manière.

Il y a une autre chose que vous pouvez faire pour accélérer le chargement de la page. Si vous indiquez au navigateur de mettre en cache vos feuilles de style, alors peut-être que 1 (ou un petit nombre) aura plus de chances d'être chargé à partir du cache que si vous avez plusieurs fichiers sur votre site et qu'ils doivent toujours être récupérés sur le serveur car une nouvelle demande de fichier sur chaque nouvelle page chargée. Alors gardez cela à l'esprit pour.

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

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

EDIT

Les principales raisons pour l’enregistrement de scripts sont les suivantes:

  • Facilite l'appel d'un script/style quand on en a besoin
  • Permet d'utiliser un script/style enregistré en tant que dépendance d'un fichier à charger.
  • Nous empêcher d'écrire le même code plus que nécessaire, simplifiant ainsi notre code
  • Plus de choses auxquelles je ne pensais peut-être pas maintenant

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 un $deps du fichier que vous êtes en train de mettre en file d'attente.

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

Je me suis inscrit

  • common-style.css
  • navigation.css
  • boutons.css

Maintenant, ces styles sont enregistrés, donc si je vais sur une page {spécifique} _ et que je veux y appliquer un style différent. J'ai mis en file d'attente sur cette page (soit par une instruction conditionnelle dans functions.php ou dans mon modèle de page) specific-style.css comme suit.

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_style est un tableau des poignées de styles déjà enregistrés. WP chargera facilement les 4 fichiers dans le bon ordre pour respecter la dépendance.

Vous pouvez mettre en cascade une dépendance en enregistrant simplement chaque script/style avec la dépendance correcte

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

Si je m'inscris dans cette logique, il ne me reste plus qu'à mettre en file d'attente specific-style.css avec buttons.css en tant que dépendance et WP liera en chaîne le chargement pour respecter la commande.

8
bynicolas

" refactor ", " optimiser ", " évolutif ", " élégant ". Grand soucis! Vous êtes sur le bon chemin. Cependant, diviser un fichier CSS en plusieurs n’est pas la solution à ces problèmes. Voici pourquoi:

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

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

Une autre optimisation consiste à minify votre CSS. (voir Google PageSpeed ​​post .) Merci @bynicolas pour cette suggestion.

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

3
zendka

Vous pouvez certainement conditionner pour vérifier quelle page est quelqu'un et mettre en file d'attente une feuille de style spécifique pour chaque page, mais il peut être préférable de cibler la page avec CSS.

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

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

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

Par exemple, si je veux que le H1 d'une page soit rouge, je peux faire:

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

Donc, sur la page portant l'ID 12, le style sera appliqué.

Pour cibler un modèle de page spécifique, vous pouvez effectuer les opérations suivantes:

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

Cela ciblerait les pages avec le modèle "à propos" appliqué. Il suffit de regarder les classes dans la balise body de la page à styler.

Toutefois, si vous souhaitez toujours mettre en file d'attente une feuille de style spécifique pour une page spécifique, procédez comme suit:

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' );
2
Nate Allen