Umieścić rdzeń jQuery w stopce?

22

Mam to w swoim functions.phppliku i nie mogę załadować jQuery do stopki. W includeszaładowaniu pliku w stopce grzywny, choć. Co jeszcze muszę zrobić?

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
źródło
Jeśli robisz to ze względu na wydajność, możesz deferzamiast tego rozważyć dodanie tagów skryptu: matthewhorne.me/defer-async-wordpress-scripts
diachedelic
WP dev tutaj, zrobiłem wtyczkę, aby sobie z tym poradzić: wordpress.org/plugins/jquery-manager
Remzi Cavdar

Odpowiedzi:

23

Aby to zrobić, najpierw musisz wyrejestrować skrypt jQuery, a następnie zarejestrować się ponownie. Jeśli używasz jQuery pochodzi z WordPress, to jest funkcja, której szukasz.

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

Jeśli używasz wersji jQuery obsługiwanej przez Google CDN, daj mi znać, że zmodyfikuję ten kod dla adresu URL Google CDN.

Robert Hue
źródło
5
Co masz na myśli? Rozwiązanie polega na przeniesieniu jQuery do stopki.
Robert hue
2
Konieczne może być również sprawdzenie is_admin (), aby uniknąć wprowadzania zmian w jQuery zaplecza, w końcu naprawdę potrzebujemy tylko zoptymalizować interfejs naszych witryn :)
Tim Malone
1
@ TimMalone - właściwie nie - wp_enqueue_scriptsjest używany tylko w interfejsie użytkownika, podczas gdy admin_enqueue_scriptsjest używany w
systemie zaplecza
1
Myślę, że to rozwiązanie jest naprawdę okropne. Czy tagi wersji są w ten sposób usuwane? Co to jest ten styl startowy, czyli to obejmuje plik.min.js i co to ma wspólnego z jQuery.
NextGenThemes,
2
@redanimalwar styl startowy i zawiera pliki pochodzą bezpośrednio z pytania.
tehlivi
43

Oto kolejna opcja, która pozwala uniknąć konieczności wyrejestrowywania i ponownej rejestracji:

