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.
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:
|
0 1 2 3 |
/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:
|
0 1 2 3 4 5 6 7 8 9 10 |
// 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.
|
0 1 2 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
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.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
// 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'); |