Veamos cómo colocar un widget area antes del comienzo de todos tus posts en Genesis Framework.
Es una solución ideal por si necesitas colocar un banner publicitario o Adsense pero, también podrías utiliarlo para incluir una breve biografía, enlaces a tus redes sociales, o CTA antes del título de tus artículos ;)
Para llevar a cabo este ejercicio vamos a:
- Registrar un widget area.
- Decirle a Genesis en que zona, ancla o hook queremos mostrarlo.
- Dejarlo bonito con un poco de CSS.
Cómo registrar un widget area en Genesis Framework
Para registrar un nuevo widget area en Genesis debemos añadir un poco de código al archivo ‘functions.php’ de nuestro child theme que en este caso, es el K Theme; un child theme ideal para bloggers:
[code]
//* Registrar un widget area antes de nuestras entradas y/o posts
genesis_register_sidebar( array(
‘id’ => ‘antes-entradas-individuales’,
‘name’ => __( ‘Antes de las entradas individuales’, ‘ktheme’ ),
‘description’ => __( ‘Este widget area se mostrará antes de las entrada individuales.’, ‘ktheme’ ),
) );
[/code]
Ahora guardamos los cambios.
Para comprobar que todo está OK navegaremos hasta Apariencia > Widgets dónde deberías ver algo parecido a esto:
Ahora puedes poblar este widget area con los widgets que tu quieras pero de momento no se mostrará nada en la parte publica de tus posts.
El motivo es muy sencillo: aún no le hemos dicho a Genesis dónde debe mostrar el widget.
Vamos con el paso número dos…
Añadir un widget a un ancla o hook en Genesis
Para anclar un widget area a un hook de Genesis debemos primero saber dónde queremos colocarlo además del nombre de dicha zona o hook.
En nuestro caso vamos a querer mostrar el contenido de nuestro widget area en todas las entradas individuales antes del post en sí.
Esta ancla o hook se llama: genesis_before_entry
Para ello deberemos añadir la siguiente función al archivo ‘functions.php’ de nuestro K Theme:
[code]
//* Anclar un widget area antes de nuestro contenido sólo en los posts o entradas individuales
add_action( ‘genesis_before_entry’, ‘asithemes_widget_antes_post’ );
function asithemes_widget_antes_post() {
if ( is_singular(‘post’) && is_active_sidebar(‘antes-entradas-individuales’) ) {
genesis_widget_area( ‘antes-entradas-individuales’, array(
‘before’ => ‘<div class="antes-entradas-individuales" class="widget-area">’,
‘after’ => ‘</div>’,
) );
}
}
[/code]
Guardamos de nuevo los cambios y, siempre que hayas poblado el widget area con algo, su contenido debería ir apareciendo en la parte superior de cada una de las entradas.
Para que te hagas una idea de como queda en la demo he colocado una recuadro de color gris neutro:
Si te fijas el contenido no respira con lo que ahora vamos a por el tercer paso…
Cómo dejar bonito un widget area con un poco de CSS
Cómo en este caso, lo único que necesitamos es que nuestro banner respire vamos a añadir un poco de margen en la parte superior e inferior del mismo con el siguiente CSS:
[code]
/* Widget antes de las entradas individuales */
.antes-entradas-individuales {
margin: 15px 0 30px;
}
[/code]
Personalmente yo orefiero añadir el CSS a través de Apariencia > Personalizar > CSS adicional aunque también lo puedes añadir directamente al archivo ‘style.css’ del K Theme.
Ahora nuestro banner debería respirar mucho mejor al no estar tam pegado a la fecha y autor del post.
Conclusión
Ahora que sabes cómo crear un widget area para colocar un banner te invito a jugar con la localización cambiando el valor ‘genesis_before_entry’ por otros hooks de Genesis.
No te preocupes si no te acuerdas de los nombres de los ganchos o hooks ya que aquí tienes una guía visual.
Esperamos que te haya gustado este post ;)
Recuerda que puedes encontrar más posts como este en https://asithemes.com/genesis-framework/.