Kann ich mit $ wp_styles-> add_data Stile zur Fußzeile hinzufügen?

Ich arbeite an einem Skript, um js und CSS-Skripte mit der function add_data in $ wp_scripts und $ wp_styles einfach in die Fußzeile zu verschieben. Ich weiß für Skripte, dass, wenn die Gruppe größer als 0 ist, der Skriptaufruf in die Fußzeile verschoben wird (zuerst macht das unten). Das Festlegen der Gruppe für Stile hat jedoch nicht den gleichen Effekt (und die Gruppe wird richtig mit der zweiten Foreach festgelegt). Gibt es eine Möglichkeit, Stile mit derselben Methode in die Fußzeile zu verschieben, oder sollte ich nach einer Alternative suchen?

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: Der Grund für die Anfrage ist, dass ich versuche, Blocking CSS zu entfernen, um eine Seite schneller laden. Die empfohlene Methode ist im Grunde nur die CSS direkt in die Seite einzubetten, aber das hat nie gut funktioniert. Und jetzt merke ich, dass die Frage, wie ich sie gestellt habe, errorshaft ist. Ich bin nur auf der Suche nach einem effektiven Weg, um Stile zu laden, die immer noch mit Plugins kompatibel sind.

Solutions Collecting From Web of "Kann ich mit $ wp_styles-> add_data Stile zur Fußzeile hinzufügen?"

Ich weiß nicht, was Ihr genauer Grund dafür ist, aber Sie sollten die Idee, Stile in die Fußzeile zu verschieben, vercasting. Wenn Sie zwar an Geschwindigkeit gewinnen, könnten Sie vielleicht eine unbemerkte Summe erhalten, aber das wird auf Kosten anderer größerer Dinge gehen.

Stile sollten immer innerhalb des -Tags hinzugefügt werden. Der Grund dafür ist, dass

-Tags außerhalb der head-Tags ungültiger HTML-Code sind. Aus diesem Grund haben Sie nicht die Möglichkeit, Styles mit wp_enqueue_style und wp_register_style in die Fußzeile zu wp_register_style wie Sie es von Skripten wp_register_style sind.

Ich würde diese ganze Idee ernsthaft überdenken.

BEARBEITEN

Als Nebenbemerkung aus einem Kommentar zu dieser Antwort von @GM

wp_enqueue_style hinzufügen, nicht

. Das -Tag ist jedoch auch außerhalb von nicht erlaubt

Als @ pieter-goosen und @birgire in anderen Antworten und Kommentaren erlauben die W3C-Spezifikationen nicht, dass css in footer, Zitat von der specs-Seite, verlinkt ist:

Ein link Element muss ein rel Attribut haben.

Wenn das rel Attribut verwendet wird, ist das Element auf das head Element beschränkt.

Abgesehen davon sollten Sie beachten, dass wenn Sie css in der Fußzeile hinzufügen, wenn jemand Ihre Seite öffnet, es unstyled erscheint, bis die volle css geladen ist: mit langsamen Verbindungen wird Ihre Seite für einige Sekunden unterbrochen angezeigt, Elemente, die über css versteckt sind, werden sichtbar, Schieberegler erscheinen wie UL-Listen von sichtbaren Bildern …

Also wirklich, ich denke es ist eine schlechte Idee.

Das heißt, ich mag die Art von Antworten nicht, aber ich bevorzuge das “Du kannst das auf diese Weise machen, aber ich schlage vor, tu das nicht”.

Also, hier ist der Weg, das zu tun, aber hey, ich schlage vor, das nicht zu tun.

Die Dinge sind einfacher, wie Sie erwarten können: Skripte und Stile sollten auf wp_enqueue_scripts Hook wp_enqueue_scripts hinzugefügt werden, aber wenn Sie Stile in wp_head einfügen, nachdem wp_head Hook abgefeuert wurde, werden Skripte und Stile in der Fußzeile hinzugefügt.

Eine nützliche Anwendung ist, wenn Skripte innerhalb eines Shortcode-Callbacks in die Warteschlange eingereiht werden, wodurch die Möglichkeit hinzugefügt wird, Shortcode-spezifische Skripte einfach hinzuzufügen.

In Bezug auf Stile, WordPress ist nicht unnachgiebig über W3C-statementen und wird Stile auf Fußzeile ohne zu blinzeln.

Arbeitsablauf:

  1. hook 'wp_print_styles' , wenn alle Skripte und Stile bereits in die Warteschlange eingereiht, aber nicht gedruckt wurden
  2. Speichert die aktuelle Warteschlange für Skripts und Stile in Variablen
  3. Leeren Sie die Warteschlange für beide Skripte und Stile, auf diese Weise, wenn WordPress zum Drucken von Skripten und Stilen in Kopf suchen wird nichts zu drucken finden
  4. hook 'wp_footer' mit der Priorität 0, und stelle die Stile und Skripte wieder her, die du an Punkt # 2 gespeichert hast. Auf diese Weise können WordPress nach Stilen und Skripten suchen, die in der Fußzeile gedruckt werden können.

Alles kann in wenigen Zeilen Code gemacht werden:

 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); 

Hinweis

Der obige Code erfordert PHP 5.3+ für die Verwendung von Closure und WP 3.9 für die Verwendung von doing_action .

Ich habe gerade diese Frage speziell wegen der Anforderung von Google PageSpeed ​​Insights recherchiert:

Beseitigen Sie JavaScript und CSS, die das Rendering blockieren, in überfalteten Inhalten

Ihre Seite enthält 1 blockierende Skriptressourcen und 1 blockierende CSS-Ressourcen. Dies führt zu einer Verzögerung beim Rendern Ihrer Seite.

Keiner der obigen Inhalte auf Ihrer Seite konnte gerendert werden, ohne auf das Laden der folgenden Ressourcen zu warten. Versuchen Sie, blockierende Ressourcen zu verschieben oder asynchron zu laden, oder leiten Sie die kritischen Teile dieser Ressourcen direkt in den HTML-Code ein.

Optimiere CSS Lieferung von:
… / style.min.css? ver = 4.8

Googles Empfehlung war, kritisches CSS mit einem Inline-Block

in ... einzubetten und unkritisches CSS über JavaScript zu laden.

Ich konnte nicht herausfinden, wie man die nativen functionen von WordPress benutzt, um einen nativen Stilblock einzubinden, ohne vorher ein externes Stylesheet zu benötigen (siehe: wp_add_inline_style .) Ich habe gerade die Aufgabe mit meiner eigenen Vorlage header.php und footer.php Dateien:

header.php

  < ?php wp_head(); ?>    

footer.php

     < ?php wp_footer(); ?>   

Hinweis: Zu meinem kritischen Stilblock gehören: body { opacity: 0; } body { opacity: 0; } als eine Möglichkeit, nicht formatierten Inhalt zu verbergen. Sobald das zurückgestellte Stylesheet geladen ist, enthält es body { opacity: 1; } body { opacity: 1; } um dieses Attribut mit einem Übergang zu löschen.

Die Seitenladegeschwindigkeit wird wahrscheinlich von anderen Anfragen beeinflusst.
Wie Pieter Goosen sagte, werden Sie wahrscheinlich den Unterschied nicht bemerken.
Um das zu beweisen: Entfernen Sie diese Scripts-Anfragen und überprüfen Sie den Unterschied beim Laden der Seite.

Mit den Firefox- oder Google Chrome-Entwicklertools können Sie problemlos alle Anfragen überprüfen und sehen, welche Ihre Website verlangsamen.

Beschleunigen Sie die Seitenbelastung:

  • Überprüfen Sie SQL-Abfragen und optimieren Sie sie
  • Skripte minimieren
  • Verwenden Sie ein Cache-Plugin

Prost

Ungeachtet der Vorschläge, CSS nicht in die Fußzeile zu laden (und ich stimme dem zu), wenn Sie wirklich CSS in die Fußzeile des Frontends laden müssen, ist die einfachste Möglichkeit, die Enqueue-function auf dem wp_footer-Hook (oder admin_footer im Falle von Admin) zu haken Sie werden Ihre Stylesheets in die Warteschlange stellen:

 // 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  add_action('wp_footer','enqueue_my_styles', $priority); function enqueue_my_styles(){ wp_enqueue_style( $handle, $css_url); }