Introducción al editor del sitio y las plantillas


La Edición completa del sitio le permite crear cada aspecto de su sitio de WordPress, desde el encabezado hasta el pie de página, utilizando diversas funciones de bloques directamente desde el Editor del sitio.

El Editor del sitio le permite cambiar las plantillas, las partes de plantilla y personalizar el estilo general de su sitio. Antes del Editor del sitio, el diseño de los elementos principales del sitio, como el encabezado, la barra lateral y el pie de página, estaba determinado por el tema. Con el Editor del sitio, puede definir usted mismo la estructura y el estilo del sitio. Además de utilizarlo para crear contenido de páginas y entradas, con el Editor del sitio puede crear toda la apariencia de su sitio mediante plantillas.

El Editor de plantillas le permite editar, crear y asignar plantillas a cada entrada y página, y le permite diseñar plantillas personalizadas para sus entradas y páginas utilizando el editor de bloques habitual de WordPress.

Objetivo

Al completar esta lección, los participantes podrán:

  • Distinguir entre las funciones del Editor del sitio y del Editor de plantillas.
  • Gestionar plantillas, partes de plantilla y configuraciones de estilo global mediante el Editor del sitio.
  • Editar, crear y asignar plantillas a cada entrada y página mediante el Editor de plantillas.

Habilidades necesarias

Los participantes aprovecharán al máximo esta formación si están familiarizados con:

Preguntas relacionadas con la preparación

  • ¿Puede explicar la función de las plantillas?
  • ¿Está familiarizado con la forma de asignar una plantilla a una entrada o página?

Material necesario

Notas para el presentador

Resumen del contenido

  • Presentar un resumen del diseño y las funciones del Editor del sitio: plantillas, partes de plantilla y configuraciones de estilo.
  • Mostrar cómo puede utilizar la Configuración de estilo para cambiar el estilo general de su sitio.
  • Explicar cómo las plantillas son conjuntos de bloques combinados para crear el diseño de una página web o el diseño general de una página.
  • Distinguir entre las partes dinámicas (contenido) y las partes reutilizables (componentes estáticos) de una plantilla.
  • Demostrar cómo modificar partes de plantilla existentes y crear otras nuevas.
  • Demostrar cómo utilizar el Editor de plantillas para editar, crear y asignar plantillas a cada entrada y página.

Práctica

  • Utilice la Configuración de estilo para cambiar la fuente, el color de fondo y el color del texto de su sitio.
  • Edite una plantilla existente y cambie las partes de plantilla del encabezado y del pie de página.
  • Cree una plantilla personalizada y utilícela en una página.

Evaluación

El Editor del sitio proporciona acceso a las siguientes funciones. Seleccione todas las opciones que correspondan.

  1. Plantillas
  2. Partes de plantilla
  3. Edición de páginas o contenido de entradas
  4. Configuración de estilo global

Respuesta: 1. Plantillas, 2. Partes de plantilla, 4. Configuración de estilo global

El Editor de plantillas le permite…

  1. crear todo su sitio con bloques.
  2. editar, crear y asignar plantillas a cada entrada y página.

Respuesta: 2. editar, crear y asignar plantillas a cada entrada y página.

Al gestionar plantillas, el contenido se muestra mediante el bloque Contenido de la entrada.

  1. Verdadero
  2. Falso

Respuesta: 1. Verdadero

Al crear una plantilla…

  1. Obtiene el mejor resultado cuando no separa las partes reutilizables de las partes dinámicas.
  2. Obtiene el mejor resultado cuando separa las partes reutilizables de las partes dinámicas.

Respuesta: 2. Obtiene el mejor resultado cuando separa las partes reutilizables de las partes dinámicas.

Referencias adicionales

Ejemplo de formación

Hoy aprenderemos más sobre el Editor del sitio y el Editor de plantillas. Si ha instalado un tema de bloques, como Twenty Twenty-Two, y está listo para comenzar su recorrido por la edición completa del sitio, verá que el Personalizador ha desaparecido. Sin embargo, cuando vaya a Apariencia, verá una nueva opción llamada Editor. Y cuando haga clic en Editor, accederá al Editor del sitio.

The sidebar of the WordPress Dashboard on the left and the Twenty Twenty-Two theme highlighted on the right.

Aquí puede modificar las plantillas y las partes de plantilla, y también personalizar el estilo de todo el sitio. El Editor del sitio proporciona la opción Mostrar lista de plantillas, como verá a la izquierda, que permite a los usuarios explorar las partes del sitio: la plantilla de la página de inicio, las plantillas y todas las demás partes de plantilla. Esta es una parte importante del conjunto de funciones del Editor del sitio; básicamente, podrá editar el diseño general de su sitio. Para cambiar lo que está viendo, haga clic en el icono de WordPress o en el icono de su sitio en la esquina superior izquierda. A continuación, podrá elegir entre volver al Escritorio, Sitio (que es la plantilla de su página de inicio, como se mencionó anteriormente), la lista de plantillas y la lista de partes de plantilla.

The Site Editor List View.

Al hacer clic en el icono de Estilos, podrá cambiar la tipografía y los colores generales del sitio. Y si se desplaza más abajo, también tendrá la opción de personalizar la apariencia de determinados bloques para todo el sitio. Como nota, la configuración de Estilos estará disponible independientemente de la plantilla o parte de plantilla que esté editando. Si hace clic en Tipografía, podrá gestionar la configuración tipográfica del texto y los enlaces. Puede cambiar el color de fondo del sitio o el color del texto y de los enlaces con un solo clic. En la esquina superior derecha verá el texto ‘establecer el color de fondo o el degradado para todo el sitio web.’

