• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Recursos / Incluir Bootstrap en WordPress

Incluir Bootstrap en WordPress

Incluir Bootstrap en WordPress

[ 26 julio 2018 ] [ Actualizado: 22 abril 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

css js librería

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

buscar Bootstrap en código

 

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 archivos minificados Bootstrap

 
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

Archivos seleccionados

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.

Código para crear ventana modal Bootstrap

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.

 

¿Aún con dudas?, en el siguiente video se detalla cada uno de los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar cuadros de alerta en el contenido de WordPressAgregar cuadros de alerta en el contenido de WordPress
  • Evitar la selección de texto, copiar y pegar en WordPressEvitar la selección de texto, copiar y pegar en WordPress
  • Evita que tu sitio sea cargado desde un iframeEvita que tu sitio sea cargado desde un iframe
  • Generar código para WordPressGenerar código para WordPress con GenerateWP
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (9 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Yonder Rangel

    26 noviembre, 2019

    Me sirvió bastante ¡muchas gracias!

  2. Robyir Antonio Loreto Ruiz

    5 julio, 2020

    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

      5 julio, 2020

      Hola, que bueno que te sirvió, saludos 🙂

  3. Andrés

    29 agosto, 2020

    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

      11 septiembre, 2020

      Hola, si, podrías encolar los scripts y hojas de estilos sólo para páginas específicas.

      • Andres

        31 enero, 2021

        Cómo podría ser esto de encolar bootstrap solo en unas páginas?

        • Jhon Marreros Guzmán

          2 febrero, 2021

          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/

  4. robert muñoz

    7 octubre, 2020

    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

      9 octubre, 2020

      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.

  5. Zabdiel Flores

    4 marzo, 2021

    100% Funcional, ¡Muchas gracias!

    • Jhon Marreros Guzmán

      5 marzo, 2021

      Que bueno :)!

  6. Luis Martínez

    19 abril, 2021

    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

      21 abril, 2021

      Hola, posiblemente no se incluyó la librería javascript, asegúrate de que se haya incluído.

  7. Raúl

    26 junio, 2021

    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

      29 junio, 2021

      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.

  8. andri

    26 agosto, 2022

    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

      30 agosto, 2022

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Shortcode para mostrar la fecha en WordPress

Personalizar email de registro de nuevo usuario en WordPress

Habilitar comentarios en el inicio de WordPress

Formulario de login sin plugins en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados