Crear una Barra superior o Top bar en Genesis sin plugins

[…]


por

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.

Top bar genesis

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

Ahora que ya hemos creado el widget area, nos aparecerá en el administrador de WordPress > Widgets y podremos añadir dentro el contenido que queramos.
En este ejemplo, añadimos un widget de HTML con un párrafo, un botón y una etiqueta para cerrar la barra:
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>
Top bar genesis
Nota: en el widget podemos poner lo que queramos, incluso un formulario de suscripción directamente pero intentemos siempre no perjudicar la velocidad de carga de la web y simplificar el contenido.

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() );
Lo hemos añadido en la función que ya traía el child theme para incorporar otros archivos como las fuentes de Google.
Es importante siempre intentar mantener el orden y coherencia en los archivos de nuestro tema y agrupar las instrucciones del mismo tipo.
También hemos creado el archivo top-bar.js y lo hemos subido a la carpeta /js/ dentro del child theme activo.
En este archivo, simplemente hacemos la llamada para que se muestre la barra superior después de unos segundos, y se cierre al clicar en el botón o en el span con la «X» y añadimos las funciones javascript para guardar y leer cookies.
/**
* 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»

  1. Avatar de Marcos

    |

    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!

    1. Avatar de esther

      |

      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!

      1. Avatar de Marcos

        |

        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!

        1. Avatar de esther

          |

          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!

          1. Avatar de Marcos

            |

            ¡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!!

          2. Avatar de esther

            |

            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!

  2. Avatar de Sara

    |

    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

    1. Avatar de esther

      |

      ¡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!

      1. Avatar de Sara

        |

        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!! 🙂

        1. Avatar de esther

          |

          ¡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!