Tema ligero de WordPress construido con un enfoque en la velocidad y usabilidad. Una nueva instalación de GeneratePress añade menos de 15kb (gzipped) al tamaño de tu página. Aprovecha al máximo el nuevo editor de bloques, que te da más control sobre la creación de tu contenido. Es completamente compatible con todos los principales creadores de páginas, incluyendo Beaver Builder y Elementor. Gracias al énfasis en los estándares de codificación de WordPress, tiene una total compatibilidad con todos los plugins bien codificados, incluyendo WooCommerce. GeneratePress es totalmente adaptable, utiliza HTML/CSS válido y está traducido a más de 25 idiomas. Incluye integración de microdatos, 9 áreas de widgets, 5 ubicaciones de navegación, 5 diseños de barra lateral, menús desplegables (clic o flotante) y preajustes de color de navegación.

GP Premium es un plugin que añade funciones extras al tema GeneratePress como la biblioteca de sitios, colores, tipografía, dynamic page heros, un sistema avanzado de hooks, integración con WooCommerce y unos cuantos más que puedes consultar en la sección de módulos premium.

La última actualización de GeneratePress fue el 25 de octubre (2020). ¡No te pierdas la siguiente!

Últimas actualizaciones de GeneratePress

GeneratePress

Acaba de salir la versión 3.0.1 de GeneratePress, y gracias a eso nos hemos enterado de que la 3.0.0 ya no es una beta. Vamos a ver qué trae GeneratePress. Prepárate una bebida y algo de picar, que hay para rato…

 

GeneratePress 3.0, es una actualización mayor. Con ella llega un nuevo diseño del tema, uso de flexbox, nueva funcionalidad de los temas y, en general, es más ligero, rápido y flexible que nunca.

Nuevo y fresco aspecto

El aspecto de instalación por defecto se ha mantenido bien durante los últimos 6 años, pero ya tocaba una actualización del diseño.

Así luce el nuevo diseño:

Vista de escritorio de GeneratePress 3.0

Este nuevo estilo es el típico diseño de sitios web en estos días. Es mucho más limpio, y el encabezado ocupa menos espacio en el escritorio y el móvil. Se mantiene la compatibilidad con las versiones anteriores. Pero si prefieres el diseño clásico sigue siendo 100% realizable y a solo unos pocos clics de distancia.

Rejilla Flexbox

El sistema de rejilla basado en floats ha estado vigente durante mucho tiempo. La cuestión era cómo eliminar ese peso extra del tema sin afectar negativamente a los usuarios.

El proceso comenzó implementando SCSS para construir todo el CSS para el tema. Esto permitió dividir el CSS en partes, y luego compilarlas en hojas de estilo completas. El resultado fueron dos hojas de estilo principales separadas en el tema:

main.css (versión flexbox)
style.css (versión heredada)

Esto se configura con una simple opción en el Personalizador que permite cambiar entre los floats y flexbox.

Los sitios web existentes establecerán automáticamente el css heredado como el sistema por defecto para mantener la compatibilidad hacia atrás. Los nuevos sitios web se ajustarán por defecto a flexbox, ya que  es mucho mejor.

Esta actualización considera obsoleta la versión heredada. Se pueden cambiar los sitios existentes para usar la versión flexbox, pero es muy recomendable usar una copia de pruebas para que cualquier problema pueda ser abordado antes de poner en marcha el cambio.

Ventajas de Flexbox

  • Reducción significativa en el CSS
  • HTML más limpio y ligero eliminando clases auxiliaros
  • Más fácil de personalizar con un simple CSS

A continuación podemos ver de cerca cómo este y otros cambios mejoran el rendimiento de los temas.

Rendimiento

Menos peticiones y un 55% de ahorro en el CSS principal

Hojas de estilo de los componentes

Para simplificar la hoja de estilo principal, se han movido algunos componentes a sus propias hojas de estilo, y se cargan solo si son necesarias.

Por ejemplo, ¿por qué debería tu sitio cargar CSS para los comentarios si no estás usando comentarios? Así que ahora, los comentarios CSS se cargan por separado sólo en las paginas/posts que los necesitan.

Lo mismo ocurre con todos los CSS de tu barra superior, barra de pie de página y widgets de pie de página. Por lo tanto, sólo tiene sentido cargar el CSS para ellos si están en uso.

Dividir el CSS de esta manera implica más peticiones en la red. Sin embargo, son más pequeñas, lo cual es mejor para los servidores que corren HTTP/2.0, o pueden ser simplemente combinados/minimizados usando tus plugins de optimización y caché favoritos.

CSS dinámico

El CSS dinámico ha sido parte de GeneratePress durante mucho tiempo, y simplemente escribe CSS en línea cuando es necesario. Este CSS es para elementos de temas opcionales y sólo existe si están activados. Eso incluye CSS para la búsqueda de navegación, el botón de volver al principio y las opciones de Dropdown – Click.

Si eres usuario de GP Premium 1.11, tienes la opción de mantenerlo en línea o escribirlo en un archivo CSS externo.

CSS principal

Con la opción de flexbox habilitada, GeneratePress carga una sola hoja de estilo main.css.

Comparemos:
GeneratePress 2.4

unsemantic-grid.min.css – 12.3kb
style.min.css – 26.2kb
mobile.min.css – 3.7kb

Total: 3 peticiones HTTP 42.2kb

GeneratePress 3.0

main.min.css – 18.9kb

Total: 1 Solicitudes HTTP 19.8kb

Eso es un  ahorro del 55% en una instalación por defecto de GeneratePress.

Actualizar las hojas de estilo RTL

Los sitios RTL se benefician ahora de una nueva hoja de estilo minificada rtl.min.css. Además de ser más eficiente, corrige muchos problemas de estilo en la hoja de estilo heredada.

Tamaño de la caja:

Con Flexbox activado, todos los tamaños de caja se ajustarán al borde de la caja. La diferencia notable será el ancho más exacto del contenedor donde el relleno se mantiene en el interior. Esto resolverá los problemas de tamaño en los que los desarrolladores de plugins optan por dejar esto fuera de su código.

Javascript

Ahora los archivos a11y.min.js y menu.min.js se han combinado en un solo archivo principal.min.js. Esto se aplica tanto a las versiones Float como Flexbox del tema.

Iconos SVG ahora por defecto

GeneratePress tiene iconos SVG hace tiempo pero manteniendo los iconos de fuentes como predeterminados. Desde la versión 3.0, los iconos SVG son ahora los predeterminados para las instalaciones de nuevos temas.

Puedes ver más detalles de esta actualización en inglés en la web de GeneratePress.  Eso sí, prepárate para tragarte el tono grandilocuente y autocomplaciente del amigo Tom Usborne.

No había novedades de GeneratePress desde marzo, aunque sí las ha habido del plugin que le da vidilla: GP Premium.

Y ahora realmente tampoco las hay, si te fijas estamos hablando de una Alpha, una de estas versiones que se hacen al principio del desarrollo, que suelen fallar más que una escopeta de feria.

Pero nos ha llamado la atención que lo publique en su changelog y como parece que se trata de un cambio de gran envergadura, puede que hablemos de ella en la próxima newsletter, dependerá de si Sherlock encuentra tiempo para investigar.

Esta es una actualización muy pequeña para asegurar la compatibilidad con WordPress 5.4, que se lanzará a finales de mes. Hace algunos cambios en las clases utilizadas en el editor de bloques, que han cambiado en 5.4.

  • Corrección: Las clases del editor de bloques cambiaron en WordPress 5.4
  • Corrección: Selectores de encabezado más específicos en el editor de bloques

GP Premium

GP Premium 1.12.0 es una actualización tiene muchas pequeñas correcciones para garantizar la máxima compatibilidad con GeneratePress 3.0, que aún es una versión preliminar.

Biblioteca del sitio

Esta versión mejora en gran medida el proceso de importación de opciones de tema cuando se usa la Biblioteca del sitio. Esto mejora la capacidad de importar opciones de temas en sitios existentes sin tener que importar también el contenido del sitio. También mejora el proceso de eliminación de sitios y la funcionalidad de actualización de sitios.

