WPBeginner V6 – En el backstage de nuestro nuevo diseño de sitio

Si ha visitado WPBeginner en las últimas semanas, entonces probablemente haya notado que tenemos un nuevo diseño de sitio. Aunque tiene muchas similitudes con la última, hay muchas que han cambiado detrás de escena. Como prometí en el boletín informativo, quiero compartir su proceso de pensamiento detrás de nuestro rediseño, lo que aprendimos, lo que es nuevo en el sitio y, lo más importante, cómo puede usar algunas de nuestras enseñanzas para mejorar su sitio.

Un pequeño fondo comenzamos WPBeginner en 2009 y, como la mayoría de los nuevos creadores, hemos cambiado el diseño de nuestro sitio cuatro veces en los primeros 3 años.
A medida que mi negocio crecía, me di cuenta de que el rediseño de los sitios web requiere mucho tiempo y recursos que podrían gastar mejor para cumplir nuestra misión principal: ayudar a las pequeñas empresas a desarrollar y competir con las grandes a través de nuestras herramientas, equipo y capacitación. Así que me propuse dedicar toda mi atención a mi misión básica, y nuestro negocio ha crecido enormemente. El último rediseño de WPBeginner se lanzó en 2016 y he sido un largo camino desde entonces. Esto es lo que ha sucedido en los últimos 5 años:
Creamos más de mil tutoriales gratuitos de WordPress en el blog WPBeginner y agregamos cientos de nuevos tutoriales en video en nuestro canal de YouTube.
Hemos lanzado nuestra comunidad WPBeginner Engage en Facebook, que ahora es el grupo de WordPress más grande con más de 80,000 miembros (es gratis para unirse).
Hemos lanzado el WPBeginner Growth Fund para invertir en algunos de nuestros complementos favoritos de WordPress, incluidos MemberPress, bonitos enlaces, formularios formidables, Automator Uncanny y otros 6.
Hemos lanzado dos nuevos complementos de WordPress, Trustulse, una verificación social de WordPress y Raffles, un poderoso complemento de WordPress para competiciones. Para WordPress), Seedprod (Creador del sitio de WordPress Drag & Drop), Smash Balloon (complemento No. 1 para Feed de redes sociales . Afiliados para WordPress).
También compramos cinco complementos de plataforma y infraestructura de WordPress, incluido el famoso WP Mail SMTP (para remediar la entrega del correo electrónico), Búsqueda (complemento de búsqueda de WordPress Strong), descargas digitales fáciles (complemento de comercio electrónico popular para vender la venta de una venta de productos digitales ), Simple Pay (Easy Plugin) WP. para aceptar pagos con tarjeta de crédito) y azúcar del calendario (complemento de eventos simples de WordPress).
Colectivamente, nuestros complementos ahora son utilizados por más de 19 millones de sitios web, y 4 de nuestros complementos están en los primeros 20 complementos de WordPress de todos los tiempos.
Aunque todos estos son grandes logros, tenemos un nuevo conjunto de desafíos que tuvieron que abordarse, para que podamos continuar mejorando y cumpliendo nuestra misión. Esto me lleva a WPBeginner V6. El diseño centrado en descubrir el contenido de WPBeginner comenzó como un simple blog tutorial, pero realmente se ha convertido en Wikipedia para WordPress. Nuestros usuarios nos han dicho repetidamente que cuando querían encontrar una respuesta a sus problemas de WordPress, simplemente buscan la palabra clave en Google y agregan WPBeginner para encontrar la mejor solución. Para ayudar a nuestros lectores a encontrar la respuesta a sus preguntas de WordPress rápidamente, Hicimos que la función de búsqueda se centre en nuestra nueva página inicial.
Ya sea que sea un visitante que esté a punto de buscar en nuestra biblioteca de contenido o en un nuevo lector que haya comenzado a usar WordPress, la página inicial de WPBeginner ahora lo ayuda a encontrar lo que está buscando.

También notará un widget de búsqueda similar en nuestra barra lateral en todas las publicaciones individuales, así como en el encabezado de nuestro sitio al hacer clic en el icono de búsqueda.
Una de las razones por las cuales WPBeginner se ha convertido en el sitio de recursos de WordPress más grande para las no tecnologías es que explicamos las pruebas en inglés simple, paso a paso.

En el nuevo diseño, hemos agregado la función de búsqueda en vivo a nuestra sección Glossary WordPress, por lo que puede familiarizarse fácilmente con la WordPress ordinaria. Esto es prácticamente como un diccionario de WordPress.

Como usuario de WPBeginner, obtiene un acceso exclusivo a los mejores descuentos de WordPress en complementos populares, temas premium, alojamiento y otras herramientas de marketing. Nuestro equipo realmente ha hecho un gran trabajo al negociar las mejores ofertas para usted, y esta sección ha aumentado lo suficiente como para tener más de 100 cupones y ofertas. Debido a la solicitud popular de los usuarios, agregamos una búsqueda en vivo en nuestras ofertas de sección para que pueda rápidamente. Encuentre la mejor oferta para sus productos favoritos de WordPress.
Al ingresar en 2022, una gran prioridad para nosotros es el descubrimiento del contenido. Esto nos ayuda a ofrecer la mejor experiencia de uso, aumenta el tiempo en el sitio, aumenta el número de visualización de páginas y reduce la tasa de rechazo general. Creo que en 2022, la optimización de la experiencia del usuario (UXO) jugará un papel fundamental en el SEO. Si desea superar a sus competidores y obtener una ventaja competitiva, le recomiendo prestar atención.

Compartiré consejos en este artículo sobre cómo puede implementar funciones similares en su sitio, como lo hemos hecho en nuestro nuevo tema. Cómo mejorar la búsqueda de WordPress de la función de búsqueda predeterminada de WordPress no es muy fuerte, por lo que si desea personalizar el algoritmo de clasificación y controlar lo que aparece para cada búsqueda, recomiendo usar el complemento SearchWP. Alternativamente, también puede usar la búsqueda personalizada en Google, que utiliza el algoritmo de Google, pero la desventaja es que Google mostrará anuncios en sus páginas de búsqueda, que no se ve muy bien.
Si desea agregar una búsqueda en vivo a su sitio, como lo hemos hecho en la sección de ofertas o glosario, siga este tutorial sobre cómo agregar el AJAX en vivo a WordPress. Otros tutoriales de búsqueda de WordPress que puede encontrar útiles son cómo crear un formulario de búsqueda personalizado de WordPress y cómo agregar una barra de búsqueda al menú de WordPress. El nuevo menú Mega WordPress Menú que realiza el tema del descubrimiento de contenido, hemos actualizado nuestro viejo WordPress Droppress en nuevos mega menús con más columnas. Esto permite a nuestros nuevos usuarios encontrar nuestro mejor contenido de manera rápida y fácil.

También nos permite resaltar mejor nuestros nuevos productos, las herramientas comerciales gratuitas que hemos construido y muchos más. Cómo agregar un mega menú a WordPress Aunque hemos creado una solución personalizada para WPBeginner, puede seguir este tutorial sobre cómo agregar un menú Mega a WordPress para resaltar mejor sus páginas principales. WordPress Block Editor (finalmente) En 2019, WordPress introdujo el súper poderoso editor de bloques (alias gutenberg) para crear contenido. Inmediatamente comencé a usarlo en mi blog personal, pero dado que WPBeginner usó un tema heredado con muchas funciones codificadas personalizadas, el cambio no fue tan fácil.
Entonces, en los últimos dos años, hemos sido bloqueados para usar el editor clásico en el sitio web de WPBeginner, mientras que todos nuestros sitios más nuevos han recibido las últimas y mejores características del editor de WordPress. Finalmente, con nuestro nuevo tema, ahora podemos usar todas las maravillosas características del editor de bloques de WordPress. Por ejemplo, ahora puedo agregar un muy buen bloque “ya sabes” sin escribir ningún código: WPBGinner – Dato divertido: nuestro equipo ahora ha crecido a más de 200 personas de 39 países diferentes. Estamos contratando para puestos de distancia de tiempo completo. Si está interesado, vea nuestra página de carrera.
También hemos rediseñado completamente algunas de nuestras páginas de destino utilizando el editor de bloques de WordPress. Por ejemplo, consulte nuestra nueva página de destino gratuita con la configuración del blog de WordPress.

También rediseñamos nuestras herramientas comerciales gratuitas utilizando el editor de bloques para resaltar algunas de las herramientas gratuitas recientes que hemos creado.
Continuaremos utilizando SeedProd para crear páginas de destino completamente personalizadas cuando sea necesario, porque es una página adecuada de WordPress & Drop. Aunque ha sido divertido aprender cómo usar Gutenberg para crear una página de destino personalizada, aún es necesario para la configuración antes de que los equipos de marketing puedan crear una página de destino personalizada. Mientras, al usar un complemento de Builder Page, los equipos de marketing pueden crear rápidamente páginas de destino personalizadas, modelos de embudo, etc., sin ayuda del equipo de desarrollo. WordPress Base Team trabaja duro en las funciones de edición de todo el sitio, pero aún necesita mucho trabajo antes de poder competir con las funciones fuertes que obtiene con páginas, como Seedprod, Div o Beaver Builder. Dicho esto, el editor de bloques es muy maravilloso y hay muchos complementos de bloques de WordPress que puede usar para crear elementos de diseño interesantes para mejorar su contenido. Aquí hay otro bloque interesante que nuestro nuevo tema tiene para resaltar los complementos presentados: Seedprod es el generador más amigable de Drag & Drop para principiantes para WordPress. Viene con más de 150 plantillas prefabricadas, y su función de base le permite construir temas de WordPress totalmente personalizados (sin ningún código). Prueba Seedprod hoy »
En las siguientes publicaciones de blog, estoy seguro de que verá más bloques de contenido, tenemos que mejorar aún más el contenido del contenido.La transición de Yoast a Aioseo durante la mayor parte del tiempo, el sitio WPBeginner ha utilizado una versión muy antigua y personalizada del complemento Yoast SEO (V 2.3.5).Para poner en perspectiva, estoy en la versión 17 en este momento.No quería actualizar Yoast porque su equipo eliminó algunas características esenciales que consideraba importantes para SEO.También sentí que el espacio general de SEO WordPress dejó de innovar.Entonces, a principios de 2020, compré Aioseo, el complemento original de SEO todo en uno y puse a mi equipo para renovarlo por completo.
Estoy muy orgulloso del trabajo que ha realizado nuestro equipo y tiene todas las funciones de SEO que necesita para obtener una ventaja competitiva. Al igual que el editor de bloques, nuestros sitios web más nuevos comenzaron a mudarse a Aioseo y comenzaron a ver que su clasificación está mejorando, por lo que estaba ansioso por comenzar a usar WPBeginner. Ahora, utilizamos las últimas y mejores funciones de SEO en todas a un SEO. Ahora tenemos funciones como el mapa del sitio de video para ayudarnos a mejorar nuestra clasificación de contenido de video, el mapa del sitio RSS para ayudar a nuestro contenido a ser módulos SEO más rápidos y avanzados para tener un control más fino sobre el sitio de SEO a nuestro y muchos más. Realmente creo que es el mejor complemento de SEO en el mercado y, lo más importante, tiene un precio justo para las empresas y las pequeñas agencias. Planeo hacer una escritura completa en las siguientes semanas sobre por qué cambié con un desglose de características detalladas, pero mientras tanto, puede probar la versión gratuita de todos en un SEO o puede verificar la versión Pro que tiene todas las funciones más fuertes. Yo uso en WPBeginner. Mejoras de velocidad de WordPress numerosos estudios han demostrado que los sitios web más rápidos mejoran la experiencia del usuario, aumentan el tiempo en el sitio y las conversiones generales. Esta es también la razón por la cual Google ha hecho que la velocidad del sitio sea un factor de clasificación SEO. Ahora, si ha estado viendo el sitio durante algún tiempo, entonces sabe que estoy obsesionado con la optimización del rendimiento. El sitio web de WPBeginner ya era bastante rápido debido a nuestro increíble socio de WordPress SiteGround.
Ofrecen una solución de alojamiento de WordPress muy optimizada, basada en la plataforma de Google Cloud. Y, por supuesto, seguimos las mejores prácticas de SpeedPress, pero con nuestro nuevo diseño de tema, hicimos algunas mejoras de velocidad notables. Aquí están nuestros resultados Velocidad de la página de Google: aquí está el resultado de la página inicial en Gtmetrix y Pingdom:

Y obtuve este resultado a pesar del hecho de que agregamos nuevas secciones, más contenido en la página de inicio, imágenes más amplias, etc. Y antes de preguntar, el sitio web WPBeginner tiene 68 complementos activos. Por lo tanto, es posible que se pregunte cómo logré agregar más contenido al sitio mientras reduce el tamaño de la página y hace todo más rápido. Bueno, eliminé cosas que sentí que ya no necesitábamos y estas son cosas que realmente quiero hacer y más propietarios de sitios web. Esto no solo ayudará a acelerar su sitio, lo que ayuda a clasificar el SEO, sino que reducirá el consumo total de ancho de banda, reducirá los costos y mejorará su huella dactilar de carbono. WordPress WordPress Los comentarios vienen con un servicio de terceros construido llamado gravedad abreviada para el mundo a nivel mundial avatares reconocidos. Esto le permite ver la foto de perfil o el avatar de un usuario cuando deja un comentario en su sitio web de WordPress. El desafío es que les pide a los visitantes a su sitio web que configure una cuenta grave, que la mayoría de los usuarios no. En cambio, su sitio carga el avatar gris del hombre misterioso que no se ve bien.

