Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Cómo Preparar Tu Sitio WordPress para Gutenberg

by
Length:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Gutenberg ya ha llegado a WordPress. ¿Está listo tu sitio web? Aunque todavía no sabemos exactamente qué forma definitiva tendrá, este nuevo sistema de contenido será añadido a su núcleo en el futuro. Echemos un vistazo a los impactos que podría tener en tu sitio y cómo puedes detectar y solucionar las áreas problemáticas de forma preventiva.

¿Qué es Gutenberg?

Gutenberg es un proyecto de WordPress que tiene como objetivo ofrecer a los usuarios más flexibilidad a la hora de diseñar su contenido. Esencialmente, el proyecto pretende sustituir el actual editor, que funciona básicamente como un procesador de textos, por una interfaz más visual y estructurada. Actualmente, Gutenberg es un plugin, y permite que los usuarios modifiquen su contenido de manera similar a como lo harían con WPBakery u otros editores "drag and drop", aunque de una forma simplificada y altamente intuitiva.

Si deseas aprender más sobre qué es Gutenberg, echa un vistazo a mi anterior artículo "¿Qué es WordPress Gutenberg?"

Las Piezas de Tu Sitio

Gutenberg es un inmenso proyecto y probablemente va a trastocar un gran número de puntos en tu sitio web. Estas son las tres áreas problemáticas que debes comprobar:

  • Tu Tema: Gutenberg viene con su propio conjunto de estilos para el contenido. ¿Es compatible tu tema? ¿Como se verá tras activar Gutenberg?

  • Tus Plugins: Es posible que Gutenberg interactúe con tus otros plugins de maneras inesperadas. Veremos cuáles pueden ser estas y qué hacer ante cualquier problema que se nos presente.

  • Tu Contenido: Gutenberg afectará a la manera en la que se muestra tu contenido. Examinaremos cómo podría cambiar esto la manera en la que se muestran las páginas y repasaremos algunas posibles soluciones por si estás teniendo problemas.

Crear un Entorno de Pruebas

Antes de empezar, es una buena idea configurar un entorno de pruebas en el que experimentar con Gutenberg para no acabar rompiendo tu sitio web público. Idealmente, deberías configurar tu propia área de pruebas o crear una copia de tu sitio en una instalación local. Para conocer mejor cómo llevar a cabo cualquiera de estas tareas, consulta el siguiente tutorial:

Si no te es posible hacer ninguna de estas cosas, puedes realizar la prueba directamente en tu sitio web. Pero ten en cuenta que esto conlleva sus riesgos ya que vamos a activar y desactivar un número de piezas de tu sitio. Si haces la prueba en vivo, por favor asegúrate de crear un backup de tu sitio web antes de empezar.

Una vez que sepas donde vas a realizar las pruebas, dirígete al directorio de plugins y localiza Gutenberg. Una vez instalado y activado, continúa leyendo.

Haz Que Tu Tema Pase Sus Pruebas

Ahora que tienes instalado Gutenberg, echemos un vistazo a la primera sección de tu sitio que podría verse afectada: tu tema. Si ya existen problemas importantes en este punto, como errores con la base de datos o problemas con el admin de WordPress, salta hasta la sección Qué Hacer Cuando Surgen Demasiados Problemas.

Como Gutenberg interactúa principalmente con el contenido del sitio, por suerte para nosotros, sólo necesitamos poner a prueba un conjunto limitado de cosas.

Lo primero es que Gutenberg viene con su propia hoja de estilos y estilos. Comprueba cada uno de los distintos tipos de páginas y plantillas utilizadas en tu sitio para asegurarte de que siguen apareciendo correctamente. El foco principal aquí van a ser elementos del área del contenido principal de tus páginas, especialmente bloques de contenido y la imagen. Si ves algún problema, es probable que los estilos de Gutenberg se estén aplicando con preferencia a los estilos de tu sitio.

Para corregirlo, tendrás que identificar de dónde viene el problema. Por lo general, se tratará de un selector CSS que se está aplicando en un elemento HTML, o puede ser que los estilos de Gutenberg tengan prioridad sobre tus propias clases. Sea cual sea el caso, trata de identificar dónde se está produciendo el error. A continuación, determina por qué los estilos de Gutenberg están sobreescribiendo los tuyos y corrige tu código para permitir que estos se apliquen con preferencia.

Trata de hacer las correcciones en tu propio tema (o mejor aún, en un tema hijo o en un área especifica para el CSS de tu tema), en lugar de alterar Gutenberg. Si modificas cualquiera de los archivos de Gutenberg directamente, es probable que sea sobrescrito cuando se actualice el plugin.

De manera similar, querrás comprobar que tu área admin no tenga ningún problema de estilo. Las opciones del tema y otras secciones personalizadas o implementadas y generadas por tu tema parecen ser los más problemáticos hasta ahora. Una vez hayas identificado los problemas de estilo en estas áreas, normalmente podrás corregirlos cambiando o creando un tema hijo y ajustando en él el código CSS.

¿Funcionan Tus Plugins?

Después de subsanar tu tema, la siguiente comprobación a realizar son los plugins de tu sitio. Específicamente, no pierdas de vista a cualquier plugin que genere shortcodes que después usas en tu contenido (por ejemplo Gravity Forms), plugins que afecten a la apariencia de tu contenido (plugins relacionados con la accesibilidad como los que afectan al tamaño del texto), y los plugins que insertan directamente elementos en tu página (como Advanced Custom Fields).

Revisa los Shortcodes

Para auditar esta área, recopila primero una lista de cualquier shortcode que pueda estar utilizando, junto con las páginas en las que estás aplicados. Con tu lista en mano, visita cada una de estas páginas a ver si están funcionando según lo previsto. Si encuentras problemas de estilo, es probable que estes experimentando el mismo problema de antes y necesites reajustar sus estilos.

Sin embargo, si estás recibiendo el temido shortcode — es decir que tu página está mostrando [shortcode] en lugar de hacer lo que debe, hay otra solución. En este caso, puedes buscar en el bloque donde está el código y confirmar que no se esté considerando como texto (busca y elimina etiquetas no deseadas en el código). Si el problema persiste, mover el código a un tipo de bloque más apropiado debería hacer que todo vuelva a funcionar correctamente.

El Aspecto del Contenido

Este problema surge del mismo conflicto que vimo previamente: anulaciones de estilo. Identifica los elementos que están siendo afectados y corrige el CSS.

Crear Elementos

El área final en la que vamos a buscar cuestiones contradictorias afecta a la creación de elementos. Cualquier plugin que inserte elementos HTML en una página sin usar shortcodes es sospechoso en estos casos — por ejemplo, cuando PHP invoca campos personalizados del plugin Advanced Custom Fields.

El desliz más común con la creación de elementos gira en torno a bloques mal colocados. Como Gutenberg ofrece sus propios estilos, existe cabe la posibilidad de que si los elementos se crean dentro de un bloque equivocado, se muestren de forma incorrecta. La solución para esto es asegurarte de que tu código añade los elementos en el bloque que deseas.

¿Aparece Tu Contenido Como Debería?

Esto no es tan urgente como los otros problemas que hemos analizado, pero puede haber algunas complicaciones en lo relativo a cómo se representa tu contenido. La mayoría de estos problemas serán cambios menores en el estilo o en cómo se organizan los bloques. Para corregirlo, vas a tener que jugar con el sistema de bloques hasta conseguir que tu página tenga el aspecto que quieres.

Qué Hacer Cuando Aparecen Demasiados Problemas

¿Te topaste con un problema que no has podido resolver con las sugerencias de este artículo? ¡No te asustes! Todavía hay tiempo antes de que Gutenberg esté integrado en el núcleo de WordPress.

En primer lugar, anota el error y qué pasos te condujeron a él. Cuanta más información puedas recopilar, mejor. Pasa toda esta información al equipo de Gutenberg. Con suerte, podrán determinar el problema y ponerle solución en el lanzamiento de una futura versión.

Si estabas trabajando en un sitio de prueba, entonces, en este punto, es todo lo que puedes hacer de momento. Continúa consultando las notas para ver si tu problema está solucionado, o trabaja para intentar resolverlo tú mismo.

Si estabas trabajando en tu sitio, desactivando Gutenberg todo debería volver a la normalidad. Si no es así, ¡es el momento de recuperar instalación anterior desde la copia de seguridad que hiciste!

¡Buena Suerte con Tu Instalación!

Gutenberg aspira a ser un cambio decisivo en el entorno de WordPress, que pretende cambiar el contenido para mejorarlo. Antes de que caiga la rama principal, asegúrate de comprobar que tu sitio funcionará tras la implantación de los cambios que están por venir. Si tienes problemas que no sean de lo que ha enumerado aquí, mejores soluciones o correcciones de cualquier cosa en este artículo, por favor deje un comentario abajo!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.