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
(5 votos, promedio: 4,80 de 5)
Cargando...
Buenas Jhon,
A ver si me puedes dar un poco de luz porque soy muy novatillo y no entiendo qué pasa. Hay “algo” que hace que desaparezca la tienda WooCommerce y no soy yo, creo jeje, se queda la cabecera y el footer, aunque este lo desmonta y le faltan imágenes.
Veo que uno de los problemas que pasa es que “algo” me borra casi todas las páginas y las envía a la papelera, y no están asociadas en los ajustes generales.. Supongo que si las restauro y asocio de nuevo en su sitio volverá a funcionar bien, pero claro, he de averiguar qué es lo que hace que eso pase porque si no volverá a ocurrir y no es buen plan..
Actualicé a la versión 5.6 de WordPress y pensé que podía ser por eso pero no, volví a la 5.5.3 y también ocurre por lo que descarto así que sea la versión de WordPress.
Recuperé una copia y funcionaba bien, actualicé a WooCommerce 4.8 desde 4.7.1, y anoche iba bien pero hoy vuelve a pasar lo mismo sin haber hecho cambios.
¿Cómo debo actuar? ¿Puede ser algún plugin, o el WooCommerce que falle con retraso, o algo de enlaces permanentes? Los últimos que activé fue el de Stripe y el de MetaSlider que comentas en el post, para un banner pero me iban bien.
¿Alguna idea de por dónde puede venir el problema? Estoy mirando en foros y googleando a ver si alguien le ha pasado pero no encuentro nada de momento..
Gracias de antemano
David
Hola, si, tendrías que ir desactivando plugins, posiblemente alguno de cache u optimización te cause el problema. Saludos.
Hola, gracias, estoy en staging probando de todo pero no consigo recrear el fallo, todo parece ir bien, he actualizado a WordPress 5.6 y a WooCommerce 4.8 y sigue bien, pero es lo único que hice cuando descubrí el borrado misterioso de páginas, que pesadilla¡¡ pero es real porque me ha ocurrido dos veces e hice captura de pantallas para reportarlos si alguien que sepa necesitara verlos.
En cuanto a los plugins, uso muy pocos, tengo 6 en total porque soy de pensar que cuanto menos mejor, pero igual me equivoco y debería usar más, como alguno de caché u optimización que comentas, el último que puse fue el de este artículo tuyo, que por cierto está genial como siempre, muy trabajado 😉
Y luego uso uno en mu-plugins que es donde meto los códigos como el tuyo para posicionar el banner, y así no ando tocando el functions.php y lo tengo todo centralizado ahí.
Aprendo mucho contigo, gracias
Estimado
Por favor agradezco tu apoyo a lo siguiente:
1).- Según esta guía casi todo salió bien; excepto que me muestra una franja blanca muy visible entre el encabezado del menú y el slider.
2) Cómo puedo ubicar el BRAND (logo al lado izquierdo del menú); es decir organizar en una sola fila brand y menús.
Hola, con respecto a tu primera duda, es posible que lo puedas corregir por CSS. Revisa: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/ , lo mismo para lo otro que comentas, aunque podría complicarte un poco más.
Prove agregar el slider en mi prototipo, hice todos los pasos, pero el slider me aparece en todas las paginas del sitio web apesar de que agregue el codigo, me podrian ayudar con algun otro codigo, para que el slider solo me aparezca en la pagiana de inicio?
el codigo lo pegue en el pluggin snippet
Hola, si tu página de inicio es una página estática si que debería funcionarte, usas otro plugin de slide?, ya que tal vez el slide se este mostrando de manera independiente sin tener en cuenta el código que ejecuta el shortcode.