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