1

estoy haciendo una web en wordpress, quiero incluir algunas funcionalidades con JS, por lo que he creado un archivo llamado mi_script.js en el directorio js/mi_script.js

He creado un simple boton con un alert para ver si funciona, pero me da error en la consola de que no reconoce la funcion.

Adjunto el codigo del functions a ver si me podeis decir donde estoy cometiendo el error.

function pyrans_styles() {
    // registrar estilos
    wp_register_style('normalize', get_template_directory_uri() . '/css/normalize.css', array(),'5.0');
    wp_register_style('style', get_template_directory_uri() . '/style.css', array('normalize'),'1.0');

    //llamar a los estilos
    wp_enqueue_style('normalize');
    wp_enqueue_style('style');
    wp_enqueue_style( 'bootstrap', "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
    wp_enqueue_style( 'fontawesome', get_stylesheet_directory_uri() . '/css/font-awesome.min.css' );

    wp_enqueue_style('Montserrat', "https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800&display=swap");
    wp_enqueue_style('Open_Sans', "https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap");


    

    wp_enqueue_script( 'bootstrapjs', "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js", array('jquery'), '3.3.6', true );

    //registrar js, el TRUE sirve para q cargue el archivo en el footer
    wp_register_script('scripts', get_template_directory_uri() .'/js/scripts.js', array(),'1.1.0', true);

    //llamar al js
    wp_enqueue_script('jquery');
    // El jquery ya viene instalador en WP, por lo que solo tenemos que hacer la llamada.
    wp_enqueue_script('mi_script');
}
add_action('wp_enqueue_scripts', 'pyrans_styles' );

$ = jQuery.noConflict();

$(document).ready(function(){
    
    $('.mobile-menu a').on('click', function(){
        $('nav.menu-sitio').toggle('slow');
    } );
    
    var breakpoint = 768;
    $(window).resize(function(){
//        console.log( $(document).width() ) 
//        para ver el tamaño de la pantalla en la consola
        if($(document).width() >= breakpoint){
             $('nav.menu-sitio').show();
        }else{
            $('nav.menu-sitio').hide();
        }
    } );
    
    function myFunction() {
        alert("I am an alert box!");
      }
    
    
});

<button onclick="myFunction()">Try it</button>

No sé si estoy cometiendo algun error al insertar la libreria de bootstrap, ya que cada versión reciente cambia, agrederia que me dijeseis si lo estoy haciendo bien o mal. Espero vuestra respuesta ! Gracias

4
  • No queda claro en tu pregunta pero tenés que estar trabajando con child theme sino cualquier cambio que hagas será sobreescrito cuando actualices el theme. Luego el lugar para el archivo js debería estar dentro del child theme. Recién a partir de ahi tiene sentido ver lo que tenés mal en el uso del wp_enqueue_script('mi_script');
    – Juan
    Commented el 6 jun. 2019 a las 12:13
  • Ahí te dejé una respuesta, y ojo porque bootrstap tiene problemas con el dashboard de wp (o al menos solía tenerlos).
    – Juan
    Commented el 6 jun. 2019 a las 12:50
  • Perdon, he eliminado el comentario anterior porque me he equivocado. No estoy usando un tema child, estoy desarrollando un tema nuevo. Commented el 6 jun. 2019 a las 13:21
  • <button onclick="myFunction()"> es una lotería si no sabes si el script que define myFunction() se carga antes o después de que el elemento button exista, lo mas aconsejable en estos casos es asignarle una clase o id al boton y luego usar jQuery(document).ready(function() { para asignarle el evento onclick al botón por class o ID una vez que se cargó todo el html y el elemento existe Commented el 7 jun. 2019 a las 0:03

1 respuesta 1

1

El script mi_script.js tiene que estar dentro del theme / childtheme.

<directorio de wp>/wp-content/themes/<tu theme>/js/mi_script.js

Luego encolar el script con las dependencias de bootstrap y jquery (me pareció entdender que tu script depende de estos dos, sino podés dejar el array vacío.)

Si estás haciendo un theme:

wp_enqueue_script( 'mi_script', get_template_directory_uri() .'/js/mi_script.js', array('bootstrapjs','jquery'), '1.0.0', true );

Si estás haciendo un child theme entonces en lugar de get_template_directory_uri(), tenes que usar get_stylesheet_directory_uri()

Para revisar si el script está siendo incluido, revisá antes del tag de cierre del body los diferentes tags de script. uno de ellos debería tener el href de mi_script.js.

introducir la descripción de la imagen aquí

Resuelto en encolamiento del script, hay que corregir algunas cosas del script.js:

Wordpress ya tiene el noconflict activado para jQuery, es decir que el "$" no funciona y hay que usarlo con jQuery directamente.

Para poder usar la variable "$" dentro del ready() de jQuery se pasa como parámetro de la función.

En cuanto al botón cuando se selecciona, se llama a myFunction(), pero esta función está definida adentro de la función ready() por lo que no está visible fuera de ese contexto.

La solución es enlazar con el evento click del botón dentro del ambito donde la fución está visible, osea dentro del ready();

Para hacer eso, le agrego una clase al botón que luego puedo usar para encontrar el botón con jQuery.

jQuery( document ).ready(function( $ ) {

  function myFunction(){
     alert("I am an alert box!");
  }

  $("button.alert-button").click(function(){
        myFunction();
  });

});

Y el html:

<button class="alert-button">Try it</button>
5
  • He insertado el codigo wp_enqueue_script( 'mi_script', get_template_directory_uri() .'/js/mi_script.js', array('bootstrapjs','jquery'), '1.0.0', true ); Pero sigue sin reconocerme js. Me da el siguiente error: ReferenceError: myFunction is not defined. Hace falta registrarlo antes de hacer el wp_enqueue_script ? Commented el 6 jun. 2019 a las 13:21
  • Juan he añadido el script para que lo veas, no es nada del otro mundo. He hecho una prueba de colocar el <script> junto al codigo tal que asi sin archivo adjunto: <script> function myFunction() { alert("I am an alert box!"); } </script> <button onclick="myFunction()">Try it</button> Así funciona. Por lo que está claro que falla es la vinculacion que no sé commo solucionar. Commented el 6 jun. 2019 a las 15:42
  • He inspeccionado el boton, y lo unico que veo logico es que no aparece el contenido de la funcion, aparece vacia. :S He añadido una imagen para que puedas verlo. Commented el 6 jun. 2019 a las 18:30
  • Sí, aparece el script "mi_script" antes del cierre del body. Sigo sin saber porque no funciona :/ Commented el 6 jun. 2019 a las 21:30
  • he añadido un boton, lo he cogido de esta web: w3schools.com/js/tryit.asp?filename=tryjs_alert Commented el 6 jun. 2019 a las 22:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.