Implantación de Bootstrap (y II). Otros elementos

En el artículo anterior ya vimos cómo implantar Bootstrap en nuestro tema y cómo adaptar su sistema de rejillas en nuestro sitio web. Ahora vamos a ver otros elementos de nuestro tema y qué y cómo hacer que se beneficien de la implantación de Bootstrap.

El artículo resumido

El resumen del artículo lo tenemos en el archivo partes/articulo.php. Esto es una ventaja, porque todas las mejoras que realicemos en este archivo se verán reflejadas en todos los ‘loops’ que lo integren.

Vamos a ver primero el archivo definitivo, para luego explicar los detalles:

Primeramente, observamos un código mucho más denso y extenso. Esto es, básicamente, porque hemos incrementado el número de cajas (div), para que esté perfectamente estructurado. Dicha estructura es la siguiente:

Ampliar y contraer el contenido

En la sección “cabecera-artículo” tenemos dos elementos, el título y el icono ampliar-contraer. Ya sabemos cómo funciona dicho botón, si bien debo comentar un par de detalles:

Observad que, al estar dentro del ‘loop’, estos elementos se van a repetir, por lo que, en un principio, me encontré que, cuando contraía un artículo, se me contraían todos, así como se cambiaban todos los iconos de alternar.

Para solucionarlo, aprovechamos que estamos en el ‘loop’, y con la etiqueta de plantilla de WordPress the_ID(),  conseguimos individualizar todos los iconos y los contenidos de los diferentes artículos.

Así pues, cuando cliquemos sobre el enlace id=”boton-alternar-númerodepost”, la sección “contenido-articulo-númerodepost” se contraerá o expandirá alternativamente.

Además, en cada caso, el icono del enlace cambiará. Los glyphicons son los iconos que Bootstrap ofrece para los diferentes usos que nosotros queramos hacer con ellos. Se utilizan mediante la class=”glyphicon glyphicon-nombredelicono” (NOTA: Siempre hay que poner glyphicon las dos veces).

Para cambiar el icono adecuadamente al expandir o contraer el contenido del artículo, he modificado el script que empleabamos para el shortcode que hicimos:

De esta manera, lo que hacemos es cambiar la clase del botón de alternar, para que muestre un icono u otro.

Las rejillas de Bootstrap

Sobre la disposición de los elementos, observad que, tanto la sección ‘cabecera-articulo’ como ‘pie-articulo’ tienen class=”row”. Así, después puedo definir la disposición de los elementos contenidos.

El botón ‘Más …’

Los botones también son facilitados por Bootstrap. En este caso, hemos simplificado con el más sencillo, class=”btn btn-default”. Dejo a la inquietud del lector que experimente con el resto de opciones que ofrece Bootstrap.

Recortar las cadenas largas

Cuando las cadenas van a exceder el largo de la sección que las contiene, tenemos un truco muy sencillo para que se abrevien y, en este caso, acaben con puntos suspensivos:

El estilo CSS

Para formatear todo el conjunto de cada artículo, en el fichero style.css introducimos el siguiente código:

Y, ya de paso, también arreglamos los widgets:

 

El formulario de búsqueda

Ya estaba bien como teníamos el formulario de búsqueda en la barra horizontal superior, a la derecha de la misma. Sin embargo, no me gustaba el texto ‘Buscar’ de dentro del botón. Estuve buscando la manera de poder darle alguna indicación en la función del Codex get_search_form(), pero no hubo manera, por lo que encontré esta forma de hacerlo mediante el archivo functions.php:

Con esto conseguimos incorporar el icono class=”glyphicon glyphicon-search” en nuestro formulario de búsqueda. Para terminar de arreglarlo, con estilos:

 

Los artículos completos

El archivo de plantilla single.php, contiene toda una estructura igual a la que creamos con el archivo index.php. Por ello, para trabajar con el sistema de rejillas debemos hacer las mismas modificaciones.

Recordemos que, previo al título, disponíamos un vínculo al artículo anterior, otro al posterior, y un ‘breadcrumbs’ (migas de pan). Esto ahora lo vamos a formatear mejor:

Como habréis podido observar, he tenido que cambiar la función the_post_navigation() por las funciones previous_post_link()next_post_link(). Obviamente, esto lo he hecho para poder intercalar el ‘breadcrumbs’ entre ambos.

Y los ajustes CSS:

 

La tabla de subcategorías

Esta tabla, en el archivo category.php, finalmente, queda así:

Primero, en la div id=”subcategorias” le añadimos la class=”table-responsive”. De esta manera, hacemos la tabla adaptativa, y, cuando el ancho de la tabla supere el espacio, nos aparecerá un scroll horizontal.

Por otro lado, definimos la tabla con class=”table table-hover”, para que, cuando pase el cursor por encima de una fila, esta se resalte.

Finalmente, con código, establecemos que la fila de la descripción sólo se cree cuando exista la descripción de la categoría.

Finalmente, los últimos retoques de estilo:

 

Bien, hasta aquí los dos artículos sobre la implantación de Bootstrap. En el próximo artículo veremos qué hacer con las páginas estáticas de WordPress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *