Notificaciones con bootstrap en WordPress.

Notificaciones con Bootstrap en WordPress

En un post anterior vimos cómo usar shortcodes para crear cajas de notificaciones para mostrar dentro de un post o página. Mediante unas sencillas funciones habíamos creado varios shortcodes para cada caja. Repitiendo, para cada caja, la función y reombrándola.

Aunque las personalizamos con Dashicons, sólo cumplían la función de mostrar la caja elegida, nada más.

En este post veremos cómo usar Bootstrap para nuestra plataforma WordPress.

Muchos desarrolladores de temas responsive usan bootstrap para crearlos.


Bootstrap es un conjunto de herramientas o framework desarrollado por Twitter que permite crear interfaces web con CSS y Javascript.

No vamos a entrar en el debate de si bootstrap es o no la herramienta adecuada para WordPress, si quieres puedes leer ¿Es Bootstrap adecuado para WordPress? acerca de ello.

Añadiendo CSS y JS en functions.php

La mejor manera de incluir bootstrap en tu tema es poner en cola el css y js en el archivo functions.php.

Puedes acceder a la versión alojada CDN de Bootstrap creando una función que ponga en cola los archivos css y js.

function my_scripts_enqueue() {
 wp_register_script( 'bootstrap-js', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), NULL, true );
 wp_register_style( 'bootstrap-css', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css', false, NULL, 'all' );
 wp_enqueue_script( 'bootstrap-js' );
 wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Si no quieres usar un servidor CDN pues descárgate el paquete de Bootstrap y añade una carpeta js y otra css a tu tema. Edita el archivo functions.php y añade:

function my_scripts_enqueue() {
 wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), NULL, true );
 wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css', false, NULL, 'all' );
 wp_enqueue_script( 'bootstrap-js' );
 wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Bien, una vez agregado bootstrap a nuestro tema, ya podemos usarlo en una de nuestras páginas.

Usando Bootstrap en WordPress

Ya tenemos la primera mitad hecha. Ahora vamos a añadir nuestras cajas de alerta.

En la página de componentes de Bootstrap verás todo lo que hay para poder añadir a tu web. Nosotros nos vamos a centrar en las cajas de alerta bootstrap. Vamos a ello.

También puedes aprender a usar bootstrap en la página de w3schools

Cajas de notificaciones con bootstrap en WordPress

Dentro de las cajas de alerta vamos a centrarnos en las que se pueden cerrar haciendo clic en la X.

La estructura básica de una caja de alerta es la siguiente. Edita una entrada o página de tu blog y, haciendo clic en la pestaña texto del editor visual, añade el siguiente código HTML.

<div class="alert alert-success">
 <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
 <strong> ¡Bien hecho!</strong> Has guardado correctamente el archivo.
 </div>
 <div class="alert alert-info">
 <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
 <strong>Info!</strong> Este es un mensaje de información.
 </div>
 <div class="alert alert-warning">
 <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
 <strong>Atención!</strong> Revisa estos archivos.
 </div>
 <div class="alert alert-danger">
 <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
 <strong>Error!</strong> Revisa bien la información, está incompleta.
 </div>

Hemos creado las cuatro tipos de notificaciones que tiene bootstrap.

Notificaciones con bootstrap en WordPress.
Notificaciones con bootstrap en WordPress.

De esta manera puedes añadir cajas de una manera, relativamente, sencilla.

El único inconveniente es que tienes que editar la entrada o página desde la pestaña de texto, perdiendo la parte visual del editor. Vamos a mejorar esto creando un shortcode.

Cajas de notificaciones con bootstrap y shortcodes en WordPress

Edita el archivo functions.php de tu tema y añade el siguiente código:

if(!function_exists('fe_alerta')){
    function fe_alerta($atts, $content=null, $shortcodename =""){
        extract(shortcode_atts(array('title' => '', 'style' => ''), $atts));
        $style = ($style == 'default')?'':$style;
         $output = '<div class="alert alert-'.$style.'">';
        $output .= '<a class="close" data-dismiss="alert" href="#">&times;</a>';
        $output .= '<strong>'.$title.'</strong> '.do_shortcode($content);
        $output .= '</div>';
        return $output;
    }
    add_shortcode('alert', 'fe_alerta');
}

Ahora, cada vez que quieras mostrar una notificación lo podrás hacer usando el siguiente shortcode.

×Titulo Contenido de la caja
×Titulo Contenido de la caja
×Titulo Contenido de la caja
×Titulo Contenido de la caja

Esta función es la que usa mi plantilla para mostrar las cajas de alerta. Como podrás observar con respecto a la imagen es la personalización de los estilos.

Espero que este post te haya resultado útil.

Y Tú. ¿Qué opinas de Bootstrap? ¿Lo usas en tu blog?

Comenta, comparte, difunde. Gracias.

Carlos A para FreelanceEvolution®

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *