WPBeginner v6: detrás de escena de nuestro nuevo diseño de sitio web

Si ha estado en WPBeginner en las últimas semanas, es posible que haya notado que tenemos un nuevo diseño de sitio web. Si bien comparte muchas similitudes con el anterior, ha habido muchos cambios detrás de escena.

Como prometí en el boletín, quiero compartir con ustedes el proceso de pensamiento detrás de nuestro rediseño, lo que hemos aprendido, el nuevo contenido del sitio web y, lo más importante, cómo podemos utilizar nuestro conocimiento para mejorar su sitio web.

Un poco de historia

Comencé WPBeginner en 2009 y, como la mayoría de los desarrolladores nuevos, cambié el diseño de nuestro sitio web. Cuatro veces En los primeros 3 años.

A medida que el negocio crecía, me di cuenta de que rediseñar el sitio web requeriría mucho tiempo y recursos, y que el tiempo y los recursos podrían haberse utilizado mejor para lograr nuestra misión principal:

Por lo tanto, concentro toda mi atención en nuestra tarea principal y nuestro negocio se ha desarrollado con fuerza.

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

Esto es lo que sucedió en los últimos 5 años:

• Hemos creado miles de tutoriales gratuitos de WordPress en el blog WPBeginner y hemos agregado cientos de nuevos tutoriales en vídeo a nuestro blog. canal de Youtube.
• Tenemos el nuestro Participación de principiantes de WPB La comunidad en Facebook es ahora el grupo de WordPress en Facebook más grande con más de 80,000 miembros (gratis para unirse).
• Creamos el Fondo de crecimiento WPBeginner para invertir en algunos de nuestros complementos de WordPress más populares, incluidos MemberPress, Pretty Links, Formidable Forms, Uncanny Automator y 6 más.
• Hemos introducido dos nuevos complementos de WordPress, Pulso de confianza, Un complemento de prueba social de WordPress y Prensa de lotería, Un poderoso complemento de concurso y sorteos de WordPress.
• Adquirimos cinco complementos de crecimiento de WordPress, incluido el famoso Iosia (Un complemento de SEO para WordPress), Productos de semillas (Arrastrar y soltar el creador de sitios de WordPress), Rompe el globo (Complemento de alimentación de redes sociales n. ° 1), Impulsar la participación (Complemento de notificaciones push web) y WP afiliado (Se aplica al complemento de administración de afiliados de WordPress).
• También adquirimos cinco plataformas de WordPress y complementos de infraestructura, incluido el famoso Complemento WP Mail SMTP (Correcta capacidad de entrega de correos electrónicos), Buscar WP (Complemento de búsqueda de WordPress de gran alcance), Descarga digital sencilla (Complemento de comercio electrónico popular para vender productos digitales), Pago fácil WP (Un complemento simple para aceptar pagos con tarjeta de crédito) y Calendario de azúcar (Complemento de calendario de eventos simple para WordPress).

Generalmente nuestro complemento se usa ahora Más de 19 millones de sitios webY nuestros 4 complementos se encuentran entre los 20 mejores complementos de WordPress de todos los tiempos.

Si bien todos estos son grandes logros, todavía tenemos una serie de nuevos desafíos que resolver para que podamos continuar mejorando y sirviendo a nuestra misión.

Eso me recuerda a WPBeginner v6.

Diseño con un enfoque en la posibilidad de encontrar contenido.

WPBeginner comenzó como un simple blog tutorial, pero realmente se ha convertido en la Wikipedia de WordPress.

Nuestros usuarios nos han dicho repetidamente que si quieren encontrar la respuesta a una pregunta de WordPress, todo lo que necesitan hacer es buscar palabras clave en Google y agregar WPBeginner al final para encontrar la mejor solución.

Para que nuestros lectores puedan encontrar rápidamente respuestas a sus preguntas sobre WordPress, hemos hecho de la función de búsqueda el foco de nuestra nueva página de inicio.

Ya sea que sea un cliente recurrente que navega por nuestra biblioteca de contenido o un nuevo lector que acaba de comenzar a usar WordPress, la página de inicio de WPBeginner ahora le facilita encontrar lo que está buscando.

Si presiona el ícono de búsqueda, también notará un widget de búsqueda similar en la barra lateral de todas nuestras páginas de publicaciones individuales y en el título de nuestro sitio web.

Una de las razones por las que WPBeginner se ha convertido en el sitio de recursos de WordPress más grande para el usuario no experto en tecnología es porque explicamos los temas complejos de WordPress paso a paso en un lenguaje sencillo.

En el nuevo diseño, hemos agregado una función de búsqueda en tiempo real al área del glosario de WordPress para que pueda familiarizarse fácilmente con los términos comunes de WordPress. Esto es básicamente como un diccionario de términos de WordPress.

Como usuario de WPBeginner, tiene acceso exclusivo a los mejores descuentos de WordPress en complementos populares, temas premium, hosting y otras herramientas de marketing.

Nuestro equipo hace un gran trabajo negociando las mejores ofertas para usted y esta sección ha recorrido un largo camino con más de 100 cupones y ofertas.

En respuesta a las solicitudes populares, también hemos agregado la búsqueda en tiempo real a nuestra área de ofertas para que pueda encontrar rápidamente las mejores ofertas para sus productos favoritos de WordPress.

A partir de 2022, nuestra principal prioridad será la búsqueda de contenido.

Esto nos ayuda a brindar la mejor experiencia de usuario, aumentar el tiempo que se pasa en el sitio web, aumentar las visitas a la página y reducir la tasa de rebote general.

Creo que en 2022, la optimización de la experiencia del usuario (UXO) jugará un papel clave en el SEO.

Si desea vencer a sus competidores y obtener una ventaja competitiva, le recomiendo que preste atención a las UXO.

En este artículo, daré consejos sobre cómo implementar una funcionalidad similar en su sitio web como lo hicimos en el nuevo tema.

Cómo mejorar la búsqueda de WordPress

La funcionalidad de búsqueda estándar de WordPress no es muy poderosa. Entonces, si desea personalizar el algoritmo de clasificación y controlar el contenido que se muestra para cada búsqueda, le recomiendo usar Complemento SearchWP.

Alternativamente, puede usar la búsqueda de sitios personalizados de Google con el algoritmo de Google, pero la desventaja es que Google mostrará anuncios en su página de búsqueda que no se ven bien.

Si desea agregar la búsqueda en tiempo real a su sitio web, como hicimos en la sección Transacciones o en el Glosario, siga este tutorial para aprender cómo agregar la búsqueda en tiempo real AJAX en WordPress.

Otros tutoriales de búsqueda de WordPress que pueden resultarle útiles incluyen la creación de un formulario de búsqueda personalizado de WordPress y la adición de una barra de búsqueda al menú de WordPress.

Nuevo supermenú de WordPress

Siguiendo el tema de la búsqueda de contenido, tenemos el antiguo El menú desplegable de WordPress se actualizó a un nuevo supermenú de varias columnas.

Esto permite a nuestros nuevos usuarios encontrar nuestro mejor contenido de forma rápida y sencilla.

También nos permite destacar mejor nuestros nuevos productos, las herramientas comerciales gratuitas que desarrollamos y más.

Cómo agregar un súper menú en WordPress

Aunque creamos una solución personalizada para WPBeginner, puede seguir este tutorial para aprender cómo agregar un menú grande en WordPress para que su página de inicio se destaque mejor.

Editor de bloques de WordPress (final)

En 2019, WordPress lanzó un editor de bloques súper poderoso (también conocido como Gutenberg) para crear contenido.

Comencé el mío de inmediato Blog personalPero dado que WPBeginner usa un tema antiguo con muchas funciones de codificación personalizadas, el cambio no es fácil.

Entonces, durante los últimos dos años, hemos estado usando el editor clásico en el sitio web WPBeginner, y todos nuestros sitios web más nuevos tienen WordPress para las funciones más recientes y poderosas del editor de bloques.

Con nuestro nuevo tema, finalmente podemos usar todas las excelentes funciones del editor de bloques de WordPress.

Por ejemplo, ahora puedo agregar un bloque "¿Sabías?" Muy bueno sin escribir ningún código:

También hemos rediseñado por completo varias páginas de destino con el editor de bloques de WordPress.

Por ejemplo, consulte nuestra nueva página de registro gratuita para configurar blogs de WordPress.

También hemos rediseñado nuestras herramientas comerciales gratuitas con el editor de bloques para resaltar algunas de las herramientas gratuitas que desarrollamos recientemente.

Lo seguiremos usando Productos de semillas Se utiliza para crear páginas de inicio de sesión totalmente personalizadas si es necesario, ya que es un creador de páginas de WordPress conveniente de arrastrar y soltar.

Si bien aprender a usar Gutenberg para crear una página de destino personalizada es divertido, todavía hay mucha programación por hacer para configurarla antes de que el equipo de marketing pueda crear una página de destino personalizada.

Y si usa el complemento Page Builder, el equipo de marketing puede crear rápidamente páginas de destino personalizadas, diseños de embudos, etc.sin la ayuda del equipo de desarrollo.

El equipo central de WordPress está trabajando arduamente para desarrollar funciones completas de edición de sitios, pero aún requiere mucho trabajo competir con las poderosas funciones que obtiene de los creadores de páginas, tales como: Productos de semillas, Divi o Beaver Builder.

Aparte de eso, el editor de bloques es excelente y hay muchos complementos de bloques de WordPress que puede usar para crear elementos de diseño geniales para mejorar su contenido.

Este es otro bloque interesante de nuestros nuevos complementos destacados que destacan el tema:

En las siguientes publicaciones del blog, en mi opinión, verá más bloques de diseño relacionados con el contenido que necesitamos para mejorar aún más la legibilidad del contenido.

Cambiar de Yoast a AIOSEO

Durante mucho tiempo, el sitio WPBeginner utilizó una versión personalizada muy antigua del complemento Yoast SEO (v 2.3.5).

Desde la perspectiva correcta, ahora está utilizando la 17ª edición.

No quiero actualizar Yoast porque su equipo eliminó algunas características básicas que creo que son importantes para el SEO.

También siento que todo el espacio de SEO de WordPress ha dejado de innovar.

Así que lo adquirimos a principios de 2020. Iosia, El complemento SEO todo en uno original, le pedí a mi equipo que lo reinventara por completo.

Me enorgullece el trabajo de nuestro equipo, que tiene todas las funciones de SEO que necesita para obtener una ventaja competitiva.

Al igual que el editor de bloques, nuestro nuevo sitio web comenzó a moverse a AIOSEO y a mejorar su clasificación, por lo que me encantaría usarlo en WPBeginner.

Ahora estamos utilizando las últimas y más potentes funciones de SEO de All in One SEO.

Ahora tenemos características como mapas de sitios de video que pueden mejorar la clasificación del contenido de video, los mapas de sitio RSS pueden ayudar a que nuestro contenido se indexe más rápido, los módulos de SEO avanzados pueden proporcionar un control más preciso sobre el SEO de nuestros sitios web, etc.

Realmente creo que es el mejor complemento de SEO que existe y lo más importante es que el precio es justo para las pequeñas empresas e instituciones.

Planeo escribir un artículo completo en las próximas semanas explicando por qué cambiamos a desgloses detallados de funciones, pero mientras tanto, puede intentar Versión gratuita de optimización de motor de búsqueda todo en uno, O mira Edición profesional Tiene todas las potentes funciones que utilizo en WPBeginner.

Aumento de la velocidad de WordPress

Diversos estudios han demostrado que un sitio web más rápido puede mejorar la experiencia del usuario, aumentar el tiempo que pasa en el sitio web y aumentar la tasa de conversión general.

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

Si ha estado siguiendo el sitio durante mucho tiempo, sabrá que estoy muy intrigado por el ajuste de rendimiento.

