Comment ajouter correctement Javascript dans functions.php

10

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

user2806026
la source
C'est fou: ne pouvez-vous pas éditer les flèches dans le code qui les génère? (Ou est-il téléchargé à partir d'une source externe?) Dans tous les cas, vous pouvez effectuer les deux remplacements dans une seule fonction pour éviter de lire et d'écrire deux fois tout le code HTML dans le bloc panier. Je ne sais pas comment injecter cela directement dans la page à partir de functions.php mais vous pouvez l'enregistrer dans un fichier de script séparé (si vous n'en avez pas déjà un, vous pouvez l'ajouter), puis wp-enqueue-scriptle. Vous devrez également modifier le $s en jQuery(voir cette page section 7)
Rup
Non, je suis sûr qu'il ne peut pas être retiré avant d'être inséré. Si c'est le cas, je n'ai pas réussi à trouver un moyen de le faire. Bon point pour l'ajouter dans une seule fonction. Cela ressemblerait-il à cela? $ (document) .ready (function () {$ (". woocommerce-cart"). html (function (i, val) {return val.replace ("→", ""); return val.replace ("← "," ");});}); Je vais examiner le script de mise en file d'attente. Cela semble un peu compliqué, cependant ... Merci!
user2806026
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 $. puis j'ai ajouté ce qui suit à functions.php; `fonction 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'); (Désolé, je n'arrive pas à comprendre comment afficher correctement le code) Cela n'a pas fonctionné. Pouvez-vous m'aider à le réparer?
user2806026
1
Veuillez déposer une modification et ajouter toutes les informations pertinentes directement à votre question. N'utilisez pas la section des commentaires pour ajouter du code
Pieter Goosen

Réponses:

10

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 ); 
Pieter Goosen
la source
Merci beaucoup pour vos bons conseils. Cela semble être l'approche à utiliser. Une question cependant; le functions.php est dans mon dossier de thème. Comment lier le fichier js s'il se trouve juste dans le même dossier racine de thème?
user2806026
Vous devez tout garder dans un plugin ou dans un thème, ne les divisez pas. Si vous êtes dans un thème, vous $scrle serez get_template_directory_uri() . '/removeArrows.js'pour les thèmes parents et get_templatestylesheet_directory_uri() . '/removeArrows.js'pour les thèmes enfants
Pieter Goosen
Réessayé, cette fois en ajoutant le removeArrows.js directement dans le dossier de thème et en utilisant ce qui suit dans functions.php; function wpb_adding_scripts () {wp_register_script ('my_amazing_script', get_template_directory_uri (). '/removeArrows.js', FILE ), array ('jquery'), '1.1', true); wp_enqueue_script ('my_amazing_script'); } add_action ('wp_enqueue_scripts', 'wpb_adding_scripts', 999); cela me donne une erreur d'analyse: erreur de syntaxe, ',' inattendu sur la ligne wp_register_script.
user2806026
get_template_directory_uri() . '/removeArrows.js', FILE)devrait êtreget_template_directory_uri() . '/removeArrows.js'
Pieter Goosen
Nan. Utilisez votre code entièrement modifié dans le bas de votre message d'origine. La seule chose qu'il fait est de geler la page du panier lors de la visualisation du contenu. Je pense que je vais juste abandonner :-) Un dernier recours cependant; vous avez commencé par mentionner que get_template_directory_uri () est pour les thèmes parents, puis dans le code complet final que c'est pour les thèmes enfants. Lequel est-ce? Mon thème est un parent :-)
user2806026
4

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.

Matt Royal
la source
Ce n'est pas la manière WordPress de charger Javascript, cependant. Voir wp_enqueue_script()pour plus d'informations.
Pat J
2
Salut @PatJ, je suis d'accord, pour charger une bibliothèque JS externe ou un fichier JS avec toutes vos fonctions Javascript, alors oui absolument ce serait la bonne façon. Cependant, si vous chargez un extrait de Javascript, il n'est pas logique de créer un tout nouveau fichier JS et d'ajouter une requête HTTP supplémentaire juste pour cela. Prenez Google Analytics par exemple, dans 99% des thèmes ou des constructions personnalisées, le JS sera ajouté dans l'en-tête ou le pied de page via les options de thème ou le fichier de fonctions. Sa pratique courante consiste à inclure des extraits JS ou même CSS de cette façon.
Matt Royal
1
Cependant, la «pratique courante» ne la rend pas correcte. Les wp_enqueue_script()documents indiquent même qu'il s'agit de la méthode recommandée pour lier JavaScript à une page générée par WordPress .
Pat J
Si vous prenez le thème vingt-quatorze par défaut de WordPress, il charge html5.js dans le header.php. Accordé à sa biche de cette façon pour une raison afin de vérifier que le navigateur remplit la condition d'être IE <9, mais mon point est que, bien entendu, la mise en file d'attente est la méthode recommandée et préférée, mais en fonction de toutes les autres variables / circonstances entourant ce que vous essayer d'y parvenir n'est peut-être pas toujours le plus pratique et je pense qu'il faut faire preuve de discrétion. Ecoutez, je peux me tromper complètement sur ce point de vue aussi, je suis intéressé d'entendre ce que certains des gars vraiment expérimentés ont à dire :-)
Matt Royal
Merci pour votre excellente suggestion. Je ne peux pas le faire fonctionner cependant; si j'ajoute votre code à l'intérieur de la balise <? php de mes fonctions.php, j'obtiens une "erreur d'analyse: erreur de syntaxe, inattendue" <"dans /somepath.../functions.php sur la ligne 1146". Si je l'ajoute en dehors du <? Php, il semble simplement faire écho au code donné en haut de la page. Qu'est-ce que j'oublie ici?
user2806026
0

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' );
Maverick
la source
Je ne recommanderais pas de "cuire" le JavaScript dans le pied de page comme ceci. Cela l'empêche d'être décrochable ou modifiable (au moins, facilement), ce qui est extrêmement important dans le développement de plugins et de thèmes. Si vous êtes l'utilisateur final d'un site et que vous avez besoin d'un script rapide ou quelque chose, allez-y - mais même toujours, il wp_enqueue_script()est presque toujours universellement meilleur et plus flexible.
Xhynk
-1

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!

Fred heuvel
la source
À peu près au moment où OP a publié, les développeurs utilisaient jquery et javascript de manière interchangeable. Ce n'est pas du tout exact, mais c'était la popularité de jquery et la quantité de fonctionnalités manquantes de javascript.
Rocky Kev