Comment ajouter correctement du Javascript dans functions.php

9

Je voudrais supprimer certaines flèches laides qui sont standard sur les boutons de panier dans WooCommerce. Pour ce faire, j'ai trouvé une astuce consistant à 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("← ", "");
    });
});

MODIFIER

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

Fait un fichier nommé 'removeArrows.js' et le place dans mon dossier de plugin. Cela a le même contenu que le code original, sauf que jQuery remplace $. 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 ne vois pas comment afficher correctement le code. Cela n'a pas fonctionné. Des suggestions pour que cela fonctionne?

source d'extrait de code jQuery

    
posée user2806026 25.06.2014 - 20:30

4 réponses

5

Votre $scr dans votre fonction wp_register_script() est erroné. É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 toujours chargez / mettez en file d'attente des scripts et des styles via l'action wp_enqueue_scripts crochet, car c’est le bon crochet à utiliser. Ne pas charger les scripts et les styles directement dans wp_head ou wp_footer

MODIFIER

Pour les thèmes, comme vous avez indiqué que vous aviez tout déplacé vers votre thème, votre $scr serait remplacé par 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 ); 
    
réponse donnée Pieter Goosen 26.06.2014 - 14:47
4

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 souhaitons 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 terminé et actualisé votre page, vérifiez le code 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.

    
réponse donnée Matt Royal 25.06.2014 - 23:06
0

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' );
    
réponse donnée maverick 24.08.2018 - 16:31
-1

Pour répondre à la question, nous devons d’abord faire la 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 concerne une solution pour implémenter JQuery

Étant donné que les résultats de Google affichent 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é à votre functions.php L'emplacement des scripts dans les deux cas est wp-content/themes/theme-name/js/script.js

Joyeux codage!

    
réponse donnée fred heuvel 24.08.2018 - 13:24

Lire d'autres questions sur les étiquettes