1

quería usar Bootstrap con wordpress y no consigo que los archivos de js funcionen correctamente. ¿Alguien que me pueda ayudar por favor?. Los llamo localmente desde functions.php así:

function theme_styles(){

    wp_register_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array(), '4.0.0', true );
    wp_register_script('scripts', get_template_directory_uri() . '/assets/js/scripts.js', array(), '1.0.0', true );

    wp_enqueue_script('jquery');
    wp_enqueue_script('bootstrap');
    wp_enqueue_script('scripts');
}

add_action('wp_enqueue_scripts', 'theme_styles');

Haciéndolo así me da el siguiente error de consola:

Uncaught TypeError: Cannot read property 'fn' of undefined
    at bootstrap.bundle.min.js?ver=4.0.0:6
    at bootstrap.bundle.min.js?ver=4.0.0:6
    at bootstrap.bundle.min.js?ver=4.0.0:6
(anonymous) @ bootstrap.bundle.min.js?ver=4.0.0:6
(anonymous) @ bootstrap.bundle.min.js?ver=4.0.0:6
(anonymous) @ bootstrap.bundle.min.js?ver=4.0.0:6

Y si lo cargo directamente desde el CDN:

function theme_styles(){
    wp_register_script('popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js', array('jquery'), '1.12.3', true );
    wp_register_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js', array('popper', 'jquery'), '4.0.0', true );
    wp_register_script('scripts', get_template_directory_uri() . '/assets/js/scripts.js', array(), '1.0.0', true );

    wp_enqueue_script('jquery');
    wp_enqueue_script('popper');
    wp_enqueue_script('bootstrap');
    wp_enqueue_script('scripts');
}

add_action('wp_enqueue_scripts', 'theme_styles');

me da el siguiente error:

Uncaught TypeError: Cannot read property 'fn' of undefined
    at bootstrap.min.js:6
    at bootstrap.min.js:6
    at bootstrap.min.js:6
5

1 respuesta 1

1

Carga siempre primero JQuery ya que bootstrap necesita javascript para funcionar.

(jQuery debe ser lo primero, luego Popper.js, y luego nuestros complementos de JavaScript.)

En la documentación explica cual es el mejor sitio para colocar los scripts


Inténtalo sin cargar la libreria popper, en el caso de que no vayas a usar estos elementos. Esto lo digo porque yo he tenido porblemas recientemente y con el mismo error en fn


La carga la haría antes de el cierre de la etiqueta </body> para que cargue la página antes que los scripts.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
4
  • Estaría bien si le pudieras explicar por qué. Saludos. Commented el 13 nov. 2017 a las 15:37
  • Gracias. Haciendo lo así tirando del cdn no da error. No obstante lo que necesito son algunos elementos de bootstrap y no todos. Cargándolos individualmente desde el functions o desde el body es desde donde da los errores. Incluso tirando del cdn y usando por ejemplo el carrusel solo no consigo hacerlo funcionar correctamente. O el css va mal o el js.
    – Edu
    Commented el 14 nov. 2017 a las 22:00
  • Si nos cuentas solo uno de los casos de Error y nos aportas mas documentación acerca de este, a lo mejor podremos ayudarte
    – Oskar
    Commented el 15 nov. 2017 a las 7:28
  • En los casos en los que cargo el JS desde el footer haciendo la llamada al CDN de bootsrap no da error de ningun tipo. En los casos en los que hago la llamada al archivo localmente me sigue dando error. ALguien sabe si lo hna arrelgado ya?
    – Edu
    Commented el 18 nov. 2017 a las 17:58

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.