ejemplowidget

Agregando una área de Widget y un Slider en Metro pro de Genesis Framework

Agregando una nueva área de widget en metro pro 

¡Hola Amigos! ¿Como están? En este tutorial les voy a enseñar como agregar una nueva área de widget en metro pro de studiopress.

Primero tenemos que buscar nuestro archivo functions.php, lo encontramos en content/themes/metro-pro y a qui agregamos el siguiente código :

genesis_register_sidebar( array(
'id' => 'home-slider',
'name' => __( 'Home Slider', 'metro' ),
'description' => __( 'Slider o lo que quieras poner', 'metro' ),
) );

A mi área de widget la nombre “Home Slider”.

Después agregaremos otro pedazo de código:

//* Add home slider between header and tagline//*

add_action( "genesis_before_content_sidebar_wrap", 'metro_slider' );
function metro_slider() {

if (is_home() || is_front_page()) {

printf( '<div %s>', genesis_attr( 'home-slider' ) ); genesis_widget_area( 'home-slider' ); echo '</div>'; }

}

Para esto utilice el plugin  Génesis Visual Hook Guide con el vamos a poder ver la guía de hooks donde nosotros agregaremos la nueva área de widget, yo lo agregue en genesis_before_content_sidebar_wrap  sin embrago tu puedes colocarlo en cualquier  lugar :

El resultado es este :

Ahora si quieres agregarlo arriba del menú tenemos que ponerlo en el hoock  genesis_after_header y tenemos que agregarle prioridad con el numero 8 quedaría de esta manera:

//* Add home slider between header and taglin
add_action( “genesis_before_content_sidebar_wrap”, ‘metro_slider’ ,8);
function metro_slider() {
if (is_home() || is_front_page()) {
printf( ‘<div %s>’, genesis_attr( ‘home-slider’ ) );
genesis_widget_area( ‘home-slider’ );
}
}

 

Resultado :

y si agrego por ejemplo :

//* Add home slider between header and tagline
add_action( "genesis_header", 'metro_slider',3 );function metro_slider() {
if (is_home() || is_front_page()) {
printf( '<div %s>', genesis_attr( 'home-slider' ) );
genesis_widget_area( 'home-slider' );
echo '</div>';
}
}

Le estamos diciendo que el widget va a  ir en el hook genesis_header pero le estamos dando una prioridad de 3 y quedaría a si:

metrowidget

Como vemos agrego el widget arriba del  titulo de la página.

Puedes ir jugando y aprendiendo.

Ahora ¿Como agregue la animación? Para eso utilice  smoove  no voy entrar mucho en detalle por que tengo un post donde hablo de eso  también  hasta abajo del post vas a poder descargar los dos archivos que necesitas para crear tus propias animaciones los archivos son jquery.smoove.min.js y smoove-init.js.

Bueno este es todo si necesitas que te ayude en algo solo avísame y sígueme en mis redes sociales.

El plugin que utilice para slider es huge-it-slider.

Este el archivo con el tema metro pro modificado en la capeta js  están los archivos que utilice para la animación.

descargar archivo :  Descarga los archivos

 

 

 

 

 

 

 

 

 

 

 

comparte este post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email