Jak poprawnie dodać Javascript w functions.php

Chciałbym usunąć kilka brzydko wyglądających strzałek, które są standardowe na przyciskach koszyka w WooCommerce. Aby to osiągnąć, znalazłem wskazówkę dotyczącą dodania następującego kodu, który powinien usunąć strzałki po załadowaniu dokumentu.

Zakładam, że zamierzam to umieścić w moich funkcjach. Php? Jak dokładnie miałbym to zrobić?

$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});

EDYTOWAĆ

W porządku. Próbowałem tego podejścia:

Utworzyłem plik o nazwie „removeArrows.js” i umieściłem go w folderze wtyczek. Ma taką samą treść jak oryginalny kod, z wyjątkiem jQuery zamiast $. Następnie dodałem następujące do functions.php:

function wpb_adding_scripts() {
      wp_register_script('my_amazing_script', plugins_url('removeArrows.js', FILE), array('jquery'),'1.1', true);
     wp_enqueue_script('my_amazing_script');
 } 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Nie mogę wymyślić, jak poprawnie wyświetlić kod. To nie zadziałało. Jakieś sugestie, aby to zadziałało?

Źródło jQuery Snippet

Twój $scrw swojej wp_register_script()funkcji jest źle. Biorąc pod uwagę, że twoja functions.php znajduje się we wtyczce, a plik removeArrows.js znajduje się w katalogu głównym wtyczki, $scrpowinieneś wyglądać tak:

plugins_url( '/removeArrows.js' , __FILE__ )

Innym ważnym punktem jest to, że zawsze dobrą praktyką jest ładowanie skryptów i stylów na końcu. Zapewni to, że nie zostaną zastąpione przez inne skrypty i style. Aby to zrobić, po prostu dodaj bardzo niski priorytet (bardzo wysoka liczba) do parametru priorytetu ( $priority) z add_action.

 add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

I zawsze ładuj / kolejkuj skrypty i style za pomocą wp_enqueue_scriptshaka akcji, ponieważ jest to właściwy hak do użycia. Nie ładuj skryptów i stylów bezpośrednio do wp_headlubwp_footer

EDYTOWAĆ

W przypadku motywów, jak już wskazałeś, że wszystko przeniosłeś na swój motyw, $scrzmieniłbyś to na

 get_template_directory_uri() . '/removeArrows.js'

dla motywów nadrzędnych i tego

get_stylesheet_directory_uri() . '/removeArrows.js'

dla motywów potomnych. Twój pełny kod powinien wyglądać następująco

function wpb_adding_scripts() {
    wp_register_script('my_amazing_script', get_template_directory_uri() . '/removeArrows.js', array('jquery'),'1.1', true);
    wp_enqueue_script('my_amazing_script');
} 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

Nie dodawałbym innego zewnętrznego pliku js, jest to tylko dodatkowy i niepotrzebny zasób do pobrania, i to jest coś, co chcemy ograniczyć pod względem czasu ładowania strony.

Dodałbym ten fragment jQuery do twojej strony za pomocą wp_headhaka. Wkleisz następujące elementy w pliku funkcji motywu lub wtyczek. Upewniłem się również, że jQuery jest w trybie bez konfliktów, jak widać poniżej.

add_action('wp_head','woocommerce_js');

function woocommerce_js()
{ // break out of php ?>

jQuery(document).ready(function($) {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
<?php } // break back into php

Po wykonaniu tej czynności i odświeżeniu strony sprawdź źródło strony, aby upewnić się, że ten fragment kodu jQuery jest faktycznie ładowany na twoją stronę. Jeśli tak, to powinno działać, chyba że jest to wyłączone w rzeczywistym fragmencie jQuery, którego używasz.

Ponieważ odpowiedź została już zaakceptowana, chcę tylko powiedzieć, że istnieje inny sposób kolejkowania kodu javascript w stopce, który zrobiłem wiele razy.

w pliku functions.php:

function load_script_to_remove_arrow(){
?>
<script>
$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
</script>
<?php
}
add_action( 'wp_footer', 'load_script_to_remove_arrow' );

możesz załadować ten skrypt do konkretnego szablonu strony tylko przy użyciu warunku

if( is_page_template( 'page-template.php' ) ):

//put above code (or just add_action part) inside this condition to load file only if the condition is true 

endif;

jeśli page-template.php znajduje się w katalogu (powiedz katalog szablonów w katalogu głównym motywu), możesz napisać:

is_page_template( 'templates/page-template.php' );

Aby odpowiedzieć na pytanie, musimy najpierw rozróżnić javascript i JQuery.

Mówiąc to w prosty sposób:

• JavaScript oparty jest na ECMAScript
• JQuery to biblioteka dla Javascript

W rzeczywistości zadajesz dwa różne pytania:

• Twój tytuł mówi o rozwiązaniu do implementacji javascript
• Twoje pytanie dotyczy rozwiązania do wdrożenia JQuery

Ponieważ wyniki Google pokazują Twój tytuł, a cała zawartość strony mówi o JQuery, może to być bardzo frustrujące dla osób szukających rozwiązania javascript.

A teraz rozwiązanie JQuery:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

I rozwiązanie javascript:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );

Ten kod można dodać do swoich funkcji. Php Lokalizacja skryptów w obu przypadkach to wp-content/themes/theme-name/js/script.js

Miłego kodowania!