Incluir Bootstrap en WordPress

[ 26 julio 2018 ] [ Actualizado: 22 abril 2019 ] [ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

css js librería

Bootstrap es un framework para diseño de aplicaciones web, esta basado en HTML, CSS y Javascript. Con Bootstrap puedes diseñar fácilmente botones, menús, formularios, etc. En este artículo veremos cómo integrar Bootstrap en WordPress de manera práctica.

Generalidades

Seguramente muchas veces quieres mejorar el diseño del contenido de tu sitio web y te ves limitado por lo que te ofrece el theme que estas usando, si tu theme ya soporta Bootstrap u otro framework similar puedes hacer uso de todos los elementos que te brinda, en caso no lo incluya puedes evaluar incluirlo en tu theme.

Para detectar si tu theme usa Bootstrap puedes comprobarlo fácilmente revisando el código fuente HTML de tu sitio, algunos themes sólo incluyen parcialmente Bootstrap, por ejemplo sólo el archivo CSS.

Incluir Bootstrap en WordPress

Incluiremos Bootstrap como parte de la funcionalidad del theme, de preferencia en un child-theme, existen básicamente dos manera para incluir el framework.

– Incluir los archivos descargados

Si quieres tener más control sobre los recursos de tu sitio puedes descargarte los archivos de Bootstrap y colocarlos en una carpeta de tu theme.

Tal como se muestra en la siguiente imagen, luego de acceder a la descarga seleccionaremos la descarga de los archivo CSS y JS compilados y minificados.

 
Descargarás un archivo .zip el cual al descomprimir verás dos carpetas una carpeta CSS y otra JS, dentro de estas hay una serie de archivos, los que usaremos serán: bootstrap.min.css y bootstrap.min.js

 
Ambos archivos puedes copiarlos dentro de tu theme o child-theme, asumiendo que tienes ya una carpeta css y otra js, estarían en la siguiente ruta:

/wp-content/themes/TU_TEMA/css/bootstrap.min.css
/wp-content/themes/TU_TEMA/js/bootstrap.min.js

 
Finalmente puedes usar el siguiente código PHP en tu archivo functions.php de tu theme o child-theme para registrar ambos archivos.

// Incluir Bootstrap CSS
function bootstrap_css() {
	wp_enqueue_style( 'bootstrap_css', 
  					get_stylesheet_directory_uri() . '/css/bootstrap.min.css', 
  					array(), 
  					'4.1.3'
  					); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_css');

// Incluir Bootstrap JS
function bootstrap_js() {
	wp_enqueue_script( 'bootstrap_js', 
  					get_stylesheet_directory_uri() . '/js/bootstrap.min.js', 
  					array('jquery'), 
  					'4.1.3', 
  					true); 
}
add_action( 'wp_enqueue_scripts', 'bootstrap_js');

 
En el código anterior:

• Estamos usando el hook wp_enqueue_scripts para registrar los archivos CSS y JS
• El archivo CSS no es dependiente de ningún otro registro anterior, si tienes dudas cómo registrar archivos CSS en tu sitio revisa: Agregar CSS en WordPress de manera correcta
• El registro del archivo Javascript tiene como dependencia Jquery, si tienes dudas cómo registrar archivos javascript en tu sitio revisa: Insertar javascript en WordPress de forma correcta
• En ambos archivos he colocado la versión de Bootstrap a la que pertenecen que es la 4.1.3

– Incluir los archivos a través de un CDN

En este caso la ventaja es que llamarás a los archivos desde un CDN remoto. El código de registro es similar al caso anterior sólo que con las rutas cambiadas y con un adicional para incluir una dependencia.

// 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 JS 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');

Usando los elementos de Bootstrap en WordPress

Una vez que has agregado los archivos CSS y JS, ya sea copiándolos o a través de un CDN es hora de probar código de ejemplo de Bootstrap como parte de tu contenido.

En la documentación de Bootstrap puedes encontrar varios ejemplos de código que puedes adaptar a tus necesidades, por ejemplo para mostrar un modal, buscamos en componentes, el código que nos sugiere es el que se muestra en la imagen adjunta.

Simplemente sería copiar este código como parte del contenido HTML de tus entradas o páginas.

Conclusión

Bootstrap tiene un completo set de elementos funcionales que puedes evaluar usar como parte de tu contenido y evitar el uso de plugins adicionales por ejemplo para la creación de slides, modales, etc. También incluye estilos para botones, formularios, tarjetas, etc, por lo que si tu theme no tiene estilos suficientes para estos elementos, Bootstrap puede cubrir ese vacío.

¿Aún con dudas?, en el siguiente video se detalla cada uno de los puntos anteriores.

Valora este artículo : (6 votos, promedio: 5,00 de 5)

Cargando...