Cómo agregar correctamente Javascript en functions.php

9

Me gustaría eliminar algunas flechas de aspecto feo que son estándar en los botones del carrito en WooCommerce. Para lograr esto, encontré una sugerencia de agregar el siguiente código, que debería eliminar las flechas cuando el documento se haya cargado.

Supongo que lo voy a poner en mi functions.php? ¿Cómo exactamente haría eso?

$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});

EDIT

Está bien. He intentado este enfoque:

Hizo un archivo llamado 'removeArrows.js' y lo colocó en mi carpeta de complementos. Esto tiene el mismo contenido que el código original, excepto jQuery en lugar de $. Luego agregué lo siguiente a 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' ); 

No puedo descubrir cómo hacer que el código se muestre correctamente. Esto no funcionó. ¿Alguna sugerencia para hacer este trabajo?

Fuente del fragmento de código de jQuery

    
pregunta user2806026 25.06.2014 - 20:30

4 respuestas

5

Su función $scr en su wp_register_script() es incorrecta. Dado que tus funciones.php están dentro de tu complemento, y tu removeArrows.js está en la raíz de tu complemento, tu $scr debería tener este aspecto

plugins_url( '/removeArrows.js' , __FILE__ )

Otro punto a tener en cuenta, siempre es una buena práctica cargar los scripts y los estilos en último lugar. Esto asegurará que no se anule por otros scripts y estilos. Para hacer esto, solo agregue una prioridad muy baja (número muy alto) a su parámetro de prioridad ( $priority ) de add_action .

 add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

Y siempre cargar / poner en cola los estilos y secuencias de comandos a través de wp_enqueue_scripts action Gancho, ya que este es el gancho adecuado para usar. No cargue los scripts y los estilos directamente a wp_head o wp_footer

EDIT

Para los temas, como has indicado que ahora moviste todo a tu tema, tu $scr cambiaría a este

 get_template_directory_uri() . '/removeArrows.js'

para temas principales y esto

get_stylesheet_directory_uri() . '/removeArrows.js'

para temas infantiles. Tu código completo debería tener este aspecto

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 ); 
    
respondido por el Pieter Goosen 26.06.2014 - 14:47
4

No agregaría otro archivo js externo, es solo un recurso adicional e innecesario para obtener, y eso es algo que queremos reducir en términos de tiempos de carga de la página.

Yo agregaría este fragmento de jQuery en la cabecera de tu sitio web usando el gancho wp_head . Debería pegar lo siguiente en su tema o archivo de funciones de complementos. También me he asegurado de que jQuery esté en modo sin conflicto, como se puede 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 hecho esto y actualizado su página, verifique el origen de la página para asegurarse de que este fragmento de jQuery se esté cargando en su página. Si es así, debería funcionar a menos que esté desactivado en el fragmento jQuery real que estás utilizando.

    
respondido por el Matt Royal 25.06.2014 - 23:06
0

Como la respuesta ya está aceptada, solo quiero decir que hay otra forma de poner en cola el código javascript en el pie de página, lo cual he hecho muchas veces.

en el archivo 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' );

puede cargar este script en una plantilla de página en particular solo usando la 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;

si page-template.php está en el directorio (por ejemplo, templates directory en el directorio raíz de tu tema) puedes escribir como:

is_page_template( 'templates/page-template.php' );
    
respondido por el maverick 24.08.2018 - 16:31
-1

Para responder a la pregunta, primero debemos hacer una distinción entre javascript y JQuery.

Para expresarlo de una manera simple:

  • Javascript se basa en ECMAScript
  • JQuery es una biblioteca para Javascript

Entonces en realidad haces dos preguntas diferentes:

  • Su título habla sobre una solución para implementar javascript
  • Su pregunta habla sobre una solución para implementar JQuery

Debido a que los resultados de Google muestran su título y todo el contenido de la página habla sobre JQuery, esto puede ser muy frustrante para las personas que buscan una solución javascript.

Y ahora para 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 javascript:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );

Este código se puede agregar a sus funciones.php La ubicación de los scripts en ambos casos es wp-content/themes/theme-name/js/script.js

¡Feliz codificación!

    
respondido por el fred heuvel 24.08.2018 - 13:24

Lea otras preguntas en las etiquetas