Publicado en fecha

Actualizado el

6 min

Lanzada hace unos años, tu sitio web empieza a mostrar signos de antigüedad. Estás convencido de ello: Necesita una buena capa de pintura.

Su contenido está desactualizado. La visualización en móviles es deficiente. Las páginas cargan demasiado lento. Y lo que es peor: el tráfico generado desde Google está disminuyendo.

No cabe duda: rediseño de un sitio web de WordPress ¡Es necesario! Sí, pero aquí está el detalle. Sabes que esta operación técnica puede ser muy peligrosa si no se realiza correctamente. 

Este artículo está aquí para ayudarte. Al terminar de leerlo, lo sabrás todo. Pasos a seguir para una transformación profesional exitosa sin dañar su sitio web actual. 

Y gracias a nuestro completo tutorial, adecuado tanto para principiantes como para usuarios más experimentados, usted tendráejemplos concretos de qué hacer Y qué no hacer durante un rediseño.

¿Qué es un rediseño de un sitio web de WordPress?

El rediseño de un sitio web de WordPress es una operación técnica destinada a mejorar y modernizar un sitio web con dos objetivos principales: 

  1. Adaptarse a las necesidades de sus usuarios.
  2. Para alcanzar sus objetivos : para aumentar las ventas en tu tienda online, para presentar tus servicios con mayor claridad, para obtener más solicitudes de presupuesto, para fomentar la descarga de un informe técnico, para aumentar las suscripciones a tu boletín informativo, etc. 

Iniciar un proceso de rediseño puede permitirle tomar medidas en varios niveles: 

  • modificar la interfaz de usuario (UI) para mejorar la ergonomía y la claridad en la navegación; 
  • mejorar el rendimiento (velocidad de carga de la página) para hacer que la experiencia del usuario (UX) sea más agradable;
  • optimizar las referencias naturales (SEO) para obtener más visitas y maximizar el tráfico a sus páginas; 
  • actualiza tu contenido para reflejar los cambios que se han producido en su actividad principal; 
  • integrar nuevas funciones.
Un rediseño eficaz de un sitio web en WordPress debe tener en cuenta la experiencia del usuario (UX).

En función de tus expectativas, habilidades técnicas, tiempo disponible y presupuesto, puedes encargarte de uno o más de los aspectos presentados anteriormente. 

La pregunta sigue siendo: ¿cómo gestionar todo esto simultáneamente? Descúbralo en las siguientes secciones. 

Fase 1: ¿Cuáles son los pasos a seguir antes de un rediseño?

Avant-propos Los pasos para rediseñar un sitio WordPress que se presentan a continuación constituyen una guía ideal. Considérelos como una hoja de ruta completa que, sin embargo, puede adaptarse. Por ejemplo, no necesitará crear maquetas, wireframes ni integrar un nuevo diseño si simplemente desea mejorar el SEO de su sitio web. Sea flexible y ágil, y adapte los métodos presentados en este artículo a su contexto específico. 

Defina los objetivos del rediseño del sitio web de WordPress.

La importancia de auditar la situación actual 

En primer lugar, es esencial identificar ¿Por qué quieres rediseñar tu sitio web con WordPress?Esto le permitirá determinar si esta operación es necesaria y está justificada. 

Para ello te recomendamosevaluar su sitio existente a través de un Auditoría de WordPressIdentificarás obstáculos y áreas de mejora.

