Bootstrap: Qué es, para qué sirve y cómo incorporarlo en WordPress

Si quieres desarrollar una aplicación o que tu web sea responsive, necesitas aprender a utilizar Bootstrap.
Tal vez te has preguntado Bootstrap: Qué es, para qué sirve y cómo incorporarlo en WordPress
Con esta herramienta puedes lograr esto y más. Te ahorrarás muchísimo tiempo, trabajo y quebraderos de cabeza al no tener que, por ejemplo, hacer grandes modificaciones en el código de tu tema de WordPress.
Por estas y otras maravillosas bondades (te las cuento más abajo) hoy quiero aproximarte a este framework, contándote exactamente de qué va, sus ventajas y como utilizarlo.

¿Qué es Bootstrap?

En téminos sencillos, es un poderoso software libre muy útil para desarrollar aplicaciones y páginas web responsivas.

Este framework front-end está basado en HTML, CSS y JavaScript y se encuentra en constante desarrollo.

En el caso del desarrollo web (lo que nos interesa), lo potente de Bootstrap es que al tener cientos de páginas de estilo (CSS) responsivas hace que, por ejemplo, el desarrollo de un tema de WordPress sea sencillo, al no ser necesario escribir y modificar centenas de líneas de código.
Fue creada en 2010 por Twitter para estandarizar sus herramientas. Nació con el nombre Twitter BluePrint pero en 2011 no solo pasó a llamarse Bootstrap sino que se convirtió en código abierto. Desde allí ha sido actualizado varias veces y ya está en su versión 4.4.

¿Para qué sirve Bootstrap?

Al principio de este post te adelante 2 de sus principales funcionalidades, pero a continuación ahondaré en sus 5 principales ventajas.

1. Interactividad. Tiene menús de navegación, barras de progreso, controles de página, botones, transiciones, desplegables, modales y demás componentes que facilitan la comunicación con el usuario.

2. Mobile First. Esta es la esencia de la herramienta: desarrollar sitios que funcionen óptimamente en cualquier tipo de dispositivos móviles y luego en ordenadores de escritorio.
Para ello cuenta con acceso a scripts que hacen que tu web sea responsive y atractiva sin tener que escribir código.

3. Estándar visual. Aunque no es determinante, tener una web que sea visualmente agradable y atractiva definitivamente ayuda a que la experiencia del usuario sea más rica.
Y en este sentido, Bootstrap será un gran aliado porque su estándar visual de estilización y temas gratuitos y de pago están en sintonía con las tendencias de diseño del momento (recuerda que constantemente se actualiza).
4. Reuso de código. Te ayuda a minimizar el tamaño de los archivos y te evita tener que escribir bastantes líneas de código. Con Bootstrap únicamente debes vincular la clase al elemento en el que deseas aplicar el recurso.
Y es que para puedas desarrollar todas las características que te ofrece tendrías que escribir tantas líneas de código que aumentaría el tamaño de los archivos y el tiempo de carga de la página, nada bueno en estos tiempos en los que a ningún usuario le agrada esperar.
5. Comunidad activa. Al ser un framework de código abierto, cuenta con la fortuna de tener una comunidad de desarrollares muy activa que contribuyen con su experiencia y conocimientos a mantener siempre actualizada.

Y todos estos beneficios redundan en grandes ventajas para tu WordPress, más precisamente en la experiencia que el usuario tendrá mientras navegue en tu web.

 Puedes instalarlo como tema.

 Usarlo para desarrollar plugins.

 Estilizar funciones de los plugins que crees.

¿Cómo usar Bootstrap en WordPress?

No es necesario copiar el código en tu tema, solo necesitas integrar Bootstrap en tu web agregando varias líneas de código en la carpeta de tu tema mediante FTP.

Exactamente debes modificar el archivo strong>functions.php en tu tema. ¿Cómo lo haces? Te indico el procedimiento paso a paso:

1.- Ve al repositorio oficial de Bootstrap donde encontrarás la última versión. Aquí te dejo el enlace directo: https://getbootstrap.com/docs/

2.- Cuando estés ahí, copia el código que está en el primer lugar para que tu tema llame a la compilación de Bootstrap y la integre sin tener que subir más archivos.

3.- Luego accede a carpeta Theme de tu tema (está en la estructura general de archivos y carpetas de WordPress) y abre el archivo functions.php.

4.- Dentro de ese archivo (funtions.php), crea una carpeta en incluye en ella el enlace que copiaste anteriormente.

Esta nueva función queda de la siguiente manera:
• 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 JavaScript 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’);

Antes de concluir quiero que tengas muy en cuenta las siguientes recomendaciones, son muy importantes:

1. Antes de hacer el más mínimo cambio, crea una copia de seguridad de tu WordPress. Esto en caso de que surja algún problema o error (Si no sabes cómo hacer un clon, en este post te lo explico paso a paso: Cómo clonar una página WordPress

2. Copia el enlace directamente de la página oficial de Bootstrap. Recuerda que esta herramienta está en constante actualización y puede que al momento de que leas estas líneas exista una versión superior.

3. Puedes obviar la dependencia Pooper si no usarás Tooltips o Dropdowns.

4. Estos son cambios significativos en tu web, por lo que antes de hacer cualquier modificación debes estar seguro y saber muy bien lo que harás.
En este punto te sugiero que previamente aprendas sobre plugins y, si está en tus posibilidades, realices un curso sobre Bootstrap.
Con todo lo que aprendas más la información que te compartí hoy estoy seguro tendrás todas las herramientas necesarias para que le saques el máximo partido a este framework.

Recuerda que estoy para ayudarte en todo lo que necesites, así que ante cualquier duda que tengas déjamela en los comentarios y te responderé.

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *