Una mirada temprana a la edición de sitios completos en WordPress

Aqu√≠ hay una pregunta existencial para los desarrolladores web: ¬ŅHasta qu√© punto debe separarse el sistema de gesti√≥n de contenido (CMS) de un sitio web de su dise√Īo?

Para muchos de los servicios de bricolaje (Wix, Squarespace, etc.), casi todas las facetas de un sitio web se pueden editar visualmente. Ya sea contenido, dise√Īo o maquetaci√≥n, puede personalizar el contenido de su coraz√≥n. Y no necesita comprender ning√ļn c√≥digo para hacer esto.

Aparte de algunos productos de creación de páginas sin código, WordPress tradicionalmente se ha mantenido alejado de un editor de sitio completo. los Personalizador de temas Permite a los usuarios cambiar ciertos aspectos de un tema, pero solo aquellos definidos por el desarrollador.

Eso va a cambiar. Edición completa del sitio web Con (FSE), el editor de bloques de Gutenberg se puede utilizar para editar todo el sitio web: el tema y todo.

Esta nueva caracter√≠stica puede potencialmente revolucionar lo que es posible con un tema de WordPress. Quer√≠a ver qu√© pod√≠a hacer desde el principio. Esto es lo que encontr√© …

Configurar la edición completa del sitio en WordPress

En este momento, la edici√≥n completa del sitio a√ļn no se ha integrado en el n√ļcleo de WordPress. Es una funci√≥n beta que trata sobre eso. Complemento de Gutenberg. As√≠ que agarro el complemento y lo activo primero.

Entonces es cuestión de encontrar un tema compatible. Q. es el primer tema de WordPress que admite FSE y sirve como lienzo para este experimento. Ahora que hemos instalado y activado el tema gratuito, veamos qué hace.

Otro punto a tener en cuenta: hago todo esto con una instalaci√≥n local de WordPress. Hay mucho que probar y corregir cuando se trata de editar sitios web por completo. Por lo tanto, a√ļn no est√° listo para un entorno de producci√≥n. ¬°Prueba en consecuencia!

Primeras observaciones

Cuando se trata de habilitar el tema Q, existen algunas diferencias notables en WordPress. En el otro extremo ahora hay un Editor del sitio Entrada en el men√ļ. Y si navega por la interfaz cuando inicia sesi√≥n, un Editar sitio El enlace se muestra en la barra de administraci√≥n. Ah, y tambi√©n hay una advertencia de que la edici√≥n completa del sitio es experimental (simplemente ignoraremos esto).

El enlace al editor del sitio en el panel de WordPress.

El tema en s√≠ es bastante b√°sico, lo cual es ideal. Esto nos brinda una forma m√°s f√°cil de personalizar. Si lo piensa, probablemente no quiera derribar un dise√Īo complicado solo para volver a ponerlo en otra cosa. De hecho, menos es m√°s.

Una vista frontal del tema de WordPress Q.

Busque en el editor del sitio

Ahora para este editor de sitio. Al hacer clic en él, se abrirá el editor de bloques de Gutenberg. Pero esta vez es más que una página en blanco estándar. En cambio, ahora tengo acceso a todo: el encabezado, la navegación (a través del bloque de navegación experimental), el área de contenido y el pie de página.

Como era de esperar, cambiar cualquiera de estos elementos requiere que haga clic en un bloque y comience a trabajar. Los bloques individuales se pueden convertir en otra cosa, editar o incluso eliminar. Los bloques tambi√©n se pueden reposicionar. Por ejemplo, colocar el men√ļ de navegaci√≥n sobre el t√≠tulo del sitio fue muy sencillo. Lo mismo se aplica a la sustituci√≥n del t√≠tulo de una sola columna por un dise√Īo de varias columnas.

Editar una plantilla de sitio web en WordPress.

Pero hay m√°s. Haga clic en el logotipo de WordPress en la parte superior izquierda de la pantalla para abrir la barra lateral del editor del sitio. All√≠ puede ver y crear plantillas de temas (como las del sitio) √≠ndice o Contribuciones Plantilla) o partes de la plantilla (como la Encabezamiento y Pie de p√°gina). Tenga en cuenta que tambi√©n puede acceder a estos elementos desde el men√ļ Apariencia en WordPress. Tambi√©n hay una forma de acceder a las p√°ginas, publicaciones y taxonom√≠as del sitio.

La barra lateral del Editor de sitios de WordPress.

Lo que es realmente bueno aquí es que tiene la opción de aislar solo las partes de la plantilla que desea editar. Cuando levanto el encabezado de Asunto> Partes de la plantillaEso es todo lo que veo en el editor de bloques. Sin embargo, si prefiero editarlo en el contexto de todo el tema, puedo limitarme a esta primera página del editor del sitio.

Editando la parte de la plantilla de encabezado en WordPress.

Crea nuevas plantillas

Si est√° familiarizado con el editor de bloques de Gutenberg, crear nuevas plantillas de dise√Īo es bastante f√°cil. El proceso es b√°sicamente el mismo que el de crear otra p√°gina o publicaci√≥n. Cree el dise√Īo que desee con los bloques disponibles y gu√°rdelo, ¬°listo!

Una cosa a tener en cuenta es que, en este punto, parece que las plantillas personalizadas deben seguir a WordPress. Jerarquía de plantillas Reglas de denominación. Dicho esto, el slug de una plantilla personalizada debe coincidir con el nombre del propósito correspondiente en su tema (sin el .php Al final).