Ahora suponga que tiene una publicación de blog popular con 50 comentarios en los que solo el 10% de los usuarios tienen una imagen grave y 90% no. Bueno, hay 50 imágenes adicionales que carga su página y que realmente no agrega un valor significativo al contenido. Es por eso que muchos blogs populares han comenzado a deshabilitar Gravatar, y hacemos lo mismo en WPBeginner. Este simple cambio ha mejorado drásticamente el tiempo de carga de la página y la puntuación de velocidad. Eliminando las fuentes personalizadas de terceros seré honesto, nunca he pensado en las fuentes personalizadas en el pasado. Era algo que simplemente se sentía normal e hizo que el sitio se viera bien desde el punto de vista tipográfico, al menos si tiene la suerte de tener un Internet rápido. En el antiguo tema de WPBeginner, utilicé una fuente de Adobe personalizada llamada Proxima Nova, una fuente del icono popular llamado FontaWesome, y la ventana emergente OptInmonster Windows usó Google’s Source Pro. Cuando visité el sitio desde una ubicación lejana, con una mala calidad de Internet, realmente me di cuenta de cuán grande es el impacto en el rendimiento de estas fuentes en la experiencia del usuario. En nuestro nuevo diseño, quería resolver este problema, para que podamos facilitarlos a los estudiantes de países en desarrollo para acceder a WPBeginner, aprender WordPress y desarrollar su presencia en línea. El nuevo tema WPBeginner V6 utiliza las fuentes del sistema predeterminadas, que han recorrido un largo camino. Se ve muy bien en todos los dispositivos y, por supuesto, es muy rápido.

Sin texto sin estilo (fout), sin cambio acumulativo (CLS) y un tiempo de bloqueo significativamente reducido. Si se conecta a la placa de WordPress o usa GitHub, notará que nuestras fuentes son similares, porque ambas plataformas han realizado la transición a las fuentes del sistema anteriormente. Aunque eliminar las fuentes personalizadas puede no ser una solución viable para todos los sitios web de negocios, ciertamente es algo que creen que tanto los diseñadores como los desarrolladores deberían estar atentos cuando se trata de velocidad. Algunas buenas prácticas que pueden ayudar: en lugar de usar dos fuentes separadas para el título y el contenido, considere usar la misma fuente para ambas.

En lugar de usar más pesos y estilos de fuente diferentes, como versiones delgadas, ordinarias, semi -viernes, audaces, extra audaces, negras y luego cursivas de todos, considere reducir los pesos de la fuente a solo dos: ordinarios y audaces.

En lugar de cargar toda la biblioteca de FontaWesome u otra biblioteca de fuentes de iconos, considere agregar SVG directos de los iconos que necesita.
Deshabilitar las fuentes personalizadas en OptinMonster Una vez que el tema fue diseñado y codificado, todavía tuve que resolver otro problema con las fuentes. Las ventanas emergentes de mi sitio y formularios de suscripción de correo electrónico usan OptinMonster y aún cargan las fuentes de Google. Ahora, la desactivación de OptinMonster no era una opción, porque me ayuda a obtener más suscriptores al correo electrónico y aumentar las conversiones de nuestro sitio. Afortunadamente, es una de mis compañías, así que le pedí al equipo de desarrollo una solución para desactivar Google Fonts. Se ha demostrado que no fui el primero en solicitar esta función, y OptinMonster ya tenía una solución API que permite desactivar a Google, sino también cargar cualquier fuente web personalizada. Tengo bastante conocimiento en la tecnología y puedo implementar el pequeño fragmento que el equipo compartió en la documentación, pero sé que muchos de nuestros clientes no lo son. Entonces, ahora nuestro equipo ha construido esta función dentro del generador de campaña (sin codificación). Pero si se siente cómodo con el código y no desea deshabilitar manualmente esta configuración para cada campaña, puede seguir el truco que usa. Primero agregue el siguiente fragmento JS para deshabilitar OptInmonster para cargar cualquier fuente web en su sitio web:

Luego agregue el siguiente CSS al archivo style.css:
Html .campaign * {Font-Family: “Proxima Nova”, Helvetica, “Helvetica Neue”, Arial, Sans-Serif! Importante; }
Por supuesto, no olvide cambiar las fuentes para que coincidan con las fuentes de su sitio. Esto prácticamente aplicará la familia de fuentes anterior a todas Una configuración muy personalizada del caché total W3 en WPBeginner. Aunque hizo su trabajo, no le quedaba bien para el cohete WP que usamos en todos nuestros sitios de productos. Entonces, con este rediseño, finalmente fuimos al cohete WP, que viene con muchas características de velocidad excelentes, especialmente un caché confiable y un archivo mini. Este complemento es crucial si desea mejorar la velocidad de su sitio. Solo una nota breve si usa Thirstyafilates o enlaces bonitos para administrar sus enlaces afiliados, asegúrese de excluirlos de Cache. Simplemente vaya a la pestaña Reglas avanzadas y agregue su babosa de afiliado bajo la configuración de URL de nunca caché.