Añadir Bootstrap a tu tema de WordPress

Lo siguiente es una guía paso a paso para añadir Bootstrap (la versión 3.3.7) a una plantilla de WordPress. Integrar bootstrap a wordpress es ‘sencillo’ basta con seguir los siguientes pasos.

Paso 1: descargar los archivos de bootstrap (css, fonts y js).

Dirígete a la página oficial de bootstrap y descarga la primera opción. Click en el botón ‘download bootstrap’. Si lo deseas, puedes dar click al siguiente enlace directo. Ahora tendrás un archivo ‘zip’ que debes descomprimir.

Este archivo contiene una carpeta que posiblemente se llame ‘bootstrap-3.3.6-dist’ esto varía según la versión actual.

Al interior de esa carpeta se encuentran 3 subcarpetas que contienen los archivos necesarios para añadir bootstrap en wordpress. Las carpetas son ‘css’, ‘fonts’ y ‘js’.

Es conveniente que renombres la carpeta principal (‘bootstrap-3.3.6-dist’) por simplemente (‘bootstrap’) por términos de comodidad. Con esta edición de nombre, tus archivos quedarían así (un pequeño esquema para no confundirnos):

bootstrap (carpeta principal)

• css (subcarpeta)
• fonts (subcarpeta)
• js (subcarpeta)

Paso 2: subir los archivos a tu tema wordpress.

Ahora que tenemos los archivos ya organizados, es momento de subirlo a nuestro alojamiento web y ubicarlos dentro de nuestro tema.

Ya se a través de un cliente ftp ─como filezilla─, directamente desde el panel de tu servicio de alojamiento web o de la forma como estás acostumbrado a hacerlo, debes ubicar la carpeta ‘bootstrap’ (que contienen los ‘css’, los ‘fonts’ y el ‘js’) en la raíz de tu tema.

Los temas de wordpress por lo general están ubicados en ‘wp-content/themes/nombre_del_tema’. Es ahí donde debes ubicar la carpeta ‘bootstrap’, el cuál quedaría así ‘wp-content/themes/nombre_del_tema/bootstrap’.

Paso 3: integrar los archivos subidos ─de bootstrap─ al funcionamiento de tu tema.

La forma más recomendada de añadir bootstrap a tu tema es a través del archivo ‘functions.php’.

Para ello debemos editar este archivo ubicado ─por lo general─ en la raíz de tu tema ‘wp-content/themes/nombre_del_tema/functions.php’.

Y agregamos las siguiente lineas.

function bootstrap_scripts() {

wp_enqueue_style( 'mytheme-bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );

wp_enqueue_script('mytheme-bootstrapjs', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery') );

}

add_action( 'wp_enqueue_scripts', 'bootstrap_scripts' );

Con estos 3 sencillos pasos, podrás añadir bootstrap en tu tema de wordpress. Es recomendable que revises el archivo ‘style.css’ y elimines los estilos que hacen conflicto con bootstrap.

Si no te sale, no te rindas. Siempre puedes preguntar. Recuerda que no eres el único en obtener errores, es muy probable que alguien ya haya experimentado un error similar. Déjanos tus preguntas, experiencias y buenas vibras en tus comentarios.