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.

EN ESTE ARTÍCULO:

comparte este artículo

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

no dejes de leer...

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

  1. Interesante. Voy a probarlo un poco pero creo que puede ser bastante util. Me lo guardo.
    ¿Tu home usa ese truco?

    Gracias

    1. Hola!

      Pues si que uso este truco para añadir un area de Widget donde colocar el formualrio de suscripción en la Home, ya que el Child theme Metro no la trae.

      Todo de lo que hablo en el blog, lo uso en mi proyecto en los de mis clientes!

      Un saludo.

  2. Hola y gracias me parece interesante tener este tipo de herramientas para mejorar el blog.

    ¿El css de estilo para la area de widget se pega tambien en la function.php ?

    ¿No lo he probado todavía pero si pego el codigo para «una area de widget en una pagina específica» aparecerá el area en la seccion de widget del tema para poder seleccionar el widget que se quiere utilizar por ejemplo una magic box ?

  3. Hola Pedro.

    Cierto que no queda muy claro.

    No, el estilo se pega en el style.css

    Y si, cuando creas un area de Widget nueva, te aparece en la sección de Apariencia/Widgets, y allí ya le añades lo que quieras que aparezca, como una Magic Action Box.

    Un saludo!

  4. Hola Javier!. he probado tu tutorial y me ha funcionado, solo que el texto en la parte del contenido sale desproporcionado, esto a que se debe, gracias.

    1. Hola Mauricio, normalmente se debe a que hay que darle estilo a esa parte, ya que nunca suele estar metido en el Style.css predefinido, lo acabamos de crear. Asi que puedes añadir un estilo como por ejemplo:
      .area-bc body {
      text-align: center;
      font-size:12px;
      }
      O como lo quieras poner.
      Tambien depende del tipo de Widget que metas dentro del area, a lo mejor tienes que darle estilo de otra forma.
      Un abrazo.

Los comentarios están cerrados.

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