Cómo fue la charla «Optimiza tu web: Storefront, dominar el mejor tema para woocommerce»

Los números

Apuntados a la charla: 38 personas.
Asistentes: 32 personas.
Se realizó el pasado 22 de octubre.

Es la primera vez en la que los asistentes reales prácticamente coinciden con los apuntados a la meetup así que gracias a todos por el esfuerzo de asistencia.

IMPORTANTE: Os recordamos que en la herramienta Slack tenemos un canal registrado para organizarnos y poder compartir la gestión de la meetup, concretamente el canal que usamos es #wpalicante de Slack WordPress España. Si quieres echar una mano, aportar ideas y formar parte más activa de esta comunidad sigue las instrucciones que aparecen en la siguiente página -> http://wp-es.es/slack/

La charla

De la mano de Antonio Sánchez, desarrollador WordPress de la meetup de WordPress Murcia, nos visita en esta ocasión para compartir con nosotros toda su sabiduría respecto del tema Storefront, que está preparado especialmente para trabajar con Woocommerce. Antonio no sólo ha investigado a fondo este tema sino que ha programado incluso un plugin para poder controlar de una forma más visual los Hooks y Filtros: Storefront Visual Hook Guide.

De la mano de este espectacular anfitrión hacemos un repaso por todo lo acontecido en la meetup. Os compartimos también la presentación sobre Storefront y plugin Visual Guide con toda la información que Antonio ha preparado para vosotros.

Os escribimos a continuación algunas notas interesantes sobre la meetup.

Generalidades del tema

Storefront es un tema gratuito.
Woocommerce es un plugin igualmente gratuito para gestionar una tienda online. Al tener opción de controlar envíos es ideal para venta física, es decir, de objetos que haya que enviar a los compradores.
Glosario:

- Templates: Archivos para modificar características de la web, como títulos.
- Hooks: zonas dentro del código donde poder poner y quitar funcionalidades (ganchos).
- Filtros: A diferencia de los Hooks, son selecciones de información que afectan a toda la web.
- Etiquetado schema.org: Es lo que utiliza Google para mostrar datos enriquecidos.

En la presentación tenéis una serie de plugins gratuitos que mejoran el tema.
- Se han descartado aquellos plugins que están desactualizados o que el propio Storefront ha ido embebiendo en su propio código a lo largo del tiempo por ser muy interesantes.
Existe otro tema parecido a Storefront llamado Canvas pero es de pago.
También tenéis en la presentación otros plugins de pago muy interesantes. La mayoría cuestán menos de 40$ aunque el primero Storefront Powerpack está sobre los 59$ aunque es cierto que es un compendio de muchas funcionalidades interesantes; tienes casi todo lo que necesitas de forma adicional en un solo plugin.

Trucos avanzados en Storefront

Aquí es donde os comentamos los detalles del plugin que Antonio ha confeccionado para agilizar el trabajo con Storefront. Este tema dispone tanto de filtros como de Hooks que a veces resulta difícil encontrar a lo largo del código, sobre todo, resulta complejo saber cuáles estamos utilizando y dónde, sobre todo para los hooks.

Así que el plugin Storefront Visual Hook Guide permite:

Ver al inicio de la web todos los filtros utilizados
Ver cada una de las zonas de la web dispuestas con Hooks de forma visual sobre las propias pantallas. Así podemos localizarlas rápidamente y ver dentro de cada una qué funcionalidades tenemos operativas y en qué orden.
Cuando desplegamos un Hook y vemos su contenido, si queremos modificar alguna funcionalidad tenemos que:
- - Seleccionar el texto de la función que queremos que se realice en la web
  - Pegar dicho texto en el functions.php (preferiblemente del tema hijo y así no perderemos los cambios introducidos.
  - El número que aparece al final de la función que estamos copiando nos indica la prioridad de ejecución así que en el fondo estaremos indicando con ese número qué información se muestra antes y cuál después. Por defecto la prioridad que se asigna es 10.
  - Para añadir acciones se utiliza la función add_action
  - Para eliminar accciones se utiliza la función remove_action
  - Cada una de estas funciones tiene tres parámetros:
    - Sección afectada: por ejemplo Homepage. Esto nos lo dice el Hook sobre el que estemos trabajando.
    - Función: la funcionalidad que estamos añadiendo o eliminando
    - Prioridad: la posición en la que se muestra esta funcionalidad con respecto al resto de funcionalidades añadidas.
  - La funcionalidad añadida puede mostrar algún elemento concreto, pero también puede contener shortcodes utilizando la función do_shortcode. Por ejemplo, podríamos mostrar el carrito de woocommerce al final de Homepage gracias al shortcode que nos proporciona el propio plugin, de la siguiente forma:
function Muestra_Carrito{
echo do_shortcode (‘[woocommerce_checkout]’);
}
add_action (‘homepage’,’Muestra_Carrito’,60)
Antonio tiene previsto mejorar el plugin para añadir también los estilos CSS y que se muestren igualmente sobre la pantalla para poder modificarlos más fácilmente.
Hay otros temas que también disponen de Hooks por lo que este plugin también será útil en esos casos, como Astra o Genesis.

Otros temas tratados en la meetup

Weeglot:
- Plugin de pago que traduce sorprendentemente bien las páginas, teniendo en cuenta que las traducciones muchas veces dependen del contexto y es muy difícil conseguir automatizarlas, por lo que siempre es aconsejable revisarlas tras el uso de un plugin de traducción. Aun así, éste lo resuelve bastante bien.
- Es un plugin para webs de alto nivel, porque al conseguir traducciones de calidad no es barato. Es decir, para una empresa que factura y necesita llegar al extranjero es ideal, no para una web de andar por casa que hagamos personal.
- No consume casi recursos porque tira de su API para hacer las traducciones.
- Para tiendas de webs de afiliación sí vale. Es compatible con el plugin de Amazon afiliados.
FacetWP:
- Es un plugin de filtros avanzados para WordPress.
- Dispone de un add-on llamado Map Facet para mostrar localizaciones sobre un mapa.
- Si queréis echarle un vistazo, disponéis en su propia página de una demo State Parks donde ver cómo funciona.
- Sólo da problemas si se utilizan CDNs porque carga javascripts pero en el resto de casos funciona de maravilla.
Cuando cambias un tema y tenías widgets en un área específica de ese tema, estos se pierden. Pero realmente no se pierden del todo sino que se quedan como Widgets inactivos. Así que no tienes más que arrastrarlos de ahí a la nueva área de widgets donde quieras que aparezcan y arreglado.
Cuando movemos widgets entre zonas se puede hacer con el clásico drag&drop o activando el modo de accesibilidad que aparece en la parte superior cuando despliegas las Opciones de pantalla. Con esto lo que conseguimos es que cada widget tenga un botón de Editar para decirle exactamente dónde ha de colocarse (a base de desplegables). Esto es útil cuando la pantalla de widgets es muy grande y hay que hacer mucho scroll para arrastrar un widget desde la parte inferior de la pantalla hasta su posición correcta en el nuevo área.