Crear top bar sin plugin

Implementador WordPress y VPS
Implementador WordPress y VPS
Crear top bar sin plugin
icon loader
/

Ya sea para un aviso, para una llamada a la acción o para colocar un enlace importante una “Top Bar” es buena idea. Plugins para hacerlo tenemos muchos… Pero en este episodio te explico como hacerlo directamente con código.

Crear top bar sencilla sin plugin
  • Los plugins nos ayudan a crear todo tipo de web.
  • No tenemos limites y podemos agregar todos los que necesitemos.
  • No debemos de olvidar en las buenas practicas:
    • Utilizar los justos y necesarios
  • Las top bar o barras de notificaciones.
  • Son muy útiles para aumentar la conversión.
  • Llegar el tráfico a una página especifica.
  • Reforzar el interés para aumentar las ventas.
  • Notificar sobre alguna afiliación.
  • Mostrar breves anuncios.
  • Estas top bars muestran información sin molestar.
  • Pero al ser algo tan pequeño y puntual.
  • Muchas veces resulta excesivo instalar un plugin para algo tan especifico.
  • Además que este tipo de plugin traen muchas opciones y plantillas que nos sobran.
  • Si lo hacemos nosotros por código tenemos la ventaja de colocar la top bar pero sin afectar el rendimiento.
  • Y aunque puede parecer muy complicado, es muy sencillo.
  • Lo primero que debemos tener es un child theme de nuestro tema.
  • ¿Por qué? Simplemente para no perder los cambios cuando el theme se actualice.
  • En el episodio Los themes y algunos hijos te hablo de ellos.
  • Podemos hacerlo también directamente en el theme.
  • Buscamos el header.php
  • Dentro del header.php
    • Lo ponemos después de < / head>
  • Pegamos:
  • Veamos que en este código esta el texto que tendrá nuestra Top Bar.
  • Cambias:
  • Por tu texto
  • Cuidado con el enlace y no borrar ningún carácter del código.
  • Al guardar esto ya tendríamos el texto… Pero pegado a la izquierda y muy feo 🙁
  • Para que se vea bien tenemos que darle un poco de CSS.
  • Esto lo podemos hacer muy fácil en el personalizador de nuestro WordPress.
  • Y en CSS adicional pegas:
  • En ese código le decimos que el div my-topbar
  • Tenga fondo morado, letras blancas, tamaño de letra 16, y texto centrado.
  • Como gana mía le he puesto font-weight: bold; para que la tipografía sea negrita.
  • En:
#my-topbar a {color: #e3f6f5; 
  • Cambiamos el color del enlace.
  • Podemos personalizar más, convirtiendo el enlace en un botón.
  • Pero ya era complicar un poco.
  • La idea es que veas que se puede hacer.
  • Y que es fácil de implementar con nuestro propio código.
  • Sin afectar el rendimiento de nuestra web

Un episodio más para que veas lo genial que es aprender un poco de código y ahorrarnos un mega plugin para algo tan sencillo como esta barra de notificación.

ejemplo de top bar
Y por cierto… La Top Bar queda así jejeje

Si querés ponerte en contacto conmigo, podes escribirme en mi Formulario de contacto aquí en la web 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada.