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.

 

articulos anteriores