Para ayudarte, concéntrate principalmente en los componentes básicos de un sitio WordPress profesional y de alto rendimiento, haciéndote preguntas en varios niveles: 

  • la estructura y el diseño web¿La navegación es intuitiva? ¿La ergonomía está bien pensada? ¿El diseño web refleja la imagen de su marca? ¿Se adapta a su identidad corporativa?
  • al rendimiento¿Tus páginas cargan rápido? Usa una herramienta como Google Insights PageSpeed para averiguarlo. 
  • estrategia SEO¿El tráfico generado en su sitio web cumple con sus expectativas? ¿Ha estado disminuyendo durante varios meses? ¿Está el sitio web optimizado para motores de búsqueda? ¿Utiliza herramientas como...? Google Analytics y Google Search Console para analizar tu tráfico e identificar bloqueos. 
  • la seguridad. Tu CMS ¿Está WordPress protegido contra virus, malware y otras vulnerabilidades de seguridad? ¿Ha implementado las mejores prácticas en este ámbito?
  • el contenido¿Reflejan tus páginas con precisión la evolución de tu negocio? Si tienes un blog, ¿tus artículos responden a las necesidades y la intención de búsqueda de tus usuarios?
  • características¿Quieres agregar nuevas opciones (creandouna tienda online con WooCommerce(p. ej., ¿transición al multilingüismo)? ¿Los que ya están presentes en su sitio siguen funcionando correctamente?
El rediseño de un sitio web de WordPress debe incorporar consideraciones de SEO desde el principio.

Considere también el tiempo y el presupuesto.

Dependiendo de lo que descubras, podrás definir más fácilmente tus aspiraciones, las cuales luego podrás enumerar en una herramienta de trabajo colaborativa como Google Docs, Google Sheets, Trello ou Asana.

Por ejemplo, si considera que su sitio web no recibe suficientes visitas mensuales, lo que repercute negativamente en sus conversiones, el objetivo principal del rediseño de su sitio WordPress será mejorar la estrategia SEO.

Al mismo tiempo, no olvides tener en cuenta el presupuesto que deseas destinar a tu rediseño. Por ejemplo, la operación será más costosa si contratas a un profesional que si la realizas tú mismo.

Si desea crear un nuevo diseño web, considere también incluir los costos de diferentes herramientas, como WordPress o un creador de páginas como Divi Builder o Elementor.  

Enfin, Vincula tus objetivos al factor tiempo.¿Cuál es su disponibilidad para llevar a cabo este proyecto y, sobre todo, cuál es el plazo en el que puede completarlo?

Nuestro consejo Para mayor claridad, establezca objetivos con indicadores SMART (específicos, medibles, alcanzables, relevantes y con plazos definidos). En el contexto de un rediseño cuyo objetivo principal es mejorar el posicionamiento orgánico en buscadores (SEO), un objetivo SMART podría ser: «Quiero aumentar el tráfico orgánico a mi blog en un 30 % durante la primera mitad de este año». 

Crea la nueva estructura de tu sitio.

La estructura del árbol

Una vez que hayas definido tus objetivos, aborda un elemento esencial del rediseño de un sitio WordPress: la estructura de su sitio web.

Esto último se refiere a cómo se organiza, categoriza y enlaza su contenido.

Este "esqueleto", organizado en forma de diagrama, permite, en particular: 

  • para mejorar la experiencia del usuarioAl permitir que sus visitantes encuentren fácilmente lo que buscan mediante una navegación fluida y ergonómica;
  • para mejorar el SEOEsto se logra mediante una estructura jerárquica organizada en torno a temas bien definidos. De esta manera, los motores de búsqueda como Google pueden explorar e indexar el sitio con mayor facilidad.

Para diseñar un mapa del sitio eficaz, base su trabajo en los objetivos que haya definido previamente. Luego, tenga en cuenta a su público objetivo para satisfacer sus necesidades y resolver sus problemas.

Para ello, crea una persona – una representación ficticia de tu cliente ideal – utilizandouna herramienta especializada como esta

Enfin, estudia lo que ofrecen tus competidores. Inspírate en lo que les funciona bien a ellos y aplícalo a tu manera en tu propio sitio de WordPress. 

En cuanto a las herramientas que debe utilizar para dar forma a la estructura de su árbol, le recomendamos utilizar software especializado como GlooMapas (libre), MindMeister (freemium), o Mapeador DYNO (pagado). 

Wireframes y maquetas para el rediseño de tu sitio web de WordPress

A continuación, pase al paso de representar gráficamente la estructura de su árbol. Esto le permitirá: Visualiza cómo se verá tu sitio web con distintos grados de detalle. 

En orden, primero le recomendamos que usted diseño wireframesSe trata de bocetos funcionales y esquemáticos que muestran los diferentes elementos estructurales de una página.

Te permiten representar la interfaz de usuario (UI) de una manera más clara y detallada que con tu estructura de árbol.

Un ejemplo de wireframes, útiles para rediseñar un sitio web de WordPress.
Un ejemplo de wireframes.

Puedes diseñar tus wireframes con herramientas en línea como flujo simulado (gratis), o Balsamiq (pagado).

Si es necesario, es posible integrar su diseño en maquetas utilizando una herramienta como Figma (freemium) Bosquejo (pagado) o Adobe XD (pagado).
Este paso será fundamental si desea rediseñar completamente el gráfico de su sitio web. En ese caso, considere redefinir o diseñar una carta de identidad gráfica. 

Si solo quieres modificar ciertos elementos visuales de un tema existente, puedes saltarte esta fase de maquetación. Tú decides. 

Rediseño de un sitio web de WordPress utilizando maquetas de Figma.
La herramienta Figma.

Nuestro consejo Además de las herramientas necesarias para el diseño de tu sitio web, considera las soluciones técnicas que utilizarás en el rediseño. Si vas a cambiar de tema, elige uno rápido, ligero y escalable. Astra ou GeneratePressConsidere también los complementos que necesita (por ejemplo, consulte Nuestra selección de las mejores extensiones de seguridad).  

Desarrollar un plan de reorientación

Al rediseñar tu sitio de WordPress, es muy probable que se produzcan cambios en la estructura de tus URL. Esto sucederá, por ejemplo, si: 

  • Usted elimina páginas; 
  • creas páginas nuevas; 
  • usted modifica la URL de ciertas páginas, categorías o etiquetas; 
  • Estás cambiando a HTTPS etc.

Para mantener el tráfico actual y evitar la aparición de errores 404 que penalizarán tus esfuerzos de SEO y la experiencia del usuario, es fundamental crear un plan de redireccionamiento.

Para crearlo, utilice un archivo estándar de Excel dividido en tres columnas. Enumere lo siguiente:

  • Las URL están sujetas a cambios. (URLs antiguas); 
  • las nuevas URL (aquellos que estarán presentes en el sitio rediseñado);
  • redirecciones ser realizadoPor ejemplo, una redirección 301 ayuda a evitar un error 404, al tiempo que transfiere la popularidad de tus páginas antiguas a las nuevas. 

Nuestro consejo Si tienes un sitio pequeño (portafolio, blog) con unas pocas docenas de URL, puedes proceder manualmente. Para sitios más grandes, como un gran sitio de comercio electrónico, opte por una auditoría completa utilizando herramientas especializadas como Screaming Frog, Semrush ou Ahrefs

Crear un documento de especificaciones

Si alguna vez emprende un proyecto de rediseño de un sitio web de WordPress para un cliente, le recomendamos recopilar la mayoría de los pasos que acabamos de presentar en presupuesto

Este es un documento escrito que presenta los elementos principales relacionados con un proyecto para crear o rediseñar un sitio web de WordPress.

Detalla, en particular, las necesidades, limitaciones, ideas, conceptos y objetivos de la persona o empresa que desea diseñar o rediseñar un sitio web. Para aprender cómo configurarlo, Consulte nuestra guía especializada sobre el tema..  

Ahora que su proyecto de rediseño del sitio WordPress está bien definido, veamos cómo iniciar las operaciones técnicamente. 

Fase 2: Lanzamiento del rediseño de tu sitio web de WordPress 

Definir e implementar el entorno de trabajo adecuado.

El primer consejo que podemos darte es que evites a toda costa, salvo para ajustes muy pequeños, trabajar en tu sitio web en producción. 

De esta forma, te proteges contra la posibilidad de encontrar errores y otros fallos de funcionamiento que podrían dejar tu sitio web inaccesible y afectar negativamente a la imagen de tu marca. 

Para lograr tranquilidad y trabajar con serenidad, tiene a su disposición dos opciones principales:  

  1. Rediseña tu sitio de WordPress localmente.Es decir, en tu máquina. Para ello, utiliza una herramienta como WAMP. Local ou DevKinsta.
  2. Utilice un entorno de desarrolloPuedes trabajar en un subdominio o subdirectorio creado en la interfaz de administración de tu proveedor de alojamiento, o configurar un entorno de prueba utilizando una extensión como La estadificación WP, por ejemplo.
La herramienta Local te permite crear sitios locales durante el rediseño de un sitio de WordPress.
La herramienta de desarrollo local.

Nuestro consejo Si eres un usuario principiante de WordPress o te resistes a la tecnología, empezar con un entorno de trabajo local es una buena solución intermedia. 

En cuanto a las medidas que se deben tomar, todo dependerá de lo que usted quiera hacer: 

  • o bien empezar desde cero y crear un sitio nuevoEn este caso, necesitarás instalar WordPress, configurarlo y configurar tu tema y plugins. Este artículo resume lo que debes hacer. ;
  • o copiar un sitio existente y modificarlo dependiendo de las intenciones que definiste anteriormente. Para copiar tu sitio del entorno en línea a la máquina local, usa un plugin como Migración WP todo en uno ou Duplicador

Nuestro consejo Antes de realizar cualquier operación técnica, ¡haga una copia de seguridad de su sitio web (archivos + base de datos)! En caso de un problema, puede restaurarlo con un solo clic. Puede utilizarun plugin de copia de seguridad de WordPress como UpdraftPlus, o una solución de mantenimiento completa como Paraguas WP

Integra el diseño, el contenido y las características.

Una vez que su entorno de trabajo esté listo, el abanico de medidas que se deberán tomar dependerá, una vez más, de sus objetivos iniciales.

Si bien es imposible detallar aquí todos los escenarios posibles, aquí hay algunos casos generales que pueden servirle de guía a la hora de actuar: 

  • implementar el diseño creado en sus maquetas a nivel del sitio que se va a rediseñar. Si está trabajando con El editor de sitios de WordPress (Gutenberg)Por ejemplo, necesitarás crear bloques y otras plantillas de página. La lógica será esencialmente la misma que con un creador de páginas;
  • agrega las características que desees : formulario de contacto, barra de búsqueda, ventanas emergentes, tienda de comercio electrónico, Cumplimiento del RGPD etc. Para ello, configure y pruebe los complementos adecuados;
  • Integrar y/o modificar tu contenidoYa sea en tus páginas estratégicas o en tu blog, nos referimos, por supuesto, al texto, pero también a las imágenes y los vídeos. ¡Ten en cuenta el tamaño de los archivos! Optimiza tus imágenes, por ejemplo, utilizando un plugin como Imagify.  
  • Implementar las mejores prácticas de SEO (etiquetas meta, URL optimizadas, mapa del sitio XML, archivo robots.txt, etc.). Para ello, utilice una extensión dedicada como Yoast SEO, Rank Math ou SEOPress.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore y dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ejercicio ullamco laboris nisi ut aliquip ex y commodo consequat. Duis aute irre dolor in reprehenderit in voluptar velit esse cillum dolore ue fugiat nulla pariatur. Excepteur sint occaecat cupidatat no proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nuestro consejo Antes de crear contenido nuevo o modificar el texto existente en el sitio web que se está rediseñando, desarrolle una estrategia SEO. Por ejemplo, considere las palabras clave con las que desea que se encuentre a su público objetivo utilizando herramientas especializadas como Semrush, Ahrefs o el Planificador de palabras clave de Google. 

Estás cerca del final de este tedioso proceso de rediseño de tu sitio WordPress. Aunque todo parezca ir bien, es recomendable tomar algunas precauciones adicionales antes de publicar oficialmente tu nuevo sitio en línea. Ese es el tema central de la última sección de este artículo. 

Fase 3: Publicación del rediseño en 4 pasos 

Traslada tu sitio de pruebas a preproducción (y pruébalo).

Para comenzar esta tercera fase del rediseño del sitio de WordPress, Traslade su sitio de prueba a un entorno de preproducción. (también llamado puesta en escena).

En este caso, trasladas el sitio web que acabas de rediseñar localmente, por ejemplo, a un servidor en línea (de tu proveedor de alojamiento de confianza) que tenga las mismas características que el que tendrá tu sitio una vez que esté en producción.

Solo usted y su cliente tendrán acceso, no sus visitantes. Podrá probar y asegurarse de que todo funcione correctamente antes del lanzamiento final. 

Estos son los pasos a seguir para crear un entorno de preproducción: 

  • Realice una copia de seguridad de su sitio de producción. (archivos + base de datos); 
  • crear un entorno de preproducción configurando un subdominio (por ejemplo, staging.yoursite.fr) o un subdirectorio (por ejemplo, yoursite.fr/staging);  
  • clona tu sitio en el entorno de prueba ya sea manualmente o utilizando una de las extensiones de migración mencionadas anteriormente; 
  • prueba tu sitioEn la jerga informática, esto se denomina prueba de aceptación. Comprueba que todas las funcionalidades del sitio web funcionen correctamente (botones, enlaces, formularios, menú, complementos, etc.). Aprovecha para verificar que tu sitio se visualice correctamente en los principales navegadores y en diferentes tamaños de pantalla (diseño responsivo).
Al publicar un rediseño de un sitio web de WordPress, es una buena idea realizar comprobaciones.

Pon tu sitio en modo de mantenimiento 

¿Has realizado las comprobaciones habituales? Es hora de poner tu antiguo sitio web en modo de mantenimiento, justo antes de pasar de la fase de preproducción a la de producción. 

Poner tu sitio en modo de mantenimiento tiene varias ventajas:

  • No se degrada la experiencia del usuario. de sus visitantes, ya que su sitio no estará disponible durante la transición (de preproducción a producción);
  • Te comunicas de forma transparente con su objetivo, informándoles que se está llevando a cabo una operación de mantenimiento durante un período de tiempo determinado;
  • si se producen errores o fallosNadie sabrá (excepto tú) si tu sitio web está en mantenimiento. Esto evita que dañes la imagen de tu marca. 

¿Qué soluciones existen para pasar al modo de mantenimiento durante el rediseño de un sitio web de WordPress?

Para poner su sitio en modo de mantenimiento, puede: 

  • usar un complemento dedicadoé como en Semilla ou Mantenimiento
  • Utilice una plantilla de página de mantenimiento sugerido por tu tema o creador de páginas favorito; 
  • agregar un fragmento de código en tu archivo .htaccess o en el archivo functions.php de tu tema hijo; 
  • Habilitar el modo de mantenimiento de WordPress en la interfaz de administración proporcionada por su proveedor de alojamiento, como cPanel.
SeedProd es un plugin de mantenimiento para WordPress.

Implementar el nuevo sitio web en línea

Esta vez, todo va bien. Puedes (por fin) migrar tu sitio web a internet siguiendo estos pasos: 

  • guarda tu sitioNos repetimos constantemente en este punto, pero nunca se puede ser demasiado precavido;
  • Enviar el sitio de preproducción al entorno de producción. ¿Eres un técnico experimentado? Puedes hacerlo manualmente si confías en tus habilidades. Para evitar errores y agilizar aún más el proceso, considera usar un plugin como All-in-One WP Migration o Duplicator. 
  • reactiva tus extensiones y herramientas de terceros, tales como sus complementos de almacenamiento en caché, seguridad y análisis de tráfico como Google Analytics; 
  • Redirige todas las URL contenidas en tu plan de redireccionamiento.Para realizar una redirección 301 (el tipo más común), utilice el complemento Redireccióno desde tu extensión SEO favorita (Rank Math, por ejemplo, ofrece esta opción de forma gratuita); 
  • Vuelva a probar su sitio web Siguiendo los consejos dados anteriormente, compruebe que todo esté configurado correctamente y ¡pruébelo todo!

Nuestro consejo Algunos plugins de migración limitan el tamaño de los archivos que se pueden migrar. Si su sitio web tiene muchos recursos, es posible que la versión gratuita le ofrezca limitaciones. En ese caso, actualice a la versión premium o busque ayuda profesional. un experto como WP Maintenance migrar manualmente.
Y si es posible, no publiques tu sitio web los fines de semana ni la víspera. Si algo sale mal, tendrás problemas…

Mantén un registro del rediseño de tu sitio web de WordPress.

Una vez que el rediseño de tu sitio web de WordPress esté en línea, recuerda realizar algunas acciones esenciales posteriores al lanzamiento: 

  • Supervise el rendimiento de su sitio, especialmente en los días y horas posteriores al rediseño. Solucione rápidamente cualquier error o problema detectado; 
  • Presta atención a los comentarios de tus usuarios., que puede alertarle sobre cualquier posible mal funcionamiento;
  • Supervisa el rendimiento de tu sitio (velocidad de carga, tráfico SEO, conversiones, etc.); 
  • Cerciorarse Mantenimiento regular de su sitio WordPressRealice copias de seguridad de su sitio con frecuencia y actualícelo lo antes posible (plugins, temas y núcleo de WordPress); 
  • comunicar sobre el rediseño de tu sitio WordPress a través de sus canales preferidos: boletín informativo, redes sociales, etc.; 
  • Comprueba que has alcanzado tus objetivos previos al rediseño.Luego, ajusta tu estrategia en función de tus resultados.
Tras rediseñar un sitio web de WordPress, revisa tus datos de Google Analytics.

resumen

Gracias a un rediseño de sitio web de WordPress, usted podrá: Moderniza y optimiza tu sitio web.

Esta operación, que requiere mucha técnica y tiempo, implica un análisis exhaustivo, una planificación minuciosa y una implementación ágil para garantizar una transición fluida hacia un sitio mejorado y de alto rendimiento.

En este artículo, has descubierto todos los pasos a seguir para llevar a cabo con éxito un rediseño eficaz y profesional antes, durante y después de su lanzamiento. 

Como ya habrás visto, Adherencia a las mejores prácticas y sólidas habilidades técnicas. son necesarias para evitar que tu sitio web se estropee y pierdas todo tu tráfico actual. 

Usted desea ser asesorado y apoyado por Una agencia reconocida especializada en el rediseño de sitios web WordPress.

Como especialistas en el sector, WP Maintenance le ofrecerá una solución a medida que satisfará sus necesidades con rapidez, profesionalidad y eficiencia.

Descubre más artículos del blog

flecha separadora

Ver más artículos