Agregar barra de utilidades en Digital Pro

Uno de los grandes temas de StudioPress, y uno de los mas usados es Digital Pro. Ideal par blogs y para páginas corporativas. Hoy veremos como agregarle una barra de utilidades o bien visible sólo en la home o en todo el tema.

Anteriormente escribí dos artículos de como crear una barra de utilidades tanto en Business Pro como en Genesis Sample. Hoy toca en Digital Pro. Empecemos.

Área de widgets

Una barra de utilidades no es más que un área de widgets, normalmente, justo encima de la cabecera. Por la estructura del tema, podemos fácilemente crear una que sólo se visualice en la home o en todo el tema. Pero no nos adelantemos. Vamos a crear el área de widgets. Agregamos este código en el archivo functions.php de nuestro tema Digital Pro.

Ya vimos como crear una área de widgets en varios artículos, pero por si acaso alguien no lo conoce, comento un poco la función. Simplemente, con la función genesis_register_sidebar registramos el área de widgets, asignándole un ID, un nombre y una descripción. El Id quedará oculto, pero el nombre y la descripción serán visibles cuando vayamos a la sección de widgets del menú de WordPress.

De hecho si vais a la sección de widgets de WordPress, veréis que ya aparece el nuevo área y que podéis colocar widgets. Pero no se verá en ninguna parte de la web, porque aún no le hemos dicho al tema donde queremos que se muestre.

Colocamos la barra de utilidades

Lo siguiente es emplazar la barra de utilidades. Dada la estructura del tema, como he dicho antes, podemos fácilmente colocarla para que aparezca solamente en la página de inicio o en toda la web. Evidentemente con condicionales podemos hacer que aparezca donde queramos, pero este tema en concreto nos da esta fácil opción. Veamos porqué.

En la carpeta raíz del tema veréis que hay varios archivos PHP. Uno de ellos, obligadamente es functions.php y otro es front-page.php. Pues bien, si queremos que solo aparezca en la página de inicio, bastará que el siguiente código lo coloquemos en el archivo front-page.php, justo encima de las dos últimas lineas de código:

//* Run the Genesis function
genesis();

Si por el contrario queremos que aparezca en toda la web, colocaremos el código en el archivo functions.php, por ejemplo justo debajo del código anterior, donde declarábamos el área de widgets. Ahora sí, el código.

Ya tenemos el área de widgets emplazada y disponible para agregar widgets desde el escritorio de WordPress. Ahora bien, si colocáis un widget, por ejemplo, uno de texto con alguna frase, veréis que no aparece. O mejor dicho, aparece tapada por la cabecera, que es fija y se posiciona por encima de todo el contenido. Así que tenemos que hacer algunas modificaciones vía CSS.

No son complejas, pero tenemos que tener claro lo que queremos que haga la barra de utilidades que acabamos de colocar. Me explico. Desde mi punto de vista tenemos dos opciones. Tal y como está diseñado el tema, esa barra puede desaparecer al hacer scroll, o quedarse fija con el menú. Dependerá un poco del mensaje o información que queremos que muestre esa barra.

Si es algo informativo sin mayor repercusión, igual podemos hacer que no moleste en la navegación y que se oculte. Pero si es algo importante, quizás debería quedarse fija. Yo os voy a mostrar ambas opciones y que cada cual escoja la que más le convenga.

Barra oculta al hacer scroll

Quizás es lo más sencillo, aunque el efecto no es muy vistoso. Sólo hay que editar la sección del Site Header del archivo style.css en la raíz del tema. Dejo el código del antes y el después para que se vean las modificaciones.

Este es el código original de la sección Site Header.

Y este es es resultado tras las modificaciones.

Como ya he dicho antes, estas modificaciones provocarán que al hacer scroll la barra de utilidades se deslice hacia arriba con el resto del contenido y sea sólo el menú el que se queda fijo.

Barra fija junto con el menú

La otra opción es que la barra se mantenga fija con el menú en todo momento. De esta manera haremos mucho más accesibles los datos o enlaces que tengamos en la barra.

Supongamos que queremos colocar las típicas banderas de cambio de idioma para webs multiidioma. Eso, claro está, lo querremos accesible en todo momento. Pues vamos a ello.

Simplemente, daremos espacio a la barra y le diremos que se quede fija. Tenemos que tener cuidado con la altura de la barra para determinar el espacio que la cabecera del tema debe dejar.

Dado que en el punto anterior ya he dejado el código original del Site header del archivo style.css, voy a añadir sólo el modificado. He mantenido el estilo de color de fondo y tipo de fuente, que va muy bien con el diseño del tema.

Como veréis no es un código muy complicado. Con poco CSS hemos manejado la barra a nuestras necesidades.

Ajustes para móvil

El título de la sección dice ajustes para móvil, pero en realidad es simplemente aplicar la adaptabilidad del resto del tema a la barra de utilidades. Esto lo hacemos con unas pocas lineas de código. Para evitar errores, he incluido la media query, así que esto lo colocaremos al final del archivo style.css.

Y ya está. el resto de modificaciones de estilo serán a gusto del consumidor o según la necesidad del cliente ;).

Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. O también me podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues os daré preferencia a la hora de contestar emails.