Por último, pero no menos importante, 1.12.0 reintroduce los sitios de Elementor en la biblioteca que se eliminaron después del lanzamiento de Elementor 3.0. No solo han vuelto los sitios antiguos, sino que también tenemos otros nuevos de Flint Skin llamados «Digital Creative» y «Mentor» y «LearnEd».

WooCommerce

Hay un par de pequeñas mejoras en el módulo WooCommerce. Principalmente, reemplaza el javascript que se estaba utilizando para la función de imagen secundaria con CSS. El archivo woocommerce.min.js solo se carga si es necesario en función de sus opciones.

Registro de cambios en detalle

  • Blog: Corregir el margen de la columna en dispositivos móviles con algunos complementos de almacenamiento en caché.
  • Blog: Añade un disparador de poscarga al desplazamiento infinito para una mejor compatibilidad de complementos.
  • Blog: Tiene en cuenta el filtro generate_blog_columns al cargar columnas CSS.
  • Colores: Añade la vista previa en vivo del color del elemento de la barra de menú de búsqueda al personalizador.
  • Elementos: Corregir campo de gancho personalizado roto en Elementos de bloque.
  • Elementos: Integra el Hero de la página con la alineación del contenedor de texto en GP 3.0.
  • Elementos: Integra mejor los colores del elemento de encabezado con GP 3.0.
  • Elementos: Solo inhabilite el títula del contenido cuando {{post_title}} esté presente en páginas individuales.
  • Elementos: Corrige etiqueta en metabox.
  • Elementos: Añade el filtro generate_elements_metabox_ajax_allow_editors.
  • Elementos: Añade nuevos ganchos 3.0 al selector de ganchos.
  • Elementos: Vuelve a añadir el filtro generate_elements_custom_args.
  • Menu Plus: Prepara mejor la navegación como encabezado para GP 3.0.
  • Menu Plus: Mejor preparación del panel fuera de lienzo para GP 3.0.
  • Menu Plus: Prepara mejor la navegación adhesiva para GP 3.0.
  • Menu Plus: Añade la clase has-menu-bar-items al encabezado móvil si es necesario.
  • Menu Plus: Añade la clase is-logo-image a todos los logotipos del sitio.
  • Menu Plus: Corrige la alineación del encabezado móvil cuando tiene elementos de la barra de menú.
  • Navegación secundaria: Prepara mejor la navegación adhesiva para GP 3.0.
  • Navegación secundaria: Corrige el widget de navegación oculto en la barra superior cuando se combina con la navegación secundaria.
  • Sitios: Mejora la función de importación de solo opción.
  • Sitios: Mejora la funcionalidad del botón de actualización de sitios.
  • Sitios: Mejora la funcionalidad de deshacer la importación del sitio.
  • Sitios: Solucione problemas de importación del sitio de Elementor.
  • Sitios: Vuelva a añadir sitios de Elementor a la biblioteca.
  • Espaciado: Prepaae mejor la vista previa en vivo del Personalizador para GP 3.0.
  • Espaciado: Corrige el espaciado de las columnas del blog.
  • Espaciado: Deja de manejar las funciones de widget de encabezado, widget y pie de página móviles agregadas en GP 3.0.
  • Tipografía: Añade control de tamaño de fuente móvil para H3 (cuando se usa GP 3.0).
  • Tipografía: Añade control de tamaño de fuente móvil para H4 (cuando se usa GP 3.0).
  • Tipografía: Añade control de tamaño de fuente móvil para H5 (cuando se usa GP 3.0).
  • Tipografía: Permite valores de tamaño de fuente de títulos de sitios móviles y tabletas vacíos.
  • Tipografía: Hace que el selector de CSS de alternancia de menú sea específico para la navegación principal.
  • WooCommerce: Usa CSS para la funcionalidad de imagen de producto secundaria en lugar de JS.
  • WooCommerce: Solo carga el archivo .js si es necesario.
  • WooCommerce: Corrige la funcionalidad del cuadro de cantidad cuando existen varios cuadros de cantidad en la página.
  • General: Mejora la secuencia de comandos del selector de color alfa para una mejor compatibilidad con 5.5.
  • General:Mueve la hoja de estilo del tema secundario después de la hoja de estilo dinámica si está habilitada.

Nuestro amigo Tom Usborne ha preparado para agosto una gran actualización de GP Premium, el plugin de pago que amplía las características del popular tema GeneratePress. Ya ha sacado dos versiones corrigiendo fallos de la principal, así que puedes actualizar sin problema. Esta es una enorme actualización que incluye nuevas características, mejoras de rendimiento y toneladas de correcciones de errores.

Elementos de bloque

Elementos de bloque funciona igual que los otros Elementos, pero te permite usar el editor de bloques para construir el contenido de tu Elemento en lugar de necesitar usar HTML. Al combinarlo con GenerateBlocks, ahora puedes construir encabezados, barras laterales y pies de página personalizados. También puedes usar el Elemento de bloque como un gancho normal para agregar contenido en cualquier lugar de tu sitio web.

Lo que hace que los Elementos de bloque sean más poderosos es que además tienes acceso a las reglas de visualización. Esto significa que puedes construir barras laterales condicionales, pies de página, etc.

Los Elementos de Bloque abren un sinfín de posibilidades. Otro ejemplo es la construcción de un pie de página del sitio, que siempre ha sido algo limitado en GeneratePress. Ahora, no hay límites.

Elementos de diseño

Los elementos de diseño son súper poderosos y te permiten establecer cosas como el diseño de la barra lateral y el ancho del contenido en todo el sitio. Sin embargo, antes de la versión 1.11.0, la configuración de los elementos de diseño no se aplicaba al editor de bloques.

A partir de la versión 1.11.0, los elementos de diseño tendrán efecto en el editor de bloques.

Archivo externo dinámico CSS

Si has estado usando GeneratePress durante un tiempo, probablemente hayas notado que el CSS generado por las opciones del Personalizador se añade en línea debajo de la hoja de estilos del tema principal.

Ahora puedes elegir generar este CSS en un archivo externo en lugar de mostrarlo en línea. Esto no sólo limpiará tu HTML, sino que también hay beneficios de rendimiento al hacerlo. Una vez que se genera el CSS, se agrega al archivo que se almacena en la caché de tu navegador. Eso significa que el CSS no tiene que generarse en cada carga de la página.

Si bien el CSS dinámico en línea sigue siendo necesario en algunos casos, esto debería ayudar a mejorar aún más el rendimiento, especialmente cuando se utilizan muchas opciones. Esta opción se puede activar y desactivar en el Personalizador.

Preparación para GeneratePress 3.0

Así es, GeneratePress 3.0 está a la vuelta de la esquina. GP Premium 1.11.0 tiene toneladas de ajustes en todos sus módulos para prepararse para la 3.0, así que asegúrate de actualizar antes de empezar a probar/usar la 3.0 en un futuro próximo.

 

Esta actualización gira en torno a la funcionalidad de dimensionamiento de imágenes en el Personalizador, con un nuevo redimensionamiento de las imágenes destacadas.

El cambio de tamaño de la imagen sobre la marcha en WordPress es difícil. Normalmente necesitas usar una biblioteca preexistente, lo que significa que dependes del código de otra persona. Estos redimensionadores también (a veces) tienen problemas de rendimiento importantes y pueden introducir otros errores en el tema. La opción de redimensionamiento de imágenes en nuestro módulo de Blog ha sido durante mucho tiempo lai característica menos favorita desde el punto de vista del rendimiento/estabilidad del código en GP Premium.

Empezamos con una biblioteca llamada Aqua Resizer, que tenía problemas de rendimiento bastante importantes, especialmente cuando había que redimensionar muchas imágenes en una sola página. Luego cambiamos a una biblioteca llamada Image Processing Queue (Cola de procesamiento de imágenes), que era algo mejor en cuanto a rendimiento, pero introducía un extraño error transitorio persistente para un puñado de nuestros usuarios, y a veces simplemente no funcionaba en determinadas condiciones del servidor.

Este error transitorio sólo ha sido reportado unas pocas veces y no es algo que hayamos podido reproducir en ninguno de nuestros entornos de prueba, pero si estás usando las opciones de redimensionamiento de imágenes y has notado tiempos de carga lentos o un aumento en el tamaño de tu base de datos, consulta nuestro artículo de documentación.

El propio WordPress viene con un conjunto de tamaños de imagen que se crean cada vez que subes una imagen. Estos tamaños pueden ser configurados en el área de Ajustes > Medios de tu escritorio. WordPress también añade otro par para usar en el atributo srcset al añadir tus imágenes. También puedes crear tus propios tamaños de imagen usando la función add_image_size(), de la que puedes obtener más información.

En el Personalizador, ahora puedes elegir entre estos tamaños de imagen para tus imágenes destacadas.

Hasta aquí todo bien, muy sencillo y mucho mejor para el rendimiento, pero no es perfecto. No te da un control completo sobre el tamaño, que tal vez quieras cumplir con el diseño requerido.

Por eso hemos mantenido nuestros controles de ancho y alto en el Personalizador, que te permite ajustar el tamaño de la imagen. Dos cosas suceden cuando usas estos controles de tamaño:

  1. Primero, comprueba si el tamaño que has introducido existe. Por ejemplo, WordPress crea imágenes de 150×150 cuando subes una imagen a la Biblioteca Multimedia. Si ingresas 150×150 en el Personalizador, GeneratePress utilizará esa imagen existente. Esto también significa que su tamaño existente (si está usando uno) se conservará cuando actualice, ya que el redimensionador de imágenes anterior creó ese tamaño de imagen y lo puso a disposición para su uso. +1 para la compatibilidad retroactiva automática!
  2. Si el tamaño de la imagen no existe, usará CSS para redimensionar la imagen por ti. Como sabrás, no es una gran idea si subes una imagen grande y la redimensionas para que sea realmente pequeña – eso es malo para el rendimiento. Ahí es donde entra la opción de tamaño de la imagen. Puedes elegir un tamaño de imagen existente que se aproxime al resultado deseado, y luego usar los controles de ancho/alto para ajustar el tamaño. Esto reduce enormemente la cantidad que estás redimensionando con CSS.

Personalmente, me gusta el #2, ya que puedo elegir una imagen ligeramente más grande que el resultado deseado, y luego reducir el tamaño con CSS para lograr un resultado de mejor calidad.

Si esto no te funciona, puedes crear fácilmente tus propios tamaños exactos de imagen y elegirlos en el Personalizador.

Por lo tanto, este nuevo redimensionador hace algunas cosas importantes:

Aumenta el rendimiento de tu sitio, especialmente si utilizas muchas imágenes destacadas.
Utiliza la funcionalidad básica de WordPress y elimina un montón de código de terceros del tema.
Arregla un extraño error persistente y transitorio reportado por un par de nuestros usuarios.

En general, estoy muy contento con esta solución. El redimensionamiento de imágenes en GP Premium ha sido un dolor de cabeza para mí durante mucho tiempo, y creo que esta solución finalmente le pone fin, manteniendo un control decente sobre el tamaño de las imágenes.
¿Algo más?

El redimensionamiento de imágenes fue el foco principal de esta actualización, pero añadimos algunas otras correcciones/adiciones de errores menores que eran necesarias.

Esta es una actualización un poco aburrida, pero es necesaria. GP Premium 1.11.0 será mucho más emocionante, ya que gira en torno a nuestro nuevo plugin de bloque, GenerateBlocks. Si no lo habéis comprobado, está disponible para ser probado y está muy cerca de ser una versión estable. GP Premium 1.11.0 introducirá algo para integrar estrechamente GP con GenerateBlocks, ¡no podemos esperar a mostrarte!

WP Feedback

Dive straight into the feedback!
Login below and you can start commenting using your own user instantly