Por qué creamos un nuevo sitio web desde cero: una evolución necesaria

Resume este post con: 14 min de lectura

ChatGPT Perplejidad Grok Inteligencia artificial de Google

1) Por qué creamos un nuevo sitio web y no pudimos simplemente “cambiar de tema”

Cuando identificamos por primera vez la necesidad de cambio, la tarea parecía simple: “Cambiar el bloque superior y hacer que el llamado a la acción sea más efectivo” 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 mayores con la estructura y el diseño del sitio. El problema no era sólo un bloque; era toda la arquitectura del sitio la que necesitaba una revisión.

Nuestro sitio web se ha construido a lo largo del tiempo, con diferentes páginas agregadas utilizando varios diseños y maquetaciones, sin ningún tema o plantilla unificadora. Cada página tenía un diseño único, lo que podía parecer creativo pero generaba un problema importante: la inconsistencia. Si siguiéramos adelante e hiciéramos 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 realizar cambios futuros. Imagínese 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 seguir trabajando en el antiguo sitio 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 cohesivas cuando visitan un sitio web. Si se desplazan hacia abajo en una página y ven que el diseño es inconsistente – cada bloque usa estilos diferentes –, crea una impresión inconexa 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, refuerza una sensación de desorden.

La inconsistencia se extendió más allá del diseño. Muchas de las imágenes del sitio estaban desactualizadas, tenían un estilo deficiente o incluso fueron generadas de manera inapropiada por redes neuronales. Estas imágenes no cumplían con los estándares de diseño modernos y reemplazarlas era otra tarea ardua. El uso de malas imágenes reflejó mal la calidad general del sitio, dejando a los usuarios con una impresión negativa del producto o servicio que estábamos ofreciendo.

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 utilizar 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.

Limitaciones y desafíos de Elementor’s:

1. 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.
2. 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.
3. 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.
4. 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 <div> contenedores dentro de otros <div> elementos, 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.
5. 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.
6. 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 inflada 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

Construir el nuevo sitio desde cero nos dio la oportunidad de establecer un proceso limpio y optimizado para crear páginas. En el nuevo sistema, crear una página es sencillo:

1. Inicie sesión en el panel de administración de WordPress y haga clic Páginas -> Agregar nueva página.
2. Verás el editor estándar de WordPress, donde puedes 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 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 puede 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 el posicionamiento de imágenes y texto, lo que garantiza que el diseño siga siendo visualmente atractivo sin necesidad de ajustes manuales.

Para las imágenes, implementamos un sistema de coincidencia 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 logotipos o capturas de pantalla donde los colores deben permanecer intactos, existe una opción “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/.., distinguiéndolos de las páginas.
• En la barra lateral derecha, un bloque muestra automáticamente los tres artículos más recientes, 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 maneja la estructura y el diseño de cada publicación del blog. Esta plantilla consistente permite actualizaciones sencillas 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. Campos como contenido_1 se hace referencia a ellos en el código PHP, lo que nos permite extraer 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 significativas 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 usando Obtener parámetros 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 comportamientos de los usuarios.

Todos los eventos están registrados en a .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

El funciones.php A menudo se malinterpreta que un archivo en WordPress se limita a tareas relacionadas con el blog. Sin embargo, este archivo es mucho más que una simple utilidad para administrar publicaciones o funciones de blog; sirve como columna vertebral para todas las funciones personalizadas del sitio. En nuestro caso, utilizamos el funciones.php archivo para agregar funciones avanzadas, optimizar el rendimiento y administrar scripts y configuraciones de todo el sitio.

Aquí hay una descripción general de cómo funciona funciones.php El archivo jugó un papel vital en nuestro desarrollo:

• Tipos de publicaciones personalizadas y taxonomías

Uno de los usos clave del funciones.php El objetivo del archivo era crear tipos de publicaciones y taxonomías personalizadas, lo que nos permitió organizar el contenido de manera más efectiva. 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 sólo 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 funciones.php:

