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.
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:
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
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);
}
}
Resultado Final
Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando…