Barra de notificación superior para WordPress

¡Bienvenidos Developers!. Hoy, vamos a construir una barra de notificación en la cabecera de una página web con WordPress. Realizamos un diseño personalizado de la barra superior sin plugins, que se ve rápida, ligera y limpia. Añadir la barra superior perfecta para mejorar el SEO de nuestra web.

Actualmente, existen multitud de plugins que implementan una barra de notificación en el top header en WordPress. Después de instalar varios, hemos decidido crear uno propio sin necesidad de instalar un plugin.

¿Por que instalar una barra de notificación en WordPress sin plugins?

Principalmente, por la mejora de velocidad en nuestra web de WordPress. Es conocido, que cuantos menos plugins tengamos, mayor rendimiento tendrá nuestra web. Los plugins actuales que cargan la barra de notificación en la cabecera, disponen de multitud de funciones y código que nuestra página tendrá que cargar, incluso si no las utilizamos, es por ello que realizamos una instalación limpia de nuestra barra top.

Plugins para instalar una barra de notificación en el header de WordPress

Éstos son algunos de los plugins que hemos utilizado en nuestras pruebas y que enumeramos, comenzando con los mejores:

1. Easy Notification Bar: el más simple y ligero de todos. En nuestro caso con algún problema en los estilos de nuestro diseño.
2. Hello Bar: una barra de notificación completa para WordPress. Multitud de funciones para tu barra superior, haciendo nuestra página web en WordPress más lenta.
3. WPFront Notification Bar: Nos gusta su peso y rapidez, sigue generando problemas en el CSS de nuestro tema.
4. WP Notification Bars: el mejor plugin para montar una barra de notificación en WordPress. La dejamos en cuarta posición ya que en nuestro caso, rompió el estilo de nuestra web, no nos sirve.
5. Top Bar: uno de los más simples y completos pero con gran peso en nuestra web.

Una vez realizado el estudio de los mejores plugins para instalar tu barra de notificaciones en WordPress, vamos a realizar una instalación limpia sin plugins de la nuestra.

¿Cómo instalar nuestra propia barra de notificación en WordPress?

Primero, vamos a generar el código de nuestra propia barra de notificación que instalaremos sin necesidad de plugins. Esto, nos permite mantener el rendimiento de nuestra página web con WordPress, es el principal motivo por el que optamos por construir nuestro propio aviso en la cabecera.

Antes de comenzar, necesitaremos modificar el código de nuestra página web. Si no tienes conocimientos técnicos sobre desarrollo web con PHP, te recomendamos contactar con un desarrollador WordPress experto, que instale tu barra de notificación modificando el código. Si no dispones de recursos y tiempo, es importante tener una empresa de mantenimiento web con WordPress que pueda resolver tus dudas y posibles problemas en tu web.

A continuación, os dejamos el código que nosotros utilizamos y nos sirvió para nuestro tema de WordPress:

# 1. Cambiar "Texto de la barra superior" por el texto que quieres que aparezca.
# 2. Cambiar "#" por el enlace de destino, contenido en el último href="#" y "Texto del botón" por el texto que aparece en el botón.

<div id="tpbr_topbar" style="position: relative; z-index: 99999; background: rgb(247, 198, 22); display: block;"><div id="tpbr_box" style="padding:6px 0px 7px; background:#43414e; margin:0 auto; text-align:center; width:100%; color:white; font-size:15px; font-family: ROBOTO regular;  font-weight:300;">Texto de la barra superior<a id="tpbr_calltoaction" style="background:#2cd4d9; display:inline-block; padding:2px 10px 2px; color:#43414e; text-decoration:none; margin: 0px 20px; border-radius:5px;" href="#" target="_blank" rel="noopener">Texto del botón</a></div></div>

Cómo se ve nuestro código:

Texto de la barra superiorTexto del botón

¿Dónde colocar el código?

Debemos ir a la parte de los archivos de nuestra plantilla. Los archivos se encuentra en "Apariencia" --> "Editor de Temas".

Una vez dentro buscamos el archivo a modificar "header.php" y hacemos click sobre el para modificarlo. Buscamos la etiqueta <head> y pegamos nuestro código justo debajo:

Algunas modificaciones:

Si necesitas cambiar colores:

• El primer background, es el color general del fondo.
• El segundo background, es el color del fondo del botón.
• La tipografía la podéis cambiar en "font-family: ROBOTO regular;", recordad ingresar alguna compatible con vuestro tema.
• Enlace del botón en "href="https://webdedestino.com/"". Utilizamos las últimas recomendaciones de buenas prácticas de Google con "rel="noopener"".

Si necesitas alguna modificación extra como:

• Dejar fija la barra de notificación cuando te desplazas hacia abajo en tu página web.
• Cambiar colores.
• Generar enlaces.
• Añadir iconos de redes sociales.
• Sorprendemos con tu idea y nosotros la haremos posible ??‍?.

Contacta con nosotros: