Seguro que, a poco que te hayas interesado por el diseño web, has oído hablar de Bootstrap. No es raro, porque su uso facilita no poco el diseño responsive, ahorrando el uso de mucho código y facilitando unos resultados muy buenos.
Y utilizarlo en tu web es muy sencillo con WordPress. No necesitas buscar una plantilla que ya lo incorpore: lo puedes añadir tú cuando quieras, y sin la necesidad de recurrir a plugins. Vamos a ver cómo instalar Bootstrap en WordPress, y cuál es la mejor forma de hacerlo, dado que hay varias.
Tabla de contenidos
Qué es Bootstrap (en pocas palabras)
De forma muy rápida, a modo de introducción y para aquellos que no saben qué es Bootstrap, simplemente diré que (grosso modo) es un framework CSS, es decir, una serie de estilos predefinidos, preparados para ser aplicados a nuestra web.
La finalidad es simple: aplicando esos estilos ya predefinidos el diseño se hace mucho más rápido, sencillo y eficiente. No necesitas tener conocimientos avanzados de CSS, ya que el framework te facilita todas las funciones, y con código mucho menos complejo.
Por ejemplo, si quieres maquetar una web con CSS puro y duro tendrás que crear las directivas necesarias para colocar cada div en su sitio, dotarles de estilos atractivos, y después utilizar media queries para generar diferentes visualizaciones con diferentes anchos de pantalla.
Pero esto sólo pretende ser una sencilla introducción, así que no me quiero enrollar. Vamos con la parte práctica del asunto, que es lo que mola. 🙂
Instalar Bootstrap en WordPress
En realidad «instalar» Bootstrap consiste, básicamente, en añadir una línea en la cabecera que hace que cargue los estilos correspondientes. Parece simple (bueno, lo es) pero también es cierto que hay formas y formas de hacerlo, unas más acertadas que otras.
Y, aunque hay más, voy a explicar dos: la que encontrarás más a menudo explicada por ahí, y que no es recomendable, y la que no vas a ver casi nunca, pero que es como lo haría alguien que sabe cómo deben hacerse las cosas.
En cualquier caso, ambas formas consisten en añadir a la cabecera la llamada a los estilos de Bootstrap. Esto se limita a añadir una sola línea de HTML, que encontrarás en la web oficial de Bootstrap en el apartado Getting started, donde dice Bootstrap CDN. Concretamente aquí.
Solamente tienes que copiar la línea que hay bajo Latest compiled and minified CSS, y que en estos momentos es:
Pero no la copies de aquí: ve a la página de Boostrap según te he indicado y cópiala de ahí, ya que se va actualizando con las nuevas versiones Como ves, la que he pegado aquí es la de la versión 3.3.7, la última versión estable en el momento de escribir estas líneas.
El modo menos recomendado: añadirlo a la cabecera de la plantilla
Este es el modo que quizá veas en más de un sitio, por varias razones:
- Es más rápido y fácil de explicar
- Es el que utiliza todo el mundo… cuando no tiene conocimientos suficientes para saber cómo se hacer realmente bien
Así que te lo explico, pero no te lo recomiendo, y además te daré las razones (en el vídeo que hay más abajo puedes también verlas «en vivo»). Consiste, básicamente, en coger la línea que inserta los estilos de Bootstrap y pegarla en la cabecera de tu plantilla (header.php), entre las etiquetas <head> y </head>.
Hay varios problemas al hacerlo así:
- Según en qué posición lo insertes entre <head> y </head> puedes encontrarte con resultados inesperados. Explico esto con más detalle en el vídeo que hay un poco más abajo.
- Si no usas un tema hijo perderás el cambio cada vez que tu plantilla se actualice.
- Aunque estés usando un tema hijo, igualmente lo perderás el día que decidas cambiar de plantilla.
Así que, lo mejor, lo que recomiendan todos los manuales de estilo de WordPress, y lo correcto porque está pensado para ello, es hacerlo como se hacen estas cosas en WordPress: registrando el estilo y dejando que WordPress lo gestione. Vamos a ver cómo.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
El modo fetén: registrar Boostrap en la cola de estilos a cargar de WordPress
Para ello WordPress dispone de un hook específico (un punto de la ejecución en el que podemos decirle a WordPress que queremos insertar nuestro propio código), y es wp_enqueue_scripts; además, tenemos también una función específica para «poner en cola» nuestros estilos, wp_enqueue_style.
En fin, todo eso lo digo para los más curiosos. En resumen, el código terminado es el siguiente:
add_action ('wp_enqueue_scripts', function () {
wp_enqueue_style ('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
});
Recuerda, la URL debes cogerla de la web de Bootstrap según te indiqué antes (lo que hay a continuación de href, de forma que esté lo más actualizada posible, este ejemplo es con la versión que hay al momento de escribir esta entrada.
Así de fácil. ¿Y qué hacemos con ese código? Pues lo de siempre: los menos cuidadosos, a functions.php (no muy recomendado) y los que le guste hacer las cosas bien, a tu propio plugin de funciones personalizadas o a Code Snippets, como ya he explicado en más de una ocasión:
Vídeo: insertar Bootstrap en WordPress (el modo bueno)
En este vídeo puedes ver ambos métodos, y verás en pantalla alguna de las consecuencias de no hacerlo correctamente con el primer método (por cierto, que en el vídeo utilizo Bootstrap 4.0.0 beta):
Algunos plugins para facilitarte la vida con Bootstrap en WordPress
Y una vez que los estilos de Bootstrap están en nuestra web, ¿qué? Pues a usarlo. Si conoces el framework ya sólo queda comenzar a aplicar sus clases donde las necesites.
Pero si no lo conoces, hay algunos plugins que te permiten aplicar sus estilos fácilmente mediante shortcodes, como Easy Bootstrap Shortcodes o Bootstrap Shortcodes for WordPress.
Eso sí, ambos plugins incluyen shortcodes para Bootstrap 3, pero recuerda que la versión 4 de este framework está a punto de ser liberada (actualmente está en fase beta). Los plugins te seguirán sirviendo, pero a menos que sus desarrolladores los actualicen no podrás disfrutar de las novedades de esta nueva versión.
Hola Enrique, gracias por compartir tu conocimiento. Quisiera pedirte apoyo con la implementación de un navbar de bootstrap en wp. Se que se tiene que usar walker. Pero hasta el momento no he logrado nada, la verdad es que también estoy muy verde en el tema. Muchas gracias de nuevo 😀
Hola, Enrique!
¡Gracias por tu artículo! Creo que voy a implementar el uso de Code Snippet en mis instalaciones de WordPress, se ve una manera muy limpia de implementar funciones.
Al respecto de Bootstrap, ¿conoces alguna manera de migrar una web de bootstrap a WordPress?
En caso negativo, ¿Crees buena idea implementar el Bootstrap en WordPress para crear una «réplica» de la web en cuestión o consideras que es mucho mejor crear una réplica directamente en WordPress con cualquiera de los frameworks potentes que existen hoy en día?
Gracias por tu respuesta y por tu blog, que para mí es toda una referencia 🙂
Hola Enrique, un placer.
Consulta, agregue el bootstrap y el theme x defecto pero no se como agregar el script de js como la ultima version de Bootstrap
modificado el codigo sini me bloquea wordfence
agregar_action (‘wp_eeeenqueue_sssscripts’, functttion ()
wp_eeeeenqueue_style (‘bootstrap’, ‘aca la url de boostrap’);
wp_eeeeenqueue_style (‘theme’, ‘aca la url de theme’);
});
!– Latest compiled and minified JavaScript –>
O sea, la ultima linea, la del script, como la agrego al snippet de PHP (uso el code snippet)
Gracias