Agregar barra superior en WordPress

[ hace 2 meses ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

Si quieres una manera efectiva de mostrar un anuncio que no sea intrusivo, una opción es usar una barra superior en tu sitio, en esta barra podrás colocar cualquier contenido HTML. En este artículo veremos cómo realizar esto en WordPress a través de código.

Resultado Final

Al final queremos obtener algo similar a lo que se muestra en la siguiente imagen:

Código PHP para crear estructura HTML

Puedes agregar el siguiente código como parte de tu archivo functions.php de tu tema hijo.

add_action('wp_footer', 'dcms_add_tool_bar');
function dcms_add_tool_bar()
{
?>
    <section class="custom-top-bar">
        🚀 Sólo por esta semana, aprovecha nuestras ofertas!! <a href="#" class="btn">Ver Ahora</a>
    </section>
<?php
}

En el código anterior:

Usamos el Hook wp_footer que hace referencia a la función dcms_add_tool_bar
Dentro de la función simplemente creamos código HTML que representa la estructura de la barra, con texto y un enlace
Tanto el contenedor de la barra como el enlace tienen clases que usaremos posteriormente para dar estilos CSS

Posicionando y estilizando la barra superior

Basándose en las clases dadas al código HTML entonces puedes usar el siguiente código CSS. Puedes agregar este código en el archivo style.css de tu tema hijo.

.custom-top-bar {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 9999;
    padding: 10px;
    background-color: black;
    color: white;
    text-align: center;
}

.custom-top-bar .btn {
    display: inline-block;
    border: 1px solid grey;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    margin-left: 10px;
}

.custom-top-bar .btn:hover {
    background-color: #333;
}

body {
    margin-top: 30px;
}

@media(max-width:768px) {
    body {
        margin-top: 50px;
    }
}

En el código anterior puedes cambiar el position: absolute; por position: fixed; si quieres que la barra superior siempre sea visible.

Conclusión

Tal como hemos visto, puedes agregar una barra superior a tu sitio web en WorPress directamente a través de código, y puedes personalizar el contenido colocando código HTML.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores: