Core-jQuery in der Fußzeile einreihen?

22

Ich habe dies in meiner functions.phpDatei und kann jQuery nicht in die Fußzeile laden. Die includesDatei wird jedoch in die Fußzeile geladen. Was muss ich sonst noch tun?

function starter_scripts() {
    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );

    wp_enqueue_script( 'jquery', '', '', '', true );

    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );
Desi
quelle
Wenn Sie dies aus Performancegründen tun, können Sie deferstattdessen Ihre Skript-Tags ergänzen
diachedelic
WP Entwickler hier, ich habe ein Plugin gemacht, um damit umzugehen: wordpress.org/plugins/jquery-manager
Remzi Cavdar

Antworten:

23

Dazu müssen Sie zuerst Ihr jQuery-Skript abmelden und sich dann erneut registrieren. Wenn Sie jQuery verwenden, das mit WordPress geliefert wird, ist das Folgende die Funktion, nach der Sie suchen.

function starter_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );

    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

Wenn Sie eine von Google CDN gehostete Version von jQuery verwenden, teilen Sie mir mit, dass ich diesen Code für die Google CDN-URL ändern werde.

Robert hue
quelle
5
Was meinst du? Die Lösung besteht darin, jQuery in die Fußzeile zu verschieben.
Robert Farbton
2
Möglicherweise müssen Sie auch is_admin () überprüfen, um Änderungen am Backend jQuery zu vermeiden. Schließlich müssen wir nur das Frontend unserer Websites optimieren :)
Tim Malone,
1
@ TimMalone - eigentlich nicht - wp_enqueue_scriptswird nur auf dem Frontend verwendet, während admin_enqueue_scriptses für das
Backend
1
Ich finde diese Lösung eigentlich schrecklich. Sind die Versions-Tags mit diesem entfernt. Was ist das für ein Starter-Stil und was ist das mit "min.js" und was hat es mit "jQuery" zu tun?
NextGenThemes
2
@redanimalwar Starter-Stil und enthält Dateien direkt aus der Frage.
Tehlivi
43

Hier ist eine weitere Option, mit der vermieden wird, dass Sie sich abmelden und erneut registrieren müssen:

/**
 * Move jQuery to the footer. 
 */
function wpse_173601_enqueue_scripts() {
    wp_scripts()->add_data( 'jquery', 'group', 1 );
    wp_scripts()->add_data( 'jquery-core', 'group', 1 );
    wp_scripts()->add_data( 'jquery-migrate', 'group', 1 );
}
add_action( 'wp_enqueue_scripts', 'wpse_173601_enqueue_scripts' );

Diese Lösung ahmt den WordPress-Kern nach, indem sie das groupto 1setzt. So bestimmt WordPress, ob sich ein Skript in der Fußzeile befinden soll oder nicht (mir ist der Grund dafür nicht bekannt 1, da @jgraup in den Kommentaren etwas willkürlich erscheint).

Matthew Boynes
quelle
1
Interessant. Es sieht so aus, als würde es wp_register_scriptverwendet add_data( $handle, 'group', 1 ), um Skripte in die Fußzeile zu verschieben. core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… - Können Sie erläutern , warum das so ist? Ein Blick auf Ihren Code zeigt, dass 'group' ein bisschen willkürlich ist. Aber ich kann in core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… sehen, wie es do_itemspäter in WP_Scripts-> verwendet wird . In jedem Fall scheint dies die am wenigsten destruktive Antwort zu sein.
JGRAUP
2
Ich hoffe, jemand kann diese drei überstimmten Antworten weiter kommentieren. Alle sind unterschiedlich und erfordern einige Kenntnisse von WP. Da Google erfordert, dass diese Skripte unter dem Falz sind, ist dies ein wichtiges Thema.
ssaltman
2
Beste Antwort! Hinweis : Es funktioniert seit WordPress 4.2.0 und verwendet es in functions.php im Hook 'wp_enqueue_scripts' Callback
Realmag777
Hallo, ich habe den obigen Ansatz ausprobiert, aber es hat nicht funktioniert. Kann jemand helfen?
iSaumya
1
Das ist so gut! Ich danke dir sehr. Erwähnenswert ist jedoch, dass @tehlivi angibt, dass WP eine alte Version von jQuery verwendet. Sie sollten in Betracht ziehen, die Registrierung einer neueren Version rückgängig zu machen.
Skolind
18

Eine bessere Lösung:

add_action( 'wp_default_scripts', 'move_jquery_into_footer' );

function move_jquery_into_footer( $wp_scripts ) {

    if( is_admin() ) {
        return;
    }

    $wp_scripts->add_data( 'jquery', 'group', 1 );
    $wp_scripts->add_data( 'jquery-core', 'group', 1 );
    $wp_scripts->add_data( 'jquery-migrate', 'group', 1 );
}

