web-dev-qa-db-fra.com

Puis-je ajouter des styles au pied de page avec $ wp_styles-> add_data?

Je travaille sur un script pour déplacer facilement les scripts js et css vers le pied de page à l'aide de la fonction add_data dans $ wp_scripts et $ wp_styles. Pour les scripts, je sais que si le groupe est supérieur à 0, l’appel de script sera déplacé vers le pied de page (c’est d’abord le cas pour tout ce qui suit). Cependant, définir le groupe pour les styles n'a pas le même effet (et le groupe est correctement défini avec seconde pour chaque). Existe-t-il un moyen de déplacer les styles vers le pied de page avec la même méthode ou devrais-je chercher une alternative?

function mod_scripts(){
    global $wp_scripts, $wp_styles;
    foreach($wp_scripts->queue as $script){
        if ( ! $wp_scripts->get_data( $script, 'group' ) ){
            $wp_scripts->add_data( $script, 'group', 1 );
        }
    }
    foreach($wp_styles->queue as $style){
        if ( ! $wp_styles->get_data( $style, 'group' ) ){
            $wp_styles->add_data( $style, 'group', 1 );
        }       
    }
}

EDIT: La raison de la demande est que j'essaie de supprimer les CSS bloquants pour accélérer le chargement d'une page. La méthode recommandée consiste essentiellement à incorporer le fichier css directement dans la page, mais cela n'a jamais bien fonctionné. Et maintenant je me rends compte que la question telle que je l'ai posée est imparfaite. Je cherche simplement un moyen efficace de charger des styles tout en maintenant la compatibilité avec les plugins.

wp-enqueue-scriptstylesheet
4
Jeremiah Prummer

Je ne sais pas quelle est votre raison exacte, mais vous devriez abandonner l'idée de déplacer les styles en bas de page. Si vous envisagez un gain de vitesse, vous pourriez gagner un montant imperceptible, le cas échéant, mais ce sera au détriment d'autres choses plus importantes.

Les styles doivent toujours être ajoutés à l'intérieur de la balise <head></head>. La raison en est que les balises <style> en dehors des balises head ne sont pas du code HTML valide. C'est pourquoi vous n'avez pas cette option pour charger des styles dans le pied de page avec wp_enqueue_style et wp_register_style comme vous le faites avec des scripts.

Je repenserais sérieusement toute cette idée.

MODIFIER

Sidenote d'un commentaire à cette réponse de @ G.M.

wp_enqueue_style ajoute la balise <link>, pas <style> un. Cependant, la balise <link> n'est pas autorisée en dehors de <head> également

5
Pieter Goosen

Comme @ pieter-goosen et @birgire dans d'autres réponses et commentaires, Spécifications du W3C n'autorise pas les fichiers css dans le pied de page, citation tirée de la page de spécifications liée:

Un élément link doit avoir un attribut rel.

Si l'attribut rel est utilisé, l'élément est limité à l'élément head.

En plus de cela, notez que lorsque vous ajoutez css dans le pied de page, lorsque quelqu'un ouvre votre page, il apparaît déshabillé jusqu'à ce que le fichier css complet soit chargé: avec des connexions lentes, votre page apparaîtra brisée pendant quelques secondes, éléments masqués via css sera visible, les curseurs apparaîtront comme des listes ul d'images visibles ...

Donc, vraiment, je pense que c'est une mauvaise idée.

Cela dit, je n'aime pas le genre de réponses "ne faites pas ça", je préfère le type "vous pouvez le faire de cette façon, mais je suggère de ne pas le faire".

Donc, voici le moyen de le faire, mais bon, je suggère de ne pas le faire.

Les choses sont plus simples que prévu: les scripts et les styles doivent être ajoutés au crochet wp_enqueue_scripts, mais si vous mettez en file d'attente les styles after wp_head, les scripts et les styles sont ajoutés dans le pied de page.

Une application utile de cela est lorsque les scripts sont mis en file d'attente dans un rappel de shortcode, ajoutant la possibilité d'ajouter facilement des scripts spécifiques à un shortcode.

En ce qui concerne les styles, WordPress n’est pas intransigeant à propos des déclarations du W3C et mettra les styles en bas de page sans ciller.

