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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<div id="articulo" class="container-fluid"> <div id="cabecera-articulo" class="row"> <div id="titulo-articulo" class="col-lg-11 col-md-11 col-sm-11 col-xs-11"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> </div> <div id="ampliar-contraer" class="col-lg-1 col-md-1 col-sm-1 col-xs-1"> <h2><a id="boton-alternar-<?php the_ID(); ?>" class="glyphicon glyphicon-chevron-up" data-toggle="collapse" href=".articulo-<?php the_ID(); ?>"></a></h2> </div> </div> <div id="contenido-articulo-<?php the_ID(); ?>" class="collapse in articulo-<?php the_ID(); ?>"> <?php if ( has_post_thumbnail() ) { ?><div id="thumbnail-articulo"><?php the_post_thumbnail(); ?></div><?php } ?> <div id="resumen-articulo"> <?php the_excerpt(); ?> </div> <script> jQuery("#contenido-articulo-<?php the_ID(); ?>").on("shown.bs.collapse", function() { document.getElementById("boton-alternar-<?php the_ID(); ?>").classList.remove("glyphicon-chevron-down"); document.getElementById("boton-alternar-<?php the_ID(); ?>").classList.add("glyphicon-chevron-up"); }); jQuery("#contenido-articulo-<?php the_ID(); ?>").on("hidden.bs.collapse", function() { document.getElementById("boton-alternar-<?php the_ID(); ?>").classList.remove("glyphicon-chevron-up"); document.getElementById("boton-alternar-<?php the_ID(); ?>").classList.add("glyphicon-chevron-down"); }); </script> </div> <div id="pie-articulo" class="row"> <div id="leer-mas" class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> <a class="btn btn-default" href="<?php the_permalink(); ?>" role="button">Más...</a> </div> <div id="datos-pie" class="col-lg-10 col-md-10 col-sm-10 col-xs-10"> <small>Autor: <?php the_author(); ?><br></small> <small>Categoría: <?php the_category( '->', 'multiple' ); ?></small> </div> </div> </div> |
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:
|
1 2 3 4 5 6 7 8 9 10 |
<div "articulo"> <div "cabecera-articulo"> <div "titulo-articulo"> <div "ampliar-contraer"> <div "contenido-articulo"> <div "thumbnail-articulo"> <div "resumen-articulo"> <div "pie articulo"> <div "leer-mas"> <div "datos-pie"> |
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:
|
1 |
<h2><a id="boton-alternar-<?php the_ID(); ?>" class="glyphicon glyphicon-chevron-up" data-toggle="collapse" href=".articulo-<?php the_ID(); ?>"></a></h2> |
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:
|
1 2 3 4 5 6 7 8 9 10 |
<script> jQuery("#contenido-articulo-<?php the_ID(); ?>").on("shown.bs.collapse", function() { document.getElementById("boton-alternar-<?php the_ID(); ?>").classList.remove("glyphicon-chevron-down"); document.getElementById("boton-alternar-<?php the_ID(); ?>").classList.add("glyphicon-chevron-up"); }); jQuery("#contenido-articulo-<?php the_ID(); ?>").on("hidden.bs.collapse", function() { document.getElementById("boton-alternar-<?php the_ID(); ?>").classList.remove("glyphicon-chevron-up"); document.getElementById("boton-alternar-<?php the_ID(); ?>").classList.add("glyphicon-chevron-down"); }); </script> |
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:
|
1 2 3 4 5 6 |
#titulo-articulo h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0px; } |
El estilo CSS
Para formatear todo el conjunto de cada artículo, en el fichero style.css introducimos el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* Vamos con el formateo de los artículos y widgets */ /* Primero, los artículos */ #articulos { padding-left: 0px; } #articulo, .widget { background: rgba( 255, 255, 255, 0.7); border-radius: 5px; margin: 10px 0px; } #articulo h2, #articulo small { padding: 5px; } .row { margin: 0px; } #titulo-articulo { padding:0px; } #titulo-articulo h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0px; } #ampliar-contraer h2 { margin: 0px; text-align: right; } #ampliar-contraer h2 a { text-decoration: none; color: rgb(28,255,255); } #ampliar-contraer h2 a:hover { color: rgb(28,255,255); } #thumbnail-articulo { float: left; padding: 5px; } #resumen-articulo { padding: 5px; } #pie-articulo { clear: both; } .btn-default { background-color: rgb(28,255,255); } #leer-mas { padding: 0px; } |
Y, ya de paso, también arreglamos los widgets:
|
1 2 3 4 5 6 7 8 |
/* Ahora, los widgets */ .widget h3 { margin: 0px; padding: 5px; } .widget ul { list-style-type: none; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * Generate custom search form * * @param string $form Form HTML. * @return string Modified form HTML. */ function wpdocs_my_search_form( $form ) { $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" > <div><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label> <input type="text" value="' . get_search_query() . '" name="s" id="s" /> <button type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'"><span class="glyphicon glyphicon-search"></span> </div> </form>'; return $form; } add_filter( 'get_search_form', 'wpdocs_my_search_form' ); |
Con esto conseguimos incorporar el icono class=”glyphicon glyphicon-search” en nuestro formulario de búsqueda. Para terminar de arreglarlo, con estilos:
|
1 2 3 |
#searchsubmit { background-color: transparent; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="barra-navegacion" class="row"> <div id="anterior" class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> <?php previous_post_link( '<button class="btn btn-default"><spam class="glyphicon glyphicon-backward"></spam> %link</button>', '%title', true, '', 'category' ); ?> </div> <div id="breadcrumbs" class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>Inicio / <?php the_category( ' / ', 'multiple' ); ?></p> </div> <div id="posterior" class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> <?php next_post_link( '<button class="btn btn-default">%link <spam class="glyphicon glyphicon-forward"></spam></button>', '%title', true, '', 'category'); ?> </div> </div> |
Como habréis podido observar, he tenido que cambiar la función the_post_navigation() por las funciones previous_post_link() y next_post_link(). Obviamente, esto lo he hecho para poder intercalar el ‘breadcrumbs’ entre ambos.
Y los ajustes CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* Barra de navegación superior artículos singles */ #barra-navegacion { padding: 10px 0px; } #anterior { padding-left: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #breadcrumbs { text-align: center; } #posterior { text-align: right; padding-right: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
La tabla de subcategorías
Esta tabla, en el archivo category.php, finalmente, queda así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div id="subcategorias" class="table-responsive"> <h2>SUBCATEGORIAS</h2> <table class="subcategorias table table-hover"> <tr class="cabecera"> <th><h4>Id</h4></th><th><h4>Título</h4></th><th><h4>Posts</h4></th> </tr> <?php foreach( $categorias_hijas as $subcategoria ) { ?><tr> <td><h4><?php echo $subcategoria->cat_ID; ?></h4></td> <td><h4><a href="<?php echo get_category_link( $subcategoria->cat_ID ); ?>"><?php echo $subcategoria->cat_name; ?></a></h4></td> <td><h4><?php echo $subcategoria->category_count; ?></h4></td> </tr> <?php if ( !empty( $subcategoria->category_description) ) { ?> <tr> <td colspan="3" style="font-size: small;"><?php echo $subcategoria->category_description; ?></td> </tr><?php } } ?> </table> </div> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Tabla de subcategorías */ .subcategorias { font-family: 'Orbitron'; width: 100%; background: rgba( 255, 255, 255, 0.5 ); } .cabecera { background: rgba( 28, 255, 255, 0.5 ); color: #888; } .cabecera th { padding: 0px; } .subcategorias h4 a { color: rgb( 28, 255, 255); } |
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.