/**
 * 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' );

To rozwiązanie naśladuje rdzeń WordPress , ustawiając na groupto 1, w ten sposób WordPress określa, czy skrypt powinien znajdować się w stopce, czy nie (nie znam uzasadnienia 1, jak zauważył @jgraup w komentarzach, wydaje się to nieco arbitralne).

Matthew Boynes
źródło
1
Ciekawy. Wygląda na to, że wp_register_scriptsłuży add_data( $handle, 'group', 1 )do przenoszenia skryptów do stopki. core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… - Czy możesz wyjaśnić , dlaczego tak jest? Patrząc na twój kod, „grupa” wydaje się nieco arbitralna. Ale widzę w core.trac.wordpress.org/browser/tags/4.5/src/wp-include/… jak to jest używane w WP_Scripts-> do_itempóźniej. Tak czy inaczej, wydaje się to być najmniej destrukcyjną odpowiedzią.
jgraup
2
Mam nadzieję, że ktoś może skomentować te trzy pozytywne odpowiedzi. Wszystkie są różne i wymagają pewnej wiedzy na temat WP. Ponieważ Google wymaga, aby te skrypty znajdowały się poniżej zakładki, jest to ważny temat.
ssaltman
2
Najlepsza odpowiedź! Uwaga : działa od WordPress 4.2.0 i używa go w functions.php w wywołaniu zwrotnym „wp_enqueue_scripts”
realmag777,
Cześć Próbowałem powyższego podejścia, ale nie zadziałało. Czy ktoś może pomóc?
iSaumya
1
To jest takie dobre! Dziękuję bardzo. Warto jednak zauważyć, że @tehlivi stwierdza - WP używa starej wersji jQuery - rozważ wyrejestrowanie i zarejestrowanie nowszej wersji.
skolind
18

Lepsze rozwiązanie:

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

Dlaczego lepiej niż zaakceptowana odpowiedź IMO

  1. Zmienia to na samym rdzeniu, a nie na późniejszym etapie, gdzie inne rzeczy mogły już z tym zrobić.
  2. Ciąg wersji zachował się na miejscu i nie został usunięty!
  3. Nie wyrejestrowuje i nie rejestruje skryptu, ale po prostu ustawia wartość grupy, która jest zasadniczo taka sama, jak gdyby skrypt został zarejestrowany $footer = true.

O nie robieniu tego administratorowi

Jeśli wtyczki dodadzą wbudowaną jquery do wp_head, zakończy się niepowodzeniem, gdy jquery nie zostanie w tym momencie załadowane, więc sugeruję, aby tego unikać, dopóki miliony nie edytują witryny i nie spróbujesz zoptymalizować wydajności administratora. Dotyczy to również nakładki, dlatego należy uważać na źle zakodowane kompozycje lub wtyczki, które zakładają jquery w głowie za pomocą wbudowanego kodu jQuery. WP i wtyczki rejestrują inne skrypty do administratora z jquery w deps, więc myślę, że i tak nie działałoby.

O tym nie działa

Musisz być świadomy, że jeśli jakikolwiek inny skrypt zostanie załadowany do nagłówka, który ma jQuery w swoich zależnościach, spowoduje to również załadowanie jQuery do nagłówka tuż przed sobą. Jest to dobre i oczekiwane powód, dla którego istnieje system wp_enqueue. Oznacza to, że wkrótce się dowiesz, jeśli użyjesz kilku wtyczek, że jedna z nich będzie wymagać wywoływania szumu w głowie. To niestety domyślna kolejka skryptów.

Radykalne rozwiązanie

Myślę, że to zahamuje każdy wbudowany JS, który zakłada jquery, ale powinien to być rzadki. Zmusi to wszystkie skrypty do stopki, niezależnie od tego, jak są kolejkowane.

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
źródło
2
Chociaż może to odpowiedzieć na pytanie i ma kilka dobrych punktów do przeżuwania, w odpowiedzi jest za dużo hałasu (puch?) I jest bardzo podobny do wcześniej opublikowanych odpowiedzi z drobnymi poprawkami kodu. Może być lepiej przyjęty, jeśli zostanie zredagowany i skrócony do bardziej informacyjnej wersji. Nie ma też rzeczywistej potrzeby wzywania określonych użytkowników lub odpowiedzi (ponieważ mogą one nie istnieć z jakiegokolwiek powodu w przyszłości).
Howdy_McGee
Nazywasz całkowicie niewymienioną i prawdopodobnie lepszą niż cokolwiek wspomnianego w innych odpowiedziach „drobnymi poprawkami kodu”. Cóż, to po prostu nieprawda. Poza tym nikogo nie „wołałem”, tylko wspomniałem o faktach, które znam, aby poprawić styl kodowania i edukować czytelników, aby pisali lepszy kod. Poważnie zajęło mi sporo czasu, aby napisać najlepszą odpowiedź tutaj do tej pory i właśnie to dostaję.
NextGenThemes
4
Inne odpowiedzi nie wspominają nic o innych skryptach zmuszających jQuery do głowy, w rzeczywistości moja odpowiedź usuwa zamieszanie od ludzi, którzy nie wiedzą, dlaczego to nie działa. Żadna z pozostałych odpowiedzi nie wspomina o potencjalnym ryzyku ...
NextGenThemes
Ten kod (jak kod powyższej odpowiedzi) zwrócił mi błąd 500. Mam WordPress 4.9.9
Marco Panichi
Trudno uwierzyć, że ten kod powoduje 500, prawdopodobnie popełniłeś błąd, implementując go w swoim kodzie. To nie jest właściwe miejsce, aby zapytać, a twoja nieaktualna wersja WP nie zawiera wystarczających informacji.
NextGenThemes
2

Opracowałem wtyczkę do tego konkretnego problemu. Ta wtyczka nie zadziera z jQuery WordPress, ponieważ jest ładowana tylko w interfejsie. Zobacz: jQuery Manager dla WordPress

Dlaczego kolejne narzędzie jQuery Updater / Manager / Developer / Debugging?

Ponieważ żadne z narzędzi programistycznych nie pozwala wybrać konkretnej wersji jQuery i / lub jQuery Migrate. Zapewnienie zarówno skompresowanej wersji zminimalizowanej / produkcyjnej, jak i nieskompresowanej / rozwojowej. Zobacz funkcje poniżej!

Executed Wykonane tylko w interfejsie użytkownika, nie koliduje z administratorem / backendem WordPressa i dostosowaniem WP (ze względów kompatybilności) Patrz: https://core.trac.wordpress.org/ticket/45130 i https: // core. trac.wordpress.org/ticket/37110

Włącz / wyłącz jQuery i / lub jQuery Migrate

✅ Aktywuj określoną wersję jQuery i / lub jQuery Migrate

I wiele więcej! Kod jest open source, więc możesz go studiować, uczyć się na nim i wnosić wkład.


Prawie wszyscy używają niewłaściwego uchwytu

WordPress faktycznie używa uchwytu jquery-core, a nie 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' );

Jquery uchwyt jest tylko alias załadować jQuery rdzeń z jquery-migrować

Zobacz więcej informacji na temat aliasów: wp_register_script wielu identyfikatorów?

Właściwy sposób to zrobić

W poniższym przykładzie używam oficjalnego CDN jQuery pod adresem https://code.jquery.com. Używam także script_loader_tag, aby móc dodać niektóre atrybuty CDN.
Możesz użyć następującego kodu:

// 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
źródło
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
źródło
-3

Hej, zmień tylko swój kod, aby to polubić

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

myślę, że działa dobrze

dodaj te linie do pliku functions.php

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

następnie dodaje skrypt do stopki

Amit Mishra
źródło
To stawia jQuery w głowie. Potrzebuję tego w stopce.
Desi
Hej, Desi, sprawdź zredagowaną odpowiedź. Myślę, że to ci pomoże
Amit Mishra,
6
Jestem prawie pewien, że to okropny pomysł - skutecznie uniemożliwiłeś cokolwiek ładowanie skryptów w nagłówku, nie tylko jQuery, i może być skryptami podwójnie kolejkującymi (nie zaglądałeś tak głęboko). W rzeczywistości prawdopodobnie potrzebujesz tylko części remove_action/, add_actionjeśli zamierzasz to zrobić w ten sposób.
drzaus
1
Rzeczywiście okropny pomysł, nie rób tego!
NextGenThemes