Agregar barra superior en WordPress

[ 19 julio 2023 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

css mejoras

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;
    }
}

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.

Valora este artículo : (1 votos, promedio: 5,00 de 5)

Cargando...