En este tutorial vamos a ver como insertar una widget área por encima del encabezado para poder colocar un mensaje fijo en el tema Infinity Pro de Genesis.
Vamos a tener que registrar la widget área y después ubicarla en el tema.
Para ello insertaremos el siguiente código en el archivo functions.php de nuestro tema o en un plugin de funcionalidades que podemos crear y personalizar.
Código para registrar la widget área:
|
1 2 3 4 5 6 |
//* Registrar widget area genesis_register_sidebar( array( 'id' => 'before-header', 'name' => __( 'Before Header', 'infinity' ), 'description' => __( 'Esta es la sección antes del encabezado.', 'infinity' ), ) ); |
Y ahora el código para colocar la widget área en el hook que está antes del encabezado (before-header):
|
1 2 3 4 5 6 7 8 9 10 |
//* Colocar l widget area "before header"por encima del encabezado add_action( 'genesis_before_header', 'infinity_before_header' ); function infinity_before_header() { genesis_widget_area( 'before-header', array( 'before' => '<div class="before-header widget-area"><div class="wrap">', 'after' => '</div></div>', ) ); } |
Para ver los hooks de Genesis es útil esta imagen de genesistutorials.com:
Una vez guardado este código veremos que en el panel de administración en Apariencia/Widgets hay una nueva widget área llamada «Before Header»:
En esta widget área podemos poner un widget de html con el texto que queramos mostrar o podemos añadir cualquier otro widget que nos interese.
El último paso será ajustar los estilos.
Vamos a tener que dar una posición fija al div before-header y un ancho del 100%. Le podemos dar un color blanco de fondo y centrar el texto:
|
1 2 3 4 5 6 7 |
.before-header { background-color: #FFFFFF; position: fixed; text-align: center; width: 100%; z-index: 9999; } |
Luego tendremos que aumentar el padding o espacio superior del encabezado y el icono de Off-screen para dejar sitio a esta barra:
|
1 2 3 4 5 6 7 |
.site-header{ padding-top: 28px; } .offscreen-content button, .offscreen-content-icon button { padding: 30px 10px 2px 12px; } |
Con todos estos cambios el resultado es éste:
También podemos darle un poco más de énfasis con un fondo más potente:
|
1 2 3 4 |
.before-header { background-color: #d43c67; color: white; } |
Y listo! Ya véis que con unos pocos pasos hemos podido tener una nueva widget área dónde podremos poner avisos, texto o cualquier widget.
Deja un comentario
Lo siento, debes estar conectado para publicar un comentario.