Para añadir Bootstrap en nuestro tema de wordpress, podemos hacerlo sin usar ningún plugin ni editar el header de nuestro tema activo, en su lugar lo añadiremos en el functions.php de nuestro tema activo del WordPress. Para implementar correctamente esta técnica, es esencial comprender cómo funcionan los hooks de WordPress y cuándo se ejecutan durante el ciclo de vida de la página.
Añadir bootstrap desde el functions.php del WordPress
/* ------------------------------------------------ */
/* ------------------------------------------------ */
/* AÑADIMOS BOOTSTRAP y JQUERY */
/* ------------------------------------------------ */
/* ------------------------------------------------ */
function my_scripts() {
wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.5.1.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot2','https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot4','/wp-content/themes/generatepress_child/myscripts.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
¿Cuál es la diferencia entre agregar Bootstrap en functions.php o en el header.php?
Usar functions.php es la forma correcta según los estándares de WordPress. El método wp_enqueue_scripts permite que WordPress gestione las dependencias entre archivos, evita conflictos con otros plugins y facilita el control de versiones. Editar header.php directamente es más frágil porque los cambios pueden perderse al actualizar el tema.
Al encolador desde functions.php, WordPress carga los recursos de manera ordenada y solo cuando es necesario. Además, puedes desactivar o modificar fácilmente los scripts sin tocar archivos críticos del tema.
¿Qué versión de Bootstrap debo usar en mi proyecto?
La versión depende de tus necesidades y compatibilidad. Bootstrap 4 es estable y muy utilizado, ideal si tu proyecto requiere compatibilidad amplia. Bootstrap 5 es más moderno, elimina dependencias de jQuery y ofrece mejoras visuales, pero requiere navegadores más recientes.
Considera también el soporte del tema hijo que uses. Algunos temas populares ya incluyen Bootstrap integrado, en cuyo caso deberías verificar la versión antes de agregar otra para evitar conflictos. Revisa la documentación de tu tema antes de decidir.
¿Cómo verifico que Bootstrap se ha cargado correctamente en mi sitio?
Abre tu navegador, entra a cualquier página del sitio y haz clic derecho para inspeccionar. En la pestaña Network (o Red) recarga la página y busca los archivos bootstrap.min.css y bootstrap.min.js. Si aparecen con estado 200, significa que se cargaron exitosamente.
También puedes abrir la consola de desarrollador (F12) y escribir en la terminal: window.bootstrap. Si muestra un objeto con propiedades, Bootstrap está activo. Si ves errores de JavaScript relacionados con Popper o jQuery, verifica que las dependencias estén en el orden correcto en functions.php.
