Fraud Blocker Skip to main content
Crear una Web

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://desarrollo.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://desarrollo.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://desarrollo.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.

Comparte este artículo

No dejes de leer…

Crear una Web

Woocommerce: Tienda Online con diseño Profesional

¿Crear una tienda online con diseño profesional en woocommerce sin ser diseñador web? Sí, es posible. Te explico cómo en este post. Antes de empezar, ¿tienes  instalado Woocommerce, y la configuración básica de la tienda? , si no es así lee primero este manual . Para crear tiendas con Woocommerce con un diseño profesional no hace […]

Crear una Web

Los mejores plugins para crear formularios en WordPress

Los formularios son un elemento que no puede faltar en prácticamente ninguna web que pretenda ser mínimamente seria. Como mínimo, tu web debería tener un formulario para que cualquier persona te pueda enviar un mensaje, es abrirte un montón de posibilidades y oportunidades que no puedes desaprovechar. A través del él, te pueden llegar oportunidades […]

¿Quieres mejorar tu web y captar más clientes?

Descubre cómo solucionar problemas técnicos y potenciar tu atracción de clientes en una sesión gratuita de 15 minutos.

CONÉCTATE CON UN EXPERTO EN WORDPRESS QUE TE PROPORCIONARÁ UN ANÁLISIS DETALLADO Y SOLUCIONES ADAPTADAS A LAS NECESIDADES DE TU NEGOCIO ONLINE.

¡No esperes más! Reserva ahora tu sesión por Zoom y empieza a transformar tu sitio en una herramienta poderosa para tu negocio.

HORMIGAS EN LA NUBE SLU
NIF / VAT#: ESB90288895
Plaza Isla de Elba Nº1 Local F
41089 Dos Hermanas
España

partners de confianza

otros

・ hormigasenlanube.com ・Copyright© 2012 - 2026 por Hormigas en la Nube SLU | Registrado en Safe Creative