Por qué creamos un nuevo sitio web desde cero: una evolución necesaria
Convierte tu sitio web en multilingüe en 5 minutos
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 había una manera sencilla de actualizar el sitio de manera integral con una herramienta como Elementor. Cada página y bloque contenía sus propios estilos en línea, lo que significaba que no se podían realizar cambios de manera global. Si queríamos actualizar el estilo del sitio, tendríamos que recorrer 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 utilizar Elementor
Elementor es uno de los creadores de páginas más populares para 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 mucho con él, nos topamos con varias limitaciones que nos hicieron decidir dejar de lado Elementor y optar por un sitio web personalizado.
Limitaciones y desafíos de Elementor:
- Errores y fallos : si bien Elementor ofrece muchas funciones útiles, no está exento de problemas técnicos. Por ejemplo, cuando copiábamos una página e intentábamos editarla, la nueva página solía tener un aspecto diferente al original, incluso antes de realizar ningún cambio. Había errores frecuentes en la forma en que se mostraban los elementos, como que la propiedad de "ancho máximo de la imagen" no funcionaba correctamente. Estos fallos dificultaban garantizar un estilo uniforme en todas las páginas.
- Demasiada libertad creativa que genera inconsistencias : uno de los puntos fuertes de Elementor es la posibilidad de personalizar todo. Sin embargo, esta flexibilidad puede ser un arma de doble filo, especialmente cuando hay varios editores trabajando en el sitio. Es fácil que los no profesionales creen páginas con diseños inconsistentes sin querer. Por ejemplo, vimos casos de editores que usaban texto rosa sobre botones rosas o añadían 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 funciones avanzadas : 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 necesitas agregar funciones personalizadas. A menudo nos encontramos 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 de creación de páginas de Elementor introduce una anidación excesiva de elementos. Por ejemplo, Elementor genera automáticamente varioscontenedores 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 deficientes y el código pesado generado por Elementor fue en gran parte 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. Todos ven el mismo sitio, lo que limita nuestra capacidad de 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.
- Inundación de la base de datos : quizás una de las desventajas más significativas 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 inflada que no se limpia incluso cuando Elementor se deshabilita o desinstala. 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 robusta. Tomamos la decisión de crear 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 de Elementor, el editor de contenido de WordPress es mucho más ordenado, lo que permite realizar actualizaciones rápidas y una personalización sencilla. Debajo del editor, hay configuraciones para los 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.csvarchivo, 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:
función código corto de botón personalizado ($atts) {
$atts = código corto_atts(
formación(
'etiqueta' => 'Haga clic aquí',
'url' => '#',
),
$attas,
'botón personalizado'
);
devuelve ' ' . esc_html( $atts['etiqueta'] ) . ' ';
}
add_shortcode('botón_personalizado', 'código_corto_de_botón_personalizado');
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
Uno de los principales objetivos de la renovació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 deficientes debido a un código sobrecargado 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",
"logotipo": "https://www.conveythis.com/logo.png",
"igual que": [
"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.
- Almacenamiento en caché y minimización : utilizamos WP Rocket para el almacenamiento en caché, la minimización y la compresión de archivos HTML, CSS y JavaScript. WP Rocket nos ayudó a lograr tiempos de carga más rápidos al reducir el tamaño general de los archivos y ofrecer versiones estáticas en caché de las páginas a los visitantes habituales.
9) Optimización y limpieza de bases de datos
El sitio web antiguo había acumulado una cantidad importante de datos "basura" debido a la sobrecarga y la estructura ineficiente de la base de datos de Elementor. Para garantizar que el nuevo sitio funcionara sin problemas, realizamos una limpieza y optimización exhaustivas de la base de datos.
- Eliminar datos antiguos de Elementor
Como se mencionó anteriormente, incluso después de desactivar Elementor, sus estilos y configuraciones seguían integrados en la base de datos. Usamos 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 columnaposfecharLa 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 se debió a las limitaciones e ineficiencias del sitio anterior. Cambiar el tema simplemente no era una opción viable debido a las inconsistencias de diseño, los estilos inflados y los 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 la funcionalidad de prueba A/B. Este nuevo sitio proporciona una base sólida para el crecimiento y las mejoras futuras.
¿Listo para comenzar?
La traducción, mucho más que simplemente saber idiomas, es un proceso complejo.
Si sigue nuestros consejos y utiliza ConveyThis, sus páginas traducidas resonarán en su audiencia y parecerá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.
¡Prueba ConveyThis gratis durante 7 días!
CONVEYTHIS