imagentutorial

Como agregar Backstretch a un child theme de génesis framework.

 

Para que  tengas  una idea de lo que vamos hacer, tienes que ubicar dos temas de studiopress, Agency pro  y  Metro Pro Theme los dos temas tienen una imagen de fondo fija, y que se adapta a cualquier ancho de pantalla, este vídeo van aprender  a usar backstretch para  lograr ese resultado.

Yo estoy ocupando un child theme gratuito que lo pueden descargar a qui Malcom Theme pero tu puedes utilizar cualquier  child theme.

Paso 1:

Tienes que tener una istalacion de wordpress con genesis framework y un child theme.

Paso 2:js

Tienes que irte a esta pagina backstretch, luego le das click a Download Backstretch Now y copias el código y lo pegas en nuevo documento de  JavaScript, le asignas el nombre backstretch.js lo guardas en la carpeta  js de tu child theme.

 

 

 

 

Paso 3:      Abre otro documento JavaScript y pega este codigo:

   js2
  jQuery(document).ready(function($) {
$(body).backstretch([BackStretchImg.src],{duration:3000,fade:750});
});
y guárdalo como backstretch-set.js  igual en tu carpeta js si  tu child theme no tiene la carpeta js tu crea una.
Paso 3:  Ve a functions php y copia este codio a qui lo que vamos hacer es llamar a  backstretch:
 
add_action( wp_enqueue_scripts, custom_enqueue_scripts );
function custom_enqueue_scripts() {
//* Load scripts only if custom background is being used
if ( ! get_background_image() )
return;
 
wp_enqueue_script( custom-backstretch, get_bloginfo( stylesheet_directory ) . /js/backstretch.js, array( jquery ), 1.0.0 );
wp_enqueue_script( custom-backstretch-set, get_bloginfo(stylesheet_directory)./js/backstretch-set.js , array( jquery, custom-backstretch ), 1.0.0 );
 
wp_localize_script( custom-backstretch-set, BackStretchImg, array( src => get_background_image() ) );
 
}
 
//* Add custom background callback for background color
function custom_background_callback() {
 
if ( ! get_background_color() )
return;
 
printf( <style>body { background-color: #%s; }</style> . \n, get_background_color() );
 
}
 
//* Add support for custom background
add_theme_support( custom-background, array( wp-head-callback => custom_background_callback ) );
 
 
 
4.  Te vas personalizar tu tema agregas una nueva imagen de fondo y listo.
 
Espero les guste este tutorial cualquier cosa avísenme.
Este  tutorial  esta  basado en el de sridharkatakam.com que esta en ingles ingles, te dejo el link del tuto.

 

comparte este post

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