Comment ajouter correctement Javascript dans functions.php
-
-
C'estfou:ne pouvez-vouspas éditer lesflèches dans le code qui lesgénère?(Ouest-iltéléchargé àpartir d'une sourceexterne?) Danstous les cas,vouspouvezfaire les deux remplacements dans une seulefonctionpour éviter de lireet d'écrire deuxfoistout le HTML à l'intérieur dublocpanier.Jene connaispas demoyen d'injecter cela directement dans lapage àpartir defunctions.phpmais vouspouvez l'enregistrer dans unfichier de script séparé (si vousn'en avezpas déjà un,vouspouvez l'ajouter)puis [`wp-enqueue-script`] (http://codex.wordpress.org/Function_Reference/wp_enqueue_script)it.Vous devrez également changer les `$` sen `jQuery` (voir cettepage section 7)That's crazy: can't you edit the arrows out in the code that generates them? (Or is it downloaded from an external source?) In any case you can do both replaces in a single function to avoid reading and writing all the HTML inside the cart block twice. I don't know a way to directly inject that into the page from functions.php but you can save it in a separate script file (if you don't already have one you can add it to) and then [`wp-enqueue-script`](http://codex.wordpress.org/Function_Reference/wp_enqueue_script) it. You'll also have to change the `$`s to `jQuery` (see that page section 7)
- 0
- 2014-06-25
- Rup
-
Non,je suispresque sûr qu'ilne peutpas être retiré avant d'êtreinséré.Si c'estpossible,je n'aipasputrouver unmoyen de lefaire. Bonpoint de l'ajouter dans une seulefonction.Est-ce que ça ressemblerait à ça? $ (document) .ready (fonction () { $ (". woocommerce-cart"). html (fonction (i,val) { return val.replace ("→",""); return val.replace ("←",""); }); }); Je vaisexaminer le script demiseen file d'attente.Cela semble unpeu compliqué,cependant .. Merci!Nope, I'm pretty sure it can't be removed before inserted. If it can, I haven't been able to find a way to do it. Good point about adding it in a single function. Would it look like this? $(document).ready(function() { $(".woocommerce-cart").html(function(i, val) { return val.replace(" →", ""); return val.replace("← ", ""); }); }); I will look into the enqueue script. Seems a bit complicated, though.. Thanks!
- 0
- 2014-06-25
- user2806026
-
D'accord.J'aiessayé cette approche; J'ai créé unfichiernommé 'removeArrows.js'et l'avezplacé dansmon dossierplugin.Cela a lemême contenu que le code d'origine,saufjQuery au lieu de $. puisj'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 ne comprendspas commentfaire afficher correctement le code) Celan'apasfonctionné.Pouvez-vousm'aider à résoudre ceproblème?Okay. I tried this approach; Made a file named 'removeArrows.js' and placed it in my plugin folder. This has the same content as the original code, except jQuery instead $. then I added the following to 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' ); (Sorry, I cant figure out how to make the code display properly) This did not work. Can you help me fix it?
- 0
- 2014-06-25
- user2806026
-
Veuillez déposer une [modifier]et ajoutertoutes lesinformationspertinentes ** directement à votre question ** N'utilisezpas la section des commentairespour ajouter du codePlease file an [edit] and add all relevant info **directly to your question** Do not use the comment section to add code
- 1
- 2014-06-26
- Pieter Goosen
-
4 réponses
- votes
-
- 2014-06-26
Votre
$scr
dans votrewp_register_script()
Lafonction estincorrecte. Étant donné que votrefunctions.phpest à l'intérieur de votrepluginet que votre removeArrows.jsest à la racine de votreplugin,votre$scr
devrait ressembler à ceciplugins_url( '/removeArrows.js' , __FILE__ )
Autrepoint ànoter,ilesttoujoursbon de charger vos scriptset stylesen dernier. Celagarantira qu'ilne serapas remplacépar d'autres scriptset styles. Pour cefaire,ajoutez simplement uneprioritétrèsfaible (nombretrès élevé) à votreparamètre depriorité (
$priority
) deadd_action
.add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 );
Et toujours charger/mettreen file d'attente des scriptset des styles via
wp_enqueue_scripts
crochet d'action,caril s'agit du crochet approprié à utiliser. Ne chargezpas les scriptset les styles directement danswp_head
ouwp_footer
Pour lesthèmes,comme vous avezindiqué que vous avezmaintenanttout déplacé vers votrethème,votre
$scr
deviendrait celui-ciget_template_directory_uri() . '/removeArrows.js'
pour lesthèmesparentset ceci
get_stylesheet_directory_uri() . '/removeArrows.js'
pour lesthèmesenfants. 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 );
Your
$scr
in yourwp_register_script()
function is wrong. Given that your functions.php is inside your plugin, and your removeArrows.js is in the root of your plugin, your$scr
should look like thisplugins_url( '/removeArrows.js' , __FILE__ )
Another point of note, it is always good practice to load your scripts and styles last. This will ensure that it will not get overriden by other scripts and styles. To do this, just add a very low priority (very high number) to your priority parameter (
$priority
) ofadd_action
.add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 );
And always load/enqueue scripts and styles via the
wp_enqueue_scripts
action hook, as this is the proper hook to use. Do not load scripts and styles directly towp_head
orwp_footer
EDIT
For themes, as you've indicated that you now moved everything to your theme, your
$scr
would change to thisget_template_directory_uri() . '/removeArrows.js'
for parent themes and this
get_stylesheet_directory_uri() . '/removeArrows.js'
for child themes. Your complete code should look like this
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 );
-
Mercibeaucouppour vosbons conseils.Cela semble être l'approche à utiliser.Une question cependant;lefunctions.phpest dansmon dossier dethème.Comment lier lefichierjs s'il setrouvejuste dans lemême dossier racine duthème?Thanks a lot for your great advice. This seems like the approach to use. One question though; the functions.php is in my theme folder. How would I link the js-file if it's just in the same, theme root folder?
- 0
- 2014-06-26
- user2806026
-
Vous deveztout conserver dans unplugin ou dans unthème,ne les divisezpas.Si vous êtes dans unthème,votre `$ scr` serait`get_template_directory_uri ().'/removeArrows.js'`pour lesthèmesparentset `get_templatestylesheet_directory_uri ().'/removeArrows.js'`pour lesthèmesenfantsYou should keep everything in a plugin or in a theme, don't split them. If you are in a theme, your `$scr` would be `get_template_directory_uri() . '/removeArrows.js'` for parent themes, and `get_templatestylesheet_directory_uri() . '/removeArrows.js'` for childthemes
- 0
- 2014-06-26
- Pieter Goosen
-
Essayé ànouveau,cettefoisen ajoutant le removeArrows.js directement dans le dossier dethèmeet en utilisant ce qui suit dansfunctions.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); celame donne uneerreur d'analyse:erreur de syntaxe,inattendue ',' sur la ligne wp_register_script.Tried again, this time adding the removeArrows.js directly in theme folder and using the following in 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 ); this gives me Parse error: syntax error, unexpected ',' on the wp_register_script line.
- 0
- 2014-06-26
- user2806026
-
`get_template_directory_uri ().'/removeArrows.js',FILE) `devrait simplement être`get_template_directory_uri ().'/removeArrows.js'``get_template_directory_uri() . '/removeArrows.js', FILE)` should just be `get_template_directory_uri() . '/removeArrows.js'`
- 0
- 2014-06-26
- Pieter Goosen
-
Nan.Vous avezentièrement utilisé votre code que vous avezmodifié aubas de votremessage d'origineLa seule chose qu'ilfaitest degeler lapage dupanier lors de la visualisation du contenu.Jepense queje vais abandonner :-) Un dernier recours cependant;vous avez commencéparmentionner queget_template_directory_uri ()estpour lesthèmesparents,puis dans le code completfinal que c'estpour lesthèmesenfants.Lequelest-ce?Monthèmeest unparent :-)Nope. Used your completely code you edited into the bottom of your original post. Only thing it does is to freeze the cart page when viewing the contents. I think I'll just give up :-) One last resort though; you started by mentioning that get_template_directory_uri() is for parent themes, and then in the final complete code that it's for child themes. Which is it? My theme is a parent :-)
- 0
- 2014-06-27
- user2806026
-
Désolé,uneerreur de copier-coller a étéeffectuée à cetendroit.Le derniermorceau de code completestpour lethèmeparent.Si celane fonctionnepas,vous devrezjeter un œil à votre scriptSorry, made a copy and paste error there. The last piece of complete code is for parent theme. If this doesn't work, you will need to have a look at your script
- 0
- 2014-06-27
- Pieter Goosen
-
- 2014-06-25
Jen'ajouteraispas un autrefichierjsexterne,c'estjuste une ressource supplémentaireet inutile à récupéreret c'est quelque chose quenous voulons réduireen termes detemps de chargement despages.
J'ajouterais cetextrait de codejQuery dans latête de votre site Weben utilisant le hook
wp_head
. Vous collez ce qui suit dans votrefichier defonctions dethème ou deplugins. Jeme suis également assuré quejQueryesten mode sans conflit comme vouspouvez 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
Unefois que vous avezfait celaet actualisé votrepage,vérifiez la source de lapagepour vous assurer que cetextrait de codejQueryestbien en cours de chargement dans votrepage. Sitelest le cas,cela devraitfonctionner àmoins que cene soit quelque chose dans l'extrait de codejQuery que vous utilisez.
I would not add another external js file, its just an extra and unnecessary resource to fetch and that is something we want to cut down on in terms of page loading times.
I would add this jQuery snippet in your websites head using the
wp_head
hook. You would paste the following in your theme or plugins functions file. I have also made sure jQuery is in no-conflict mode as you can see below.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
Once you have done this and refreshed your page, check the page source to make sure this jQuery snippet is in fact being loaded into your page. If it is then it should work unless their is something off in the actual jQuery snippet you are using.
-
Cen'estpas lafaçon WordPress de charger Javascript,cependant.Voir [`wp_enqueue_script ()`] (https://codex.wordpress.org/Function_Reference/wp_enqueue_script)pourplus d'informations.That's not the WordPress way to load Javascript, though. See [`wp_enqueue_script()`](https://codex.wordpress.org/Function_Reference/wp_enqueue_script) for more information.
- 0
- 2014-06-25
- Pat J
-
Salut @PatJ,je suis d'accord,pour charger unebibliothèque JSexterne ou unfichier JS avectoutes vosfonctions Javascript,alors oui absolument ce serait labonnefaçon.Cependant,si vous chargez unextrait de code Javascript,celan'a aucun sens de créer untoutnouveaufichier JSet d'ajouter une requête HTTP supplémentairejustepour cela.Prenez Google Analyticsparexemple,dans 99% desthèmes ou desbuildspersonnalisés,le JS sera ajouté dans l'en-tête ou lepied depage via les options dethème ou lefichier defonctions.Sapratique courante consiste àinclure desextraits de code JS oumême CSS de cettefaçon.Hi @PatJ, I agree, for loading an external JS library or JS file with all your Javascript functions in it, then yes absolutely that would be the correct way. However if you are loading a snippet of Javascript it does not make sense to create a whole new JS file and add an additional HTTP request just for that. Take Google Analytics for example, in 99% of themes or custom builds, the JS will be added into the the header or footer via theme options or functions file. Its common practice to include JS or even CSS snippets this way.
- 2
- 2014-06-25
- Matt Royal
-
"Lapratique courante"ne le rendpas correct,cependant.L'état [`wp_enqueue_script ()` docs] (https://codex.wordpress.org/Function_Reference/wp_enqueue_script)estpair ** C'est laméthode recommandéepour lier JavaScript à unepagegénéréepar WordPress **."Common practice" doesn't make it correct, though. The [`wp_enqueue_script()` docs](https://codex.wordpress.org/Function_Reference/wp_enqueue_script) even state **This is the recommended method of linking JavaScript to a WordPress generated page**.
- 1
- 2014-06-26
- Pat J
-
Si vousprenez lethème WordPresspar défaut vingt-quatorze,il charge html5.js dans le header.php.Accordé sabiche de cettefaçonpour une raison afin de vérifier que lenavigateur remplit la condition d'être IE <9,maismonpointest que,naturellement,lamiseen file d'attenteest laméthode recommandéeet préférée,maisen fonction detoutes les autres variables/circonstancesentourant ce que vousessaient d'yparvenirn'estpeut-êtrepastoujours lapluspratiqueet jepense qu'une certaine discrétion doit être utilisée.Écoutez,je pourrais aussime tromper complètement dans cette vue,je suisintéressé d'entendre ce que certains desgars vraimentexpérimentés ont à dire :-)If you take WordPress default twentyfourteen theme, it loads html5.js in the header.php. Granted its doe this way for a reason so as to check of the browser meets the condition of being IE < 9, but my point is that understandably, enqueuing is the recommended and preferred method but depending on all the other variables/circumstances surrounding what you are trying to achieve it may not always be the most practical and I think some discretion should be used. Look, I could be completely wrong in this view as well, I'm interested to hear what some of the really experienced guys have to say :-)
- 0
- 2014-06-26
- Matt Royal
-
Mercipour votreexcellente suggestion.Jene peuxpas lefairefonctionner cependant;sij'ajoute votre code dans labaliseThanks for your great suggestion. I can't get it to work though; if I add your code inside the
- 0
- 2014-06-26
- user2806026
Lorsque vous le collez dans votrefichierfunctions.php - supprimez lepremier ` Php` du code quej'aifourni car vous avez déjà labalise d'ouverture` Php` sur la ligne 1 de votrefichierfunctions.php.J'aimodifiéma réponse d'origineet je l'ai également supprimée.When you paste it in your functions.php file - remove the first `- 0
- 2014-06-26
- Matt Royal
Ce code JS doit êtreencapsulé dans .Cetteméthodepour rendre JS dans WPn'estpas recommandée,mais dans certains cas,des solutions rapides sontplusimportantes que lesmeilleurespratiques.This JS code needs to wrapped in . This method to render JS in WP is not recommended, but in some cases quick solutions are more important than best practices.- 0
- 2020-01-09
- Tahi Reu
- 2018-08-24
Comme la réponseest déjà acceptée,je veuxjuste dire qu'ilexiste une autrefaçon demettreen file d'attente le codejavascript dans lepied depage,ce quej'aifaitplusieursfois.
dans lefichierfunctions.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' );
vouspouvez charger ce script dans unmodèle depageparticulier uniquementen utilisant 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 lepage-template.phpest dans le répertoire (disons le répertoiretemplates dans le répertoire racine de votrethème),vouspouvez écrire comme:
is_page_template( 'templates/page-template.php' );
As the answer is accepted already so, I just want to say there's another way to enqueue javascript code in footer which I have done many times.
in functions.php file:
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' );
you can load this script to particular page template only by using 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;
if the page-template.php is in directory ( say templates directory in your theme's root dir ) you can write like:
is_page_template( 'templates/page-template.php' );
-
Jene recommanderaispas de "cuire" le JavaScript dans lepied depage comme ça.Cela l'empêche d'être décroché oumodifiable (dumoins,facilement),ce quiestextrêmementimportant dans le développement depluginset dethèmes.Si vous êtes l'utilisateurfinal d'un siteet que vous avezbesoin d'un script rapide ou autre,allez-y -maismême quandmême `wp_enqueue_script ()`estpresquetoujours universellementmeilleuret plusflexible.I would not recommend "baking" the JavaScript into the footer like this. It prevents it from being unhookable or modifiable (at least, easily) which is extremely important in plugin and theme development. If you're the end-user of a site and need a quick script or something, go for it - but even still `wp_enqueue_script()` is almost always universally better and more flexible.
- 0
- 2018-08-24
- Xhynk
- 2018-08-24
Pour répondre à la question,nous devons d'abordfaire une distinctionentrejavascriptet JQuery.
Pour le dire demanière simple:
- Javascriptestbasé sur ECMAScript
- JQueryest unebibliothèquepour Javascript
Donc,en réalité,vousposez deux questions différentes:
- Votretitreparle d'une solutionpourimplémenterjavascript
- Votre question concerne une solutionpourimplémenter JQuery
Étant donné que les résultats Google affichent votretitreet quetout le contenu de lapageparle de JQuery,celapeut devenirtrèsfrustrantpour lespersonnes qui recherchent une solutionjavascript.
Etmaintenantpour la solution JQuery:
wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
Et la solutionjavascript:
wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
Ce codepeut être ajouté à vosfunctions.php L'emplacement des scripts dans les deux casest
wp-content/themes/theme-name/js/script.js
Bon codage!
To answer the question we must first make a distinction between javascript and JQuery.
To state it in a simple fashion:
- Javascript is based on ECMAScript
- JQuery is a library for Javascript
So in reality you ask two different questions:
- Your title speaks about a solution for implementing javascript
- Your question speaks about a solution for implementing JQuery
Because the Google results show your title and all the content of the page talks about JQuery this can become very frustrating to people that search for a javascript solution.
And now for the JQuery solution:
wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
And the javascript solution:
wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
This code can be added to your functions.php The location of the scripts in both cases is
wp-content/themes/theme-name/js/script.js
Happy coding!
-
À l'époque où OP aposté,les développeurs utilisaientjqueryet javascript demanièreinterchangeable.Cen'estpas dutoutprécis,mais c'était à quelpointjquery étaitpopulaireet à quelpointjavascriptmanquait defonctionnalités.Around the time when OP posted, devs did use jquery and javascript interchangeably. It's not at all accurate, but it was how popular jquery was and how much javascript was missing features.
- 0
- 2020-04-29
- Rocky Kev
Je voudrais supprimer certainesflèches affreuses qui sont standard sur lesboutons depanier dans WooCommerce. Pour yparvenir,j'aitrouvé une astucepour ajouter le code suivant,qui devrait supprimer lesflèches lorsque le documentest chargé.
Je suppose queje vais lemettre dansmonfunctions.php? Commentpourrais-jefaire çaexactement?
D'accord. J'aiessayé cette approche:
J'ai créé unfichiernommé 'removeArrows.js'et l'aiplacé dansmon dossierplugin. Cela a lemême contenu que le code d'origine,saufjQuery au lieu de $. Ensuite,j'ai ajouté ce qui suit àfunctions.php:
Jen'arrivepas à comprendre commentfaire afficher correctement le code. Celan'apasfonctionné. Des suggestionspour que celafonctionne?
jQuery Snippet Source