web-dev-qa-db-fra.com

Comment ajouter correctement du Javascript dans functions.php

Je souhaite supprimer certaines flèches laides qui sont standard sur les boutons de 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 mon functions.php? Comment ferais-je cela exactement?

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

EDIT

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

Fait un fichier nommé 'removeArrows.js' et l'a placé dans mon dossier de plugin. Cela a le même contenu que le code d'origine, à l'exception de jQuery à la place de $. Puis 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 n'arrive pas à comprendre comment afficher correctement le code. Cela n'a pas fonctionné. Des suggestions pour faire ce travail?

Source d'extraits de jQuery

phpjquerywoocommerce
9
user2806026

Votre $scr dans votre wp_register_script() est incorrect. Étant donné que votre fichier functions.php est dans votre plugin et que votre fichier removeArrows.js se trouve à la racine de votre plugin, votre $scr devrait ressembler à ceci:

plugins_url( '/removeArrows.js' , __FILE__ )

Autre point à noter, il est toujours recommandé de charger vos scripts et vos 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 always load/mettre en file d'attente les scripts et les styles via le hook wp_enqueue_scripts action, car il s'agit du hook approprié à utiliser. Ne pas charger les scripts et les styles directement dans wp_head ou wp_footer

EDIT

Pour les thèmes, comme vous avez indiqué que vous aviez tout déplacé vers votre thème, votre $scr changerait en ceci

 get_template_directory_uri() . '/removeArrows.js'

pour les thèmes parents et cela

get_stylesheet_directory_uri() . '/removeArrows.js'

pour les thèmes de l'enfant. 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 );
6
Pieter Goosen

Je n’ajouterais pas un autre fichier JS externe, c’est juste une ressource extra inutile à récupérer et c’est quelque chose que nous voulons réduire en termes de temps de chargement de page.

J'ajouterais cet extrait de code jQuery dans la tête de votre site Web à l'aide du crochet wp_head. Vous souhaitez coller les éléments suivants dans votre fichier de fonctions de thème ou de plug-in. Je me suis également assuré que jQuery est 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 le source de la page pour vous assurer que cet extrait de code jQuery est effectivement chargé dans votre page. Si c'est le cas, cela devrait fonctionner à moins que quelque chose ne soit pas dans l'extrait de code jQuery que vous utilisez.

4
Matt Royal

Comme la réponse est déjà acceptée, je tiens simplement à dire qu'il existe un autre moyen de mettre en file d'attente le code javascript dans le pied de page, ce que j'ai déjà 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 le fichier page-template.php est dans le répertoire (par exemple le répertoire templates dans le répertoire racine de votre thème), vous pouvez écrire comme suit:

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