Jak dodać prosty skrypt jQuery do WordPress?

Przeczytałem Codex i kilka postów na blogu o używaniu jQuery w WordPressie i jest to bardzo frustrujące. Doszedłem do załadowania jQuery do functions.phppliku, ale wszystkie przewodniki są kiepskie, ponieważ zakładają, że masz już mnóstwo doświadczenia z WordPressem. Na przykład mówią, że teraz, gdy ładuję jQuery przez functions.phpplik, teraz wszystko, co muszę zrobić, to załadować moje jQuery.

Jak dokładnie to robię? Do jakich plików mam dodać kod? Jak dokładnie dodać to dla pojedynczej strony WordPress?

Wiem, co masz na myśli, mówiąc o samouczkach. Oto jak to robię:

Najpierw musisz napisać swój skrypt. W swoim folderze z motywami utwórz folder o nazwie „js”. Utwórz w tym folderze plik dla swojego javascript. Np. Your-script.js. Dodaj swój skrypt jQuery do tego pliku (nie potrzebujesz <script>tagów w pliku .js).

Oto przykład tego, jak może wyglądać Twój skrypt jQuery (w wp-content / themes / your-theme / js / your-scrript.js):

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

Zauważ, że używam jQuery, a nie $ na początku funkcji.

Ok, teraz otwórz plik functions.php swojego motywu. Będziesz chciał użyć tej wp_enqueue_script()funkcji, aby dodać swój skrypt, jednocześnie informując WordPress, że opiera się na jQuery. Oto jak to zrobić:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

Zakładając, że Twój motyw ma wp_head i wp_footer we właściwych miejscach, powinno to działać. Daj mi znać, jeśli potrzebujesz dalszej pomocy.

Pytania dotyczące WordPressa można zadawać na stronie Odpowiedzi WordPress .

Po długich poszukiwaniach w końcu znalazłem coś, co działa z najnowszym WordPressem. Oto kroki, które należy wykonać:

1. Znajdź katalog motywu, utwórz folder w katalogu dla niestandardowego pliku js ( w tym przykładzie custom_js ).
2. Umieść swój niestandardowy jQuery w pliku .js w tym katalogu ( w tym przykładzie jquery_test.js ).

3. Upewnij się, że Twój niestandardowy plik jQuery .js wygląda następująco:

   (function($) {
   $(document).ready(function() {
   $('.your-class').addClass('do-my-bidding');
   })
   })(jQuery);

4. Przejdź do katalogu motywu, otwórz functions.php

5. Dodaj kod u góry, który wygląda tak:

   //this goes in functions.php near the top
   function my_scripts_method() {
   // register your script location, dependencies and version
      wp_register_script('custom_script',
      get_template_directory_uri() . '/custom_js/jquery_test.js',
      array('jquery'),
      '1.0' );
    // enqueue the script
     wp_enqueue_script('custom_script');
     }
   add_action('wp_enqueue_scripts', 'my_scripts_method');

6. Sprawdź swoją witrynę, aby upewnić się, że działa!

Jeśli używasz motywu potomnego Wordpress do dodawania skryptów do motywu, powinieneś zmienić funkcję get_template_directory_uri na get_stylesheet_directory_uri, na przykład:

Motyw nadrzędny:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

Motyw podrzędny:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri: / twoja-witryna / wp-content / themes / parent-theme

get_stylesheet_directory_uri: / twoja-witryna / wp-content / themes / child-theme

Możesz dodać jQuery lub javascript w pliku function.php motywu. Kod jest jak poniżej:

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

Aby uzyskać więcej informacji, odwiedź ten samouczek: http://www.codecanal.com/add-simple-jquery-script-wordpress/

Oprócz umieszczania skryptu za pomocą funkcji możesz „po prostu” dołączyć link (czyli znacznik relacyjny link) w nagłówku, stopce, w dowolnym szablonie, gdziekolwiek. Musisz tylko upewnić się, że ścieżka jest poprawna. Sugeruję użycie czegoś takiego (zakładając, że jesteś w katalogu swojego motywu).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

Dobrą praktyką jest umieszczenie go tuż przed zamykającym tagiem body lub przynajmniej tuż przed stopką. Możesz także użyć dołączeń php lub kilku innych metod pobierania tego pliku.

<script type="javascript"><?php include('your-file.js');?></script>

** # Metoda 1: ** Spróbuj umieścić kod jQuery w oddzielnym pliku js.

Teraz zarejestruj ten skrypt w pliku functions.php.

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Teraz gotowe.

Rejestracja skryptu w funkcjach ma swoje zalety, ponieważ pojawia się w <head>sekcji podczas ładowania strony, dlatego jest zawsze częścią header.php. Nie musisz więc powtarzać kodu za każdym razem, gdy piszesz nową zawartość HTML.

# Metoda 2: umieść kod skryptu w treści strony pod <script>tagiem. Wtedy nie musisz go rejestrować w funkcjach.

Możesz dodać niestandardowy javascript lub jquery za pomocą tej wtyczki.
https://wordpress.org/plugins/custom-javascript-editor/

Kiedy używasz jQuery, nie zapomnij użyć trybu jquery noconflict

Istnieje wiele samouczków i odpowiedzi na temat dodawania skryptu do strony. Ale nie mogłem znaleźć, jak uporządkować ten kod, aby działał poprawnie. Wynika to z tego, że $ nie jest używany w tej formie JQuery.

Oto mój kod i możesz go użyć jako szablonu.

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});

Odpowiedź stąd: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Pomimo tego, że WordPress istnieje już od jakiegoś czasu, a metoda dodawania skryptów do motywów i wtyczek jest taka sama od lat, nadal istnieje niejasność co do tego, jak dokładnie należy dodawać skrypty. Więc wyjaśnijmy to.

Ponieważ jQuery jest nadal najczęściej używanym frameworkiem JavaScript, przyjrzyjmy się, jak można dodać prosty skrypt do motywu lub wtyczki.

Tryb zgodności jQuery

Zanim zaczniemy dołączać skrypty do WordPressa, przyjrzyjmy się trybowi zgodności jQuery. WordPress jest dostarczany w pakiecie z kopią jQuery, której powinieneś używać ze swoim kodem. Podczas ładowania jQuery WordPress używa trybu zgodności, który jest mechanizmem unikania konfliktów z innymi bibliotekami językowymi.

Sprowadza się to do tego, że nie możesz używać znaku dolara bezpośrednio, tak jak w innych projektach. Pisząc jQuery dla WordPress, musisz zamiast tego użyć jQuery. Spójrz na poniższy kod, aby zobaczyć, co mam na myśli:

Rozwiązania, które widziałem, są z perspektywy dodawania funkcji javascript do motywu. Jednak OP zapytał konkretnie: „Jak dokładnie dodać to dla pojedynczej strony WordPress?” Wygląda na to, że może to być sposób, w jaki używam javascript na moim blogu Wordpress, gdzie poszczególne posty mogą mieć różne "widżety" oparte na javascript. Na przykład post może pozwolić użytkownikowi zmienić zmienne (suwaki, pola wyboru, pola wprowadzania tekstu) i wydrukować lub wyświetlić wyniki.

Zaczynając z perspektywy JavaScript:

1. Napisz swoje funkcje JavaScript w osobnym pliku „.js”

Nie myśl nawet o umieszczeniu znaczącej części kodu JavaScript w html swojego posta - utwórz plik JavaScript lub inne pliki z kodem.

2. Połącz swój JavaScript z kodem HTML swojego posta

Jeśli widżet JavaScript współdziała z kontrolkami i polami HTML, musisz zrozumieć, jak tworzyć zapytania i ustawiać te elementy z poziomu JavaScript, a także jak umożliwić elementom interfejsu użytkownika wywoływanie funkcji JavaScript. Oto kilka przykładów; po pierwsze, z JavaScript:

var val = document.getElementById(“AM_Freq_A_3”).value;

A z html:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. Użyj jQuery, aby wywołać funkcję inicjalizacji widgetu JavaScript

Dodaj to do pliku .js, używając nazwy funkcji, która konfiguruje i rysuje widget JavaScript, gdy strona jest do tego gotowa:

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. W kodzie html swojego posta załaduj skrypty potrzebne do Twojego posta

