Cómo añadir un área de widget antes del contenido en Genesis Framework

Has elegido una plantilla basada en Genesis Framework de lo más molona.

Te gusta, pero al instalarla descubres que no puedes hacer todo lo que querías.

Muchos de los que compran Metro Pro, porque la han visto en mi web, me preguntan como es posible que tenga un area de Widget que coja todo el ancho.

El secreto es añadir un area de widget antes del contenido.

O donde quieras. En verdad no tienes limites, si sabes usar los hooks de Genesis.

Y no estamos hablando de crear un area de widget para poder mostrar unos widgets en una página u otra.

Para eso puedes usar Genesis Simple Sidebars, o plugins como Widget Logic. Y controlarás al detalle que Widgets salen en cada sitio de tu blog.

Hablo más bien de que puedas añadir un area de Widget antes del contenido, en cualquier tema de Genesis, siendo esta un area totalmente nueva.

Así que sin más te dejo algunos ejemplos de lo que puedes hacer.

Nota: Por favor, copia todo el código, y pégalo al final del fichero functions.php, usando un editor de texto como Notepad++, gedit o TextWrangler.

Añadir un area de Widget antes del contenido de todos los post

Con este código lo que harás sera tener un area de Widget que se mostrará antes en cada post de tu blog.

Útil para una pequeña barra de suscripción, o recordatorios de eventos.

genesis_register_sidebar(array(    'id' => 'area-bc',    'name' => __( 'Antes del Contenido', 'hormigas' ),    'description' => __( 'Muestra widgets antes del contenido en todos los post.', 'hormigas' ),  ) );    /**  * @author JavierGobea  * @example https://hormigasenlanube.com/anadir-area-de-widget-antes-del-contenido/  */    add_action( 'genesis_before_content', 'hormigas_widget_before_content' );  function hormigas_widget_before_content() {    if ( is_singular('post') || is_active_sidebar('area-bc') ) {    genesis_widget_area( 'area-bc',array(      'before' => '<div class="area-bc">',      'after' => '</div>',  ) );  }  }

Añadir un area de Widget antes del contenido solo en la Home

En este caso solo lo añades a la página de inicio de tu blog.

Es por ejemplo el que yo uso para destacar una llamada a la acción, que en mi caso es una caja de suscripción a mi lista de correo.

genesis_register_sidebar(array(    'id' => 'area-home',    'name' => __( 'Antes del Contenido en Home', 'hormigas' ),    'description' => __( 'Muestrawidgets antes del contenido en la Home', 'hormigas' ),  ) );  /**  * @author JavierGobea  * @example https://hormigasenlanube.com/anadir-area-de-widget-antes-del-contenido/  * @copyright 2014 Hormigas en la Nube  */    add_action( 'genesis_before_content', 'hormigas_widget_before_home' );  function hormigas_widget_before_home() {  	if ( is_home() || is_active_sidebar('area-home') ) {    genesis_widget_area( 'area-home',array(      'before' => '<div class="area-bc">',      'after' => '</div>',  ) );  }  }

 

Añadir un area de Widget en una página especifica

Y este caso es muy parecido al anterior, pero especificando una página o post concreto.

Por ejemplo te sirve para potenciar aún más ese post que recibe tantas visitas, o mejorar una página de venta.

genesis_register_sidebar(array(    'id' => 'area-bc',    'name' => __( 'Antes del Contenido', 'hormigas' ),    'description' => __( 'Muestra widgets antes del contenido en la página especificada.', 'hormigas' ),  ) );    /**  * @author JavierGobea  * @example https://hormigasenlanube.com/anadir-area-de-widget-antes-del-contenido/  */    add_action( 'genesis_before_content', 'hormigas_widget_before_content' );  function hormigas_widget_before_content() {  if ( is_page('111') || is_active_sidebar('area-bc') ) {    genesis_widget_area( 'area-bc',array(      'before' => '<div class="area-bc">',      'after' => '</div>',  ) );  }  }

 

Reemplaza «111» (sin las comillas) por el identificador de tu página o post donde quieres que se muestre el Widget.

Dale estilo a tu area de Widget

Usando la clase «area-bc» como selector, podemos añadir algo de estilo al area de widget que hemos creado.

Y así podremos añadir el CSS que queramos para definir nuestro estilo.

Por ejemplo, para añadirle un fondo, un borde y algo de separación:

.area-bc {  background: #2B2B2B  border: #ccc;  padding: 20px;  }

Y para despedirme…

Quiero cotillear un poco, y averiguar que uso piensas darle a esta herramienta que te he dado, para mejorar aún más tu blog.

¿Vas a poner un CTA en tu Home? ¿Tal vez una pequeña caja de suscripción antes de cada post? Anda, no me seas de esa manera, y cuéntamelo en los comentarios.

Acceso gratuito
a la Academia de
Hormigas en la Nube

+20 cursos disponibles sobre herramientas, marketing y ventas

Por tiempo limitado estoy regalando el acceso a la librería de recursos de la Academia de Hormigas en la Nube.

Cursos de ActiveCampaign, Elementor, Beaver Builder, WordPress, Copywriting, ventas, email marketing y más te estan esperando dentro. Disponible gratis por tiempo limitado.

Mockup escritorio herramientas
Ir arriba