Storefront viene con dos Page Templates, Full Width y Homepage. Full Width quiere decir que es una página normal pero no hay sidebar. Homepage es un template ideal para la página inicial que te muestra los productos, categorías, ofertas, etc.
Entonces crea una página nueva llamada Home (ó el nombre que tu prefieras) y elige que en ella quieres utilizar el template Homepage. Después de eso ve al menú Settings > Reading > Front page displays, activa la opción “A static page” y elige la página que acabas de crear (Home).
Una vez hecho esto, nuestro sitio ahora se mira así:
Observa la estructura de la página inicial y la apariencia por defecto del sitio (colores, tipografía, etc).
La apariencia de Storefront puede cambiarse por medio del Customizer nativo de WordPress:
Adicionalmente existen algunas extensiones de pago para poder personalizar Storefront. Pero realmente podemos hacerlo nosotros mismos utilizando los Hooks que los creadores de Storefront dejaron a nuestra disposición.
Storefront Child Theme
Una de las mejores prácticas para personalizar Storefront es creando un Child Theme donde vamos a guardar todas nuestras modificaciones sin afectar al tema original ni perder nuestros cambios en futuras actualizaciones de Storefront.
Acá existe un proyecto llamado Storefront Child Theme listo para que nosotros empecemos a hacer nuestras modificaciones. Descárgalo, instálalo y actívalo. Inicialmente lo vas a ver exactamente igual que el Parent Theme Storefront.
Quiero personalizar el Homepage porque necesito un sidebar, también me gustaría personalizar la apariencia por defecto, colores y la tipografía. Al final de este Post el resultado será el siguiente:
Estructura de archivos de Storefront Child theme
assets/
Contiene un directorio de sass donde podemos escribir y organizar nuestros estilos personalizados con Sass.
functions.php
Solo tiene una función sf_child_theme_enqueue_styles() que se dispara en el Action Hoook wp_enqueue_scripts. Aquí se cargan los estilos del Parent Theme y después los del Child Theme con la función wp_enqueue_style().
style.css
Esta es la hoja de estilos del Child Theme y está vacía, únicamente tiene los metadatos del tema y referencia al Template Storefront (Parent Theme).
Estilos personalizados y Google Fonts
En el archivo functions.php agregamos al final las siguientes líneas de código:
La función sf_child_theme_google_fonts() se dispara en el Action Hook wp_enqueue_scripts para cargar la hoja de estilos de Google Fonts.
Después agregamos al final del archivo assets/sass/style.scss los siguientes estilos:
Ahora solo falta compilar estos estilos de sass a la hoja de estilos style.css del Child Theme
Nota: Tenemos como dependencias en style.scss a Bourbon (librería de mixins) y Susy Grid. Revisa la documentación de estas pues hay varias maneras de instalarlas. Si no quieres utilizar Sass, solo copia los estilos finales del proyecto en tu hoja de estilos style.css.
Filtros para el Customizer
Storefront utiliza el API de WordPress Customizer para la personalización del tema. Empecemos por cambiar el color de fondo para el header que viene por defecto en nuestro Storefront Child Theme.
Agrega lo siguiente al final de tu archivo functions.php:
Básicamente estamos agregando un filtro con el Hook storefront_default_header_background_color. En el atamos la función sf_child_theme_color_cerise_red() que únicamente se encarga de retornar el color rojito bonito que quiero.
Este filtro está siendo aplicado en el Parent Theme de la siguiente manera:
En la línea 132 del archivo /wp-content/themes/storefront/inc/customizer/controls.php verás que nos dejaron un: apply_filters( 'storefront_default_header_background_color', '#2c2d33' ),
Esto quiere decir que el color de fondo en el header va ser #2c2d33 por defecto, al menos de que nosotros lo modifiquemos agregando un filtro llamado storefront_default_header_background_color.
En el Child Theme es donde nosotros creamos ese filtro y retornamos el color que nosotros queremos. Recuerda que los filtros se encargan de recibir un valor y retornar el valor modificado.
En el archivo /wp-content/themes/storefront/inc/customizer/controls.php verás que los settings vienen con algún color por defecto. Todos estos settings tienen la opción de ser modificados a través de un filtro con apply_filters().
Nosotros tenemos que implementar los filtros que necesitemos con add_filter() en nuestro Child Theme para modificar estos valores.
Entonces agregamos al final del archivo functions.php los demás filtros para nuestro Storefront Child Theme.
Personalizando el Layout de Homepage
Creamos un archivo llamado template-homepage.php en nuestro Child Theme con el siguiente contenido:
En este archivo estamos sobreescribiendo lo que hacia el template-homepage.php del Parent Theme.
Le agregamos un div con la clase .sf-child-theme-featured-products. También agregamos el sidebar con la función <?php do_action( 'storefront_sidebar' );.
En la sección .sf-child-theme-featured-products se encuentra la función do_action( 'sf_child_theme_before_homepage_content' ); y quiere decir que aquí me va a imprimir todo lo que esté atado en el Hook sf_child_theme_before_homepage_content. En este caso le ataremos dos Action Hooks: storefront_homepage_content y storefront_featured_products.
Los Hooks homepage y storefront_sidebar ya vienen por defecto en el Parent Theme.
En el Hook homepage están atadas todas las funciones que nos imprimen las diferentes secciones en el Homepage (Líneas 52-57):
En el Hook storefront_sidebar está atada una función solo para incluir el sidebar (Línea 240).
El Hook sf_child_theme_before_homepage_content es el único nuevo que agregamos nosotros para el Child Theme, ahí nosotros debemos indicarle que es lo que va pasar.
Acciones y Filtros para personalizar Homepage
Agregamos las siguientes líneas al final de functions.php:
En primer lugar atamos la función sf_child_theme_homepage_layout en el Hook init. En esa función es donde empezamos a personalizar lo que queremos mostrar en el Homepage.
Le hemos indicado que no queremos que imprima las siguientes secciones en el Hook homepage con la funcion remove_action()
storefront_homepage_content
storefront_featured_products
storefront_product_categories
Después le indicamos que es lo que queremos imprimir en el Hook sf_child_theme_before_homepage_content con la función add_action()
storefront_homepage_content
storefront_featured_products
Por último quiero que en mi Homepage se muestran filas con solamente 3 productos. Entonces agregamos los siguientes Filtros al final de functions.php:
Estos filtros sirven para modificar los argumentos (arreglo) que están siendo pasados a las funciones que se encargan de imprimir los productos. (Estas funciones ya están escritas en el Parent Theme)
Por ejemplo el filtro storefront_featured_products_args en la línea 98 del archivo /wp-content/themes/storefront/inc/structure/template-tags.php
Y así terminamos de personalizar un poco nuestro Storefront Child Theme. Como puedes ver es muy sencillo hacerlo a través de los Hooks que nos deja disponibles Storefront.
Nuestra imaginación es el único límite para personalizar nuestro tema como nosotros queramos. Si te gustó este Post compártelo y si tienes alguna duda, déjame tus comentarios será un gusto poder ayudarte.