Jhon Marreros Guzmán

Creado 26 julio, 2018, 5:07 pm

Incluir Bootstrap en WordPress

Bootstrap es un framework para diseño de aplicaciones web, esta basado en HTML, CSS y Javascript. Con Bootstrap puedes diseñar fácilmente botones, menús, formularios, etc. En este artículo veremos cómo integrar Bootstrap en WordPress de manera práctica.

Generalidades

Seguramente muchas veces quieres mejorar el diseño del contenido de tu sitio web y te ves limitado por lo que te ofrece el theme que estas usando, si tu theme ya soporta Bootstrap u otro framework similar puedes hacer uso de todos los elementos que te brinda, en caso no lo incluya puedes evaluar incluirlo en tu theme.

Ten en cuenta que así como existe Bootstrap existen otros frameworks similares como Foundation o Bulma. Para incluir estos otros frameworks en tu sitio la lógica que se explicará a continuación es la misma.

Para detectar si tu theme usa Bootstrap puedes comprobarlo fácilmente revisando el código fuente HTML de tu sitio, algunos themes sólo incluyen parcialmente Bootstrap, por ejemplo sólo el archivo CSS.

Incluir Bootstrap en WordPress

Incluiremos Bootstrap como parte de la funcionalidad del theme, de preferencia en un child-theme, existen básicamente dos manera para incluir el framework.

– Incluir los archivos descargados

Si quieres tener más control sobre los recursos de tu sitio puedes descargarte los archivos de Bootstrap y colocarlos en una carpeta de tu theme.

Para descargar los archivos puedes acceder directamente al sitio oficial de Bootstrap

Tal como se muestra en la siguiente imagen, luego de acceder a la descarga seleccionaremos la descarga de los archivo CSS y JS compilados y minificados.

Descargarás un archivo .zip el cual al descomprimir verás dos carpetas una carpeta CSS y otra JS, dentro de estas hay una serie de archivos, los que usaremos serán: bootstrap.min.css y bootstrap.min.js

Si quieres saber que es lo que incluye cada archivo puedes revisar la documentación del contenido de Bootstrap

Ambos archivos puedes copiarlos dentro de tu theme o child-theme, asumiendo que tienes ya una carpeta css y otra js, estarían en la siguiente ruta:

/wp-content/themes/TU_TEMA/css/bootstrap.min.css
/wp-content/themes/TU_TEMA/js/bootstrap.min.js

Finalmente puedes usar el siguiente código PHP en tu archivo functions.php de tu theme o child-theme para registrar ambos archivos.


