En general no soy muy fan de pop-ups y elementos que puedan entorpecer la usabilidad de los que visitan una web, sin embargo es cierto que a veces necesitamos, para momentos y promociones puntuales, poder añadir información destacada que resalte en nuestra web y no pase desapercibida.
Descartando los pop-ups que se abren en medio de la página, un elemento que no me acaba de desagradar son las barras superiores que se deslizan y muestran algún mensaje o call to action puntual.
Cierto que existen plugins para poder hacerlo fácilmente, pero soy partidaria de utilizar los mínimos plugins posibles y sustituirlos siempre que sea posible por código y estilos propios, y una de las ventajas de Genesis Framework es que te facilita el poder hacerlo.
En este artículo vamos a ver un ejemplo de cómo hacer una barra superior o top bar mediante una widget area, dándole estilos CSS según el diseño de nuestra web y añadiendo algo de jQuery y Javascript para la funcionalidad de deslizamiento y el dar la opción poder ocultarla y que esa preferencia quede guardada mediante una cookie.
1- Crear el widget area
Aunque ya lo vimos en el post de cómo crear una widget area en Genesis Framework, repasamos aquí los dos pasos necesarios para crearla y colocarla en el lugar de la plantilla que queramos:
//Añadimos widget before header para top bar
genesis_register_sidebar( array(
'id' => 'top-bar-widget',
'name' => __( 'Top Bar', 'domain' ),
'description' => __( 'Top bar para promociones puntuales ', 'domain' ),
) );
//Mostramos el widget en la parte superior de la cabecera
add_action( 'genesis_before_header', 'crear_top_bar' );
function crear_top_bar() {
if ( is_active_sidebar('top-bar-widget') ) {
genesis_widget_area( 'top-bar-widget', array(
'before' => '<div class="top-bar-widget">', 'after' => '</div>' ) );
}
}
2- Insertamos el contenido necesario en el widget area
Nuevo! 15 consejos en 15 días para tu web <a class="button cerrar-top-bar" href="#">Apúntate aquí</a> <span class="cerrar-top-bar">X</span>
3- Añadimos el CSS necesario para ajustar el diseño a nuestra web
/* Estilos para Top Bar widget en cabecera */
.top-bar-widget {
color: #fff;
z-index: 99999;
background: #364156;
width: 100%;
position: relative;
text-align: center;
padding: 5px;
height: 45px;
display: none;
}
.top-bar-widget .button {
padding: 5px15px2px;
color: #000;
background-color: #d4e7e8;
margin-left: 20px;
border-radius: 3px;
}
span.cerrar-top-bar {
padding: 2px6px0px;
float: right;
background: #F06449;
border-radius: 7px;
margin: 5px;
cursor: pointer;
line-height: 20px;
}Los estilos por supuesto son un ejemplo, ya que deberás añadirlos en función del resto de tu web, los pongo como ejemplo y para que tengas en cuenta sobretodo, el tema de ocultar la barra de entrada y la posición e índice.
En este se ha optado por un relative con un indice muy alto porque la cabecera de la web estaba fija, y queríamos que apareciera por encima, otra opción es poner esta barra como fixed para que se quede en la parte superior aunque hagamos scroll… ahí ya cada uno debe probar y decidir cuál es la mejor opción y adaptarla a la plantilla que esté utilizando.
4. Añadimos el jQuery y Javascript para mostrar/ocultar la barra.
En el archivo functions.php de nuestro tema añadiremos la llamada al archivo .js que hemos creado para añadir estas funcionalidades.
wp_enqueue_script( 'top-bar-js', get_stylesheet_directory_uri() . '/js/top-bar.js', array( 'jquery' ), '1.0.0', time() );
/**
* Script para controlar la visiblidad de la top bar de la web
*/
jQuery(function($) {
if(!getCookie('show-top-bar')){
$('#top-bar').hide().delay(1500).slideDown('slow');
}
jQuery(".cerrar-top-bar").click(function(){
jQuery("#top-bar").slideUp();
setCookie('show-top-bar', 'hide', 'null');
});
});
function setCookie(nombre, valor, tiempo){
vardominio=window.location.hostname;
vararr_dominio=dominio.split(".");
while(arr_dominio.length>2){ arr_dominio.shift(); }
vardominio_principal=arr_dominio.join(".");
varexpiration= (newDate(2037, 12, 31)).toGMTString();
varthecookie=nombre+" = "+escape(valor) +"; expires="+expiration+"; path=/; domain=."+dominio_principal;
document.cookie=thecookie;
}
function getCookie(nombre){
varnombreCookie, valorCookie, cookie=null, cookies=document.cookie.split(';');
for (i=0; i<cookies.length; i++){
valorCookie=cookies[i].substr(cookies[i].indexOf('=') +1);
nombreCookie=cookies[i].substr(0,cookies[i].indexOf('=')).replace(/^\s+|\s+$/g, '');
if (nombreCookie==nombre)
cookie=unescape(valorCookie);
}
returncookie;
}Nota: las funciones utilizadas para las cookies son las de toda la vida, en Javascript clásico. Hay otras formas de hacerlo y también co jQuery, pero a mi éstas me funcionan bien y para estos detallitos son las que sigo utilizando.
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
10 respuestas a «Crear una Barra superior o Top bar en Genesis sin plugins»
|
Hola Esther,
Primero de todo, gracias por el repositorio de guías Genesis que has creado. Te conocí por el podcast y me parece muy interesante vuestra propuesta.
En cuanto a esta guía para crear una top-bar, te cuento: cuando intento crear una widget area WordPress me da error y dice «This site is having technical difficulties» (no lo he copiado exactamente). He intentado mostrarlo en varios hooks (before, before-header…) y siempre da error.
¿Te ha pasado alguna vez?
Muchas gracias por tu atención
Marcos, un oyente!
|
Hola Marcos!
Pues el error que comentas es el «estandar» que aparece ahora para cualquier tipo de error, puede ser desde un punto y coma mal puesto, un condicional sin cerrar, hasta una función con el mismo nombre o cualquier otro tipo de problema… revisa bien el código y si puedes mira también el log de errores del servidor, que allí te aparecerá el error concreto al que se refiere y te dará más pistas.
Saludos y gracias por tus comentarios!
|
He probado cambiando la función, copiando y pegando el código de otros tutoriales, cambiando el hook… todo. No se me ocurre qué puede estar pasando.
Lo único que se me ocurre es que esté poniendo mal el textdomain, pero dudo que eso sea lo que esté fallando.
Le daré unas vueltas a tu comentario y revisaré el log, no se me había ocurrido. Si descubro que era te dejo un comentario con la explicación.
Muchas gracias!
|
El textdomain no suele dar error aunque no pongas el que corresponde, yo eso casi lo descartaría… si, mírate el log a ver si te da alguna pista o ves reduciendo la función al mínimo, quitando partes hasta detectar cual es exactamente la que da el error, es otra de las formas de encontrar el problema.
Saludos!
|
¡Solucionado!
El código se ejecutaba antes de cargar el theme y por eso no funcionaba. Ya está, funcionando perfectamente.
Ha sido muy útil el mensaje de Error que manda WP desde la versión 5.2.
Gracias!!
|
Genial! Me alegro que hayas podido solucionarlo.
Tengo pendiente publicar un artículo sobre el orden de carga y las prioridades de los hooks, que es algo que muchas veces se nos pasa.
Saludos!
|
Hola Esther!!
Antes de nada, enhorabuena por tu página!! La utilizo un montón.
te cuento, estoy intentando crear la widget área, puse el código tal cual el tuyo, pero me dice que la función genesis_register_sidebar no existe: «Fatal error: Uncaught Error: Call to undefined function genesis_register_sidebar() in»
Estoy utilizando monochrome pro de child.
A ver si me puedes ayudar! 🙂
Un saludo
|
¡Hola Sara! Me alegra que te sea útil la página :))
Pues no se cual puede ser el problema, porque he probado en una instalación con Monochrome Pro y me ha funcionado correctamente.
¿Lo estás añadiendo en functions.php? Fíjate que al copiar/pegar no se haya arrastarado algún caracter o formato que esté provocando el error.
Saludos!
|
ayyy Esther!! En cuanto vi tu respuesta ya me di cuenta!! Lo estoy haciendo en un «must use plugin», siempre hago mis modificaciones de php aparte… pero claro, en este caso llama a una función que se define en el functios.php, por eso da ese error… que desastre…
Muchas gracias por responderme tan rápido y ayudarme a despejar la cabeza!! 🙂
|
¡Hola Sara!
Sí, la mayoría de veces es indiferente poner los snippets en functions.php, un plugin personalizado o un mu-plugin, pero en algunos casos como este si que afecta, o has de tener en cuenta ponerlo dentro del hook apropiado, básicamente por el tema del orden de carga de plugins y themes.
Lo tendré en cuenta para indicarlo en los posts y evitar estos errores!
Saludos!