function create_case_study_post_type() {

  register_post_type( 'case_studies',

    array(

           'labels' =>``array(

              'name' => __( 'Case Studies' ),

          'singular_name' => __( 'Case Study' )

        ),

            'public' => true,

           'has_archive' => true,

           'rewrite' => array('slug' => 'case-studies'),

       )

  );

}

add_action( 'init', 'create_case_study_post_type' );Esto creó un nuevo tipo de publicación llamada “Estudios de caso” que se comportaba de manera similar a las publicaciones regulares pero con su propia estructura de archivo y taxonomía.

• Carga de scripts y estilos externos

Otro uso crítico de funciones.php Era cargar scripts y estilos externos, asegurando que nuestro sitio web tuviera todas las bibliotecas y marcos necesarios. Por ejemplo, integramos bibliotecas como Slick.js para controles deslizantes y AOS (Animar al desplazarse) para animaciones fluidas. Al cargar selectivamente estos activos solo cuando eran necesarios (por ejemplo, en páginas o plantillas específicas), redujimos la sobrecarga innecesaria y mejoramos las velocidades de carga de las páginas.

Así es como manejamos la carga de estilos y scripts:

function load_custom_scripts() {

  // Load Slick slider for specific templates

   if( is_page_template('template-slider.php') ) {

    wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/css/slick.css' );

        wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '', true );

   }

   // Load AOS animations site-wide

   wp_enqueue_style( 'aos-css', get_template_directory_uri() . '/css/aos.css' );

   wp_enqueue_script( 'aos-js', get_template_directory_uri() . '/js/aos.js', array('jquery'), '', true );

}

add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );Mediante el uso de comprobaciones condicionales (por ejemplo, is_page_template()), 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 funciones.php. Estos códigos cortos permitieron a los usuarios insertar fácilmente funciones complejas o elementos de estilo sin necesidad de tocar el código. Por ejemplo, creamos un código corto para agregar botones personalizados en cualquier parte del sitio:

[REDACTADO]

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 etiquetas de encabezado (<h1>, <h2>, etc.), garantizando que los motores de búsqueda puedan analizar y comprender fácilmente la jerarquía de contenidos. Esto es especialmente importante tanto para las clasificaciones SEO como para la accesibilidad.
• Metaetiquetas y datos de Open Graph: Aprovechamos el Yoast SEO complemento para manejar metatítulos, descripciones y datos de Open Graph para compartir en redes sociales. Al utilizar 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 de las plataformas de redes sociales.
• Marcado de esquema: Usando el funciones.php archivo, agregamos un marcado de esquema personalizado para datos estructurados, mejorando la forma en que los motores de búsqueda muestran nuestras páginas en los resultados de búsqueda. Por ejemplo, incluimos esquemas de artículos, estudios de casos y productos, lo que ayudó a los motores de búsqueda a categorizar mejor nuestro contenido.

function add_schema_markup() {
  echo '<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "ConveyThis",
    "url": "https://www.conveythis.com",
    "logo": "https://www.conveythis.com/logo.png", "sameAs": [ "https://www.facebook.com/conveythis", "https://twitter.com/conveythis" ] } </script>'; } add_action( 'wp_head', 'add_schema_markup' );

Optimización de la velocidad del sitio

El rendimiento es un factor crítico no sólo 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 imagen modernos como WebP, que ofrecen mejores tasas de compresión que los formatos tradicionales como PNG y JPEG. Todas las imágenes se entregaron 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 de imágenes, nos aseguramos de que inicialmente solo se cargaran las imágenes visibles en la pantalla del usuario. Se cargarían imágenes adicionales a medida que el usuario se desplazara, lo que reduciría los tiempos iniciales de carga de la página.
• Almacenamiento en caché y minimización: Nosotros usamos Cohete WP para almacenamiento en caché, minimización y compresión de HTML, CSS y JavaScript archivos. WP Rocket nos ayudó a lograr tiempos de carga más rápidos al reducir el tamaño general del archivo y ofrecer versiones estáticas en caché de las páginas a los visitantes repetidos.

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 hinchazón 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.

• 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 garantizó que las consultas a la base de datos fueran más rápidas y eficientes. Por ejemplo, agregar un índice al post_date 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.