Warum ist es besser als die akzeptierte Antwort IMO

  1. Ändert es im Kern, nicht zu einem späteren Zeitpunkt, wenn andere Dinge bereits damit zu tun hatten.
  2. Die Versionszeichenfolge wurde beibehalten und nicht entfernt!
  3. Die Registrierung eines Skripts wird nicht aufgehoben und erneut registriert, sondern es wird nur der Gruppenwert festgelegt, der im Wesentlichen dem Wert entspricht, bei dem das Skript registriert werden würde $footer = true.

Über dies nicht an den Administrator zu tun

Wenn Plugins Inline-JQuery zum wp_head hinzufügen, schlägt dies fehl, wenn JQuery zu diesem Zeitpunkt nicht geladen wird. Ich schlage daher vor, dies zu vermeiden, bis Millionen Ihre Website bearbeiten und Sie versuchen, die Leistung Ihres Administrators zu optimieren. Dies gilt auch für das Frontend. Achten Sie daher auf schlecht codierte Designs oder Plugins, die mithilfe von Inline-jQuery-Code eine Abfrage im Kopf voraussetzen. WP und Plugins registrieren andere Skripte im Admin-Kopf mit jquery in deps, so dass es meiner Meinung nach sowieso nicht funktionieren würde.

Darüber funktioniert nicht

Sie müssen sich darüber im Klaren sein, dass, wenn ein anderes Skript in den Kopf geladen wird, dessen Abhängigkeiten jQuery enthalten, jQuery auch direkt vor sich selbst in den Kopf geladen wird. Und das ist gut und zu erwarten, der Grund, warum das System wp_enqueue existiert. Dies bedeutet, dass Sie bald erfahren werden, wenn Sie einige Plugins verwenden, dass eines davon eine Abfrage des Heads erforderlich macht. Leider ist dies die Standardeinstellung für Skripte in der Warteschlange.

Radikale Lösung

Ich denke, es wird jede Inline-JS bremsen, die JQuery voraussetzt, aber sollte das selten sein. Dadurch werden alle Skripte in die Fußzeile verschoben, unabhängig davon, wie sie in die Warteschlange gestellt werden.

add_action( 'wp_enqueue_scripts', 'js_to_footer' );

function js_to_footer() {
  remove_action( 'wp_head', 'wp_print_scripts' );
  remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
  remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
}
NextGenThemes
quelle
2
Während dies die Frage beantworten kann und einige gute Punkte zum Kauen enthält, enthält die Antwort zu viel Rauschen (Flusen?) Und ist den zuvor veröffentlichten Antworten mit geringfügigen Code-Verbesserungen sehr ähnlich. Es könnte besser ankommen, wenn es bearbeitet und auf eine informativere Version verkleinert würde. Es besteht auch keine wirkliche Notwendigkeit, bestimmte Benutzer oder Antworten abzurufen (da diese möglicherweise in Zukunft aus irgendeinem Grund nicht mehr vorhanden sind).
Howdy_McGee
Sie nennen einen völlig unerwähnten und wahrscheinlich besseren Code als alles, was in anderen Antworten erwähnt wird, "kleinere Code-Verbesserungen". Nun, das ist einfach nicht wahr. Außerdem habe ich niemanden "angerufen", sondern nur Fakten erwähnt, von denen ich weiß, dass sie den Codierungsstil verbessern und die Leser darüber aufklären, damit sie besseren Code schreiben. Im Ernst, ich habe einige Zeit gebraucht, um die beste Antwort hier zu schreiben, und das ist es, was ich dafür bekomme.
NextGenThemes
4
Die anderen Antworten erwähnen nichts von anderen Skripten, die die jQuery in den Kopf zwingen. Tatsächlich lindert meine Antwort die Verwirrung von Leuten, die nicht wissen, warum es nicht funktioniert. Keine der anderen Antworten erwähnen die möglichen Risiken ...
NextGenThemes
Dieser Code (als Code der obigen Antwort) hat mir einen Fehler von 500 zurückgegeben. Ich habe WordPress 4.9.9
Marco Panichi
Kaum zu glauben, dass dieser Code eine 500 verursacht, haben Sie wahrscheinlich einen Fehler bei der Implementierung in Ihren Code gemacht. Dies ist nicht wirklich der richtige Ort, um zu fragen, und Ihre veraltete WP-Version ist kaum genug Informationen.
NextGenThemes
2

Ich habe ein Plugin für dieses spezielle Problem entwickelt. Dieses Plugin ist nicht mit WordPress jQuery verwirrend, da es nur im Frontend geladen wird. Siehe: jQuery Manager für WordPress

Warum noch ein jQuery Updater / Manager / Developer / Debugging-Tool?

Da Sie mit keinem der Entwicklertools eine bestimmte Version von jQuery und / oder jQuery Migrate auswählen können. Bereitstellung sowohl der komprimierten Minified / Production- als auch der unkomprimierten / Development-Version. Siehe Funktionen unten!

✅ Wird nur im Frontend ausgeführt und beeinträchtigt WordPress-Administrator / Backend und WP-Customizer nicht (aus Kompatibilitätsgründen). Siehe: https://core.trac.wordpress.org/ticket/45130 und https: // core. trac.wordpress.org/ticket/37110

Schalten Sie jQuery und / oder jQuery Migrate ein / aus

✅ Aktivieren Sie eine bestimmte Version von jQuery und / oder jQuery Migrate

Und vieles mehr! Der Code ist Open Source, sodass Sie ihn studieren, daraus lernen und Beiträge leisten können.


Fast jeder benutzt den falschen Griff

WordPress verwendet tatsächlich das JQuery-Core-Handle, nicht JQuery:

https://github.com/WordPress/WordPress/blob/f84ab5e19f0038a3abec71821c9b8f47a4272942/wp-includes/script-loader.php#L1017

// jQuery
$scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
$scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' );
$scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

Das jquery- Handle ist nur ein Alias ​​zum Laden von jquery-core mit jquery-migrate

. Weitere Informationen zu Aliasen: wp_register_script Mehrere Bezeichner?

Der richtige Weg, es zu tun

In meinem Beispiel unten verwende ich das offizielle jQuery-CDN unter https://code.jquery.com. Ich verwende auch script_loader_tag, damit ich einige CDN-Attribute hinzufügen kann.
Sie könnten den folgenden Code verwenden:

// Front-end not excuted in the wp admin and the wp customizer (for compatibility reasons)
// See: https://core.trac.wordpress.org/ticket/45130 and https://core.trac.wordpress.org/ticket/37110
function wp_jquery_manager_plugin_front_end_scripts() {
    $wp_admin = is_admin();
    $wp_customizer = is_customize_preview();

    // jQuery
    if ( $wp_admin || $wp_customizer ) {
        // echo 'We are in the WP Admin or in the WP Customizer';
        return;
    }
    else {
        // Deregister WP core jQuery, see https://github.com/Remzi1993/wp-jquery-manager/issues/2 and https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226
        wp_deregister_script( 'jquery' ); // the jquery handle is just an alias to load jquery-core with jquery-migrate
        // Deregister WP jQuery
        wp_deregister_script( 'jquery-core' );
        // Deregister WP jQuery Migrate
        wp_deregister_script( 'jquery-migrate' );

        // Register jQuery in the head
        wp_register_script( 'jquery-core', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), null, false );

        /**
         * Register jquery using jquery-core as a dependency, so other scripts could use the jquery handle
         * see /wordpress/283828/wp-register-script-multiple-identifiers
         * We first register the script and afther that we enqueue it, see why:
         * /wordpress/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
         * /programming/39653993/what-is-diffrence-between-wp-enqueue-script-and-wp-register-script
         */
        wp_register_script( 'jquery', false, array( 'jquery-core' ), null, false );
        wp_enqueue_script( 'jquery' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_jquery_manager_plugin_front_end_scripts' );


function add_jquery_attributes( $tag, $handle ) {
    if ( 'jquery-core' === $handle ) {
        return str_replace( "type='text/javascript'", "type='text/javascript' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'", $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_jquery_attributes', 10, 2 );
Remzi Cavdar
quelle
0
add_action("wp_enqueue_scripts", "myscripts");

function myscripts() { 
   wp_enqueue_script( 'jquery' , '', array(), true); //true for footer
   wp_enqueue_script( 'someScript-js', 'https://domain.com/someScript.js' , '', '', true );
}
samjco
quelle
-3

Hey, ändere nur deinen Code, damit er dir gefällt

function starter_scripts() {
        wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
        wp_enqueue_script('jquery');
        wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'starter_scripts' );

Ich denke, es funktioniert gut

füge diese Zeilen in deine functions.php Datei ein

remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_enqueue_scripts', 5);

Dann wird das Skript in die Fußzeile eingefügt

Amit Mishra
quelle
Dies versetzt jQuery in den Kopf. Ich brauche es in der Fußzeile.
Desi
Hey Desi bitte überprüfen Sie die bearbeitete Antwort Ich denke, es hilft Ihnen
Amit Mishra
6
Ich bin mir ziemlich sicher, dass dies eine schreckliche Idee ist - Sie haben effektiv verhindert , dass Skripte in den Header geladen werden, nicht nur jQuery, und möglicherweise werden Skripte doppelt in die Warteschlange gestellt (haben nicht so genau nachgesehen). Tatsächlich benötigen Sie wahrscheinlich nur den Teil remove_action/, add_actionwenn Sie dies auf diese Weise tun.
drzaus
1
In der Tat schreckliche Idee, tu das nicht!
NextGenThemes