En esta página: [esconder]
La mayoría de los tutoriales de Bootstrap en WordPress todavía te dicen que pegues un enlace de hoja de estilo en header.php y cargues jQuery junto a él.. Ambos movimientos son incorrectos en 2026. Oreja 5 eliminó jQuery como una dependencia, y la edición de header.php se borra directamente la próxima vez que se actualice el tema. Esta guía muestra la forma actual de hacerlo., con código que todavía funciona después de una actualización.
respuesta rapida: Para la mayoría de los sitios, poner en cola Oreja 5.3.8 a través de un CDN en el funciones.php de tu tema (alrededor de diez lineas, sin jQuery). Creando un tema personalizado completo? En su lugar, comience desde un iniciador basado en Bootstrap como Understrap. Solo quiero componentes Bootstrap dentro del editor de bloques.? Instale un complemento de bloques Bootstrap y omita el código por completo.
Última revisión: junio 2026. Versión de arranque (5.3.8) y muestras de código verificadas con los documentos oficiales.
¿Qué hace realmente Bootstrap? (y lo que WordPress ya maneja)
Bootstrap es gratis, fuente abierta marco CSS frontal. Incluye una red responsiva, componentes listos para usar (barras de navegación, tarjetas, modales, botones), y clases de utilidad para espaciado y diseño.. Obtienes todo eso sin escribir mucho CSS a mano.. Es diseño y maquetación., nada más.
WordPress es el sistema de gestión de contenidos: publicaciones, paginas, los usuarios, la base de datos, el panel de administración. Decide qué contenido existe y dónde vive.. Bootstrap decide cómo se ve ese contenido en la pantalla. No se superponen, que es exactamente por qué combinan bien, y también por qué WordPress nunca incluye Bootstrap para usted. Tienes que traerlo tú mismo..
Esto es lo que la gente extraña: Esta es una decisión del desarrollador o diseñador., no es una función de hacer clic en un botón. Si estás codificando un tema a mano, Bootstrap te ahorra semanas. Si prefieres arrastrar bloques, es posible que no necesites ningún marco. Nuestro Guía de WordPress vs creadores de sitios web es el mejor punto de partida en ese caso.
Un hecho más que vale la pena solucionar de inmediato. Oreja 5 eliminado jQuery. El JavaScript ahora es simple (vainilla) JS. Si un tutorial te dice que cargues jQuery para que Bootstrap funcione, ese tutorial describe Bootstrap 4 o mayor. Saltarlo.
Método 1: Agregue Bootstrap a través de CDN en funciones.php (Recomendado)
Este es el valor predeterminado correcto para casi todos. Un CDN (Red de entrega de contenidos, un conjunto de servidores que aloja archivos cerca de sus visitantes) sirve a Bootstrap, para que no guardes nada tú mismo. Y lo cargas a la manera de WordPress., a través de haciendo cola. Eso significa registrar un archivo para que WordPress lo imprima en el lugar correcto., sin ninguna edición en header.php.
Añade esto a tu funciones del tema hijo.php. Un tema infantil importa: edite el padre y sus cambios desaparecerán en la próxima actualización.
función htg_enqueue_bootstrap() {
wp_enqueue_style(
'oreja',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
formación(),
'5.3.8'
);
wp_enqueue_script(
'oreja',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
formación(),
'5.3.8',
cierto
);
}
add_action( 'wp_enqueue_scripts', 'htg_enqueue_bootstrap' );
Cinco cosas en ese fragmento ganan su lugar:
- formación(), no matriz('jQuery'). Oreja 5 no tiene dependencia de jQuery. Agregar un código de carga que no necesitas.
- los .paquete.min.js el archivo incluye popper, la pequeña biblioteca que posiciona los menús desplegables, información sobre herramientas, y popovers. Utilice el archivo no incluido solo si omite esos componentes.
- cierto al final carga el script en el pie de página, para que no bloquee el procesamiento de su página.
- los «5.3.8’ cadena de versión le dice a WordPress que elimine el caché correctamente cuando actualice más tarde.
- wp_enqueue_scripts es el gancho frontal. No tocará tu área de administración.
Guarda el archivo, recarga tu sitio, y ver fuente. Deberías ver la hoja de estilo Bootstrap y el script impresos automáticamente.. Para confirmar las ejecuciones de JavaScript, suelte un acordeón o modal Bootstrap en una página y haga clic en él. si anima, ya terminaste.
La ruta CDN también significa que Bootstrap llega desde servidores cercanos a su visitante y, a menudo, ya está almacenado en caché en su navegador desde otro sitio.. Si la velocidad de la página es tu prioridad, vale la pena entender esa ventaja, y nuestro desglose de cómo El alojamiento CDN afecta los tiempos de carga explica las compensaciones en términos sencillos.
Método 2: Host Bootstrap localmente (Para control y privacidad)
Las CDN son convenientes, pero le entregan a un tercero un registro de tus visitantes’ Direcciones IP. Para sitios sensibles al RGPD en la UE, o cualquiera que quiera cero solicitudes externas, alojar los archivos usted mismo es más limpio. También dejas de depender del tiempo de actividad de otra persona.
los pasos:
- Descarga el Bootstrap compilado 5.3.8 paquete de getbootstrap.com (la “CSS y JS compilados” descargar, no los archivos fuente).
- Coloque bootstrap.min.css en su tema en /activos/css/ y bootstrap.bundle.min.js en /activos/js/.
- Cambie las dos URL de CDN en el fragmento anterior a rutas locales usando get_template_directory_uri(), por ejemplo get_template_directory_uri() . '/activos/css/bootstrap.min.css'. Utilice get_stylesheet_directory_uri() en cambio, si los archivos viven en un tema secundario.
Todo lo demás sigue igual. Lo único que pierdes es el beneficio de caché compartido.. Lo que obtienes es la propiedad total.: sin diseño roto si una CDN tiene un mal día, y nada que filtre datos de visitantes fuera del sitio.
Método 3: Comience desde un tema inicial de Bootstrap
Métodos 1 y 2 atornillar Bootstrap a un tema existente. Si estás creando un tema desde cero, no atornilles nada. Comience desde una base que ya conecta Bootstrap a la estructura de plantilla de WordPress para usted.
Correa inferior es la elección a largo plazo. Suelda el clásico iniciador de subrayados. (El tema básico que los desarrolladores de WordPress han utilizado durante años.) para iniciar, con Sass ya configurado para que puedas recompilar una compilación personalizada. Iniciador de arranque de WP es el encendedor, Opción más amigable para un primer tema personalizado.. sabio by Roots se encuentra en el extremo avanzado: Utiliza plantillas Blade y un proceso de construcción moderno., y es independiente del marco, para que puedas ejecutar Bootstrap o cambiarlo.
La recompensa es real. Un tema inicial te ofrece una barra de navegación que funciona, una plantilla de comentario, paginación, y ganchos de WooCommerce que ya hablan del marcado de Bootstrap. Te saltas la tediosa plomería y escribes solo las partes que hacen tuyo tu diseño.. El costo es una curva de aprendizaje.: necesitarás sentirte cómodo con Sass, una terminal, y recompilar activos.
Una advertencia honesta. Antes de comprometerte con cualquier iniciador, consulte su última fecha de actualización en GitHub. Un iniciador que no ha lanzado un lanzamiento en dos años aún puede apuntar a Bootstrap 4 y sus hábitos jQuery. Eso lo lleva nuevamente al campo obsoleto del que esta guía está tratando de sacarlo..
Método 4: Utilice un complemento de bloques Bootstrap (Sin código)
No soy desarrollador? Aún puedes obtener la grilla y los componentes de Bootstrap dentro del editor de bloques estándar de WordPress.. Complementos como Bloques Bootstrap del editor de bloques agregar filas impulsadas por Bootstrap, columnas, botones, y contenedores como bloques nativos. Creas diseños responsivos arrastrando bloques, y el complemento pone en cola Bootstrap detrás de escena.
Este es el camino para los editores de contenido y propietarios de pequeñas empresas a quienes les gusta el aspecto de Bootstrap pero nunca quieren abrir funciones.php. También es el único método que funciona de forma natural con el editor de bloques., ya que los otros tres suponen que estás diseñando las plantillas a mano.
Sea realista sobre el techo, aunque. Un complemento de bloques le brinda los componentes de Bootstrap, no es la libertad total de marco que un desarrollador obtiene de Methods 1 a través de 3. Si su objetivo es un diseño personalizado con precisión de píxeles, lo superarás. Si simplemente quieres limpiar, secciones responsivas sin código, hace el trabajo. y si “sin código” es realmente lo que buscas, sopesarlo contra un Constructor de WordPress con IA. Esa ruta puede llegar a un diseño terminado más rápido que aprender clases de Bootstrap..
Ahora escriba el marcado Bootstrap: La cuadrícula en la práctica
Cargar Bootstrap es la mitad del trabajo. La otra mitad está escribiendo sus clases en tus páginas., y la mayoría de los tutoriales terminan antes de mostrarte. Si usaste métodos 1 a través de 3, agregas marcado dentro de los archivos de plantilla de tu tema o en un bloque HTML personalizado en cualquier página o publicación. (El complemento del método 4 crea el marcado por usted, para que puedas saltarte esta parte.)
Bootstrap se basa en un 12-cuadrícula de columnas. Tres clases anidadas lo impulsan: un contenedor para el envoltorio exterior, una fila dentro de ella, y elementos .col para cada columna. Aquí hay un diseño que se acumula en los teléfonos y se divide en 8 y 4 columnas en tabletas y superiores:
<clase div ="envase">
<clase div ="fila">
<clase div ="col-md-8">Contenido principal</div>
<clase div ="col-md-4">Barra lateral</div>
</div>
</div>
los col-md- prefijo es el disparador de respuesta. Por debajo del punto de interrupción medio (768px), ambas columnas ocupan todo el ancho y se apilan. A 768 px y más ancho, se sientan uno al lado del otro. Cambiar md por sm, LG, o xl para mover donde ocurre ese cambio. Una línea de nombres de clases reemplaza las consultas de medios que de otro modo escribirías a mano.
Los componentes funcionan de la misma manera.. Copiar el marcado de una tarjeta., barra de navegación, o modal directamente desde los documentos de Bootstrap, pégalo en tu plantilla, y los estilos que puso en cola se aplican de inmediato. Sin configuración adicional por componente.
El conflicto del que nadie te advierte
Aquí es donde la mayoría de los proyectos Bootstrap en WordPress van de lado. Tu tema activo ya tiene su propio CSS. Cuando Bootstrap se carga en la parte superior, los dos pelean por los mismos nombres de clase y estilos básicos. Los botones se ven apagados. descansos espaciados. Un diseño que ayer estaba bien se derrumba.
Tres colisiones causan casi todo:
- La clase .container. Muchos temas definen su propio contenedor con un ancho máximo diferente. Bootstrap lo redefine, y la última carga gana. Como resultado, los diseños cambian de lugar.
- Restablecimientos de bases. El reinicio de Bootstrap rediseña elementos sin procesar como el cuerpo, encabezados, y listas. Eso puede anular silenciosamente la tipografía de tu tema.
- Rejillas dobles. Si tu tema ya usa una cuadrícula (Flexbox o cuadrícula CSS), La cuadrícula de Bootstrap se acumula en la parte superior, y los elementos terminan anidados en dos sistemas en competencia.
Tienes dos arreglos limpios.. El primero es alcance Bootstrap: envuelva las secciones que desea diseñar en una clase principal (un patrón común lo llama bootstrap-iso). Luego compila Bootstrap para que sus reglas solo se apliquen dentro de ese contenedor. Deja de tocar el resto de tu tema.. La segunda solución, a menudo el más inteligente, Es para crear un paquete Bootstrap personalizado. Importa sólo las piezas que utilizas., la rejilla y un par de componentes, y deja reiniciar fuera. Menos CSS, menos colisiones, páginas más rápidas. Esta es también la razón por la cual un tema inicial (Método 3) evita el problema desde el principio: está construido alrededor de Bootstrap, para que nada choque.
¿Qué método debería elegir??
Haga coincidir el método con lo que realmente está construyendo. Tres casos comunes:
- Ejecuta un sitio terminado con un tema de terceros y desea algunos componentes de Bootstrap.. Método de uso 1 (cola CDN) dentro de un tema infantil. No busques un tema inicial; reconstruir todo su sitio para agregar un modal es excesivo. Si aparecen conflictos, alcance Bootstrap como se describe arriba.
- Eres un desarrollador que crea un tema personalizado desde cero.. Método de uso 3 (Correa inferior o salvia). Poner en cola Bootstrap en un tema en blanco a mano simplemente recrea lo que Understrap ya le ofrece, menos las plantillas probadas de WooCommerce y barra de navegación.
- Eres un editor de contenido o propietario de una tienda que quiere diseños responsivos sin código.. Método de uso 4 (un complemento de bloques). No vale la pena correr el riesgo de editar Functions.php para su caso de uso. Si tienes una tienda, combínalo con hosting adaptado para el trabajo. nuestras notas sobre Alojamiento de comercio electrónico de WordPress Cubra por qué un front-end Bootstrap todavía necesita un back-end rápido.
Un requisito de privacidad o cumplimiento anula los tres. Si no puede enviar datos de visitantes a una CDN externa, cambie el método que elija al alojamiento local del Método 2.
Preguntas frecuentes
¿Todavía necesito jQuery para usar Bootstrap? 5 en WordPress?
No. Oreja 5 eliminó jQuery y se ejecuta en JavaScript básico. Cuando pones en cola el script, dejar la matriz de dependencia vacía (formación()), no matriz('jQuery'). Agregar jQuery carga código adicional que sus componentes Bootstrap nunca llaman. Solo arranque 4 y antes lo necesitaba.
¿Bootstrap es bueno para WordPress en 2026?
si, si estás codificando un tema o quieres componentes responsivos consistentes. La grilla y las utilidades de Bootstrap reducen el tiempo de desarrollo y funcionan en todos los navegadores modernos sin correcciones adicionales. Es menos útil si construyes con el editor de bloques o un creador de páginas., dado que esas herramientas ya manejan el diseño responsivo. Combínalo con tu forma de trabajar realmente.
¿Agregar Bootstrap ralentiza un sitio de WordPress??
Puede, si carga todo el marco para dos componentes. El CSS y JS completamente minimizados añaden peso real. Cargándolos desde un CDN, aplazar el guión al pie de página, y crear un paquete personalizado solo con las piezas que usas mantiene el impacto pequeño. También puedes cargar Bootstrap solo donde sea necesario.: envolver la cola en un condicional como is_page() por lo que no se envía en todas las URL. Un tema inflado apilado sobre Bootstrap completo es el problema de velocidad real, no Bootstrap por sí solo.
¿Puedo usar Bootstrap con el editor de bloques de WordPress??
si, a través de un complemento como Block Editor Bootstrap Blocks, que agrega filas Bootstrap, columnas, y botones como bloques nativos. Bootstrap de puesta en cola manual (Método 1) no expone sus componentes dentro del editor, entonces estarías escribiendo nombres de clases manualmente en bloques HTML personalizados. Para flujos de trabajo en los que el editor es el primero, la ruta del complemento es la práctica.
¿Debo usar una CDN Bootstrap o alojar los archivos localmente??
Utilice la CDN para mayor comodidad y una oportunidad de almacenamiento en caché compartido del navegador. Hospede localmente si tiene requisitos de privacidad o GDPR, No quiero solicitudes externas., o no quiere depender del tiempo de actividad de otra red. El código es casi idéntico.; simplemente cambia las URL de CDN por get_template_directory_uri() rutas a archivos dentro de su tema.
Obtenga el método correcto, No sólo el código
Bootstrap y WordPress encajan perfectamente una vez que dejas de seguir los tutoriales de la era 2018. Versión en cola 5.3.8 en un tema infantil, eliminar la dependencia de jQuery, y alcance sus estilos para que no peleen con su tema. Eso cubre la gran mayoría de proyectos reales.. Elija un tema inicial solo cuando esté creando desde cero, y un complemento que bloquea solo cuando no tienes código.
Si esto es parte de una construcción más grande, algunas guías relacionadas profundizan. Comparar alojamiento de WordPress administrado en los EE. UU. para saber dónde ejecutar un tema personalizado. Y revise si necesita codificar en nuestra versión de los creadores de sitios web frente a WordPress.. Un marco sólo vale la pena cuando el resto de la pila, alojamiento incluido, puede seguir el ritmo.