Flux de travail:

  1. hook 'wp_print_styles' , lorsque tous les scripts et styles sont déjà mis en file d'attente, mais pas imprimés
  2. stocker la file d'attente actuelle pour les scripts et les styles dans des variables
  3. vider la file d'attente pour les scripts et les styles, de cette manière, lorsque WordPress cherchera à imprimer des scripts, les styles en tête ne trouveront rien à imprimer
  4. hook 'wp_footer' avec la priorité 0, et restaurez les styles et scripts que vous avez stockés au point # 2, de cette manière, lorsque WordPress recherche les styles et les scripts à imprimer dans le pied de page, ils peuvent les trouver et les imprimer. .

Tout peut être fait en quelques lignes de code:

add_action('wp_print_styles', function() {
  if ( ! doing_action( 'wp_head' ) ) { // ensure we are on head
    return;
  }
  global $wp_scripts, $wp_styles;
  // save actual queued scripts and styles
  $queued_scripts = $wp_scripts->queue; 
  $queued_styles  = $wp_styles->queue;
  // empty the scripts and styles queue
  $wp_scripts->queue = array();
  $wp_styles->queue  = array();
  $wp_scripts->to_do = array();
  $wp_styles->to_do  = array();
  add_action( 'wp_footer', function() use( $queued_scripts, $queued_styles ) {
    // reset the queue to print scripts and styles in footer
    global $wp_scripts, $wp_styles;
    $wp_scripts->queue = $queued_scripts;
    $wp_styles->queue  = $queued_styles;
    $wp_scripts->to_do = $queued_scripts;
    $wp_styles->to_do  = $queued_styles;
  }, 0 );
}, 0);

Remarque

Le code ci-dessus nécessite PHP 5.3+ pour l’utilisation de la fermeture et WP 3.9 pour l’utilisation de doing_action .

5
gmazzap

Je faisais récemment des recherches sur cette question précisément en raison des exigences de Google PageSpeed ​​Insights:

Éliminer le code JavaScript et CSS bloquant le rendu dans le contenu au-dessus du pli

Votre page contient 1 ressources de script et 1 ressources CSS bloquantes. Cela provoque un retard dans le rendu de votre page.

Aucun des contenus figurant au-dessus du pli de votre page ne peut être rendu sans attendre le chargement des ressources suivantes. Essayez de différer ou de charger de manière asynchrone des ressources de blocage, ou insérez directement les parties critiques de ces ressources dans le code HTML.

Optimiser la livraison CSS des éléments suivants:
.../style.min.css? ver = 4.8

La recommandation de Google était d'intégrer le code CSS critique à l'aide d'un bloc inline <style>...</style> dans le <head>...</head> et de charger le code CSS non critique via JavaScript.