List of Styles' options.

Si hace clic en los tres puntos verticales de la esquina superior derecha, tendrá la opción de cambiar algunas preferencias en la configuración del editor:

  • Modo Spotlight: Resalta el bloque que ha seleccionado y atenúa el resto del contenido.
  • Mostrar etiquetas de texto de los botones: Muestra texto en lugar de iconos en los botones.
  • Abrir siempre la vista de lista: Abre la barra lateral de la vista de lista de bloques de forma predeterminada.

¿Cómo se gestionan las plantillas mediante el Editor del sitio? Haga clic en el icono de WordPress en la esquina superior izquierda y abra las plantillas. Las plantillas son conjuntos de bloques combinados para crear el diseño de una página web. Abramos la plantilla de Página. Se podría decir que la plantilla es el diseño de página completa. Incluye elementos como el área del encabezado, el contenido y el pie de página. Haga clic en Vista de lista. En la parte superior verá el encabezado y, en la parte inferior de la página, el pie de página; en el centro está el bloque Contenido de la entrada. Al crear una plantilla, obtiene el mejor resultado cuando separa las partes reutilizables de las partes dinámicas. La parte dinámica es la sección de contenido que cambiará en cada página que utilice esa plantilla. La parte reutilizable es la sección estática de la plantilla que permanecerá igual. Las plantillas no sirven para publicar contenido. La plantilla de una entrada o página muestra su contenido mediante el bloque Contenido de la entrada. Una plantilla es, como su nombre indica, un diseño que puede utilizar una o varias páginas y entradas.

Cuando empiece a crear un sitio web nuevo, puede editar las plantillas existentes o añadir otras nuevas. También puede crear plantillas personalizadas. Recuerde asignar cada página o entrada a una plantilla mediante el Editor de plantillas.

A continuación, hablemos más sobre la gestión de las partes de plantilla. Como información adicional, las partes de plantilla se utilizan mejor para crear áreas como el encabezado, el pie de página y la barra lateral.

Cuando abrimos las partes de plantilla, veremos las partes de plantilla que hemos creado y las que ya proporciona el tema que utilizamos. Por lo tanto, las cuatro partes de plantilla situadas al final de la lista son las que proporciona el tema Twenty Twenty-Two. Y si ve un punto sobre el icono de una parte de plantilla, sabrá que esta plantilla ha sido modificada. La parte de plantilla de página situada arriba es una que yo mismo he creado.

List of template parts.

Por último, puede decidir añadir una nueva parte de plantilla. Al añadir una nueva parte de plantilla, tendrá las opciones de parte de plantilla general, encabezado y pie de página. Una parte de plantilla general no está vinculada a un área específica. Y recuerde poner a sus partes de plantilla un nombre descriptivo.

The options when creating a template part.

Veamos cómo añadir un bloque de Parte de plantilla. Abriré mi plantilla 404, que se muestra cuando no se encuentra contenido. Y, como verá, actualmente no hay encabezado. Así que abramos la Vista de lista. Encima del bloque de grupo, insertar é mi bloque de Parte de plantilla y, después de seleccionar el bloque de Parte de plantilla, podrá elegir una parte de plantilla existente o crear una nueva. Seleccionemos la existente, que ya he creado.

Options when adding a new template template part.

Ahora hablemos sobre el Editor de plantillas. El Editor de plantillas le permite editar, crear y asignar plantillas a cada entrada y página. Veamos cómo funciona mientras lo ponemos en práctica. Haga clic en el icono de WordPress en la esquina superior izquierda y vuelva al Escritorio. Haga clic en Páginas y abra una de las páginas existentes. En la barra lateral de configuración de la derecha, verá que la plantilla asignada a esta página es la plantilla predeterminada, es decir, su plantilla de página. También puede asignar cualquiera de las otras plantillas disponibles. Cuando esté listo, podrá editar la plantilla que elija.

This page is assigned to the the default page template.

Assign a different template to a page.

Al hacer clic en Editar, accederá al modo de edición de plantillas. Sabrá que está en el modo de edición de plantillas cuando el nombre de la plantilla aparezca en la barra superior. En segundo lugar, aparecerá un marco de color oscuro alrededor de la plantilla mientras la edita. Pero también tiene una tercera opción: crear una nueva plantilla personalizada. Aparecerá el mensaje ‘describa para qué sirve la plantilla, por ejemplo, ancho completo’, y la plantilla personalizada podrá aplicarse a cualquier entrada o página. Puede decidir crear una plantilla personalizada para una página de destino o quizá para una página de portafolio.

Creating a custom template.

Después de hacer clic en Crear, verá que el encabezado tiene un aspecto diferente y que no hay pie de página. Por lo tanto, tiene un lienzo en blanco para crear su propia plantilla personalizada. Como recordatorio, el modo de edición de plantillas permite alternar entre editar el contenido de cada entrada o página y la plantilla utilizada por esa entrada o página.

Creemos que ahora comprende mejor cómo utilizar el Editor del sitio y el Editor de plantillas.


Cierre de la formación

💡 Continúe con la práctica y la evaluación descritas anteriormente.