Si eres desarrollador o propietario de un sitio de WordPress, sin duda habrás oído muchos elogios sobre el Editor del sitio. Esta potente herramienta permite a los usuarios editar todos y cada uno de los componentes de su sitio —desde las cabeceras y los pies de página hasta las plantillas— mediante bloques.
Sin embargo, para aprovechar el Editor del sitio, tendrás que instalar y activar un tema de bloques en tu sitio. El proceso de pasar de un tema clásico a un tema de bloques puede parecer complicado, pero merecerá mucho la pena, tanto si trabajas en tu propio sitio como si mejoras el de un cliente.
Veamos por qué podrías querer cambiar a un tema de bloques y cómo hacerlo de forma segura y eficaz.
¿Cuáles son las distintas opciones de temas en WordPress?
En WordPress hay varios tipos de temas disponibles, y entender la diferencia te ayudará a identificar la mejor solución para tu situación.
1. Temas clásicos
Los temas clásicos de WordPress son los que llevan más tiempo disponibles y se crean mediante plantillas basadas en PHP. Normalmente no son tan flexibles como los temas de bloques, y los propietarios de sitios utilizan el Personalizador y las áreas de widgets para hacer cambios de diseño. Por lo general, los temas clásicos son más difíciles de personalizar, especialmente en el caso de los elementos globales del sitio y las plantillas.
Si llevas mucho tiempo trabajando en la comunidad de WordPress, sin duda estás familiarizado con los temas clásicos.
2. Temas de bloques
Los temas de bloques se crean con plantillas HTML compuestas íntegramente por bloques. En lugar de utilizar widgets y el Personalizador, los propietarios de sitios usan el Editor del sitio para hacer cambios. Esto proporciona mucha más flexibilidad y permite a los usuarios editar con bloques desde las cabeceras y los pies de página hasta las plantillas.
WordPress es compatible con los temas de bloques desde la versión 5.9, y hay algunas opciones excelentes entre las que elegir.
3. Temas híbridos
Un tema híbrido es exactamente lo que parece: una combinación de temas clásicos y de bloques. Ofrece algunas de las experiencias de edición tradicionales de los temas clásicos, junto con herramientas más avanzadas de los temas de bloques.
En esencia, los temas híbridos de WordPress son temas clásicos que han incorporado uno o más aspectos de los temas de bloques (por ejemplo, el Editor del sitio o theme.json, un archivo del tema).
4. Temas universales
Los temas universales permiten aprovechar al máximo el Editor del sitio, pero también se pueden configurar para utilizar elementos clásicos de WordPress, como el Personalizador y las áreas de widgets. Están diseñados, en esencia, para «cerrar la brecha» entre los temas de bloques y los clásicos.
¿Por qué cambiar a un tema de bloques?
Ahora que hemos repasado los distintos tipos de temas, veremos por qué merece la pena pasar de un tema clásico a uno de bloques.
1. Mejor rendimiento
El rendimiento siempre es una prioridad al crear un sitio web, ya que afecta a todo, desde la experiencia del usuario hasta las conversiones y la posición en los motores de búsqueda. Por lo general, los temas de bloques son más rápidos que los temas clásicos porque cargan los estilos solo para los bloques renderizados en la página.
En muchos casos, también puedes evitar los plugins pesados que ralentizan tu sitio utilizando en su lugar las funciones integradas del editor de bloques de WordPress.
2. Facilidad para actualizar y hacer cambios
Cuando puedes editar absolutamente todo con bloques, el proceso de diseño y actualización es más sencillo y rápido. Los desarrolladores pueden crear sitios web de WordPress y realizar cambios para sus clientes en menos tiempo arrastrando y soltando bloques en lugar de editar plantillas de temas clásicas. Y gracias a funciones como bloques reutilizables, puedes trabajar de forma más inteligente en lugar de trabajar más duro.
Los propietarios de sitios también pueden hacer cambios en su sitio de WordPress —incluso en las plantillas de las entradas del blog, las páginas de productos y las páginas 404— sin tener que trabajar con código. Esto significa que es menos probable que dañen su sitio web y, al mismo tiempo, pueden evitar los pesados plugins maquetadores de páginas.
3. La capacidad de seguir la evolución de WordPress
Los temas de bloques y el Editor del sitio son una parte fundamental de la dirección que está tomando WordPress. Estas herramientas abren infinitas posibilidades en Internet para todo el mundo, incluidas las personas que no se considerarían «expertas en tecnología».
Como dijo Matt Mullenweg, «[Esto] afronta de frente nuestros retos y oportunidades, al tiempo que beneficia a todas las personas que se ganan la vida trabajando en el ecosistema de WP. Se trata de mucho más que simples bloques».
Por eso, estas funciones están en constante desarrollo y mejora. Con cada iteración, son más potentes y eficaces tanto para los propietarios de sitios como para los desarrolladores. Mientras WordPress siga avanzando en esta dirección, no te quedes atrás.
4. La capacidad de editar todas las partes de tu sitio mediante bloques
Ya hemos hablado un poco de esto, pero la flexibilidad es, sin duda, una de las mayores ventajas de utilizar un tema de bloques. Además de crear páginas y entradas con bloques, puedes personalizar casi todas las partes de tu sitio web, incluidas:
- Cabeceras y pies de página
- Plantillas de páginas y entradas
- Páginas del carrito y de pago
- Páginas de productos y de archivo
- Páginas 404 y de búsqueda
Esto ofrece una experiencia mucho mejor a los desarrolladores —que quieren ahorrar tiempo tanto para ellos como para sus clientes— y a los propietarios de sitios, independientemente de su nivel de experiencia. Además, te permite crear un diseño de sitio web de WordPress realmente único, que va más allá de las plantillas predeterminadas sin tener que dedicar mucho tiempo a editar código.
5. Herramientas de accesibilidad integradas
El Editor del sitio se ha creado teniendo en cuenta la accesibilidad. Las funciones de accesibilidad, como Saltar al contenido, la navegación con teclado y los puntos de referencia, se generan automáticamente sin que los desarrolladores tengan que añadir código. Al dejar estas responsabilidades fuera del alcance de los desarrolladores de temas, es más fácil que los temas sean utilizables por todo el mundo.
6. La posibilidad de cambiar de tema más fácilmente en el futuro si es necesario
Con los temas clásicos, dependes mucho más de componentes del tema como las plantillas estáticas, los widgets y los constructores de páginas. Si quieres cambiar de tema, tendrás que trabajar mucho, a menudo recreando gran parte (si no todo) de tu sitio.
Sin embargo, si finalmente cambias de un tema clásico a uno de bloques, cambiar de tema en el futuro será mucho más sencillo.
Como todo —incluidas las plantillas y los elementos globales del sitio, como las cabeceras y los pies de página— estará basado en bloques, no tendrás que recrearlos cada vez que cambies de tema.
¿Cuáles son los pasos prácticos que debes seguir antes de cambiar?
¿Estás listo para cambiar de un tema clásico a uno de bloques? Primero debes seguir algunos pasos para asegurarte de que todo vaya bien.
1. Haz una copia de seguridad de tu sitio
Siempre es importante tener una copia de seguridad de tu sitio a mano antes de hacer cambios importantes. Si algo sale mal o simplemente quieres deshacer tus acciones, una copia de tu sitio será de gran utilidad.
Aunque puedes hacerlo manualmente, la mejor solución es utilizar un plugin de copias de seguridad en tiempo real como Jetpack VaultPress Backup. Esta herramienta guarda una copia de tu sitio web cada vez que haces un cambio, para que siempre tengas una a mano. Además, puedes restaurar una copia de seguridad de forma fácil y rápida, incluso si tu sitio web está completamente caído.
2. Haz pruebas en un entorno de staging
Es fundamental que cambies a un tema de bloques dentro de un entorno de staging. Esto te proporcionará un lugar seguro para hacer todos tus cambios y asegurarte de que todo funciona correctamente mientras tu sitio web de WordPress sigue siendo utilizable. Después, cuando estés listo, podrás publicar fácilmente tu sitio web con el nuevo tema.
Muchos proveedores de hosting incluyen entornos de staging en sus paquetes de alojamiento. Como alternativa, puedes utilizar un plugin como WP Staging.
Obtén más información sobre la creación de un sitio de staging.
3. Copia el contenido de tus widgets
Los widgets son una parte importante de los temas clásicos, pero no se utilizan en los temas de bloques. Por tanto, dedica tiempo a guardar el contenido de los widgets que quieras conservar.
Si, por ejemplo, tienes una plantilla de página de inicio con widgets, copia cualquier texto que quieras conservar y guárdalo para consultarlo en el futuro. O quizá tengas una llamada a la acción eficaz para un boletín de correo electrónico en la barra lateral. Guarda toda esta información para poder recrearla en tu tema de bloques.
4. Asegúrate de que tus plugins sean compatibles
Asegúrate de que todos los plugins que utilizas funcionen bien con el tema de bloques al que vas a cambiar. En muchos casos, esto no supondrá ningún problema.
Pero si, por ejemplo, tu sitio web de WordPress está creado con un constructor de páginas específico del tema, no podrás utilizar esa herramienta con el nuevo tema de bloques. O, si un plugin funciona mediante widgets, tendrás que confirmar que también dispone de bloques que ofrezcan la misma funcionalidad.
Estos son algunos otros casos en los que los plugins podrían no funcionar con tu tema de bloques:
- Herramientas diseñadas para editar los menús clásicos en lugar del bloque Navegación
- Plugins para gestionar los comentarios que no funcionan con los bloques de comentarios
- Herramientas creadas para utilizar el Personalizador de WordPress
Sin embargo, como mencionamos antes, la mayoría de los plugins de WordPress consolidados se están adaptando para funcionar sin problemas con los temas de bloques, el Editor del sitio y el futuro de WordPress.
5. Guarda cualquier código personalizado
Comprueba si has creado código personalizado en los archivos de tu tema actual. Por ejemplo, puede que hayas añadido PHP al archivo functions.php o código CSS en el archivo style.css del tema.
Copia también todo lo que hayas añadido a la sección CSS adicional del Personalizador de WordPress y cualquier código de seguimiento que puedas estar utilizando, como el píxel de Facebook.
Cómo cambiar de un tema clásico a uno de bloques en WordPress
¿Lo has guardado y tienes una copia de seguridad de todo? ¡Empecemos!
Este proceso dependerá mucho del tema clásico que utilizaras y del tema de bloques al que cambies. Algunas transiciones requerirán más trabajo, especialmente si tu sitio web se creó principalmente con widgets y código personalizado.
Por tanto, ten en cuenta que los pasos siguientes son una guía general y que quizá tengas que experimentar con ellos para conseguir exactamente lo que buscas.
1. Elige y activa tu nuevo tema de bloques
El primer paso es instalar y activar tu tema de bloques. Recuerda que debes hacerlo en un entorno de staging para que tu sitio activo no se vea afectado.
Si aún no has seleccionado un tema de bloques, hay opciones estupendas entre las que elegir, incluida una gran variedad de temas gratuitos en el repositorio de temas de WordPress.org.
Ve a Apariencia → Temas, y haz clic en Añadir nuevo arriba. Allí, puedes desplazarte por una variedad de temas, buscar uno por su nombre e incluso previsualizar un tema al pasar el cursor sobre él y seleccionar Vista previa.
Solo tienes que hacer clic en Activar cuando hayas elegido. Para este ejemplo, utilizaremos el tema Twenty Twenty-Three.
2. Configura los estilos de todo el sitio
Tu siguiente tarea es configurar los estilos del tema. Esto te permite elegir el aspecto que tendrán determinados elementos de tu sitio web de WordPress en todo el sitio.
Para ello, ve a Apariencia → Editor. Esto abrirá el Editor del sitio. Después, haz clic en Estilos en el menú de la izquierda.
Veamos más detenidamente las opciones disponibles. Primero, verás una cuadrícula de colecciones de estilos prediseñadas entre las que puedes alternar y previsualizar en la parte derecha de la página. Si quieres, puedes aplicar una de ellas para tener una base inicial para el diseño de tu sitio.
Ahora, haz clic en el icono del lápiz junto a Estilos. Esto abrirá un menú nuevo en el lado derecho de la página. Haz clic en Tipografía para ver todas las opciones globales de fuentes y color del texto. Puedes editar ajustes como la familia tipográfica, el aspecto, la altura de línea y el tamaño de todo, desde los párrafos hasta los encabezados y los botones.
El panel de Colores te permite establecer una paleta de colores para tu sitio y tomar decisiones sobre los colores del fondo, el texto, los enlaces, los botones y mucho más.
En la sección Diseño, establece opciones como el ancho del área de contenido y el relleno.
Haz clic en Bloques en la parte inferior del panel Estilos para ver las opciones que se aplican a bloques específicos. Recuerda que cualquier cambio que hagas aquí se aplicará globalmente a los bloques.
Tomemos como ejemplo el bloque Galería de mosaicos. Cuando hagas clic en él en la lista de bloques, verás ajustes para los colores, los diseños y las variaciones de estilo. También puedes añadir CSS personalizado específico para este bloque.
Poder aplicar estilos a los bloques y a los elementos del sitio de forma global te ahorra mucho tiempo de desarrollo y garantiza que puedas conseguir un aspecto uniforme en todo el sitio. Dedica un tiempo a ajustar aquí la configuración de estilos como prefieras, tanto si quieres imitar el tema clásico original que utilizabas como si vas a cambiar por completo a un diseño nuevo.
Una de las funciones más interesantes del panel Estilos es el Libro de estilos, al que puedes acceder haciendo clic en el icono del ojo de la esquina superior derecha. Esto te permite previsualizar todos los cambios de diseño que hagas en una gran variedad de elementos y bloques, como encabezados, párrafos, citas, tablas y mucho más.
3. Crea la estructura de tu sitio
Ahora que ya tienes los estilos configurados, es hora de crear la estructura de tu sitio, incluidos:
- Encabezado y pie de página
- Navegación/menús del sitio
- Plantillas para entradas del blog, páginas, contenido de comercio electrónico, etc.
Puedes acceder a todo esto desde Apariencia → Editor en el panel de administración de WordPress. Verás varias opciones, como Plantillas y Patrones. Las plantillas son diseños de página para contenido del sitio, como entradas de blog, páginas de archivo y productos. En la sección Patrones, encontrarás partes de plantilla, que incluyen elementos como encabezados y pies de página. Todos ellos variarán según el tema que estés usando.
Veamos el encabezado, por ejemplo. Haz clic en Patrones → Encabezado, y selecciona el encabezado específico que quieras. Ahora puedes editarlo usando bloques. En este ejemplo, el encabezado tiene un bloque Título del sitio y un bloque Navegación.
Usarás el bloque Navegación para crear la navegación de tu sitio, en lugar de ir a Apariencia → Menús como hacías con un tema clásico.
Cuando hagas clic en el bloque de navegación, aparecerán opciones en un menú situado encima del bloque y en el panel de ajustes, en el lado derecho de la página. En ese panel de ajustes verás una lista de las páginas que hay en tu menú. Haz clic en el icono +, seguido de Enlace de página o Enlace personalizado para añadir páginas al menú.
Puedes utilizar las demás pestañas del panel de ajustes para aplicar estilos al menú y realizar otros cambios de diseño y funcionalidad en la navegación del sitio.
A continuación, puedes añadir bloques al encabezado igual que harías con el editor de bloques que ya conoces. Por ejemplo, quizá quieras añadir una barra de búsqueda o iconos de redes sociales.
Cuando estés satisfecho con el encabezado, revisa las demás partes de la plantilla —como el pie de página— y colócalas donde quieras.
Ahora, echemos un vistazo a una plantilla. Ve a Apariencia → Editor → Plantillas. En nuestro ejemplo, vamos a elegir la plantilla Individual, que es el diseño de las entradas de blog.
Cuando abras la plantilla, verás que puedes editarla igual que cualquier otra página o entrada que utilice el editor de bloques. Ya habrá algunos bloques predeterminados, como el bloque de imagen destacada, el bloque de título de la entrada y el bloque de contenido de la entrada. Puedes modificarlos, moverlos y aplicarles estilos como quieras.
Pero también puedes añadir bloques que aparecerán en todas las entradas del blog de tu sitio web. Por ejemplo, podrías añadir una llamada a la acción que dirija a los lectores a un formulario de suscripción a un boletín por correo electrónico, a una página de contacto o a un producto a la venta.
Edita esta plantilla y todas las demás que quieras, guardando los cambios a medida que avances.
Si tu tema clásico dependía mucho de los widgets, también puedes utilizar la herramienta Importador de widgets para facilitar el proceso de migración. Puedes ver un vídeo tutorial completo del blog Learn WordPress.
Obtén más información aquí sobre cómo utilizar el editor de bloques y el Editor del sitio.
4. Reconstruye o ajusta las páginas y entradas que sea necesario
Si tus páginas se crearon con el editor de bloques o el editor clásico, probablemente necesitarán muy pocos cambios, o ninguno, al migrar a un tema de bloques. El contenido creado con el editor clásico aparecerá automáticamente en un bloque Clásico. Puedes seleccionar el bloque Clásico y hacer clic en Convertir a bloques para separar el contenido en bloques.
Puede que tengas que hacer algunos ajustes y cambios puntuales en los bloques. Dedica un tiempo a revisar tus páginas y entradas para asegurarte de que todo está a tu gusto.
5. Elimina los plugins que no utilices
No conviene instalar plugins que no necesitas. Y si ya no necesitas alguno de los plugins que tienes instalados —ya sea porque has sustituido su funcionalidad por la de tu tema de bloques o porque no son compatibles—, asegúrate de desactivarlo y eliminarlo.
Los plugins innecesarios pueden suponer un riesgo para la seguridad y ralentizar tu sitio web de WordPress.
6. Prueba el sitio por completo
Cuando estés satisfecho con el aspecto de tu sitio, revísalo y pruébalo todo. Consulta tus páginas en distintos tamaños de pantalla, prueba funciones como los formularios y los pagos, y asegúrate de que todo funcione de la forma que prefieras tú o tu cliente.
7. Publica el nuevo diseño del sitio web
Ahora, utiliza tu entorno de pruebas para aplicar los cambios y publicar el nuevo tema. ¡Y ya habrás completado la migración de un tema clásico a uno de bloques!
Preguntas frecuentes sobre el cambio de un tema clásico a un tema de bloques
¿Tienes más preguntas? Aquí tienes las respuestas a algunas de las preguntas más frecuentes.
¿Y si aún no estoy preparado para cambiar completamente a un tema de bloques?
Si te preocupa hacer el cambio, puedes adoptar un enfoque más gradual. Por ejemplo, podrías elegir un tema híbrido o universal que incorpore algunos elementos de un tema de bloques y siga permitiendo utilizar las funciones de los temas clásicos.
Sin embargo, los temas de bloques son el futuro de WordPress y se están convirtiendo rápidamente en la norma. En la mayoría de los casos, lo mejor es adoptar estos temas cuanto antes y familiarizarte con ellos.
¿Cómo se convierte el editor clásico en bloques?
Al cambiar al editor de bloques, el contenido creado con el editor clásico se convertirá automáticamente en un bloque Clásico. Al seleccionar este bloque, aparecerá un menú con la opción de Convertir en bloques. Esto separará automáticamente el contenido en los bloques correspondientes.
En algunos casos, puede que tengas que hacer algunos ajustes para que el contenido quede exactamente como quieres.
¿Cómo puedo cambiar de tema sin perder el contenido?
Al cambiar de tema, todo el contenido de tus entradas, páginas, productos y otros tipos de entrada permanecerá en su sitio. Lo mismo ocurre con tu biblioteca multimedia y cualquier información guardada en tu base de datos. Cambiar de tema simplemente modificará el diseño y la apariencia de tu sitio.
Dicho esto, siempre es mejor crear una copia de seguridad completa de tu sitio antes de cambiar de tema. También deberías trabajar en un entorno de pruebas para que tu sitio activo no se vea afectado.
¿Cuál es la diferencia entre un tema clásico y un tema de bloques?
Con los temas clásicos, los propietarios de sitios y los desarrolladores utilizan el Personalizador de WordPress y las áreas de widgets para hacer cambios en el diseño y la disposición. Los temas clásicos se crean con PHP y no son tan flexibles ni fáciles de usar como los temas de bloques.
En cambio, los temas de bloques utilizan plantillas basadas en HTML compuestas por bloques. Para hacer cambios, los propietarios de sitios utilizan el Editor del sitio y los Estilos globales, que les permiten editar cada una de las partes de su sitio mediante bloques. Esto significa que pueden cambiar desde las cabeceras y los pies de página hasta las plantillas sin editar ningún código.
¿Cuál es la diferencia entre el editor Gutenberg y el Editor del sitio?
Si has oído el término «Gutenberg», puede que te preguntes en qué se diferencia de expresiones como «editor de bloques» y «editor del sitio». En general, significan lo mismo: las herramientas que permiten a los usuarios de WordPress editar su sitio con bloques.
Sin embargo, el nombre «Gutenberg» se utilizaba para el proyecto específico de desarrollo e implementación de bloques en WordPress. Este nombre está dejando de utilizarse a medida que el proyecto se acerca a su finalización, y WordPress utiliza «editor de bloques» y «editor del sitio» como nombres permanentes para estas herramientas.
El plugin de Gutenberg es un plugin gratuito de WordPress que permite a los propietarios de sitios probar funciones antes de que se publiquen como parte del núcleo de WordPress.
¿Dónde puedo obtener más información sobre los temas de bloques?
Hay varios lugares donde puedes obtener más información sobre los temas de bloques y el editor de bloques:
- Learn WordPress, que está repleto de tutoriales y vídeos
- Documentación de WordPress.org, que incluye guías detalladas
- WordPress.tv, que te permite ver un tutorial en vídeo sobre numerosos aspectos de WordPress
- Guía completa del editor de bloques, una publicación detallada de Jetpack que contiene todo lo que necesitas saber sobre el editor de bloques
Una vez hecha la transición, maximiza el rendimiento, la seguridad y el potencial de marketing de tu sitio con un plugin gratuito que ofrece opciones premium como Jetpack.
Jetpack 