Por qué reconstruimos nuestro sitio web desde cero
Una mirada al interior de nuestra necesaria evolución y las lecciones aprendidas durante el proceso de rediseño.
Sin datos de tarjeta
1) Por qué creamos un nuevo sitio web y no podíamos simplemente “cambiar de tema”
Cuando identificamos por primera vez la necesidad de un cambio, la tarea parecía sencilla: “Cambiar el bloque superior y hacer que la llamada a la acción sea más eficaz”. A primera vista, esto podría parecer una solución rápida, pero pronto nos dimos cuenta de que esta pequeña tarea revelaba problemas subyacentes mucho más graves con la estructura y el diseño del sitio. El problema no era solo un bloque; era toda la arquitectura del sitio que necesitaba una revisión.
Nuestro sitio web se había construido con el tiempo, con diferentes páginas agregadas usando varios diseños y disposiciones, sin ningún tema o plantilla unificadora. Cada página tenía un diseño único, lo que podría sonar creativo pero condujo a un problema importante: la inconsistencia. Si seguíamos adelante y hacíamos un nuevo diseño solo para el bloque superior mientras manteníamos el resto del sitio como estaba, significaría actualizar manualmente ese bloque en más de 700 páginas y publicaciones. Peor aún, este proceso manual tendría que repetirse cada vez que quisiéramos hacer cambios en el futuro. Imagine la ineficiencia de tener que revisar cientos de páginas, asegurándose de que cada una tuviera las últimas actualizaciones. Rápidamente quedó claro que continuar trabajando con el sitio antiguo no sería sostenible.
Más allá de la logística de actualizar cada página, tuvimos que considerar la experiencia general del usuario. Hoy en día, los usuarios esperan experiencias fluidas y coherentes cuando visitan un sitio web. Si se desplazan hacia abajo en una página y ven que el diseño es inconsistente (cada bloque utiliza estilos diferentes), eso crea una impresión desarticulada y poco profesional. Peor aún, cuando un usuario pasa de una página a otra y nota que el diseño y la disposición son completamente diferentes, eso refuerza la sensación de desorden.
La inconsistencia se extendía más allá del diseño. Muchas de las imágenes del sitio estaban desactualizadas, tenían un estilo deficiente o incluso estaban generadas de manera inadecuada por redes neuronales. Estas imágenes no se ajustaban a los estándares de diseño modernos y reemplazarlas era otra tarea abrumadora. El uso de imágenes deficientes afectaba negativamente la calidad general del sitio y dejaba a los usuarios con una impresión negativa del producto o servicio que ofrecíamos.
No existía una forma sencilla de actualizar el sitio de forma exhaustiva utilizando una herramienta como Elementor. Cada página y bloque contenía sus propios estilos en línea, lo que significa que no se podían realizar cambios a nivel global. Si quisiéramos actualizar el estilo del sitio, tendríamos que revisar cada página y actualizar manualmente cada bloque, lo que llevaría mucho tiempo y sería ineficiente. Con esto en mente, se hizo evidente que nuestra única solución era crear un nuevo sitio web desde cero. Esto nos permitiría transferir todo el contenido manteniendo las mismas URL pero con un diseño nuevo, consistente y fácilmente actualizable.
2) Por qué decidimos no usarlo Elementor
Elementor es uno de los creadores de páginas más populares WordPress. A primera vista, parece una gran herramienta que permite crear páginas de forma rápida y sencilla. Sin embargo, después de trabajar extensamente con él, encontramos varias limitaciones que nos hicieron decidir alejarnos de Elementor y optar por un sitio web personalizado.
Elementor’ Limitaciones y desafíos:
- Errores y fallos: Si bien Elementor ofrece muchas características útiles, no está exento de problemas técnicos. Por ejemplo, cuando copiamos una página e intentamos editarla, la nueva página a menudo se veía diferente de la original, incluso antes de realizar cualquier cambio. Hubo errores frecuentes en la forma en que se mostraban los elementos, como que la propiedad “ancho máximo de imagen” no funcionaba correctamente. Estos fallos dificultaron garantizar un estilo consistente en todas las páginas.
- Demasiada libertad creativa, que conduce a la inconsistencia: Uno de los puntos de venta clave de Elementor’ es la capacidad de personalizar todo. Sin embargo, esta flexibilidad puede ser un arma de doble filo, especialmente cuando varios editores trabajan en el sitio. Es fácil para los no profesionales crear involuntariamente páginas con diseños inconsistentes. Por ejemplo, vimos casos de editores que usaban texto rosa en botones rosas o agregaban triángulos naranjas voladores en el fondo, lo que daba como resultado un diseño desordenado y confuso. Sin un sistema de diseño estricto, se volvió imposible mantener una identidad visual cohesiva.
- Personalización limitada para funcionalidad avanzada: Si bien Elementor se destaca en la creación de páginas básicas con texto e imágenes, se vuelve más desafiante cuando necesita agregar una funcionalidad personalizada. A menudo nos encontrábamos limitados a los bloques integrados, que eran difíciles de personalizar para funciones más complejas. A medida que nuestras necesidades crecieron más allá de los diseños básicos, las limitaciones de Elementor’ se hicieron cada vez más evidentes.
- Código inflado y problemas de rendimiento: El método Elementor’ para crear páginas introduce un anidamiento excesivo de elementos. Por ejemplo, Elementor genera automáticamente múltiples
contenedores dentro de otroselementos, cada uno con su propio conjunto de estilos. Esto da como resultado una estructura inflada que afecta negativamente la velocidad de carga, el rendimiento de la página y, en última instancia, la clasificación SEO del sitio web. Cuando realizamos pruebas de velocidad, los resultados fueron consistentemente pobres y el código pesado generado por Elementor fue en gran medida el culpable. - Sin capacidades de prueba A/B: En el panorama digital actual, las pruebas A/B son esenciales para optimizar la experiencia del usuario. Sin embargo, Elementor no ofrece la posibilidad de mostrar diferentes versiones del sitio a diferentes usuarios. Todo el mundo ve el mismo sitio, lo que limita nuestra capacidad para probar y ajustar elementos de diseño como colores, formas de botones e imágenes de fondo. Sin esta funcionalidad, no podríamos optimizar el sitio en función del comportamiento real del usuario.
- Hinchazón de la base de datos: Quizás una de las desventajas más importantes de Elementor es cómo maneja los estilos y el contenido. Elementor almacena estilos, estructuras anidadas y otras etiquetas innecesarias mezcladas con el contenido de la base de datos. Esto genera una base de datos sobrecargada que no se limpia incluso cuando Elementor está deshabilitado o desinstalado. Como resultado, cambiar a un nuevo tema o marco no resuelve el problema – esos estilos permanecen incrustados en las páginas y continúan causando problemas.
Con todos estos desafíos en mente, quedó claro que necesitábamos una solución más sólida. Tomamos la decisión de construir un sitio web nuevo e independiente sin Elementor, optando por un enfoque más sostenible y flexible.
3) Cómo crear una página en el nuevo sitio
La creación del nuevo sitio desde cero nos dio la oportunidad de establecer un proceso limpio y optimizado para la creación de páginas. En el nuevo sistema, crear una página es muy sencillo:
- Inicie sesión en el panel de administración de WordPress y haga clic en Páginas -> Agregar nueva página .
- Verás el editor estándar de WordPress, donde podrás escribir o pegar texto, agregar enlaces y cargar imágenes.
Este proceso es simple pero flexible. En lugar de depender del complicado sistema de bloques Elementor’, el editor de contenido de WordPress es mucho más limpio, lo que permite actualizaciones rápidas y una fácil personalización. Debajo del editor, hay configuraciones para Campos personalizados avanzados (ACF), que ya están configurados para mantener la coherencia en todo el sitio.
ACF nos permite crear secciones de contenido flexibles, con bloques como Contenido 1…Contenido 15 , donde puedes configurar fácilmente el título, el texto, la imagen y las etiquetas de los botones para cada sección de la página. Estos bloques alternan automáticamente la posición de las imágenes y el texto, lo que garantiza que el diseño siga siendo visualmente atractivo sin necesidad de realizar ajustes manuales.
Para las imágenes, implementamos un sistema de combinación de colores que aplica automáticamente un degradado en los colores principales del sitio. Esto garantiza que todas las imágenes se alineen con la estética general. Para los logotipos o las capturas de pantalla en los que los colores deben permanecer intactos, existe una opción de "mantener colores" que anula el degradado.
Este sistema simplifica la gestión de contenidos manteniendo la coherencia del diseño en todas las páginas.
4) Cómo crear una nueva publicación
La creación de publicaciones en el nuevo sitio sigue el mismo proceso simplificado que la creación de páginas, con algunas diferencias clave:
- Las publicaciones tienen URL que incluyen ../blog/.. , lo que las distingue de las páginas.
- En la barra lateral derecha, un bloque muestra automáticamente los tres últimos artículos, lo que ayuda a mantener el blog dinámico y atractivo.
La plantilla para todas las publicaciones se encuentra en el archivo template-parts/content/content-single.php , que se encarga de la estructura y el diseño de cada publicación del blog. Esta plantilla uniforme permite realizar actualizaciones fácilmente y garantiza que todas las publicaciones cumplan con las mismas pautas de diseño.
5) Campos personalizados avanzados (ACF)
ACF ha sido una parte esencial del desarrollo de nuestro nuevo sitio web. Nos permite crear campos personalizados que se pueden administrar fácilmente a través del panel de administración de WordPress. Los campos como content_1 se referencian en el código PHP, lo que nos permite obtener dinámicamente el contenido correcto para cada página y publicación.
Esta flexibilidad es fundamental para garantizar que podamos administrar y actualizar el sitio de manera eficiente y al mismo tiempo brindar espacio para la personalización cuando sea necesario.
6) Pruebas A/B
Una de las mejoras más importantes que hicimos con el nuevo sitio fue la implementación de pruebas A/B. Las pruebas A/B nos permiten comparar dos versiones del sitio para ver cuál funciona mejor con los usuarios. Esto puede incluir probar diferentes colores, formas de botones, fondos o incluso diseños.
Implementamos esta funcionalidad utilizando parámetros GET en la URL. Por ejemplo, se pueden crear dos campañas publicitarias idénticas, pero con URL diferentes:
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
Cuando los usuarios hacen clic en estos enlaces, el parámetro se guarda en una cookie. Dependiendo del valor del parámetro, el sitio mostrará diferentes versiones de la página, como diferentes colores de botones o imágenes de fondo. Esto nos permite recopilar datos valiosos sobre las preferencias y el comportamiento de los usuarios.
Todos los eventos se registran en un .csv archivo, así como en una base de datos MySQL, lo que nos permite analizar los datos y tomar decisiones informadas sobre las mejoras del sitio.
7) El archivo functions.php
- Tipos de publicaciones y taxonomías personalizadas
Uno de los usos clave del archivo functions.php fue crear taxonomías y tipos de publicaciones personalizados, lo que nos permitió organizar el contenido de manera más eficaz. En lugar de depender únicamente de la estructura predeterminada de WordPress (páginas y publicaciones), introdujimos tipos personalizados para contenido específico, como estudios de casos, testimonios o características de productos. Esto no solo mantuvo nuestro contenido mejor organizado, sino que también mejoró la experiencia del usuario al facilitar la navegación y la búsqueda de información relevante.
Por ejemplo, para crear un tipo de publicación personalizado para estudios de casos, agregamos el siguiente código en functions.php :
función crear_tipo_de_publicación_de_estudio_de_caso() {
register_post_type( 'estudios_de_caso',
formación(
'etiquetas' =>formación(
'nombre' => __( 'Estudios de caso' ),
'singular_name' => __( 'Estudio de caso' )
),'público' => verdadero,
'has_archive' => verdadero,
'reescribir' => array('slug' => 'estudios de caso'),
)
);
}
add_action( 'init', 'crear_tipo_de_publicación_de_estudio_de_caso' );
Esto creó un nuevo tipo de publicación llamado “Estudios de caso” que se comportaba de manera similar a las publicaciones normales pero con su propia estructura de archivo y taxonomía.
- Carga de scripts y estilos externos
Otro uso fundamental de functions.php fue cargar scripts y estilos externos, lo que garantiza que nuestro sitio web tuviera todas las bibliotecas y los marcos necesarios. Por ejemplo, integramos bibliotecas como Slick.js para controles deslizantes y AOS (Animate on Scroll) para animaciones fluidas. Al cargar selectivamente estos recursos solo cuando eran necesarios (por ejemplo, en páginas o plantillas específicas), redujimos la sobrecarga innecesaria y mejoramos la velocidad de carga de las páginas.
Así es como manejamos la carga de estilos y scripts:
función cargar_scripts_personalizados() {
// Cargar control deslizante Slick para plantillas específicas
si( es_plantilla_de_pagina('template-slider.php') ) {
wp_enqueue_style( 'slick-css', obtener_uri_directorio_plantilla() . '/css/slick.css' );
wp_enqueue_script( 'slick-js', obtener_uri_directorio_plantilla() . '/js/slick.min.js', array('jquery'), '', verdadero );
} // Cargar animaciones AOS en todo el sitio
wp_enqueue_style( 'aos-css', obtener_uri_directorio_plantilla() . '/css/aos.css' );
wp_enqueue_script( 'aos-js', obtener_uri_directorio_plantilla() . '/js/aos.js', array('jquery'), '', verdadero );
}
add_action( 'wp_enqueue_scripts', 'cargar_scripts_personalizados' );
Mediante el uso de comprobaciones condicionales (por ejemplo, es_plantilla_de_pagina()), nos aseguramos de que no se cargaran scripts innecesarios en todo el sitio, optimizando así el rendimiento.
- Códigos cortos personalizados
Para mejorar la flexibilidad para los usuarios no técnicos que administran el contenido del sitio, agregamos códigos cortos personalizados a través de functions.php . Estos códigos cortos permitieron a los usuarios insertar fácilmente funciones complejas o elementos con estilo sin necesidad de tocar el código. Por ejemplo, creamos un código corto para agregar botones personalizados en cualquier parte del sitio:
[CENSURADO]
Este código corto facilitó a los editores agregar botones con texto y URL personalizados, lo que permitió realizar ajustes rápidos sin romper el diseño.
8) Manejo del SEO y la velocidad del sitio
Un objetivo importante durante la revisión del sitio web fue mejorar el SEO y el rendimiento general del sitio. El sitio original, creado con Elementor, tenía problemas con tiempos de carga lentos y prácticas de SEO subóptimas debido a código inflado e imágenes no optimizadas.
Mejorando el SEO
Para garantizar que nuestro nuevo sitio fuera compatible con SEO, implementamos varias prácticas recomendadas desde el principio:
-
HTML semántico : Estructuramos cuidadosamente el HTML del sitio con el uso adecuado de las etiquetas de encabezado (
,, etc.), lo que garantiza que los motores de búsqueda puedan analizar y comprender fácilmente la jerarquía del contenido. Esto es particularmente importante tanto para las clasificaciones SEO como para la accesibilidad. - Etiquetas meta y datos de Open Graph : Aprovechamos el complemento Yoast SEO para gestionar los metatítulos, las descripciones y los datos de Open Graph para compartir en redes sociales. Al usar Yoast, nos aseguramos de que cada página y publicación tuviera metadatos optimizados, lo cual es crucial para la visibilidad en los motores de búsqueda y las tasas de clics en las plataformas de redes sociales.
- Marcado de esquema : con el archivo functions.php , agregamos un marcado de esquema personalizado para datos estructurados, lo que mejora la forma en que los motores de búsqueda muestran nuestras páginas en los resultados de búsqueda. Por ejemplo, incluimos un esquema para artículos, estudios de casos y productos, lo que ayuda a los motores de búsqueda a categorizar mejor nuestro contenido.
función add_schema_markup() {
eco'
{
"@context": "http://schema.org",
"@type": "Organización",
"nombre": "ConveyThis",
"url": https://www.conveythis-.com",
"logo": https://www.conveythis.com/logo.png",
"iguales": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
.
;
.
Add-Action( «wp -head», »add –schema:markup»)
Optimización de la velocidad del sitio
El rendimiento es un factor crítico no solo para la experiencia del usuario, sino también para las clasificaciones SEO. Tomamos varias medidas para mejorar la velocidad del sitio:
- Optimización de imágenes : utilizamos formatos de imágenes modernos como WebP , que ofrecen mejores tasas de compresión que los formatos tradicionales como PNG y JPEG. Todas las imágenes se presentaron en el tamaño adecuado según la resolución de pantalla del usuario, lo que garantiza tiempos de carga rápidos incluso en dispositivos móviles.
- Carga diferida : al implementar la carga diferida para imágenes, nos aseguramos de que solo se cargaran inicialmente las imágenes visibles en la pantalla del usuario. Las imágenes adicionales se cargarían a medida que el usuario se desplazara por la página, lo que reduciría los tiempos de carga iniciales de la página.
- Caché y minificación: Utilizábamos WP Rocket para la caché, minificación y compresión de archivos HTML, CSS y JavaScript . WP Rocket nos ayudó a conseguir tiempos de carga más rápidos al reducir el tamaño total del archivo y al ofrecer versiones estáticas en caché de las páginas a los visitantes recurrentes.
9) Optimización y limpieza de bases de datos
El antiguo sitio web había acumulado una cantidad significativa de datos “basura” debido a la sobrecarga de Elementor’ y a la estructura ineficiente de la base de datos. Para garantizar que el nuevo sitio funcionara sin problemas, realizamos una limpieza y optimización exhaustivas de la base de datos.
- Eliminación de datos antiguos Elementor
Como se mencionó anteriormente, incluso después de desactivar Elementor, sus estilos y configuraciones todavía estaban integrados en la base de datos. Utilizamos consultas personalizadas para eliminar este exceso de datos y limpiar la base de datos. Además, eliminamos todos los archivos multimedia no utilizados, las revisiones de publicaciones y los transitorios vencidos que se habían acumulado con el tiempo.
- Indexación de bases de datos
También optimizamos la base de datos agregando índices a las columnas consultadas con frecuencia, lo que garantiza que las consultas a la base de datos sean más rápidas y eficientes. Por ejemplo, agregar un índice a la columna posfechar La columna aceleró las consultas relacionadas con publicaciones recientes, mejorando el rendimiento de nuestras páginas de blog.
Conclusión
La decisión de crear un nuevo sitio web desde cero estuvo motivada por las limitaciones e ineficiencias del sitio antiguo. Simplemente cambiar el tema no era una opción viable debido a inconsistencias de diseño, estilos inflados y problemas de rendimiento causados por Elementor. Al crear un nuevo sitio con desarrollo personalizado y campos personalizados avanzados, logramos un sitio web más eficiente, cohesivo y profesional que mejora la experiencia del usuario al tiempo que permite actualizaciones optimizadas y funcionalidad de pruebas A/B. Este nuevo sitio proporciona una base sólida para el crecimiento y las mejoras futuras.
Resumir este post con:
¿Listo para comenzar?
La traducción, mucho más que simplemente saber idiomas, es un proceso complejo.
Siguiendo nuestros consejos y utilizando ConveyThis, sus páginas traducidas resonarán en su audiencia y se sentirán nativas del idioma de destino.
Si bien exige esfuerzo, el resultado es gratificante. Si está traduciendo un sitio web, ConveyThis puede ahorrarle horas con la traducción automática.
¡Pruebe ConveyThis gratis durante 3 días!
CONVEYTHIS