Home / Questions / 270082
Accepted
Antonio Ángel Estrada Pérez
Asked: 2020-06-07 04:02:08 +0800 CST 2020-06-07 04:02:08 +0800 CST

I do not load the js file linked from the functions.php

  • 772

I am making a website in wordpress, I want to include some features with JS, so I have created a file called my_script.js in the js/my_script.js directory

I have created a simple button with an alert to see if it works, but it gives me an error in the console that it does not recognize the function.

I am attaching the functions code to see if you can tell me where I am making the mistake.

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>

I don't know if I'm making a mistake when inserting the bootstrap library, since each recent version changes, I would appreciate if you tell me if I'm doing it right or wrong. I hope your answer ! Thank you

php

1 Answers

  1. Best Answer

    The mi_script.js script has to be inside the theme / childtheme.

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

    Then enqueue the script with the dependencies of bootstrapand jquery(I understood that your script depends on these two, otherwise you can leave the array empty.)

    If you are making a theme:

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

    If you are making a child theme then instead of get_template_directory_uri(), you have to useget_stylesheet_directory_uri()

    To check if the script is being included, check before the closing tag of bodythe different tags of script. one of them should have the href of my_script.js.

    enter image description here

    Solved in enqueuing the script, some things need to be corrected in the script.js:

    Wordpress already has it noconflictactivated for jQuery, that is to say that the " $" does not work and you have to use it jQuerydirectly.

    In order to be able to use the variable " $" within the ready()of jQueryit is passed as a parameter of the function.

    As for the button when it is selected, it is called myFunction(), but this function is defined inside the function ready()so it is not visible outside of that context.

    The solution is to bind to the click event of the button inside the scope where the function is visible, that is, inside the ready();

    To do that, I add a class to the button which I can then use to find the button with jQuery.

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

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

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

});

    And the html:

    <button class="alert-button">Try it</button>
    • 1