WPBeginner v6 – Entre bastidores del nuevo diseño de nuestro sitio

Si has visitado WPBeginner en las últimas semanas, probablemente te habrás dado cuenta de que tenemos un nuevo diseño de sitio web. Aunque tiene muchas similitudes con el anterior, hay muchas cosas que han cambiado entre bastidores.

Como prometí en el boletín, quiero compartir el proceso de reflexión que hay detrás de nuestro rediseño, lo que hemos aprendido, las novedades del sitio y, lo que es más importante, cómo puede utilizar algunas de nuestras enseñanzas para mejorar su sitio web.

Algunos antecedentes

Empecé WPBeginner en 2009, y como la mayoría de los nuevos creadores, cambié el diseño del tema de nuestro sitio web cuatro veces en los primeros 3 años.

A medida que mi negocio crecía, me di cuenta de que los rediseños de sitios web consumen mucho tiempo y recursos que podrían emplearse mejor en cumplir nuestro núcleo de misión:

Así que me propuse dedicar toda mi atención a nuestra misión central y nuestro negocio creció enormemente.

El último rediseño de WPBeginner se lanzó en 2016, y hemos recorrido un largo camino desde entonces.

Esto es lo que ha ocurrido en los últimos 5 años:

• Creamos más de mil tutoriales gratuitos de WordPress en el blog WP Beginner y añadimos cientos de nuevos tutoriales en vídeo en nuestro canal de YouTube.
• Lanzamos nuestra comunidad WPBeginner Engage en Facebook, que ahora es el mayor grupo de WordPress en Facebook con más de 80.000 miembros (es gratis unirse).
• Lanzamos el WPBeginner Growth fund para invertir en algunos de nuestros plugins favoritos de WordPress incluyendo MemberPress, Pretty Links, Formidable Forms, Uncanny Automator, y otros 6.
• Lanzamos dos nuevos plugins de WordPress, TrustPulse, un plugin de WordPress de prueba social, y RafflePress, un potente plugin de WordPress para sorteos y concursos.
• Adquirimos cinco plugins de crecimiento para WordPress, incluyendo el famoso AIOSEO (plugin SEO todo en uno para WordPress), SeedProd (editor de arrastrar y soltar para sitios WordPress), Smash Balloon (plugin número 1 para feeds de medios sociales), PushEngage (plugin de notificaciones push para sitios web) y AffiliateWP (plugin de gestión de afiliados para WordPress).
• También adquirimos cinco plugins de plataforma e infraestructura de WordPress, incluyendo el famoso plugin WP Mail SMTP (para corregir la entrega de correo electrónico), SearchWP (potente plugin de búsqueda de WordPress), Easy Digital Downloads (popular plugin de comercio electrónico para vender productos digitales), WP Simple Pay (sencillo plugin para aceptar pagos con tarjeta de crédito) y Sugar Calendar (sencillo plugin de calendario de eventos para WordPress).

En conjunto, nuestros plugins son utilizados por más de 19 millones de sitios web, y 4 de nuestros plugins se encuentran entre los 20 mejores plugins de WordPress de todos los tiempos.

Aunque todos ellos son grandes logros, tenemos una nueva serie de retos que es necesario establecer, para que podamos seguir mejorando y sirviendo a nuestra misión.

Esto me lleva a WPBeginner v6.

Diseño centrado en la descubribilidad de contenidos

WPBeginner empezó como un simple blog de tutoriales, pero se ha convertido en la Wikipedia de WordPress.

Nuestros usuarios nos han dicho en repetidas ocasiones que cuando quieren encontrar una respuesta a sus problemas con WordPress, simplemente buscan en Google la palabra clave y añaden WPBeginner al final para encontrar la mejor solución.

Para ayudar a nuestros lectores a encontrar rápidamente la respuesta a sus preguntas sobre WordPress, hemos dado gran protagonismo a la característica de búsqueda en nuestra nueva página de inicio.

Tanto si eres un visitante recurrente que viene a buscar en nuestra biblioteca de contenidos, como si eres un nuevo lector que acaba de empezar con WordPress, la página de inicio de WPBeginner ahora te facilita encontrar lo que buscas.

También observará un widget de búsqueda similar en nuestra barra lateral en todas las páginas de entradas individuales, así como en la cabecera de nuestro sitio web al hacer clic en el icono de búsqueda.

Una de las razones por las que WPBeginner se ha convertido en el mayor sitio de recursos de WordPress para usuarios sin conocimientos técnicos es porque explicamos debates complejos de WordPress en inglés sencillo, paso a paso.

En el nuevo diseño, hemos añadido la característica de búsqueda en vivo a nuestra sección del glosario de WordPress, para que pueda familiarizarse fácilmente con la jerga común de WordPress. Esto es básicamente como un diccionario de términos de WordPress.

Como usuario de WPBeginner, tendrás acceso exclusivo a los mejores descuentos de WordPress en plugins populares, temas premium, alojamiento y otras herramientas de marketing.

Nuestro equipo realmente ha hecho un gran trabajo negociando las mejores ofertas para usted, y esta sección ha crecido bastante hasta tener más de 100 cupones y ofertas.

Debido a la petición popular de los usuarios, también hemos añadido Live Search en nuestra sección de Ofertas, para que pueda encontrar rápidamente la mejor oferta en sus productos favoritos de WordPress.

De cara a 2022, una de nuestras grandes prioridades es facilitar el descubrimiento de contenidos.

Esto nos ayuda a ofrecer la mejor experiencia de usuario, aumenta el tiempo en el sitio, aumenta las visitas a las páginas y reduce nuestra tasa de rebote general.

Creo que en 2022, la optimización de la experiencia del usuario (UXO) va a desempeñar un perfil fundamental en el SEO.

Si quiere superar a sus competidores y obtener una ventaja competitiva, le recomiendo encarecidamente que preste atención a la UXO.

A lo largo de este artículo te daré consejos sobre cómo puedes implementar características similares en tu sitio, como hemos hecho nosotros en nuestro nuevo tema.

Cómo mejorar la búsqueda en WordPress

La característica de búsqueda por defecto de WordPress no es muy potente, así que si quieres personalizar el algoritmo de clasificación y controlar lo que aparece en cada búsqueda, te recomiendo que utilices el plugin SearchWP.

Como alternativa, también puede utilizar la búsqueda personalizada de sitios de Google, que utiliza el algoritmo de Google, pero el inconveniente es que Google mostrará anuncios en sus páginas de búsqueda, lo que no queda muy bien.

Si quieres añadir una búsqueda en vivo en tu sitio como hemos hecho en la sección de Ofertas o Glosario, sigue esta guía práctica sobre cómo añadir una búsqueda en vivo AJAX en WordPress.

Otros tutoriales sobre búsquedas en WordPress que pueden resultarte útiles son cómo crear un formulario de búsqueda personalizado en WordPress y cómo añadir una barra de búsqueda en el menú de WordPress.

Nuevo Mega Menú de WordPress

Siguiendo con el tema del descubrimiento de contenidos, hemos actualizado nuestros antiguos menús desplegables de WordPress en nuevos Mega Menús multicolumna.

Esto permite a nuestros nuevos usuarios encontrar rápida y fácilmente nuestros mejores contenidos.

También nos permite destacar mejor nuestros nuevos productos, las herramientas empresariales gratuitas que hemos creado y mucho más.

Cómo añadir un Mega Menú en WordPress

Aunque hemos creado una solución a medida para WPBeginner, puede seguir este tutorial sobre cómo añadir un mega menú en WordPress para destacar mejor sus páginas principales.

El editor de bloques de WordPress (por fin)

En 2019, WordPress introdujo el súper potente editor de bloques (también conocido como Gutenberg) para crear contenido.

Inmediatamente empecé a usarlo en mi blog personal, pero como WPBeginner estaba usando un tema heredado con un montón de características codificadas a medida, el cambio no fue tan fácil.

Así que durante los últimos dos años, nos quedamos atascados usando el Editor Clásico en el sitio WPBeginner mientras que todos nuestros sitios web más nuevos obtuvieron las últimas y mejores características del editor de bloques de WordPress.

Finalmente con nuestro nuevo tema, ahora podemos utilizar todas las impresionantes características del editor de bloques de WordPress.

Por ejemplo, ahora puedo añadir un bloque “Sabías que” muy chulo sin escribir ningún código:

También rediseñamos por completo varias de nuestras páginas de destino utilizando el editor de bloques de WordPress.

Por ejemplo, marque / compruebe nuestra nueva página de destino de configuración gratuita de blogs de WordPress.

También hemos rediseñado nuestras herramientas empresariales gratuit as utilizando el editor de bloques para destacar algunas de las herramientas gratuitas que hemos creado recientemente.

Seguiremos utilizando SeedProd para crear páginas de destino completamente personalizadas cuando sea necesario, ya que es un editor de arrastrar y soltar propio de WordPress.

Si bien fue divertido aprender a usar Gutenberg para crear páginas de destino personalizadas, aún requiere MUCHO código para la configuración antes de que los equipos de marketing puedan crear una página de destino personalizada.

Mientras que cuando se utiliza un plugin maquetador de páginas, los equipos de marketing pueden crear rápidamente páginas de destino personalizadas, disposiciones de embudo, etc. sin ninguna ayuda del equipo de desarrollo.

El núcleo de WordPress está trabajando duro en las características de edición completa del sitio, pero todavía necesita mucho trabajo antes de que pueda competir con las potentes características que se obtienen con los constructores de páginas como SeedProd, Divi, o Beaver Builder.

Dicho esto, el editor de bloques es bastante impresionante, y hay un montón de plugins de bloques de WordPress que puede utilizar para crear elementos de diseño fresco para mejorar su contenido.

Este es otro bloque interesante que nuestro nuevo tema tiene para resaltar los plugins destacados:

SeedProd es el editor de arrastrar y soltar más fácil de usar para WordPress. Viene con más de 150 plantillas pre-hechas, y su característica de maquetador de temas le permite crear temas de WordPress completamente personalizados (sin ningún código). Pruebe SeedProd hoy “

En las próximas entradas del blog, seguro que verás más bloques de diseño de contenidos que tenemos para mejorar aún más la legibilidad de nuestros contenidos.

Cambiar de Yoast a AIOSEO

Durante mucho tiempo, el sitio WPBeginner estaba usando una versión muy antigua y personalizada del plugin Yoast SEO (v 2.3.5).

Para ponerlo en perspectiva, ahora mismo están en la versión 17.

No quería actualizar Yoast porque su equipo había quitado algunas características esenciales que yo consideraba importantes para el SEO.

También sentí que el espacio SEO de WordPress en general había dejado de innovar.

Así que a principios de 2020 adquirimos AIOSEO, el original plugin de SEO todo en uno, e hice que mi equipo lo renovara por completo.

Estoy superorgulloso del trabajo que ha hecho nuestro equipo, y tiene todas las características SEO necesarias para obtener una ventaja competitiva.

Al igual que el editor de bloques, nuestros sitios web más recientes empezaron a cambiar a AIOSEO y empezaron a ver cómo mejoraba su posicionamiento, así que estaba ansioso por empezar a utilizarlo en WPBeginner.

Ahora, estamos utilizando la última y mejor de las características de SEO de All in One SEO.

Ahora tenemos características como mapa del sitio de vídeo para ayudar a impulsar nuestro contenido rankings con videos, RSS mapa del sitio para ayudar a nuestro contenido indexado más rápido, módulos avanzados de SEO para tener un control más fino sobre nuestro sitio SEO, y toneladas más.

Creo sinceramente que es el mejor plugin de SEO del mercado y, lo que es más importante, tiene un precio justo para pequeñas empresas y agencias.

Tengo la intención de hacer un escrito completo en las próximas semanas acerca de por qué cambiamos con un desglose detallado de características, pero mientras tanto, puede probar la versión gratuita de All in One SEO, o comprobar la versión Pro que tiene todas las características potentes que estoy usando en WPBeginner.

Mejoras en la velocidad de WordPress

Numerosos estudios han demostrado que los sitios web más rápidos mejoran la experiencia del usuario, aumentan el tiempo de permanencia en el sitio y las conversiones en general.

Esta es también la razón por la que Google hizo de la velocidad del sitio web un factor de clasificación SEO.

Si llevas un tiempo siguiendo este sitio, sabrás que estoy obsesionado con la optimización del rendimiento.

El sitio de WPBeginner ya era bastante rápido gracias a nuestro increíble socio de alojamiento de WordPress SiteGround. Ofrecen una solución de alojamiento de WordPress altamente optimizada construida sobre la plataforma en la nube de Google.

Y, por supuesto, seguíamos las mejores prácticas de velocidad de WordPress, pero con el nuevo diseño de nuestro tema hemos conseguido varias mejoras de velocidad notables.

Aquí están los resultados de Google Page Speed:

Aquí está el resultado de la página de inicio de GTMetrix y Pingdom:

Y obtuvimos este resultado a pesar de añadir nuevas secciones, más contenido a la página de inicio, imágenes más amplias, etc.

Y antes de que preguntes, el sitio WPBeginner tiene 68 plugins activos actualmente.

Tal vez te preguntes cómo he conseguido añadir más contenido al sitio y, al mismo tiempo, reducir el tamaño de la página y hacerlo todo más rápido.

Bueno, he quitado cosas que creía que ya no necesitábamos, y estas son algunas cosas que realmente quiero que más propietarios de sitios web consideren hacer también.

Esto no solo ayudará a acelerar su sitio web, lo que favorece las clasificaciones SEO, sino que reducirá el consumo total de ancho de banda, reducirá los costes y mejorará la huella de carbono de su sitio web.

Desactivar Gravatar de los comentarios de WordPress

WordPress incorpora un servicio de terceros llamado Gravatar, abreviatura de Globally Recognized Avatars (Avatares Globalmente Reconocidos).

Esto le permite ver la foto de perfil o avatar de un usuario cuando deja un comentario en su sitio WordPress.

El reto es que requiere que los visitantes de su sitio web para configurar una cuenta de Gravatar que la mayoría de los usuarios no lo hacen. Así que, en lugar de eso, tu sitio web solo carga el avatar gris del hombre misterioso, que no tiene buena pinta.

Ahora digamos que tienes una entrada de blog popular con 50 comentarios donde solo el 10% de los usuarios tienen una imagen de Gravatar y el 90% no. Bien, eso son 50 imágenes adicionales que tu página está cargando y que realmente no añaden un valor significativo al contenido.

Por eso muchos blogs populares han empezado a desactivar Gravatar, y nosotros estamos haciendo lo mismo en WPBeginner.

Este sencillo cambio ha mejorado drásticamente los tiempos de carga de nuestras páginas y la velocidad del sitio.

Eliminar fuentes personalizadas de terceros

Voy a ser sincero, nunca me lo había pensado dos veces acerca de las fuentes personalizadas en el pasado.

Era algo que parecía normal y que hacía que el sitio se viera bien desde el punto de vista tipográfico, al menos si se tiene la suerte de contar con un Internet rápido.

En el antiguo tema WPBeginner, utilizábamos una fuente personalizada de Adobe llamada Proxima Nova, una popular fuente de iconos llamada FontAwesome, y nuestras ventanas emergentes de OptinMonster utilizaban la Source Sans Pro de Google fonts.

Cuando visité el sitio desde una ubicación remota con mala calidad de Internet, me di cuenta realmente del gran impacto que estas fuentes tienen en el rendimiento de la experiencia del usuario.

En nuestro nuevo diseño, he querido resolver este problema para facilitar a los estudiantes y empresarios de los países en desarrollo el acceso a WPBeginner, el aprendizaje de WordPress y el crecimiento de su presencia en línea.

El nuevo tema WPBeginner v6 utiliza el sistema de fuentes por defecto que han recorrido un largo camino. Se ven muy bien en todos los dispositivos, y por supuesto es súper rápido.

Sin destellos de texto sin estilo (FOUT), sin desplazamiento acumulativo de la estructura / disposición / diseño / plantilla y con una reducción significativa del tiempo de bloqueo.

Si accedes / accedes al escritorio de WordPress o utilizas Github, entonces notarás que nuestras fuentes son similares porque ambas plataformas hicieron el cambio a fuentes de sistema antes.

Aunque puede que la eliminación de los tipos de letra personalizados no sea una solución viable para todos los sitios web empresariales, creo que es algo que tanto los diseñadores como los desarrolladores deberían tener en cuenta cuando se trata de la velocidad.

Algunas buenas prácticas que pueden ayudar:

• En lugar de utilizar dos fuentes distintas para el encabezado y el contenido, considere la posibilidad de utilizar la misma fuente para ambos.
• En lugar de utilizar varios pesos y estilos de fuente diferentes, como fino, normal, semibold, negrita, negrita extra, negro, y luego la versión cursiva de todos estos, considere la posibilidad de reducir los pesos de la fuente a solo dos: normal y negrita.
• En lugar de cargar toda la biblioteca de fuentes FontAwesome u otra biblioteca de fuentes de iconos, considere la posibilidad de añadir SVG directos de los iconos que necesite.

Desactivar fuentes personalizadas en OptinMonster

Una vez diseñado y codificado el tema, aún tenía que resolver un problema más con las fuentes.

Las ventanas emergentes de mi sitio web y los formularios de suscripción por correo electrónico utilizan OptinMonster, y seguían cargando fuentes de Google.

Ahora desactivar OptinMonster no era una opción ya que me ayuda a conseguir más suscriptores de correo electrónico y aumentar las conversiones de nuestro sitio web.

Por suerte, es una de mis empresas, así que pedí al equipo de desarrollo una solución para desactivar las fuentes de Google.

Resultó que yo no era el primero que solicitaba esta característica, y OptinMonster ya tenía una solución API que permite no solo desactivar las fuentes de Google, sino también cargar cualquier fuente web personalizada que se desee.

Tengo bastantes conocimientos técnicos y puedo aplicar el pequeño fragmento de código que el equipo compartió en la documentación, pero sé que muchos de nuestros clientes no los tienen.

Nuestro equipo ha integrado esta característica en el maquetador de campañas (sin necesidad de código).

Pero si te sientes cómodo con el código y no quieres establecer manualmente este conmutador para cada campaña, puedes seguir el truco que estoy utilizando.

Primero añada el siguiente fragmento de código JS para desactivar que OptinMonster cargue cualquier fuente web en su sitio:

<script type="text/javascript">
document.addEventListener('om.Scripts.init', function(event) {
event.detail.Scripts.enabled.fonts= false;
});
</script>

A continuación, añada el siguiente CSS en su archivo style.css:

html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; }

Por supuesto, no olvide cambiar las fuentes para que coincidan con las fuentes de su sitio web. Esto básicamente aplicará la familia de fuentes anterior a todas las campañas de OptinMonster que se carguen en su sitio.

Cambio de W3 Total Cache a WP Rocket

Durante mucho tiempo, estuve ejecutando una configuración altamente personalizada del plugin W3 Total Cache en WPBeginner.

Aunque cumplía su cometido, no era rival para WP Rocket, que hemos estado utilizando en todos nuestros sitios de productos.

Así que con este rediseño, finalmente me cambié a WP Rocket, que viene con un montón de características de gran velocidad del sitio web, sobre todo una fiable precarga de caché y minimización de archivos.

Este plugin es crucial si quieres mejorar la velocidad de tu sitio web.

Sólo una nota rápida si está utilizando ThirstyAffiliates o Pretty Links para gestionar sus enlaces de afiliado, a continuación, asegúrese de que los excluye de ser almacenados en caché.

Simplemente vaya a la pestaña de Reglas Avanzadas y añada su slug de afiliado bajo el ajuste de URLs nunca almacenadas en caché.

Si no haces esto y tienes activada la precarga de caché, WP Rocket intentará cachear tus enlaces de afiliado ya que parecen enlaces internos.

Esto puede inflar artificialmente su recuento de clics y afectar a sus métricas de afiliación.

He pedido al equipo de WP Rocket que vean si pueden detectar automáticamente los plugins de afiliados populares y pre-llenar la etiqueta URL excluida para hacerlo más amigable para los principiantes, y espero que implementen la sugerencia.

¿Qué viene a continuación?

Tengo grandes planes para 2022, por eso quería poner en marcha el nuevo diseño del sitio antes de finales de año.

Estamos planeando lanzar una nueva sección en WPBeginner acerca de la cual muchos de ustedes han estado preguntando durante los últimos 2 años.

Está al caer, y espero lanzarlo a principios del segundo trimestre de 2022.

También tengo previsto experimentar más con el nuevo editor de bloques para mejorar la experiencia de lectura.

Por lo demás, no pierdas de vista nuestro canal de YouTube, porque vamos a hacer cosas muy interesantes en 2022.

Como siempre, quiero agradeceros a todos vuestro continuo apoyo y comentarios a lo largo de los años.

Atentamente,
Syed Balkhi
Fundador de WPBeginner