Gracias a nuestro excelente socio de alojamiento de WordPress SiteGround, el sitio web de WPBeginner ya es muy rápido. Ofrecen soluciones de alojamiento de WordPress altamente optimizadas basadas en la plataforma Google Cloud.

Por supuesto, seguimos las mejores prácticas de velocidad de WordPress, pero con nuestro nuevo diseño de tema hemos realizado varias mejoras de velocidad significativas.

Este es nuestro resultado de velocidad de página de Google:

Este es el resultado de la página de inicio de GTMetrix y Pingdom:

Obtuvimos este resultado a pesar de agregar nuevas secciones, más contenido en la página de inicio, imágenes más amplias, etc.

Antes de preguntar, el sitio web de WPBeginner tiene 68 complementos activos Por ahora.

Quizás se esté preguntando cómo reduje el tamaño de la página y aceleré todo mientras agregué más contenido al sitio.

Bueno, borré cosas que creo que ya no necesitamos y espero Realmente, más propietarios de sitios web están considerando lo mismo.

Esto no solo ayudará a acelerar su sitio web, lo que se sumará a las clasificaciones de SEO, sino que también reducirá el consumo general de ancho de banda, reducirá los costos y mejorará la huella de carbono de su sitio web.

Desactivar Gravatar de los comentarios de WordPress

WordPress viene con un servicio de terceros integrado llamado Gravatar, que significa Avatares reconocidos mundialmente.

Esto le permite ver las imágenes de perfil o los avatares de los usuarios cuando publican comentarios en su sitio de WordPress.

El desafío es que los visitantes de su sitio web deben configurar una cuenta de Gravatar, que la mayoría de los usuarios no necesitan. Por lo tanto, su sitio web solo se cargará con avatares grises de personas misteriosas que no se ven bien.

Por ejemplo, supongamos que tiene una publicación de blog popular con 50 comentarios, de los cuales solo el 10% de los usuarios tiene imágenes de Gravatar y el 90% no tiene ninguna. Bueno, aquí están las 50 imágenes adicionales que carga su página, no agregan ningún valor apreciable al contenido.

Debido a esto, muchos blogs populares han comenzado a deshabilitar Gravatar y nosotros estamos haciendo lo mismo en WPBeginner.

Este simple cambio ha mejorado significativamente el tiempo de carga de nuestra página y la puntuación de velocidad del sitio web.

Eliminar la fuente personalizada de terceros

Para ser honesto, nunca antes había pensado en fuentes personalizadas.

Esto es algo que se siente normal, al menos si tiene la suerte de tener Internet rápido, entonces el sitio se ve bien tipográficamente.

En el antiguo tema WPBeginner, tenemos una fuente personalizada de Adobe llamada Proxima Nova, una popular fuente de iconos llamada FontAwesome, y la nuestra OptinMonster La ventana emergente utiliza Source Sans Pro con Google Fonts.

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

En nuestro nuevo diseño, quiero resolver este problema para que podamos brindar a los estudiantes y propietarios de negocios en países en desarrollo un acceso fácil a WPBeginner, aprender WordPress y expandir su influencia en línea.

El nuevo tema WPBeginner v6 utiliza las fuentes estándar del sistema que han logrado avances significativos. Se ven geniales dispositivos, por supuesto que es súper rápido.

No hay parpadeo de texto sin formato (FOUT), ningún desplazamiento de diseño acumulativo (CLS) y un tiempo de bloqueo significativamente reducido.

Si inicia sesión en el panel de WordPress o usa Github, encontrará que nuestras fuentes son similares, ya que ambas plataformas cambiaron a fuentes del sistema anteriormente.

Si bien la eliminación de fuentes personalizadas puede no ser una solución viable para todos los sitios web comerciales, creo que los diseñadores y desarrolladores deberían prestarle atención en términos de velocidad.

Algunas mejores prácticas que pueden ayudar:

• En lugar de usar dos fuentes diferentes para el título y el contenido, considere usar la misma fuente para ambos.
• En lugar de utilizar varias fuentes y estilos diferentes, p. Ej.
• En lugar de cargar todo el FontAwesome u otra biblioteca de fuentes de símbolos, considere agregar un SVG directo del símbolo que necesita.

Deshabilitar fuentes personalizadas en OptinMonster

Una vez que el tema está diseñado y codificado, hay un problema de escritura más que tengo que resolver.

Usando la ventana emergente de mi sitio web y el formulario de suscripción por correo electrónico OptinMonsterY todavía están cargando fuentes de Google.

Desactivar OptinMonster actualmente no es una opción, ya que me ayudará a obtener más suscriptores de correo electrónico y aumentar la tasa de conversión de nuestro sitio web.

Afortunadamente, es una de mis empresas, así que le pedí al equipo de desarrollo una solución para desactivar Google Fonts.

Resulta que no soy el primero en solicitar esta función y tengo OptinMonster Hay una solución API Esto no solo desactiva las fuentes de Google, sino que también carga todas las fuentes web deseadas definidas por el usuario.

Soy bastante experto en tecnología y puedo implementar pequeños fragmentos que el equipo dividirá en el documento, pero sé que muchos de nuestros clientes no lo son.

Ahora nuestro equipo ha incorporado esta función en el Creador de actividades (no se requiere codificación).

Sin embargo, si está satisfecho con el código y no desea desactivar manualmente esta configuración para cada campaña, puede seguir el truco que utilicé.

Primero, agregue el siguiente fragmento de código JS para evitar que las fuentes web de OptinMonster se carguen en su sitio web:

A continuación, agregue el siguiente CSS al archivo style.css:

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

Por supuesto, no olvide hacer coincidir la fuente con la fuente de su sitio web. Básicamente, esto se aplica a todas las campañas de OptinMonster que se cargan en su sitio web utilizando la familia de fuentes mencionada anteriormente.

Cambiar de W3 Total Cache a WP Rocket

Durante mucho tiempo, he estado ejecutando la configuración del complemento W3 Total Cache altamente personalizada en WPBeginner.

Mientras hace su trabajo, no puede competir con el WP Rocket que usamos en todas las páginas de productos.

Entonces, a través de este rediseño, eventualmente cambié a WP Rocket, que tiene muchas características de velocidad de sitios web excelentes, particularmente una precarga de caché confiable y reducción de archivos.

Si desea aumentar la velocidad de su sitio web, este complemento es esencial.

Si está utilizando ThirstyAffiliates o Pretty Links para administrar sus enlaces de afiliados, explíquelos rápidamente y asegúrese de guardarlos en caché.

Simplemente vaya a la pestaña "Reglas avanzadas" y agregue su slug de afiliado en la configuración "Nunca almacenar en caché la URL".

Si no lo hace y la precarga de caché está habilitada, WP Rocket intentará almacenar en caché sus enlaces de afiliados, ya que parecen enlaces internos.

Esto puede aumentar artificialmente sus clics y afectar sus métricas de membresía.

Le pregunté al equipo de WP Rocket si podían detectar automáticamente los complementos de afiliados populares y rellenar previamente las etiquetas de URL excluidas para que sea más amigable para los principiantes y espero que implementen esta recomendación.

¿Que sigue?

Tengo planes ambiciosos para 2022, por lo que espero lanzar un nuevo diseño de sitio web al mercado a finales de este año.

Estamos planeando tener una nueva sección sobre WPBeginner y muchos de ustedes han estado haciendo esta pregunta durante los últimos 2 años.

Saldrá pronto y espero lanzarlo a principios del segundo trimestre de 2022.

También planeo hacer más experimentos en el nuevo editor de bloques para brindarle una mejor experiencia de lectura en general.

De lo contrario, preste mucha atención Nuestro canal de YouTube Porque haremos cosas realmente interesantes allí en 2022.

Como siempre, me gustaría agradecerles a todos por su continuo apoyo y comentarios a lo largo de los años.

Con los mejores deseos,
dijo Barki |
Fundador de WPBeginner