// Incluir Bootstrap CSS
function bootstrap_css() {
	wp_enqueue_style( 'bootstrap_css', 
  					get_stylesheet_directory_uri() . '/css/bootstrap.min.css', 
  					array(), 
  					'4.1.3'
  					); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_css');

// Incluir Bootstrap JS
function bootstrap_js() {
	wp_enqueue_script( 'bootstrap_js', 
  					get_stylesheet_directory_uri() . '/js/bootstrap.min.js', 
  					array('jquery'), 
  					'4.1.3', 
  					true); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_js');

En el código anterior:

Estamos usando el hook wp_enqueue_scripts para registrar los archivos CSS y JS
El archivo CSS no es dependiente de ningún otro registro anterior, si tienes dudas cómo registrar archivos CSS en tu sitio revisa: Agregar CSS en WordPress de manera correcta
El registro del archivo Javascript tiene como dependencia Jquery, si tienes dudas cómo registrar archivos javascript en tu sitio revisa: Insertar javascript en WordPress de forma correcta
En ambos archivos he colocado la versión de Bootstrap a la que pertenecen que es la 4.1.3

Hay una dependencia a la librería Popper que ya viene incluida en el archivo bootstrap.min.js

– Incluir los archivos a través de un CDN

En este caso la ventaja es que llamarás a los archivos desde un CDN remoto. El código de registro es similar al caso anterior sólo que con las rutas cambiadas y con un adicional para incluir una dependencia.

Las urls de CDN usadas las puedes encontrar en la documentación de Bootstrap.


// Incluir Bootstrap CSS
function bootstrap_css() {
	wp_enqueue_style( 'bootstrap_css', 
  					'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', 
  					array(), 
  					'4.1.3'
  					); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_css');


// Incluir Bootstrap JS y dependencia popper
function bootstrap_js() {
	wp_enqueue_script( 'popper_js', 
  					'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', 
  					array(), 
  					'1.14.3', 
  					true); 
	wp_enqueue_script( 'bootstrap_js', 
  					'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js', 
  					array('jquery','popper_js'), 
  					'4.1.3', 
  					true); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_js');

Si no vas a usar Tooltips o Dropdowns puedes obviar la dependencia Popper.

Usando los elementos de Bootstrap en WordPress

Una vez que has agregado los archivos CSS y JS, ya sea copiándolos o a través de un CDN es hora de probar código de ejemplo de Bootstrap como parte de tu contenido.

En la documentación de Bootstrap puedes encontrar varios ejemplos de código que puedes adaptar a tus necesidades, por ejemplo para mostrar un modal, buscamos en componentes, el código que nos sugiere es el que se muestra en la imagen adjunta.

Simplemente sería copiar este código como parte del contenido HTML de tus entradas o páginas.

Existen también plugins que te facilitan insertar elementos Bootstrap como parte de tu contenido, por ejemplo Bootstraper shortcodes, sin embargo te generan una dependencia, o efecto Lock-in, a través de los shortcodes que crean.

No sólo puedes usar el código de Bootstrap en el contenido de tu sitio sino también en los archivos PHP de tu theme.

Conclusión

Bootstrap tiene un completo set de elementos funcionales que puedes evaluar usar como parte de tu contenido y evitar el uso de plugins adicionales por ejemplo para la creación de slides, modales, etc. También incluye estilos para botones, formularios, tarjetas, etc, por lo que si tu theme no tiene estilos suficientes para estos elementos, Bootstrap puede cubrir ese vacío.

Ver comentarios (18)

Yonder Rangel dice:

26 noviembre, 2019 en 8:08 pm

Me sirvió bastante ¡muchas gracias!
Robyir Antonio Loreto Ruiz dice:

5 julio, 2020 en 8:53 pm

Que Bien!!! me irritaba que Wordpress no me reconociera el bootstrap pero con esta guía pude lograr que lo hiciera... Agradecido... Saludos desde Venezuela
- Jhon Marreros Guzmán dice:
  
  5 julio, 2020 en 9:32 pm
  
  Hola, que bueno que te sirvió, saludos :)
Andrés dice:

29 agosto, 2020 en 3:21 pm

Hola Jhon muchas gracias, me sirvio para hacer los temas con bootstrap, me surge una duda, hay alguna forma de solo utilizar bootstrap, para algunas template, y no en todo el tema? Es decir, solo usarlo en el single.php, por ejemplo. saludos.
- Jhon Marreros Guzmán dice:
  
  11 septiembre, 2020 en 4:50 pm
  
  Hola, si, podrías encolar los scripts y hojas de estilos sólo para páginas específicas.
  - Andres dice:
    
    31 enero, 2021 en 4:20 pm
    
    Cómo podría ser esto de encolar bootstrap solo en unas páginas?
    - Jhon Marreros Guzmán dice:
      
      2 febrero, 2021 en 2:53 am
      
      Hola, usa condicionales con las funciones is_page() para página o is_single() para entradas. Revisa por ejemplo este artículo de referencia: https://decodecms.com/cargar-scripts-y-estilos-de-contact-forms-7-condicionalmente/
robert muñoz dice:

7 octubre, 2020 en 4:49 pm

Hola Jhon como se puede reutilizar los estilos de bootstrap que ya estan agregados en un theme y reutilizar ese mismo archivo boostrap.min.css en un plugin, existe alguna funcion de wordpress que me ayude en esa parte sin tener que hacer una doble carga de archivos? muchas gracias=)
- Jhon Marreros Guzmán dice:
  
  9 octubre, 2020 en 12:26 pm
  
  Hola, simplemente carga tus estilos CSS como archivo y usa como dependencia la carga de Bootstrap. Para cargar un archivo .css revisa la función https://developer.wordpress.org/reference/functions/wp_enqueue_style/ , verás que tiene un parámetro de dependencia, allí tienes que colocar el ID de cómo se registró Bootstrap. En realidad lo de la dependencia te asegura que se cargue antes Bootstrap que los estilos que usas en tu plugin. Saludos.
Zabdiel Flores dice:

4 marzo, 2021 en 9:20 pm

100% Funcional, ¡Muchas gracias!
- Jhon Marreros Guzmán dice:
  
  5 marzo, 2021 en 2:21 pm
  
  Que bueno :)!
Luis Martínez dice:

19 abril, 2021 en 11:55 am

Buenas amigo, excelente explicación... He tratado de colocar bootstrap en un tema especifico que por defecto no contiene bootstrap y no me permite que salga bien el carousel, solo se muestran los botones y la separación de las imágenes. Saludos y gracias de antemano.
- Jhon Marreros Guzmán dice:
  
  21 abril, 2021 en 3:17 pm
  
  Hola, posiblemente no se incluyó la librería javascript, asegúrate de que se haya incluído.
Raúl dice:

26 junio, 2021 en 2:33 pm

Hola Jhon, buenas tardes.

Estoy creando un theme desde cero para Wordpress con Bootstrap 5. Para incluir los archivos necesarios he utilizado wp_register_scripts() y puedo comprobar que se cargan correctamente todos en el orden y lugar adecuados (en el footer, primero jquery, luego popper y luego bootstrap).

Sin embargo, si trato de insertar un navbar de bootstrap, el botón de desplegar no reacciona. La consola no arroja ningún error y ya no se que puede ser, el artículo más aproximado a mi problema que he encontrado es este: https://wordpress.org/support/topic/my-bootstrap-theme-doesnt-load-bootstrap-js-and-navbar-toggle-isnt-working/ Pero en mi caso aun no he integrado el menú de wordpress en el navBar, el código que tengo es el puro navBar copiado y pegado desde la web de Bootstrap. Y no hay forma de que despliegue.

Te pondría un lik para ver esto, pero estoy trabajando en local...

Gracias de antemano. Raúl.
- Jhon Marreros Guzmán dice:
  
  29 junio, 2021 en 7:28 pm
  
  Hola, revisa bien la estructura ya que si que debería funcionar. Algo que podrías probar es guardar la página como HTML y verificar si funciona en una página estática.
  Saludos.

Saludos jhon con Wordpress tengo el thema MacFury de (DrFury) al parecer el tema una bootstrap 3, y yo estoy agregando un modal en un tema hijo (en el header) pero por alguna razon el boton no despliega, tiene las llamadas de la libreria en el function via siguiente en el funtions.php del tema hijo

function bootstrap_css() {
	wp_enqueue_style( 'bootstrap_css', 
  					'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css', 
  					array(), 
  					'5.2.0'
  					); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_css');


// Incluir Bootstrap JS y dependencia popper
function bootstrap_js() {
	wp_enqueue_script( 'bootstrap_js', 
  					'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js', 
  					array(), 
  					'5.2.0', 
  					true); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_js');

// Incluir jquery
function bootstrap_icons() {
	wp_enqueue_script( 'bootstrap-icons_css', 
  					'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css', 
  					array(), 
  					'1.9.1', 
  					true); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_icons');

coloco el modal y no levanta. ahora bien pruebo el modal en una pagina php aparte y si despliega

Jhon Marreros Guzmán dice:

30 agosto, 2022 en 10:00 am

Hola, revisa primero si todas los archivos .css y .js necesarios, los que estas encolando, están realmente cargando en tu sitio, verifica los enlaces, verifica con el inspector de código en el tab de consola si te aparecen errores.

Jorge dice:

27 septiembre, 2023 en 8:33 am

Excelente post! Que buen aporte. Muy bien explicado y sencillo incluso para novatos 👏🏼

Deja un comentario

Generalidades

Incluir Bootstrap en WordPress

– Incluir los archivos descargados

– Incluir los archivos a través de un CDN

Usando los elementos de Bootstrap en WordPress

Conclusión

Artículos Relacionados

Ver comentarios (18)