Transcripción
Introducción
Exploremos el Editor del sitio, que te permite diseñar todo en tu sitio usando bloques, desde el encabezado hasta el pie de página y todo lo que hay entre ellos. Vayamos a Apariencia y hagamos clic en Editor. Esto abrirá el Editor del sitio. A la izquierda está la barra lateral de vista del sitio, y esta práctica herramienta te permite explorar las partes clave de tu sitio, incluida la navegación, los estilos, las páginas, las plantillas y los patrones. Este tutorial tiene como objetivo ayudarte a comprender a fondo estos elementos.
Navegación
Comencemos por la parte superior con la navegación. Aquí puedes ver y ajustar rápidamente todos tus menús. Es tu centro de control para la gestión de menús. Puedes hacer ediciones sencillas directamente, como reordenarlos. Cuando haces clic en los tres puntos verticales junto al nombre del elemento del menú, puedes cambiarle el nombre, duplicarlo y eliminarlo según sea necesario. Si lo abres en el modo de edición, puedes realizar ciertos cambios sin distracciones. Además, las actualizaciones se sincronizarán en todo tu sitio. Puedes añadir nuevas páginas u otros elementos del menú cuando haces clic en el icono del signo más. Observarás que el bloque Navegación está bloqueado en esta área. Si quieres aplicar estilos a tu menú de navegación, debes abrir una plantilla o la parte de plantilla de la que forma parte.
Estilos
A continuación, hablemos de los estilos. Cuando seleccionas Estilos, podrás explorar una variedad de combinaciones de estilos diferentes que vienen con tu tema. Cuando haces clic en Editar estilos, puedes explorar tus estilos desde aquí y luego cambiar la tipografía, los colores y el diseño de tu sitio. Veamos cómo funciona. Cuando haces clic en Tipografía, puedes gestionar los ajustes tipográficos del texto, los enlaces, los encabezados, las leyendas y los botones. Una nueva función maravillosa es que ahora también tienes acceso a una biblioteca de fuentes. En Fuentes, veremos las fuentes añadidas a nuestro tema. Pero cuando hacemos clic en Gestionar fuentes, podemos instalar, eliminar y activar fuentes locales y de Google en todo el sitio con cualquier tema de bloques. Cuando haces clic en Instalar fuentes, puedes instalar cualquier fuente de Google en tu sitio web y hacer clic en Subir si quieres subir una fuente desde tu ordenador. Asegúrate de tener derecho a utilizar las fuentes que subas. Debajo de Tipografía, veremos los colores. Aquí también puedes cambiar los colores de distintos elementos globales de tu sitio. Cuando nos dirigimos a Diseño, observamos que incluso tienes control sobre elementos como el relleno y el espaciado entre bloques.
Libro de estilos
Si miras más abajo, puedes personalizar la apariencia de bloques específicos para todo tu sitio. Para ver cómo cambiarán estos bloques si los editas, ve al Libro de estilos de tu sitio. Observarás que hay un pequeño ojo en la parte superior. El Libro de estilos permite al usuario previsualizar cada bloque que se puede insertar en tu sitio. Te ofrece una vista previa rápida de cómo los estilos globales afectarán a los bloques mostrados, sin que el usuario tenga que insertar esos bloques en una plantilla. También es importante señalar que el estilo de un bloque se puede ajustar dentro del Libro de estilos. Actualicemos el bloque Botones, por ejemplo, cambiando el color de fondo y las mayúsculas a mayúsculas. Si te gusta el resultado, puedes hacer clic en Guardar. Ten en cuenta también que cambiar un bloque individual en tu Libro de estilos tiene prioridad sobre los estilos globales que hayas establecido.
Revisiones de estilos
Mientras estamos aquí, también debemos hablar de las revisiones de estilos. Haz clic en Revisiones de estilos, junto al icono del Libro de estilos. Las revisiones de estilos se abrirán cuando estés editando una plantilla en el Libro de estilos. La función de revisiones de estilos añade una forma visual de explorar los cambios realizados en tus estilos a lo largo del tiempo, y puedes volver fácilmente a una etapa anterior si encuentras un estilo que prefieres o quieres regresar a una versión anterior. Solo tienes que seleccionar la versión y hacer clic en Aplicar. En este ejemplo, estoy editando una plantilla y seguiré el mismo proceso. Abriré las revisiones de estilos, seleccionaré un estilo anterior y haré clic en Aplicar para revertir los cambios. Cuando haces clic en los tres puntos verticales junto a los estilos, puedes restablecerlos y añadir CSS adicional.
Páginas
Debajo de Estilos, podemos ir a Páginas para crear y publicar páginas. Para añadir una página nueva, haz clic en el icono del signo más junto a Páginas y crea un borrador. Pero también puedes, por supuesto, crear una página nueva desde tu Escritorio o WP Admin. A continuación, abramos una de nuestras páginas existentes, mi página «Acerca de». Cuando abres una página, es importante recordar que debes añadir el contenido al bloque Contenido. Dicho de otro modo, el bloque Contenido es la estructura o el contenedor de todo tu contenido. Lo segundo que debes recordar es que no puedes personalizar el encabezado ni el pie de página al editar una página. Todo eso forma parte de la gestión de plantillas. Si haces clic en el encabezado, aparecerá un mensaje que dice: ‘Edita tu plantilla para editar este bloque.’ Si quieres modificar la plantilla asignada a esta página, puedes hacer clic en Editar plantilla. Esto te llevará a la plantilla de página, en este ejemplo. Aquí puedes modificar el encabezado y el pie de página. No podrás añadir contenido a una plantilla. El contenido, por supuesto, se añade a las entradas y las páginas. En este contexto, el bloque Contenido es simplemente un marcador de posición.
Plantillas
Esto nos lleva a nuestro siguiente tema: las plantillas. Las plantillas proporcionan la estructura que determina cómo se muestra tu contenido. Cuando seleccionas Plantillas, observarás una serie de plantillas incluidas en tu tema, es decir, plantillas integradas. Por ejemplo, la plantilla de página que muestra una sola página, la plantilla de índice que sirve como plantilla alternativa o la plantilla de entrada individual que muestra el diseño de las entradas individuales. Y justo en la parte inferior veremos las plantillas personalizadas. Cuando haces clic en el icono del signo más junto a Plantillas, puedes añadir una variedad de plantillas nuevas, incluso una plantilla personalizada que se puede aplicar a cualquier entrada o página. Abramos la plantilla de página para entender mejor cómo funciona una plantilla. Una plantilla proporciona estructura. Normalmente, una plantilla incluye una parte de plantilla de encabezado y una parte de plantilla de pie de página.
El bloque Contenido de la entrada obtiene el contenido de la página o entrada asignada a la plantilla. Por lo tanto, una plantilla solo se utiliza para modificar el diseño o la apariencia de la página, es decir, el encabezado, el pie de página e incluso la barra lateral. Por eso, el Editor del sitio distingue claramente entre editar la plantilla y editar la página. Puedes modificar el encabezado y el pie de página dentro de la plantilla. Una de las opciones que también tienes es hacer clic en los tres puntos verticales y seleccionar Reemplazar encabezado. Después, puedes reemplazar el encabezado actual por una de las partes de plantilla de encabezado existentes o por uno de los patrones de encabezado incluidos en tu tema. Otra opción es seleccionar el encabezado y hacer clic en Editar. Esto te permitirá modificar el encabezado o el pie de página dentro del modo de edición de plantillas sin ninguna otra distracción.
Asignar una plantilla
Para asignar una plantilla nueva a una página o entrada, abre el contenido correspondiente, en este caso, mi página «Acerca de», y luego abre la barra lateral de ajustes de la derecha. Junto a Plantilla, haz clic en el nombre de la plantilla, selecciona Cambiar plantilla y, a continuación, podrás elegir una plantilla personalizada para asignarla a tu página o entrada.
Gestionar plantillas
También cabe mencionar que, cuando haces clic en Gestionar todas las plantillas y seleccionas Editar en lote, puedes explorar y filtrar tus plantillas mediante la vista de tabla o de cuadrícula. Y cuando vuelves a seleccionar Editar en lote, hay más opciones de filtrado. Ten en cuenta que puedes explorar y filtrar las páginas y las partes de plantilla exactamente de la misma manera.
Patrones
Por último, hablemos de los patrones. En la parte superior puedes ver todos los patrones disponibles. Cuando seleccionas Mis patrones, puedes crear y gestionar tus propios patrones personalizados sincronizados y no sincronizados. Debajo de Mis patrones, podemos ver todos nuestros patrones personalizados y los patrones incluidos en nuestro tema dentro de sus categorías correspondientes. Debajo de Partes de plantilla, también podemos crear y gestionar nuestras partes de plantilla de encabezado, pie de página y generales. Las partes de plantilla son esencialmente patrones. Son componentes reutilizables sincronizados que se pueden utilizar en todo tu sitio.
Patrones personalizados
Comencemos con Mis patrones. Para crear tu patrón personalizado, haz clic en el Insertador junto a Patrones y selecciona Crear patrón. Después de asignarle un nombre, puedes elegir añadirlo a la categoría correspondiente y decidir si sincronizarlo o no. Un patrón sincronizado se sincroniza en todo tu sitio, lo que significa que, si cambias el patrón en un lugar, se actualizará en cualquier sitio donde se utilice. También puedes desactivar esta opción si prefieres tener un patrón no sincronizado. Los patrones no sincronizados son simplemente patrones normales que se pueden editar de forma independiente. Cuando vuelvas a tu área de patrones personalizados, observarás que los patrones sincronizados tienen un icono morado y los no sincronizados no lo tienen. A continuación, observarás que los patrones incluidos en tu tema están bloqueados y no puedes editarlos. Sin embargo, cuando haces clic en los tres puntos verticales situados debajo de un patrón, puedes copiarlo a tu área Mis patrones.
Partes de plantilla
En la parte inferior, podemos crear y gestionar nuestras partes de plantilla de encabezado, pie de página y generales. Aquí tienes dos opciones. Puedes crear encabezados y pies de página personalizados o personalizar los patrones de partes de plantilla incluidos en tu tema. Para crear tu propia parte de plantilla, haz clic en el icono del signo más situado en la parte superior, junto a Patrones, y selecciona Crear una parte de plantilla. Al añadir una parte de plantilla nueva, puedes elegir entre partes de plantilla generales de encabezado y pie de página. Las partes de plantilla generales no están vinculadas a ninguna área concreta, así que recuerda darles un nombre descriptivo. Cuando abres una parte de plantilla desde aquí, podrás modificarla y editarla en el modo de edición de plantillas sin distracciones. También puedes abrir la plantilla correspondiente, en este caso, mi plantilla personalizada, y modificar la parte de plantilla del encabezado o del pie de página desde dentro de la plantilla. Como se mostró anteriormente, puedes reemplazar fácilmente uno de tus encabezados o pies de página por un patrón o una parte de plantilla existente de la biblioteca.
Paleta de comandos
Para terminar, también quiero destacar una función extremadamente útil llamada Paleta de comandos, que te ahorrará mucho tiempo y te ayudará a moverte por el Editor del sitio de forma más eficaz. La paleta de comandos te permite realizar tareas y desplazarte rápidamente por el Editor del sitio. Por ejemplo, puedes escribir ‘Nuevo’ para crear una página o plantilla, o simplemente el nombre del área a la que quieres ir. Por ejemplo, patrón para gestionar todos mis patrones. Puedes acceder a la paleta de comandos mediante el atajo comando+k en Mac o control+k en Windows. También la encontrarás en la barra lateral de vista del sitio haciendo clic en el icono de búsqueda. O simplemente puedes hacer clic en la barra de título.
Conclusión
Esto concluye nuestro breve resumen de lo que puedes lograr usando el Editor del sitio.
Práctica
Usa WordPress Playground para explorar el Editor del sitio.
- Practica la navegación entre las distintas áreas del Editor del sitio.
- Usa la Paleta de comandos para desplazarte más rápidamente por el Editor del sitio.
- Compara la diferencia entre una página y una plantilla.