Je ne pouvais pas comprendre comment utiliser les fonctions natives de WordPress pour mettre en file d'attente un bloc de style natif sans avoir au préalable besoin d'une feuille de style externe (voir: wp_add_inline_style . Je viens donc de terminer la tâche en utilisant mes propres modèles personnalisés header.php et footer.php des dossiers:

header.php 

<!-- ... -->
  <?php wp_head(); ?>
  <style id="critical-styles" type="text/css" media="screen">html { background: black; } body { opacity: 0; }</style>
</head>
<!-- ... -->

footer.php 

  <!-- ... -->
  <noscript id="deferred-styles">
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() . '/style.min.css?' . urb_get_version(); ?>" />
  </noscript>
  <script>
    var loadDeferredStyles = function() {
      var addStylesNode = document.getElementById('deferred-styles');
      var replacement = document.createElement('div');
      replacement.innerHTML = addStylesNode.textContent;
      document.body.appendChild(replacement)
      addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
  </script>
  <?php wp_footer(); ?>
</body>
</html>

Remarque: Mon bloc de style critique comprend: body { opacity: 0; } comme moyen de masquer le contenu sans style. Une fois ma feuille de style différée chargée, elle inclut body { opacity: 1; } pour effacer cet attribut avec une transition.

2
Quantastical

Je vais faire écho aux autres réponses ici qui disent que vous ne devriez probablement pas mettre les styles dans le pied de page sans une bonne raison. Cependant, je devais simplement le faire sur un site où un plugin insérait des styles à l'intérieur de la balise body. Je voulais donc partager comment j'ai ajouté des styles dans le pied de page.

<?php
function print_footer_styles() {
    $style_handle  = 'footer-styles';
    wp_register_style( $style_handle, get_template_directory_uri() . '/css/footer-styles.css' );
    wp_print_styles( array( $style_handle ) );
}

add_action( 'wp_footer', 'print_footer_styles' );
1
Tyler Smith

En fait, la logique de l’idée de FULL css devrait être mise au bas de la page (pied de page) et enfin chargée, elle est assez compliquée.

Cela a commencé avec "comment faire des affaires" (MONEY). Les recherches de Google ont révélé que si les utilisateurs [mobiles] devaient attendre plus de 3 secondes pour afficher une page Web, ils "abandonneraient leur panier et s'en iraient" - -> Les sites Web perdront comme xxx pour cent des bénéfices. Les recherches sont ici: https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

plus de références: https://developers.google.com/speed/docs/insights/mobilehttps://www.thinkwithgoogle.com/feature/mobile-app-user-demographics/#/

À partir des recherches, ils sont parvenus à la conclusion que les pages Web devaient pouvoir afficher LE PREMIER RENDU (et ainsi, "au-dessus du contenu du pli" - AFT) dans la PREMIÈRE seconde pour NE PAS perdre les visiteurs. (et donc des avantages financiers). Ceci est particulier pour les sites MOBILE, mais il en va de même (à un degré moindre) pour les "sites de bureau".

A partir des conclusions des recherches, ils développent les principes et les implémentations nécessaires pour OPTIMISER "le mode/les pages Web commandés doivent être rendus" afin de maximiser les bénéfices et de fidéliser le plus de visiteurs possible (perdre le moins de visiteurs possible, pour plus exactement).

C’est ainsi que (selon Google) les sites Web ne devraient avoir que des ressources essentielles (CSS, JS) incluses dans l’en-tête: livrer le contenu AFT le plus rapidement possible vers le délai idéal de UNE seconde pour la livraison du contenu AFT. Toutes les ressources restantes (FULL CSS, FULL JS, etc.) doivent être chargées AU-DESSOUS DE LA SCÈNE pendant que le contenu AFT est transmis aux visiteurs dans la première seconde pour les garder sur la page Web.

Voilà comment et pourquoi ils promeuvent la méthode. N'oubliez pas que l'avantage des sites Web est également celui de Google: si les sites Web perdent trop de visiteurs (53% s'ils doivent attendre plus de 3 secondes, selon les recherches), ils perdront des avantages financiers; si les sites Web perdent un avantage financier, Google perdra également son propre avantage financier: il s'agit d'un avantage mutuel. Et les recherches portent sur les sites mobiles, pour les "sites de bureau", les effets seraient un peu moins importants - mais ils existeraient quand même!

Vous pouvez être d'accord avec moi ou avec Google ou non! Vous pouvez également avoir une manière différente/meilleure de faire des affaires!

Tous les meilleurs!

0
Prince of Peace and Happiness

Indépendamment des suggestions pour ne pas charger CSS sur le pied de page (et je suis d’accord avec cela) si vous avez vraiment besoin de charger votre CSS sur le pied de page de l’intérieur, le moyen le plus simple consiste à accrocher la fonction de mise en file d’attente sur le hook wp_footer (ou admin_footer dans le cas d’Admin) où vous allez mettre en file d'attente vos feuilles de style:

// change these variables to fit your needs
$handle = 'my-css';
$css_url = plugins_url( 'plugin_style.css', __FILE__ );
$priority = 10; // make it 9999 if you want to enqueue it just before </body>

add_action('wp_footer','enqueue_my_styles', $priority);

function enqueue_my_styles(){
    wp_enqueue_style( $handle, $css_url);
}
0
Eugen Mihailescu

La vitesse de chargement de la page est probablement affectée par d'autres requêtes.
Comme Pieter Goosen a dit que vous ne remarquerez probablement pas la différence.
Pour prouver cela: Supprimez ces requêtes de script et vérifiez la différence lors du chargement de la page.

Avec les outils de développement Firefox ou Google Chrome, vous pouvez facilement vérifier toutes les demandes et voir celles qui ralentissent votre site.

Accélérer le chargement de la page:

  • vérifier les requêtes SQL et les optimiser
  • minify scripts
  • utiliser un plugin de cache
  • ...

À votre santé

0
Diogo Gomes