• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Agregar un Slider al tema Storefront

Agregar un Slider al tema Storefront

Agregar un Slider al tema Storefront

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

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Demo instalación storefront theme

 

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.

MetaSlider plugin

 

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:

Hooks storefront parte superior

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);
	}
}

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

Resultado final theme con slider

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Páginas en ancho completo en el tema StorefrontPáginas en ancho completo en el tema Storefront
  • Modificar el orden de productos destacados en StoreFrontModificar el orden de productos destacados en StoreFront
  • Cabecera Fija Theme WordPressCabecera fija en theme WordPress
  • Búsqueda en tabla personalizada en WordPressBúsqueda en tabla personalizada en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 4,80 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. David

    10 diciembre, 2020

    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

    • Jhon Marreros Guzmán

      12 diciembre, 2020

      Hola, si, tendrías que ir desactivando plugins, posiblemente alguno de cache u optimización te cause el problema. Saludos.

  2. David

    12 diciembre, 2020

    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

  3. Edmer

    10 marzo, 2021

    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.

    • Jhon Marreros Guzmán

      10 marzo, 2021

      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.

    • Lenin

      28 junio, 2022

      Utiliza el plugin “SiteOrigin CSS”, luego ajustas el margin-bottom asi:

      #masthead.site-header {
      margin-bottom: 0px;
      }

  4. dany arevalo

    23 marzo, 2022

    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

    • Jhon Marreros Guzmán

      23 marzo, 2022

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar Google Fonts en WordPress sin usar plugins

Mostrar Tabla Personalizada con Búsqueda y Paginación en WordPress

Cómo usar Transients en WordPress

Gestionar varios sitios web con ManageWP

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados