Agregar un Slider al tema Storefront

[ 3 abril 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

Storefront es un tema gratuito, creado por los desarrolladores de WooCommerce, esta diseñado para un sitio web tienda, sin embargo Storefront por defecto no tiene una zona de Widgets para colocar un slider y que sólo se muestre en el inicio del sitio.

Generalidades

Como parte del diseño del theme Storefront sólo tenemos una página de bienvenida que al asignarle una imagen esta se colocará como imagen de fondo.

Storefront tiene un zona de widgets que se muestra bajo la cabecera y que podría servir para colocar un slider, sin embargo esta zona de widgets se muestra en todas las páginas.

Plugin de Slider

Para nuestro ejemplo usaremos el plugin MetaSlider, al crear un slider veremos que nos genera un shortcode, este shortcode lo podemos usar en alguna página, sin embargo en este artículo veremos como ejecutar el slider y que se muestre por código.

Posiciones del theme

El theme Storefront adicional a las posiciones de Widgets, que puedes encontrar en Apariencia > Widgets, tiene Hooks que podemos usar para agregar código que muestre contenido adicional o que cambie el diseño del layout base.

En la siguiente imagen vemos los principales Hooks de la parte superior del theme:

Para ver los Hooks completos puedes revisar el artículo de Guia Visual de los Hooks de Storefront

Código para mostrar el Slider

Teniendo en cuenta entonces los Hooks que tiene el theme, podemos ejecutar el shortcode usando alguno de ellos, por ejemplo : storefront_content_top o storefront_before_content.

El siguiente código lo puedes colocar al final del archivo functions.php del child-theme del theme Storefront.

add_action( 'storefront_content_top', 'dcms_custom_slider_storefront' );

function dcms_custom_slider_storefront() {
    if ( is_front_page() ) {
    	echo do_shortcode('[metaslider id="1000"]');
    }
}

En el código anterior:

Usamos el hook storefront_content_top el cual hace referencia a la función dcms_custom_slider_storefront
Dentro de la función comprobamos si estamos en el inicio con la función is_front_page()
Finalmente ejecutamos el shortcode con la función do_shortcode()
En la ejecución del shortcode estamos asumiendo que el id del slider es 1000

Si quieres mostrar el slider al ancho completo entonces usa el hook storefront_before_content

Ocultar el contenido de la página de inicio

Esto es opcional, si deseas sólo quedarte con el slider y ocultar el mensaje de bienvenida con la imagen de fondo, al código anterior puedes agregar un remove_action que elimine el contenido del Hook homepage y que hace referencia a la función que muestra ese contenido, es decir el código quedaría:

add_action( 'storefront_content_top', 'dcms_custom_slider_storefront' );

function dcms_custom_slider_storefront() {
	if ( is_front_page() ) {
    	echo do_shortcode('[metaslider id="1782"]');
    	remove_action('homepage', 'storefront_homepage_content', 10);
	}
}