Por ejemplo, si desea crear una plantilla para usar en su p√°gina de inicio, el slug debe llamarse front-page. ¬ŅLe gustar√≠a ir a la p√°gina “Acerca de nosotros” (yourite.com/about-us/)? Una plantilla con el caracol de page-about-us har√° el truco.

Creación de una plantilla de página de inicio en el editor de WordPress para sitios web completos.

Las plantillas se pueden descargar desde el men√ļ de configuraci√≥n en la parte superior derecha del editor. Esto le permite guardar plantillas manualmente en su dispositivo y luego subirlas al servidor para protegerse de posibles contratiempos.

Una lista de plantillas de sitios web.

Usar partes de plantilla

Como se mencionó anteriormente, la edición completa del sitio de WordPress nos permite editar y crear partes de la plantilla. Esto incluye el encabezado y pie de página del sitio, pero hay muchas otras opciones.

Las partes de la plantilla se pueden crear y luego incorporar a cada plantilla a través de un bloque. También puede agregar una parte de la plantilla a una página o publicación específica.

El bloque

Esto puede resultar √ļtil cuando desee agregar contenido espec√≠fico en varias p√°ginas o tipos de publicaciones.

Por ejemplo, imagine un bloque de publicaciones destacadas que desea mostrar tanto en sus publicaciones individuales como en sus p√°ginas de archivo. O hay un men√ļ de navegaci√≥n que solo debe mostrarse cuando se utilizan una o m√°s plantillas espec√≠ficas.

Las partes de plantilla son un medio de configurar esto sin la necesidad de técnicas avanzadas como la lógica condicional.

Inserte una parte maestra en una p√°gina.

Preguntas para el futuro de los temas de WordPress

En general, le di a esta experiencia de editar completamente el sitio web una calificaci√≥n positiva. Todav√≠a queda un largo camino por recorrer para corregir errores y mejorar la usabilidad. Los problemas de apoyo tambi√©n ser√°n un obst√°culo importante. Sin embargo, esta puede ser una caracter√≠stica muy √ļtil.

A√ļn as√≠, me vienen a la mente algunas preguntas:

¬ŅA qui√©n est√° dirigida la edici√≥n completa del sitio?

Uno de los principales argumentos a favor del editor de bloques de Gutenberg era que tenía que ser relevante. Los competidores en el mercado del bricolaje tienen un enfoque más visual para los sitios de construcción y WordPress se había quedado atrás.

Por tanto, tiene sentido que la edición completa del sitio web esté dirigida a usuarios que: a) no conocen o no quieren utilizar código; yb) quieren acceder a la mayoría (si no a todos) los elementos de su sitio web.

¬ŅQu√© hay para los dise√Īadores web?

Hay algunas ventajas. Por ejemplo, abrir un encabezado permite a un cliente actualizar r√°pidamente un nuevo n√ļmero de tel√©fono o direcci√≥n. Esto podr√≠a evitar que los dise√Īadores consideren cambios fundamentales.

Sin embargo, habr√° algunas cosas que los profesionales de la web querr√°n bloquear. La prueba del cliente de un sitio a menudo se realiza para proteger contra roturas. Los dise√Īos y las funciones son elementos esenciales con los que preferimos no correr riesgos.

Esperemos que haya formas de controlar fácilmente qué se puede y qué no se puede editar en el back-end, como lo hace el personalizador de temas existente. De lo contrario, será otra posible pesadilla de la que preocuparse.

¬ŅC√≥mo afecta la edici√≥n completa del sitio al mercado de temas comerciales?

Eso ser√° fascinante de ver. Por el momento, muy pocos temas parecen haberse ajustado para Gutenberg. Todav√≠a conf√≠a en complementos de creaci√≥n de p√°ginas de terceros para dise√Īos avanzados. Algunos productos, como Divi y Beaver Builder, ya tienen sus propias funciones de edici√≥n de sitios web.

Así que no se sorprenda si el sitio web tarda en editarse por completo. Es poco probable que los desarrolladores de temas intervengan hasta que haya demanda y una indicación clara de cómo beneficiarse de ella. Sin mencionar el hecho de que muchas funciones existentes necesitan ser reelaboradas.

En mi opinión, los desarrolladores deben implementar esto de una manera que agregue flexibilidad a los usuarios y minimice el riesgo de rotura. Esto puede tomar la forma de plantillas prefabricadas (y parcialmente bloqueadas) y permitir a los usuarios elegir las plantillas que deseen. Pero todavía estamos muy temprano en el juego.

Un WordPress m√°s fluido

Gran parte del ecosistema de WordPress es poco a poco. Elige un tema aquí, un complemento de Allí (y Allí y Allí) e intente ponerlo todo junto. Esto es parte de su atractivo y funcionó muy bien.

Pero la experiencia de dise√Īo no se benefici√≥ del todo con este flujo. La apariencia y el dise√Īo de un tema siempre se han separado de alguna manera. Ya sea que se trate de piratear plantillas o usar el personalizador de temas, hay mucho por lo que caminar.

Lo ame o lo odie, editar completamente el sitio web es un paso hacia la unificaci√≥n del proceso de dise√Īo. Con √©l, todo se puede crear en un solo lugar dentro de una sola interfaz de usuario. Es una experiencia m√°s fluida de la que muchos usuarios deber√≠an beneficiarse.