Cómo agregar correctamente Javascript en functions.php
-
-
Esoes una locura: ¿nopuedeseditar lasflechasen el código que lasgenera?(¿O se descarga de unafuenteexterna?) En cualquier caso,puede hacer ambas reemplazosen una solafunciónparaevitar leer yescribirtodoel HTML dentro delbloque del carrito dos veces.No conozco unamanera deinyectarlo directamenteen lapágina desdefunctions.php,peropuedeguardarloen un archivo de script separado (si aúnnotiene uno,puede agregarlo) y luego [`wp-enqueue-script`] (http://codex.wordpress.org/Function_Reference/wp_enqueue_script)it.Tambiéntendrá que cambiar los `$` s a `jQuery` (consulte la sección 7 deesapágina)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,estoybastante seguro de queno sepuede quitar antes deinsertarlo.Sipuede,no hepodidoencontrar lamanera de hacerlo. Buenpunto sobre agregarloen una solafunción.¿Se vería así? $ (documento) .ready (function () { $ (". woocommerce-cart"). html (function (i,val) { return val.replace ("→",""); return val.replace ("←",""); }); }); Examinaréelguión depuestaen cola.Aunqueparece unpoco complicado ... ¡Gracias!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
-
Bueno.Probéesteenfoque; Hice un archivo llamado 'removeArrows.js' y lo coloquéen mi carpeta de complementos.Estetiene elmismo contenido queel código original,exceptojQueryen lugar de $. luego agregué lo siguiente afunctions.php; `function wpb_adding_scripts () { wp_register_script ('my_amazing_script',plugins_url ('removeArrows.js',__FILE__),array ('jquery'),'1.1',verdadero); wp_enqueue_script ('my_amazing_script'); } add_action ('wp_enqueue_scripts','wpb_adding_scripts'); (Lo siento,nopuedo averiguar cómo hacer queel código semuestre correctamente) Estonofuncionó.¿Puedes ayudarme a arreglarlo?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
-
Envíe un [editar] y agreguetoda lainformación relevante ** directamente a supregunta ** No utilice la sección de comentariospara agregar códigoPlease 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 respuestas
- votos
-
- 2014-06-26
Su
$scr
en suwp_register_script()
Lafunción esincorrecta. Dado que sufunctions.phpestá dentro de su complemento,y su removeArrows.jsestáen la raíz de su complemento,su$scr
debería verse asíplugins_url( '/removeArrows.js' , __FILE__ )
Otropunto ateneren cuenta,siemprees unabuenapráctica cargar sus scripts yestilos alfinal. Esto asegurará queno sea reemplazadopor otros scripts yestilos. Para haceresto,simplemente agregue unaprioridadmuybaja (númeromuy alto) a suparámetro deprioridad (
$priority
) deadd_action
.add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 );
Y siempre cargar/poneren cola scripts yestilos através de
wp_enqueue_scripts
gancho de acción,ya queeselgancho adecuadopara usar. No cargue scripts yestilos directamenteenwp_head
owp_footer
<×EDIT×
Para lostemas,como haindicado que ahoramoviótodo a sutema,su
$scr
cambiaría aestoget_template_directory_uri() . '/removeArrows.js'
paratemasprincipales yesto
get_stylesheet_directory_uri() . '/removeArrows.js'
paratemasinfantiles. Su código completo debería verse así
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 );
-
Muchasgraciasportugran consejo.Estepareceelenfoque a utilizar.Sinembargo,unapregunta;functions.phpestáen mi carpeta detemas.¿Cómo vincularíael archivojs siestáen lamisma carpeta raíz 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
-
Debemantenertodoen un complemento oen untema,no los divida.Siestásen untema,tu `$ scr` sería`get_template_directory_uri ().'/removeArrows.js'`paratemasprincipales y `get_templatestylesheet_directory_uri ().'/removeArrows.js'`paratemasinfantilesYou 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
-
Intenté denuevo,esta vez agregando removeArrows.js directamenteen la carpeta deltema y usando lo siguienteen functions.php; function wpb_adding_scripts () { wp_register_script ('my_amazing_script',get_template_directory_uri (). '/removeArrows.js',__FILE__),array ('jquery'),'1.1',verdadero); wp_enqueue_script ('my_amazing_script'); } add_action ('wp_enqueue_scripts','wpb_adding_scripts',999); estome da unerror de Parse:error de sintaxis,inesperado ','en la línea 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 ().'/remove Arrows.js',FILE) `debería ser simplemente`get_template_directory_uri ().'/eliminar Arrows.js'``get_template_directory_uri() . '/removeArrows.js', FILE)` should just be `get_template_directory_uri() . '/removeArrows.js'`
- 0
- 2014-06-26
- Pieter Goosen
-
NoUsó su código completo queeditóen laparteinferior de supublicación original.Lo único que hacees congelar lapágina del carrito al verel contenido.Creo queme rendiré :-) Sinembargo,un último recurso;comenzómencionando queget_template_directory_uri ()esparatemasprincipales,y luego,en el códigofinal completo,esparatemas secundarios.CualesMitemaes unpadre :-)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
-
Lo siento,cometí unerror de copiar ypegar allí.La últimaparte del código completoesparaeltemaprincipal.Siestonofunciona,deberáechar un vistazo a su secuencia de comandosSorry, 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
No agregaría otro archivojsexterno,es solo un recurso adicionale innecesarioparabuscar yesoes algo que queremos reduciren términos detiempos de carga de lapágina.
Agregaríaestefragmento dejQueryen elencabezado de su sitio web usandoelgancho
wp_head
. Pegaría lo siguienteen el archivo defunciones de sutema o complementos. Tambiénme he asegurado de quejQueryestéen modo sin conflicto,comopuede ver a continuación.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
Una vez que haya hechoesto y haya actualizado supágina,verifique lafuente de lapáginapara asegurarse de queestefragmento dejQuery seesté cargandoen supágina. Sies así,entonces deberíafuncionar amenos que haya algofuera de lugaren elfragmento dejQuery real queestá utilizando.
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.
-
Sinembargo,esanoes laforma de WordPresspara cargar Javascript.Consulte [`wp_enqueue_script ()`] (https://codex.wordpress.org/Function_Reference/wp_enqueue_script)para obtenermásinformación.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
-
Hola @PatJ,estoy de acuerdo,para cargar unabiblioteca JSexterna o un archivo JS contodas susfunciones de Javascripten él,entonces sí,absolutamenteesa sería laforma correcta.Sinembargo,siestá cargando unfragmento de Javascript,notiene sentido crear un archivo JS completamentenuevo y agregar una solicitud HTTP adicional soloparaeso.Tome Google Analytics,porejemplo,en el 99% de lostemas o compilacionespersonalizadas,el JS se agregará alencabezado opie depágina através del archivo de opciones ofunciones deltema.Es unapráctica comúnincluir JS oinclusofragmentos de CSS deestamanera.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
-
Sinembargo,la "práctica común"no lo hace correcto.Elestadopar [`wp_enqueue_script ()` docs] (https://codex.wordpress.org/Function_Reference/wp_enqueue_script) ** Esteeselmétodo recomendadopara vincular JavaScript a unapáginageneradapor 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
-
Sitomaeltema veinticuatropor defecto de WordPress,este carga html5.jsen el header.php.Concedido sugama deestamanerapor una razónpara verificar sielnavegador cumple con la condición de ser IE <9,peromi puntoes que,comprensiblemente,poneren colaeselmétodo recomendado ypreferido,pero dependiendo detodas las otras variables/circunstancias que rodean lo que ustedintentar lograrlopuede queno siempre sea lomáspráctico y creo que se debe usar cierta discreción.Mira,yotambiénpodríaestar completamenteequivocadoen estepunto de vista,estoyinteresadoen escuchar lo que algunos de losmuchachos realmenteexperimentadostienen que decir :-)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
-
Graciasportugran sugerencia.Aunquenopuedo hacer quefuncione;si agrego su código dentro de laetiquetaThanks for your great suggestion. I can't get it to work though; if I add your code inside the
- 0
- 2014-06-26
- user2806026
Cuando lopegueen su archivofunctions.php,elimineelprimer ` Php` del código que leproporcioné,ya que yatiene laetiqueta de apertura` Php`en la línea 1 de su archivofunctions.php.Editémi respuesta original y laeliminé de allítambién.When you paste it in your functions.php file - remove the first `- 0
- 2014-06-26
- Matt Royal
Este código JS debeestarenvueltoen .No se recomiendaestemétodopara renderizar JSen WP,peroen algunos casos las soluciones rápidas sonmásimportantes que lasmejoresprácticas.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
Como la respuesta yaestá aceptada,solo quiero decir que hay otraforma deponeren colael códigojavascripten elpie depágina que he hechomuchas veces.
en el archivofunctions.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' );
puede cargaresta secuencia de comandosen unaplantilla depáginaen particular utilizando condición
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;
sipage-template.phpestáen el directorio (porejemplo,el directorio deplantillasen el directorio raíz de sutema)puedeescribir como:
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' );
-
No recomendaría "hornear"el JavaScripten elpie depágina deestamanera.Evita que sepueda desenganchar omodificar (almenos,fácilmente),lo cualesextremadamenteimportanteen el desarrollo de complementos ytemas.Si ustedesel usuariofinal de un sitio ynecesita un script rápido o algo así,hágalo,pero aún así,`wp_enqueue_script ()`es casi siempre universalmentemejor ymásflexible.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
Para responder a lapregunta,primero debemos hacer una distinciónentrejavascript y JQuery.
Para decirlo de unamanera simple:
- Javascript sebasaen ECMAScript
- JQueryes unabibliotecapara Javascript
Entonces,en realidad,hace dospreguntas diferentes:
- Sutítulo habla de una soluciónparaimplementar JavaScript
- Supregunta habla sobre una soluciónparaimplementar JQuery
Debido a que los resultados de Googlemuestran sutítulo ytodoel contenido de lapágina habla de JQuery,estopuede resultarmuyfrustrantepara laspersonas quebuscan una solución de JavaScript.
Y ahorapara la solución JQuery:
wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
Y la solución de JavaScript:
wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
Este código sepuede agregar a sufunctions.php La ubicación de los scriptsen ambos casoses
wp-content/themes/theme-name/js/script.js
¡Feliz codificación!
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!
-
En la épocaen que OPpublicó,los desarrolladores usaronjquery yjavascriptindistintamente.Noes deltodoexacto,peroera lopopular queerajquery y la cantidad defunciones que lefaltaban a JavaScript.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
Megustaríaeliminar algunasflechas de aspectofeo que sonestándaren losbotones de carritoen WooCommerce. Para lograresto,encontré un consejopara agregarel siguiente código,que deberíaeliminar lasflechas cuandoel documento se haya cargado.
¿Asumo que lo voy aponeren mifunctions.php? ¿Cómoexactamente haríaeso?
<×EDIT×
Estábien. Probéesteenfoque:
Creé un archivo llamado 'removeArrows.js' y lo coloquéen mi carpeta de complementos. Estetiene elmismo contenido queel código original,exceptojQueryen lugar de $. Luego agregué lo siguiente afunctions.php:
No sé cómo hacer queel código semuestre correctamente. Estonofuncionó. ¿Alguna sugerenciapara queestofuncione?
jQuery Snippet Source