Añadir Bootstrap a WordPress Correctamente

Bootstrap es un “Elegante, intuitivo y potente framework para diseño de aplicaciones web para un desarrollo web más rápido y fácil”. Como tal, encaja muy bien con WordPress!

El objetivo de Bootstrap es crear frontales funcionales y modernos de forma rápida.

Además, Bootstrap 3.0 está diseñado en torno al primer paradigma del móvil, lo que significa que el sitio resultante responderá y se mostrará correctamente en cualquier tipo de dispositivo portátil.

Añadir Bootstrap en WordPress Correctamente

Incluiremos Bootstrap como parte de la funcionalidad del theme, de preferencia en un child-theme.

Bootstrap puede ser descargado desde getbootstrap.com. Haga clic en el botón grande que dice DESCARGAR BOOTSTRAP en la página principal del sitio.

El archivo ZIP descargado contiene muchos archivos y carpetas, incluyendo el código fuente y la documentación de Bootstrap. Lo que necesitamos es el contenido de los directorios js, css y fuentes dentro del directorio dist.

Si quieres saber que es lo que incluye cada archivo puedes revisar la documentación del contenido de Bootstrap.

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

Aquí es donde empezamos a liberar el poder de Bootstrap para dar forma a nuestro tema de WordPress. Trabajar con Bootstrap requiere el uso de incluir en nuestro sitio una referencia a los archivos css y js de Bootstrap. La manera correcta de hacerlo en WordPress es usar wp_enqueue_style y wp_enqueue_script desde functions.php. En particular, necesitamos crear una nueva función que añada (o encola) el estilo css y el script js y luego permitir que WordPress lo llame en el momento adecuado añadiendo una acción wp_enqueue_scripts.

Abra el archivo functions.php y añada el siguiente código después de registrar la barra lateral:

// Añadir 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');

// Añadir 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');

Tanto para el css como para el js hemos referenciado, por razones de rendimiento, las versiones minimizadas (min). Podríamos haber referenciado también las versiones legibles por humanos omitiendo el min. Esto es aconsejable durante la fase de desarrollo, cuando usted quiera leer los estilos de Bootstrap y javascript más fácilmente para aprender cómo funcionan y resolver algunos problemas.

Por defecto, wp_enqueue_style añade el css a la sección de cabecera del sitio, que es lo que queremos. Para estar listos para personalizar los estilos de Bootstrap más adelante, también encolamos nuestro style.css después de bootstrap.min.css.

Cuando se trata de incluir bootstrap.min.js por otro lado, necesitamos que aparezca justo antes del cierre de la etiqueta de cuerpo. Esto se puede obtener especificando el argumento true dentro de la función wp_enqueue_script.

En este punto nuestro tema está casi listo para trabajar con Bootstrap 3.0. Sólo necesitamos un pequeño paso más.

Abra header.php y, justo después de la etiqueta title, añada la siguiente meta-línea. Esto es necesario para que el comportamiento de Bootstrap funcione correctamente.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hay una dependencia a la librería Popper que ya viene incluida en el archivo bootstrap.min.js

Añadir 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.

Si no vas a usar Tooltips o Dropdowns puedes obviar la dependencia Popper.
// 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');
Las urls de CDN usadas las puedes encontrar en la documentación de Bootstrap.
Abrir chat
1
Hola 👋
¿En qué puedo ayudarte? Si necesitas algo estoy por aquí para charlar por WhatsApp, no te quedes con la duda. 🤔
Powered by