W edytorze kodu Wordpress zazwyczaj umieszczam skrypty na końcu postu. Na przykład mam folder skryptów w moim głównym katalogu. Wewnątrz mam katalog narzędzi z typowym JavaScriptem, który mogą być współużytkowane przez niektóre moje posty - w tym przypadku niektóre z moich własnych funkcji matematycznych i biblioteki plotującej flotr2. Uważam, że wygodniej jest zgrupować JavaScript specyficzny dla postu w innym katalogu, z podkatalogami opartymi na dacie, zamiast na przykład korzystać z menedżera mediów.

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>

5. Umieść w kolejce jQuery

Wordpress rejestruje jQuery, ale nie jest dostępne, chyba że powiesz Wordpressowi, że go potrzebujesz, poprzez kolejkowanie. Jeśli tego nie zrobisz, polecenie jQuery zakończy się niepowodzeniem. Wiele źródeł mówi, jak dodać to polecenie do pliku functions.php, ale zakładamy, że znasz kilka innych ważnych szczegółów.

Po pierwsze, edycja motywu jest złym pomysłem - każda przyszła aktualizacja motywu usunie zmiany. Utwórz motyw potomny. Oto jak:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Plik functions.php dziecka nie zastępuje pliku motywu nadrzędnego o tej samej nazwie, ale dodaje do niego. Samouczek motywów potomnych sugeruje, jak umieścić w kolejce plik nadrzędny i podrzędny style.css. Możemy po prostu dodać kolejną linię do tej funkcji, aby również umieścić w kolejce jQuery. Oto mój cały plik functions.php dla motywu potomnego:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

Możesz użyć predefiniowanej funkcji WordPress, aby dodać plik skryptu do wtyczki WordPress.

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

Spójrz na post, który pomoże ci zrozumieć, jak łatwo możesz zaimplementować jQuery i CSS we wtyczce WordPress.

Oprócz umieszczania skryptu za pomocą funkcji możesz „po prostu” dołączyć link (czyli znacznik relacyjny link) w nagłówku, stopce, w dowolnym szablonie, gdziekolwiek.

Nie. Nigdy nie powinieneś po prostu dodawać linku do zewnętrznego skryptu, takiego jak ten w WordPress. Dodanie ich do kolejki w pliku functions.php zapewnia, że ​​skrypty są ładowane we właściwej kolejności.

Brak ich umieszczenia w kolejce może spowodować, że skrypt nie będzie działał, chociaż jest napisany poprawnie.

możesz zapisać swój skrypt w innym pliku i umieścić go w kolejce w ten sposób, załóżmy, że nazwa twojego skryptu to image-ticker.js.

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

w miejsce /js/image-ticker.jsciebie należy umieścić ścieżkę do pliku js.

W WordPress prawidłowym sposobem umieszczania skryptów w witrynie jest użycie następujących funkcji.

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

Te funkcje są wywoływane wewnątrz hooka wp_enqueue_script.

Aby uzyskać więcej informacji i przykładów, możesz sprawdzić Dodawanie plików JS w Wordpress za pomocą wp_register_script & wp_enqueue_script

Przykład:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

„Mamy Google” cit. Aby poprawnie używać skryptu wewnątrz wordpressa, wystarczy dodać biblioteki hostowane. Podobnie jak Google

Po wybraniu biblioteki, którą potrzebujesz, połącz ją przed niestandardowym skryptem: exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

i według własnego scenariusza

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

Czy wystarczy załadować jQuery?

1) Jak mówią inni przewodnicy, zarejestruj swój skrypt w pliku functions.php w następujący sposób:

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) Zauważ, że nie musimy rejestrować jQuery, ponieważ jest już w rdzeniu. Upewnij się, że wp_footer () jest wywoływany w twoim footer.php, a wp_head () w twoim header.php (tam wypisze tag skryptu), a jQuery załaduje się na każdej stronie. Kiedy umieszczasz jQuery w kolejce za pomocą WordPressa, będzie on w trybie „bez konfliktu”, więc musisz użyć jQuery zamiast $. Jeśli chcesz, możesz wyrejestrować jQuery i ponownie zarejestrować własną, wykonując wp_deregister_script ('jquery').

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');