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.
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.
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
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
– 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.
// 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');
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.
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.
Artículos Relacionados
(10 votos, promedio: 5,00 de 5)
Cargando...
Me sirvió bastante ¡muchas gracias!
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
Hola, que bueno que te sirvió, saludos 🙂
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.
Hola, si, podrías encolar los scripts y hojas de estilos sólo para páginas específicas.
Cómo podría ser esto de encolar bootstrap solo en unas páginas?
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/
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=)
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.
100% Funcional, ¡Muchas gracias!
Que bueno :)!
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.
Hola, posiblemente no se incluyó la librería javascript, asegúrate de que se haya incluído.
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.
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
coloco el modal y no levanta. ahora bien pruebo el modal en una pagina php aparte y si despliega
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.
Excelente post! Que buen aporte. Muy bien explicado y sencillo incluso para novatos 👏🏼