En numerosas ocasiones, leyendo posts en sitios tecnológicos, habrás leído la palabra Bootstrap.
Pero, ¿sabes qué es Bootstrap? En este artículo vamos a intentar hacer una aproximación a este framework tan extendido en la actualidad.
Antes de nada tenemos que intentar aclarar qué es un framework.
De forma breve, podríamos definirlo como un entorno de trabajo, un conjunto de herramientas con librerías, módulos, etc., que sirve para resolver problemas y situaciones similares cuando utilizamos algún lenguaje de programación de una forma rápida y sistematizada.
Sería una forma de facilitar el trabajo a la hora de desarrollar una determinada aplicación.
Bootstrap es un es un framework basado en HTML, CSS y JavaScript para crear webs responsivas.
Fue desarrollado inicialmente por Twitter para que los desarrolladores trabajaran con un marco de trabajo similar, para que el desarrollo de los diferentes apartados de la aplicación fueran homogéneos y estandarizados y se pudiese hacer el trabajo de programación más rápido.
Posteriormente, el código fue liberado y ahora es software libre y en continuo desarrollo.
Bootstrap contiene cientos de páginas de estilo (CSS) responsivas para que el desarrollo de un tema de WordPress, por ejemplo, sea más sencillo, evitándonos escribir y modificar cientos de líneas de código.
Instalando Bootstrap en nuestra web podremos crear botones, transiciones, desplegables, modales, etc. Tendremos también acceso a diferentes scripts que harán una web responsiva y atractivas sin necesidad de tener que escribir código.
A continuación, explicamos cómo usar Bootstrap en nuestra web sin tener que copiar todo el código en nuestro tema.
Solo habría que hacer una función que haga que se integre en nuestra web modificando unas cuantas líneas de nuestro tema.
Tabla de contenidos
¿Cómo podemos usar Bootstrap en WordPress?
Para poder usar Bootstrap tendremos que añadir algunas línea de código en la carpeta de nuestro tema mediante FTP.
Debemos modificar el archivo strong>functions.php en nuestro tema.
Para ello, en primer lugar debemos ir al repositorio oficial de Bootstrap donde podremos encontrar la última versión, concretamente en la siguiente dirección:
Aquí copiamos el código que aparece en el primer lugar para que nuestro tema llame a la compilación de Bootstrap y la integre sin necesidad de subir más archivos.
Posteriormente, accedemos a la estructura general de archivos y carpetas de WordPress, concretamente a la carpeta Theme de nuestro tema y abrimos el archivo functions.php.
Dentro de las funciones tendremos que crear una nueva en la que se incluirá ese enlace que hemos copiado antes.
La nueva función quedaría así:
- Incluir Bootstrap CSS
- Incluir Bootstrap JavaScript y dependencia popper
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');
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');
Nota: Si no vas a usar Tooltips o Dropdowns puedes obviar la dependencia Popper.
El enlace deberás copiarlo directamente de la página oficial de Bootstrap ya que va cambiando y la versión que exista en el momento en el que estés leyendo este artículo puede que sea otra superior, con lo que ya no te valdría esto.
Tienes que tener en cuenta de que estamos tocando el código de nuestra instalación de WordPress, lo que solo debes hacer si tienes completa seguridad de lo que estás haciendo.
También deberás hacer una copia de seguridad de tu WordPress antes de hacer nada, para que no pierdas nada en caso de que se produzca algún error.
¿Te ha resultado útil este artículo?
Especialista SEO en Webempresa.com
