Como añadir Bootstrap a tu sitio WordPress

En este post te mostrare como crear un enlace entre el CDN de Bootstrap y tu tema WordPress sin necesidad de descargar ningún archivo. Una vez creado el enlace te permitirá incluir sus componentes y funcionalidades.

Creemos que te podría interesar: Descarga VyprVPN y elimina las restricciones de Internet

¿Qué es Boostrap?

Antes de iniciar este tutorial es importante retomar la definición de que es Boostrap. Este no es más que un framework que contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.

¿Cómo crear enlace entre el CDN de Bootstrap y tu tema WordPress?

Abrir functions.php y se mostrara muy parecido a lo siguiente:

function theme_styles() {
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');
function theme_js() {
global $wp_scripts;
wp_enqueue_script( 'my_custom_js', get_template_directory_uri() . '/js/scripts.js');
}
add_action( 'wp_enqueue_scripts', 'theme_js');

Agregar el Bootstrap de tu preferencia, en mi caso elegí la versión v4.0.0-alpha.6:

 
wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js');

El ultimo paso es incluir las lineas anteriores en tu functions.php en el enqueue correspondiente:

function theme_styles() {

	wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
	wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

}

add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() {

	global $wp_scripts;

	wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js');
	wp_enqueue_script( 'my_custom_js', get_template_directory_uri() . '/js/scripts.js');

}

add_action( 'wp_enqueue_scripts', 'theme_js');