¿Cómo encolar Bootstrap 4 en un tema?

Question

¿Cómo encolar Bootstrap 4 en un tema?

16 jun 2018, 20:07:36

Vistas: 29.9K

Votos: 3

Intenté encolar Bootstrap con functions.php

wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js');
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js');
wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js');

El CSS parece funcionar pero ninguno de los archivos JS está funcionando... no estoy seguro de qué estoy haciendo mal...

Por favor ayuda, gracias

User

100

wp enqueue script twitter bootstrap

Comentarios

¿Tu tema está usando wp_head()?

Nathan Johnson

16 jun 2018 20:25:10

sí, estoy usándolo y confirmé que lo tiene... el problema parece ser que: wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true ); no se está cargando... los demás sí se cargan en el encabezado

User

16 jun 2018 20:45:40

Todas las respuestas a la pregunta

Comentarios

hola... todavía no funciona ..wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true ); este script no se carga por alguna razón..los demás sí aparecen

User

16 jun 2018 20:46:45

solucionado... el problema estaba con el $handle ..boot2 , boot2 :)..gracias por la ayuda

User

16 jun 2018 20:49:49

Puedes usar nombres correctos como 'popper', 'bootstrap' y 'popper' como dependencia para el script 'bootstrap'. No necesitas encolar jQuery slim :)

Elex

16 jun 2018 20:55:05

¿Y cómo puedo agregar el CSS y el script incluyendo las etiquetas 'origin' e 'integrity' que son requeridas según Bootstrap?

GyRo

5 nov 2018 15:11:43

Si deseas que los estilos de la biblioteca se carguen antes que todos los demás estilos, y que los estilos del tema se carguen después de todos los demás (con los estilos de los plugins en medio), debes usar dos funciones. La primera, con prioridad "9", se usará para cargar los estilos de la biblioteca, y la segunda, con prioridad "10", se usará para cargar los archivos del tema. Usar solo una función para cargar todo, en un tema, resulta en una situación donde los estilos de los plugins son los primeros en cargarse.

aldemarcalazans

2 jul 2021 20:30:24

Mostrar los 4 comentarios restantes

Prueba esto:

function abc_load_my_scripts() {
  wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'));
  wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'));
  wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'abc_load_my_scripts', 999);

Con el último argumento array('jquery') le estás indicando a WordPress que incluya el script DESPUÉS de jQuery. Ten en cuenta que cada script debe usar un identificador diferente (primer parámetro).

Más información aquí.

Cuando revisas el <head>, ¿estás seguro de que los scripts no se están cargando?

Saludos, Bjorn

Bjorn

535

16 jun 2018 20:11:07

Comentarios

Probé lo anterior pero los archivos de JavaScript aún no se cargan... lo que hace que el submenú y el botón del menú responsivo no funcionen... estoy usando Chrome y no hay errores en la consola.

User

16 jun 2018 20:19:41

He actualizado mi respuesta.

Bjorn

16 jun 2018 20:23:43

Solucionado... el problema estaba con el $handle ..boot2, boot2 :).. gracias por la ayuda.

User

16 jun 2018 20:50:03

Como es habitual en Stackoverflow, las respuestas incorrectas reciben votos y son elegidas como correctas, mientras que las únicas respuestas correctas ni siquiera reciben un voto. Ahora tienes mi voto, porque usaste la forma correcta de encolar cualquier cosa en WP.

User

11 ago 2021 13:53:06

Akshat 1.2K · Accepted Answer · 2018-06-16T20:25:10Z

Puedes usar un hook de acción y encolar scripts y estilos en el sitio.

function my_scripts() {
    wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
    wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Si deseas agregar los scripts después de jQuery, puedes usar el array de jQuery como dependencia. El último argumento true incluirá el JS en el footer, si lo quieres en el header puedes eliminarlo.

Akshat

1.2K

16 jun 2018 20:25:10