GeneratePress, descubre todo su potencial

En Weeg siempre hemos preferido realizar desarrollos web a medida sin plantillas de terceros. De esta forma se obtiene una web lo más optimizada posible y con las funcionalidades que tu proyecto necesite.

Pero en otras ocasiones, por tiempos para el desarrollo o por el presupuesto disponible, hay que buscar alternativas como, el uso de temas y maquetadores visuales.

Siempre estamos buscando las mejores soluciones para que el resultado final tenga la calidad que nos gusta para nuestros trabajos.

En este caso vamos a hablar de GeneratePress, un tema minimalista pero potente para WordPress. Desde que nos topamos con él no hemos dejado de usarlo y no es algo que digamos a la ligera. La web donde te encuentras actualmente está desarrollada con GeneratePress + Elementor.

Presentando a GeneratePress

GeneratePress es un tema gratis para WordPress que vas a poder encontrar directamente en el directorio oficial. Tom, su desarrollador, lo define como minimalista, rápido y fácil de personalizar y si te fijas en las instalaciones activas y las valoraciones que tiene, no miente.

Aunque es cierto que, como te vamos a explicar más adelante, también tiene una versión de pago con la que tendrás muchas opciones avanzadas que darán todavía más potencia a esta plantilla para WordPress.

Te dejamos el vídeo de presentación que tienen en su web, para dejarte con la miel en los labios.

Tema minimalista y rápido

No es el típico tema multipropósito que viene cargado de miles de opciones y ajustes de configuración que, en su mayoría no necesitarás. Tiene lo justo para servirnos de base para prácticamente cualquier sitio web. Esto unido a puntos que te vamos a mostrar después, serán un gran punto de partida para lograr un web optimizada de cara al SEO.

Hemos creado una instalación nueva en un subdominio para hacerle unos análisis y que puedas comparar los resultados obtenidos, con los que hagas de tu tema actual, o el que piensas usar.

Cuando lo compares con los análisis que hagas a tu web, ten en cuenta que solo tenemos instalado WordPress + GeneratePress, no hay ningún plugin y solo el contenido de prueba. En nuestro caso lo tenemos montado en Webempresa.

Análisis realizado en Pingdom:

Análisis realizado en GTmetrix:

Como ves los resultados no están nada mal.

GeneratePress desde la versión 2.0 ni siquiera usa jQuery, se han dado el trabajo de reescribir todo lo que tenían que dependía de esa librería a javascript puro, de esta manera reducen un poco más el peso de la página.

Optimizado para el SEO de tu web

Aparte del punto anterior, su desarrollador se ha esforzado mucho en el SEO On Page de GeneratePress.

El tema está programado siguiendo los estándares de HTML, CSS, PHP y WordPress. Ha conseguido un código limpio, seguro, estable, eficiente y ha pasado todo los test sobre accesibilidad que toda web debería tener. Esto no ayudará solo a tu SEO sino que, evitará que tengas problemas de incompatibilidad con los plugins más usados y otras personalizaciones que necesites aplicarle.

Pero no se queda ahí, además incluye microdatos de schema.org en el código.

¿Qué son los microdatos? Son etiquetas que van incluidas en el HTML de la plantilla, sirven para que tu web sea más semántica, lo que quiere decir que, los buscadores como Google, serán capaces de comprenderla mejor cuando rastreen e interpreten tu web.

Que Google entienda la estructura de tu web y lo que dices en ella ayudará a que posiciones mejor en el sector de tu negocio.

GeneratePress es responsive, mobile-friendly o como quieras llamarlo. En resumen, se adapta a todos los dispositivos. No lo hemos dicho hasta ahora ya que desde hace mucho no concebimos un proyecto web que no lo sea pero, sin duda es algo que los buscadores también tienen en cuenta a la hora de darte un empujón más en los resultados.

Compatibilidad de GeneratePress

Como hemos mencionado antes y lo hace el autor de la plantilla en el directorio de temas de WordPress, al estar desarrollado con código estándar se aseguran de que sea compatible con los principales navegadores (IE8 incluido) y plugins de WordPress más usados.

Algunos de los plugins más importantes compatibles con GeneratePress:

• WooCommerce
• WPML
• BuddyPress
• bbPress
• Elementor

¿Cómo instalar GeneratePress?

Instalar GeneratePress es realmente sencillo, solo tienes que seguir estos pasos.

Ve a “Apariencia -> Temas” en el Dashboard y le das en el botón de “Añadir nuevo”.

Busca por su nombre y cuando te aparezca le das al botón de “Instalar”, una vez instalado dale al botón “Activar”.

Con esto ya tendrías instalado el tema gratuito de GeneratePress.

¿Qué puede hacer la versión gratuita de GeneratePress?

Vamos a pasar a indicarte todo lo que incorpora la versión gratuita del tema, así podrás valorar si es lo que buscas. Tal vez en tu caso sea más que suficiente y no necesites plantearte el pasar a la versión de pago de GeneratePress.

Para acceder al panel de personalización de la plantilla puedes hacerlo desde “Apariencia -> Personalizar”, “Apariencia -> Temas -> Personalizar” y desde la vista de la web, en el panel superior presionando en “Personalizar”. Todos los cambios que realices aquí los podrás ver en tiempo real, sin tener que ir publicando cada modificación para ver el resultado.

Identidad del sitio

Lo primero que encontramos en el panel es la opción de “Disponibles módulos premium”, no es más que un enlace a la página de GeneratePress para adquirir la versión premium. Después ya vemos la opción de “Identidad del sitio”.

Desde este apartado podrás modificar el título del sitio, la descripción corta, el logotipo y el icono del sitio. Desde la versión 2.0 se pueden subir logos en retina para que se muestren en la pantallas que lo acepten.

Diseño de pantalla

Este bloque está dividido en varios sub bloques. Desde este panel vas a poder configurar lo relativo a la estructura y distribución visual de la web. Podrás modificar el contenedor, cabecera, navegación, barras laterales, pie de página y blog.

Contenedor. Podrás cambiar el ancho que quieres para el contenedor principal así como la disposición de los contenedores.

Cabecera. Desde aquí puedes modificar los anchos de la cabecera, para que se ajusten a toda la pantalla o al mismo que el contenedor del contenido. También vas a poder elegir dónde quieres que estén alineados los elementos, izquierda, centro o derecha.

Navegación principal. En este panel encontrarás las opciones de personalización para el menú principal. El ancho que quieres que ocupe, dónde quieres que esté alineado, su posición (bajo la cabecera, encima, en la barra lateral…), funcionamiento del submenú y activar / desactivar el buscador en el menú.

Barras laterales. Aquí puedes configurar cómo quieres la distribución de las barras laterales en la web en general, el blog o en el detalle de los post. Podrás seleccionar entre varias opciones por ejemplo sin barras, barra / contenido, contenido / barra y el resto de combinaciones.

Pie de página. Le vas a poder indicar cómo quieres el ancho del pie, el número de widgets de 0 a 5 que quieres que tenga y si quieres activar / desactivar un botón para volver arriba cuando has hecho scroll hacia abajo.

Blog. En la versión gratuito en esta panel solo podremos configurar que en el listado de artículos se muestren completamente o solo el extracto. Como indican, en la versión de pago tienen muchas más opciones, las veremos más adelante.

Colores

En este panel podrás tocar algunos de los colores principales de la web, pero si necesitas algo más ya deberás pasar a la versión pro o modificarlo por ti mismo mediante CSS.

Tipografía

Desde este apartado puedes cambiar la familia de la fuente, el peso, si lo quieres capitalizado, todo en mayúscula, todo en minúscula, el tamaño, altura de la línea y margen de los párrafos. Cabe mencionar que para la familia de la fuente podrás seleccionar cualquiera de la librería de Google Fonts.

En la versión gratuita se modifica a nivel general, pero en la versión de pago tendrás muchas más opciones que ya veremos.

General

Por defecto el check de “Caché del CSS dinámico” viene marcado. Sirve para se caché el CSS que GeneratePress genera en algunas de las configuraciones que puedes tocar. De esta forma no tiene que generarlo cada vez que carga una página con lo que consigue aumentar el rendimiento de la web.

Menús

Puedes crear el menú y administrarlo desde aquí, podrás modificar los elementos que tiene y su ubicación. Si quieres que las páginas nuevas vayan apareciendo automáticamente en el menú, también lo deberás marcar aquí.

Widgets

El tema incluye varias áreas para que inserte los widgets que necesites.

Hasta aquí las opciones que podemos encontrar en la versión gratuita en el panel de personalización, pero aún nos queda enseñarte qué opciones ha añadido dentro de la edición de una página o de una entrada.

Ahora cuando entres a editar una página o entrada, al final vas a ver un bloque titulado “Diseño de pantalla”. Aquí podrás realizar configuraciones que afecten tan solo a la página en la que lo estás cambiando. Estas opciones son:

Barras laterales

Como has visto antes en el personalizador pero a nivel de página / entrada.

Widgets de pie de página

Podrás indicar el número de widgets en el pie a nivel de página / entrada.

Desactivar Elementos

En la opción gratuita solo puedes ocultar el título del contenido, más adelante veremos lo que nos permite la versión de pago.

Contenedor del constructor de páginas

Te permite elegir si el ancho del contenedor ocupará el total de la página o solo el contenido.

Plugins gratuitos del creador de GeneratePress

En el perfil de Tom en la página de WordPress puedes ver todas sus contribuciones. Tiene varios plugins que te pueden venir muy bien.

WP Show Posts. Podrás crear listas de posts con una configuración determinada que tu quieras. Por ejemplo de una categoría en particular, de un tipo de post, definir las columnas, el número de posts, etc. Cuando acabes recibirás un shortcode y donde lo coloques aparecerá el listado de artículos.

Lightweight Social Icons. Sencillo plugin que te va a permitir añadir un widget con los enlaces a tus redes sociales.

Lightweight Grid Columns. Con este plugin vas a poder crear columnas en el contenido mediante shortcodes.

Simple CSS. Editor para cuando necesites meter algo de código CSS desde la administración del sitio y desde el personalizador. Podrás añadir estilos que afecten a páginas específicas.

Nosotros cuando tenemos que añadir algo de CSS siempre preferimos hacerlo en la hoja de estilo del tema hijo, pero si no sabes, te da miedo, o no te sientes muy cómodo tocando los archivos del servidor, tal vez esta sea una buena opción para ti.

GeneratePress Premium

Si necesitas más opciones de personalización que el tema gratuito no llega a cubrir, es el momento de plantearte si adquirir la versión de pago de GeneratePress.

La versión premium de este tema es un plugin que tendrás que instalar, lo veremos en el siguiente punto. Una vez que lo tengas instalado, desde la administración de tu web en “Apariencia -> GeneratePress”, podrás activar los addons que te interesen, de esta forma no sobrecargarás tu web con cosas que no necesitas. Otra buena idea de su desarrollador para poder mantener la web lo más ligera posible.

Vamos a intentar explicarte las características y lo que obtendrías si decides dar el paso.

Site library

Ahora en la versión premium de GeneratePress puedes importar sitios demo que tienen un diseño base, instalan los plugins necesarios, contenido de prueba y que será un excelente punto de partida para tu proyecto.

Lo bueno es que, no te ocurrirá como con otras plantillas en las que, es casi imposible conseguir el resultado de la demo sin tener unos conocimientos previos. Lo han desarrollado de tal forma que solo te tendrás que preocupar por elegir la demo que más te guste.

Para ver e instalar las demos que tienen debes de dirigirte desde la administración de WordPress a “Apariencia -> GeneratePress -> Site Library”. Además si te fijas hay una serie de filtros para que puedas elegir una plantilla que utilice de constructor visual, Beaver Builder, Elementor o ninguno.

Esto no quiere decir que no se puedan utilizar otros constructores, simplemente son los que ellos han usado para desarrollar esas demos y serán los que se instalen si las eliges.

Os dejamos el vídeo explicativo que tienen en su web:

Colors

Con la versión gratuita sólo podías modificar los colores de algunas partes, activando este módulo podrás cambiar mucho más.

Typography

Al igual que ocurría con el módulo anterior, al activar este, tendrás muchas más opciones de configuración en cuanto a la tipografía de la web. Vas a poder indicar más específicamente cómo quieres que aparezca en las distintas partes de tu proyecto.

WooCommerce

Si piensas usar GeneratePress para crear tienda online, sin duda deberás activar este addon. Te dejamos el vídeo para que veas lo que podrás hacer.

Menú Plus

Gracias a este addon tendrás un mayor control del menú de tu web. Podrás dejar fijo arriba al hacer scroll, configurar cómo quieres que aparezca en los dispositivos móviles y varias cosas más.

Page Header

Toma el control sobre los diseños de tus cabeceras cabeceras y aplícalos por tipo de página o a páginas específicas.

Spacing

Modifica los espacios que hay entre las distintas áreas de la web y los márgenes de los contenedores.

Blog

Al activar este módulo te aparecerán nuevas opciones en el panel de personalización “Diseño de pantalla -> blog”. Podrás configurar cómo quieres que se muestren tus artículos en el blog así como el detalle de los posts.

Secondary Nav

Este addon te va a permitir crear un menú secundario.

Backgrounds

Si necesitas poner una imagen de fondo en alguna de las áreas de tu web este es el módulo que deberás activar. Tendrás muchas opciones como que se repita o no, dejarlo fijo para un efecto parallax y muchas opciones más.

Sections

Con esta herramienta vas a poder crear secciones a ancho completo en tus páginas y posts. Tan solo tienes que activar el módulo y luego en la página que quieres usar secciones activarlas también. Lo puedes ver claramente en el vídeo de arriba.

Con esta funcionalidad podrás realizar diseños muy vistosos y que darán un punto más a tu web, pero no todo es bueno. En las páginas / entradas que uses las secciones, por el momento, no podrás usar maquetadores visuales como Elementor. Aunque siempre lo puedes compaginar con el plugin del autor que hemos visto antes Lightweight Grid Columns para crear columnas y conseguir lo que necesites.

Disable Elements

Con la versión gratuita sólo podías ocultar el título de la página / entrada pero, con la versión premium de GeneratePress y activando el módulo “Disable Elements” vas a poder desactivar:

• La barra superior.
• La cabecera.
• El menú de navegación.
• La imagen destacada / cabecera.
• El título.
• El pie de página.

Hooks

Este módulo es una maravilla para los desarrolladores, a nosotros personalmente nos lo parece. Es para usuarios más avanzados, con él activo vas a poder añadir cualquier código HTML, CSS, JavaScript, o PHP en varias zonas de la plantilla.

No podemos evitar mostrarte un poco más en detalle este addon y cómo te recomendamos usarlo. Si eres desarrollador o no te da miedo meter mano al código de tu web, te recomendamos que mires el apartado de  GeneratePress para desarrolladores de este mismo artículo.

Copyright

A nuestro ver este complemento debería venir integrado en la plantilla y no como un módulo más. Al activarlo podrás modificar el texto de la parte del copyright al final de la web.

Import / Export

Podrás exportar toda la configuración de los estilos que le has dado a una web e importarlos. Personalmente no lo hemos usado nunca ya que, nosotros realizamos cada web desde cero sin copiar estilos entre proyectos.

Además cuando por ejemplo, queremos realizar una copia de seguridad, la hacemos completa de todo el proyecto ya que, con esta opción solo exportarías lo configurado en GeneratePress.

Tal vez resulta interesante si, tienes una serie de blogs para nichos o distintos proyectos propios en los que, no quieras perder demasiado tiempo diseñando una web distinta para cada uno. Con esto podrías hacerlo una vez y luego reutilizarlo.

Documentación y soporte

Otro de los puntos fuertes de GeneratePress es su amplia documentación y el excelente soporte, uno de los mejores que hemos tenido oportunidad de probar. Y es que, aunque parezca algo obvio para un producto premium, no es fácil encontrar temas de pago de WordPress que realmente realicen estas dos tareas de forma correcta.

Documentación

Puedes echar un ojo a la documentación aquí. Aunque está en inglés, lo que a algunos los puede echar atrás, está todo explicado de forma sencilla y comprensible, además se suelen apoyar mucho en imágenes y vídeos.

Como puedes ver al entrar hay un buscador en el que podrás poner el tema de tu consulta. La documentación está dividida en cuatro partes:

• General. Errores y preguntas más comunes, cómo instalarlo, cómo actualizar y cosas así.
• Customization. Manuales sobre las distintas opciones de personalización que tiene GeneratePress.
• Pro Modules. Aquí puedes encontrar la explicación de cada uno de los módulos de la versión de pago de GeneratePress.
• Developers. En este apartado podrás ver documentación para usuarios más avanzados. Sobre todo las formas correctas y cómo hacerlo de añadir / modificar código de GeneratePress.

Soporte

Sinceramente al principio no entendíamos cómo era posible que Tom, el desarrollador de GeneratePress, pudiese el solo dar un soporte de tanta calidad. Ahora sí que tiene ayuda pero ese nivel al que nos tenía acostumbrados no ha bajado.

Suelen responder muy rápido cualquier duda que pongas en el foro de soporte, sí foro. Así aprovechan las dudas de todos los usuarios de GeneratePress para que queden guardadas de manera que, cualquiera que le vuelva a surgir la misma pregunta, lo encuentre fácilmente.

Además responden muchas preguntas que no tendrían porqué hacerlo. Por ejemplo cuando algunos usuarios preguntan sobre errores que vienen dados por otros plugins, que no tienen que ver con GeneratePress, el bueno de Tom y su equipo, harán todo lo posible por resolver el problema. En la mayoría de los servicios de soporte te dirán que contactes con el soporte del otro plugin directamente.

Precio de GeneratePress Premium

El precio de los addons de GeneratePress Premium comparado con otros temas la verdad es que, es de risa.

Por el precio de 39,95$ obtendremos:

• Todos los addons.
• Acceso completo a la librería de plantillas.
• Instalaciones ilimitadas.
• 1 año de actualizaciones y soporte.
• 40% de descuento al renovar.
• 30 días de garantía de devolución.

Cómo instalar GeneratePress Premium

Si al final has decidido que este es el tema que necesitas para tu proyecto, te dejamos un vídeo (en inglés) de cómo instalarlo. Si lo prefieres bajo el vídeo también te dejamos las indicaciones por escrito.

Para poder instalar GeneratePress premium primero te tienes que asegurar de haber instalado el tema gratuito como hemos hecho más arriba.

Después debes de ir a la web de GeneratePress y descargar la versión premium.

Ahora toca que instales el archivo que acabas de descargar en tu WordPress. Ten en cuenta que, la versión pro de este tema, como hemos dicho antes, es un plugin.

Para instalarlo debes de ir a “Plugins -> Añadir nuevo”, después dale al botón que dice “Subir plugin”, selecciona el archivo que acabas de descargar y le das a instalar ahora. No olvides activar el plugin una vez que se haya instalado.

Ahora en “Apariencia -> GeneratePress” recuerda meter la licencia para poder seguir recibiendo actualizaciones. Desde aquí podrás activa / desactivar los distintos módulos de GeneratePress Premium.

Para vosotros desarrolladores

GeneratePress no es solo un tema para gente sin conocimientos que quiera un tema en el que no tenga que tocar ni una línea de código. También han pensado en los desarrolladores, de hecho son estos los que conseguirán sacarle todo su potencial.

Tema hijo

Si vas a hacer tus retoques y personalizaciones por código en el tema ya sabrás que, para que se mantengan tras las actualizaciones debes hacer en un child theme o tema hijo.

Para ahorrarte el tener que crearlo tu cada vez que lo necesites, en GeneratePress han pensado en nosotros creando el child theme base para usarlo como arranque.

Hooks

Como os hemos contado más arriba gracias a los Hooks podremos incrustar código en varias áreas del tema. Este es el listado de todos ellos:

wp_head
generate_before_header
wp_footer
generate_header
generate_inside_navigation
generate_credits
generate_after_header
generate_before_content
generate_before_main_content
generate_after_content
generate_inside_container
generate_before_header_content
generate_inside_slideout_navigation
generate_after_entry_content
generate_after_entry_header
generate_sidebars
generate_after_main_content
generate_before_footer
generate_paging_navigation
generate_after_entry_title
generate_after_header_content
generate_inside_mobile_menu_bar
generate_before_copyright
generate_after_footer_content
generate_inside_secondary_navigation
generate_before_footer_content
generate_inside_mobile_menu
generate_after_footer_widgets
generate_before_archive_title
generate_after_archive_title
generate_after_left_sidebar_content
generate_archive_title
generate_before_right_sidebar_content
generate_after_right_sidebar_content
generate_after_archive_description
generate_before_left_sidebar_content
generate_before_comments
generate_inside_mobile_header_menu
generate_inside_comments
generate_mobile_cart_items
generate_inside_mobile_header
generate_inside_secondary_mobile_menu
generate_after_primary_content_area
generate_dashboard_after_header
generate_dashboard_inside_container

Dónde y se aplican

El equipo de GeneratePress ha preparado una serie de imágenes en las que vas a poder ver dónde se mostraría cada uno de estos hooks, te dejamos el enlace aquí.

Cómo usarlos

Para usarlos puedes ir desde la administración de WordPress a “Apariencia -> GP Hooks” o por código. Nosotros siempre desactivamos su uso en la administración por seguridad y los usamos por código, esto ya lo veremos en el próximo artículo.

Filters

Otra de las cosas que ha hecho bien GeneratePress es que ha utilizado la API de filtros de WordPress para agregar sus propios filtros en el tema.

Con los filtros podrás modificar los valores de algunas variables para adaptarlo a tus necesidades, por ejemplo, usando el filtro generate_404_text podríamos cambiar el texto por defecto de la página 404 de la plantilla:

add_filter( 'generate_404_text', 'weeg_nuestra_funcion' );
function weeg_nuestra_funcion(){
   return 'Parece que algo ha ido mal ¡Lo sentimos!';
}

En la documentación puedes encontrar el listado completo de todos los filtros disponibles.

Conclusión sobre GeneratePress

A nosotros no nos queda duda, GeneratePress es una de las mejores opciones a día de hoy en cuanto a plantillas para WordPress se refiere.

Sumando todo, su fácil uso para usuarios que están empezando, su gran potencia para profesionales, sus addons, su documentación / soporte y todo a un precio prácticamente simbólico hacen que GeneratePress, sea nuestro tema para WordPress favorito.