Comment ajouter correctement Javascript dans functions.php

Je voudrais supprimer certaines flèches à l'aspect laid qui sont standard sur les boutons du panier dans WooCommerce. Pour ce faire, j'ai trouvé une astuce pour ajouter le code suivant, qui devrait supprimer les flèches lorsque le document est chargé.

Je suppose que je vais le mettre dans mes fonctions.php? Comment ferais-je exactement ça?

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

ÉDITER

D'accord. J'ai essayé cette approche:

J'ai créé un fichier nommé 'removeArrows.js' et l'ai placé dans mon dossier de plugin. Cela a le même contenu que le code d'origine, sauf jQuery à la place $. Ensuite, j'ai ajouté ce qui suit à 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' ); 

Je ne sais pas comment faire pour que le code s'affiche correctement. Cela n'a pas fonctionné. Avez-vous des suggestions pour que cela fonctionne?

jQuery Snippet Source

Votre $scrdans votre wp_register_script()fonction est faux. Étant donné que votre functions.php est à l'intérieur de votre plugin, et que votre removeArrows.js est à la racine de votre plugin, votre $scrdevrait ressembler à ceci

plugins_url( '/removeArrows.js' , __FILE__ )

Autre point à noter, il est toujours recommandé de charger vos scripts et styles en dernier. Cela garantira qu'il ne sera pas remplacé par d'autres scripts et styles. Pour ce faire, ajoutez simplement une priorité très faible (nombre très élevé) à votre paramètre de priorité ( $priority) de add_action.

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

Et toujours charger / mettre en file d'attente les scripts et les styles via le wp_enqueue_scriptscrochet d'action, car c'est le bon crochet à utiliser. Ne chargez pas de scripts et de styles directement dans wp_headouwp_footer

ÉDITER

Pour les thèmes, comme vous l' avez indiqué que vous maintenant tout est allé à votre thème, votre $scrchangerait à ce

 get_template_directory_uri() . '/removeArrows.js'

pour les thèmes parents et cela

get_stylesheet_directory_uri() . '/removeArrows.js'

pour les thèmes enfants. Votre code complet devrait ressembler à ceci

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

Je n'ajouterais pas un autre fichier js externe, c'est juste une ressource supplémentaire et inutile à récupérer et c'est quelque chose que nous voulons réduire en termes de temps de chargement des pages.

J'ajouterais cet extrait jQuery dans la tête de votre site Web à l'aide du wp_headcrochet. Vous colleriez ce qui suit dans votre fichier de fonctions de thème ou de plugins. J'ai également veillé à ce que jQuery soit en mode sans conflit comme vous pouvez le voir ci-dessous.

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

Une fois que vous avez fait cela et actualisé votre page, vérifiez la source de la page pour vous assurer que cet extrait jQuery est bien chargé dans votre page. Si c'est le cas, cela devrait fonctionner à moins que leur ne soit quelque chose dans l'extrait jQuery réel que vous utilisez.

Comme la réponse est déjà acceptée, je veux juste dire qu'il y a une autre façon de mettre en file d'attente le code javascript dans le pied de page, ce que j'ai fait plusieurs fois.

dans le fichier 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' );

vous pouvez charger ce script dans un modèle de page particulier uniquement à l'aide de la condition

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;

si la page-template.php est dans le répertoire (disons le répertoire des modèles dans le répertoire racine de votre thème), vous pouvez écrire comme:

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

Pour répondre à la question, nous devons d'abord faire une distinction entre javascript et JQuery.

Pour le dire simplement:

• Javascript est basé sur ECMAScript
• JQuery est une bibliothèque pour Javascript

Donc, en réalité, vous posez deux questions différentes:

• Votre titre parle d'une solution pour implémenter javascript
• Votre question parle d'une solution pour implémenter JQuery

Parce que les résultats Google montrent votre titre et que tout le contenu de la page parle de JQuery, cela peut devenir très frustrant pour les personnes qui recherchent une solution javascript.

Et maintenant pour la solution JQuery:

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

Et la solution javascript:

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

Ce code peut être ajouté à vos fonctions.php L'emplacement des scripts dans les deux cas est wp-content/themes/theme-name/js/script.js

Bon codage!