Come aggiungere correttamente Javascript in functions.php
-
-
Èpazzesco:nonpuoimodificare lefreccenel codice che legenera?(O viene scaricato da unafonteesterna?) In ogni casopuoifareentrambe le sostituzioniin un'unicafunzioneperevitare di leggeree scrivere due voltetutto l'HTML all'interno delblocco carrello.Non conosco unmodoperiniettarlo direttamentenellapagina dafunctions.phpmapuoi salvarloin unfile script separato (senonne haigià unopuoi aggiungerlo)e poi [`wp-enqueue-script`] (http://codex.wordpress.org/Function_Reference/wp_enqueue_script).Dovrai anche cambiare `$` sin `jQuery` (vedi la sezione 7 dellapagina)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
-
No,sono abbastanza sicuro chenonpossaessere rimossoprima dell'inserimento.Sepuò,non sono statoin grado ditrovare unmodoperfarlo. Buonpunto di aggiungerloin una singolafunzione.Sarebbe così? $ (documento) .ready (function () { $ (". woocommerce-cart"). html (function (i,val) { return val.replace ("→",""); return val.replace ("←",""); }); }); Esaminerò lo script di accodamento.Sembra unpo 'complicato,però .. Grazie!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
-
Vabene.Hoprovato questo approccio; Ho creato unfile chiamato "removeArrows.js"e l'hoinseritonellamia cartella deiplugin.Ha lo stesso contenuto del codice originale,trannejQueryinvece di $. poi ho aggiunto quanto segue afunctions.php; `funzione 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'); (Mi dispiace,non riesco a capire come visualizzare correttamenteil codice) Questonon hafunzionato.Puoi aiutarmi a risolverlo?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
-
Siprega diinviare una [modifica]e aggiungeretutte leinformazionipertinenti ** direttamente alla domanda ** Non utilizzare la sezione dei commentiper aggiungereil codicePlease 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 risposta
- voti
-
- 2014-06-26
Iltuo
$scr
neltuowp_register_script()
lafunzione è sbagliata. Dato cheiltuofunctions.php è all'interno deltuoplugine iltuo removeArrows.js ènella radice deltuoplugin,iltuo$scr
dovrebbeessere simile a questoplugins_url( '/removeArrows.js' , __FILE__ )
Un altropunto danotare,è sempre unabuonapratica caricaregli scripte gli stiliper ultimi. Ciògarantirà chenon venga sovrascritto da altri scripte stili. Perfare ciò,aggiungi unaprioritàmoltobassa (numeromolto alto) altuoparametro dipriorità (
$priority
) diadd_action
.add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 );
E sempre carica/accoda scripte stilitramite
wp_enqueue_scripts
action hook,poiché questo è l'hook corretto da usare. Non caricare scripte stili direttamenteinwp_head
owp_footer
<"EDIT"
Peri temi,poiché haiindicato che ora hai spostatotuttoneltuotema,iltuo
$scr
cambierebbein questoget_template_directory_uri() . '/removeArrows.js'
peri temiprincipalie questo
get_stylesheet_directory_uri() . '/removeArrows.js'
pertemi figlio. Il codice completo dovrebbeessere simile a questo
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 );
-
Graziemilleperiltuo ottimo consiglio.Questo sembra l'approccio da usare.Una domandaperò;ilfunctions.php ènellamia cartella deltema.Come colleghereiilfilejs se è solonella stessa cartellaprincipale deltema?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
-
Dovrestiteneretuttoin unplugin oin untema,non dividerli.Se seiin untema,iltuo `$ scr` sarebbe`get_template_directory_uri ().'/removeArrows.js'`peri temiprincipalie `get_templatestylesheet_directory_uri ().'/removeArrows.js' 'pertemi infantiliYou 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
-
Hoprovato dinuovo,questa volta aggiungendo removeArrows.js direttamentenella cartella deltemae utilizzando quanto seguein functions.php; funzione 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); questomi dà unerrore di analisi:errore di sintassi,','imprevisto sulla riga 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) `dovrebbeessere solo`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
-
No.Hai utilizzato completamenteil codice che haimodificatoin fondo altuo articolo originaleL'unica cosa chefa èbloccare lapagina del carrello durante la visualizzazione dei contenuti.Penso chemi arrenderò :-) Un'ultima risorsaperò;haiiniziatomenzionando cheget_template_directory_uri () èperi temiprincipali,e poinel codice completofinale che èperi temifigli.Cos'è questo?Ilmiotema è ungenitore :-)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
-
Spiacenti,hofatto unerrore di copiae incolla lì.L'ultimaparte del codice completo èperiltemaprincipale.Se questononfunziona,dovrai dare un'occhiata altuo 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
Non aggiungerei un altrofilejsesterno,è solo una risorsaextrae nonnecessaria da recuperaree questo è qualcosa che vogliamo ridurrein termini ditempi di caricamento dellapagina.
Aggiungerei questo snippetjQuerynellatestata deltuo sito web utilizzando l'hook
wp_head
. Dovrestiincollare quanto segueneltuotema onelfile dellefunzioni deiplugin. Mi sono anche assicurato chejQueryfossein modalità senza conflitti,comepuoi vedere di seguito.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
Dopo avereseguito questa operazionee aggiornato lapagina,controlla l'origine dellapaginaper assicurarti che questoframmento dijQuery vengaeffettivamente caricatonellatuapagina. Se lo è,dovrebbefunzionare ameno chenon sia qualcosa di sbagliatonello snippetjQuery che stai utilizzando.
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.
-
Tuttavia,questonon èilmodo di WordPressper caricare Javascript.Vedere [`wp_enqueue_script ()`] (https://codex.wordpress.org/Function_Reference/wp_enqueue_script)permaggioriinformazioni.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
-
Ciao @PatJ,sono d'accordo,peril caricamento di una libreria JSesterna o di unfile JS contutte letuefunzioni Javascript al suointerno,quindi sì,assolutamente,sarebbeilmodo corretto.Tuttavia,se stai caricando uno snippet di Javascript,non ha senso creare unfile JS completamentenuovoe aggiungere una richiesta HTTP aggiuntiva soloper questo.Prendi Google Analytics,adesempio,nel 99% deitemi o dellebuildpersonalizzate,il JS verrà aggiuntonell'intestazione onelpiè dipaginatramite le opzioni deltema oilfile dellefunzioni.Èpratica comuneincludere JS o ancheframmenti CSSin questomodo.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
-
Tuttavia,"lapratica comune"non lo rende corretto.Il [`wp_enqueue_script ()` docs] (https://codex.wordpress.org/Function_Reference/wp_enqueue_script) afferma anche ** Questo èilmetodo consigliatoper collegare JavaScript a unapaginagenerata da 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
-
Seprendiiltemapredefinito di WordPress ventiquattro,carica html5.jsnel header.php.Concessoin questomodoper unmotivoin modo cheil controllo delbrowser soddisfi la condizione diessere IE <9,mailmiopunto è che comprensibilmente,l'accodamento èilmetodo consigliatoe preferitoma a seconda ditutte le altre variabili/circostanze che circondano ciò che sistanno cercando di raggiungerlopotrebbenonessere sempreilpiùpraticoe penso che dovrebbeessere usata una certa discrezione.Senti,anch'iopotrei sbagliarmi completamente da questopunto di vista,mi interessa sentire cosa hanno da dire alcuni dei ragazzi veramenteesperti :-)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
-
Grazieperiltuo ottimo suggerimento.Non riesco afarlofunzionareperò;se aggiungoiltuo codice all'interno deltagThanks for your great suggestion. I can't get it to work though; if I add your code inside the
- 0
- 2014-06-26
- user2806026
Quando loincollineltuofilefunctions.php,rimuoviilprimo " Php" dal codice che hofornitopoiché haigiàiltag di apertura " Php" sulla riga 1 deltuofilefunctions.php.Homodificato lamia risposta originalee l'ho rimossa anche da lì.When you paste it in your functions.php file - remove the first `- 0
- 2014-06-26
- Matt Royal
Questo codice JS deveessere racchiusoin .Questometodopereseguireil rendering di JSin WPnon è consigliato,main alcuni casi le soluzioni rapide sonopiùimportanti dellebestpractice.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
Poiché la risposta ègià accettata,voglio solo dire cheesiste un altromodoper accodareil codice JavaScriptnelpiè dipagina,cosa che hofattomolte volte.
nelfilefunctions.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' );
puoi caricare questo scriptin unparticolaremodello dipagina solo utilizzando la condizione
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;
seilpage-template.php ènella directory (diciamo la directorytemplatesnella directory root deltuotema)puoi scrivere come:
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' );
-
Non consiglierei di "cuocere"il JavaScriptnelpiè dipaginain questomodo.Impedisce che sia sganciabile omodificabile (almeno,facilmente),il che èestremamenteimportantenello sviluppo diplugine temi.Se sei l'utentefinale di un sitoe haibisogno di uno script veloce o qualcosa delgenere,fallo,ma anche `wp_enqueue_script ()` è quasi sempre universalmentemiglioree piùflessibile.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
Per rispondere alla domanda dobbiamoprimafare una distinzionetrajavascripte JQuery.
Per dirloin modo semplice:
- Javascript èbasato su ECMAScript
- JQuery è una libreriaper Javascript
Quindi,in realtà,fai due domande diverse:
- Iltuotitoloparla di una soluzioneper l'implementazione dijavascript
- Latua domandaparla di una soluzioneper l'implementazione di JQuery
Poichéi risultati di Googlemostranoiltuotitoloe tuttoil contenuto dellapaginaparla di JQuery,questopuò diventaremoltofrustranteper lepersone che cercano una soluzionejavascript.
E oraper la soluzione JQuery:
wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
E la soluzionejavascript:
wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
Questo codicepuòessere aggiunto altuofunctions.php Laposizione degli scriptin entrambii casi è
wp-content/themes/theme-name/js/script.js
Buonaprogrammazione!
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!
-
Nelperiodoin cui OPpubblicava,gli sviluppatori utilizzavanojquerye javascriptin modointercambiabile.Non è affatto accurato,maera quantofossepopolarejquerye quantojavascriptmancasse difunzionalità.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
Vorrei rimuovere alcunebruttefrecce che sono standard suipulsanti del carrelloin WooCommerce. Per ottenere ciò,hotrovato un suggerimentoper aggiungereil seguente codice,che dovrebbe rimuovere lefrecce quandoil documento è stato caricato.
Presumo che lometterònelmiofunctions.php? Come lofareiesattamente?
<"EDIT"
Va bene. Hoprovato questo approccio:
Ho creato unfile chiamato "removeArrows.js"e l'hoinseritonellamia cartella deiplugin. Ha lo stesso contenuto del codice originale,trannejQueryinvece di $. Quindi ho aggiunto quanto segue afunctions.php:
Non riesco a capire come visualizzare correttamenteil codice. Questonon hafunzionato. Qualche suggerimentoperfarfunzionare questo?
jQuery Snippet Source