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 :
//* 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:
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
