Cómo crear una plantilla de página de WordPress personalizada


Es casi seguro que un sitio web de WordPress verdaderamente profesional contendrá plantillas de página personalizadas. De hecho, muchos de los tipos más comunes de sitios web se basan en plantillas. Un sitio web de bienes raíces necesitará una plantilla para sus casas, un sitio web de comercio electrónico para sus productos, un sitio de membresía para sus miembros, etc.

Puede usar Toolset con Gutenberg para crear plantillas de página de WordPress para sus publicaciones individuales.

Una plantilla define cómo se ven las páginas y las publicaciones en el front-end. Es el plano que dice cómo y dónde se mostrará todo el contenido en cada publicación. Por ejemplo, cualquier cambio que realice en su plantilla para recetas en un sitio web de cocina afectará cómo aparecen todas las recetas en el front-end.

Hay dos tipos de plantillas de página personalizadas de WordPress por las que pasaré:

  1. Una plantilla para páginas regulares
  2. Una plantilla para páginas de publicación única

Por qué necesitará una plantilla WordPress personalizada para páginas regulares

Una plantilla es una forma sencilla de garantizar que páginas similares sigan la misma estructura. En lugar de tener que crear el diseño para cada página individualmente, puede crear la plantilla una vez y asignarla a las páginas que desee. A continuación, esas páginas seguirán la plantilla.

Imaginemos un ejemplo. En un sitio web de cocina, es posible que tenga una serie de páginas con consejos de cocina como “Cómo hacer la pasta perfecta”, “Cómo cocinar huevos”, etc.

Tengo un libro electrónico sobre cocina que quiero mostrar en todas estas páginas. En lugar de editar cada página con el mismo contenido (lo que llevaría mucho tiempo), puedo crear una plantilla una vez y asignar la plantilla a las páginas. De esa manera, cada página contendrá una llamada a la acción para descargar mi libro electrónico.

Así es como se ve mi plantilla para páginas normales en el front-end.
Esta es exactamente la misma plantilla que la imagen de arriba. Observe cómo la estructura es la misma.

En las dos páginas anteriores, puede ver mi llamado a la acción en el lado derecho. Eso es porque he asignado la misma plantilla a ambas páginas.

Las dos formas en que puede crear una plantilla de página de WordPress personalizada

Hay dos formas de crear su plantilla de página personalizada de WordPress:

  • El camino difícil. Los temas proporcionan automáticamente los archivos PHP que definen las plantillas en WordPress. Cuando crea un tipo de publicación personalizada (como recetas), deberá editar estos campos PHP o crear otros nuevos para asegurarse de que su sitio web muestre sus publicaciones.
  • La manera fácil. Puede utilizar un complemento de WordPress como Toolset para crear sus plantillas. Toolset crea plantillas en minutos y sin ningún tipo de codificación. Además, con Toolset Blocks puede agregar bloques al editor de WordPress Gutenberg con contenido dinámico.
Toolset le permite crear sitios web personalizados sin usar codificación.

A continuación, le mostraré la forma más sencilla.

Primero, crearé una plantilla para páginas normales que contendrá un llamado a la acción en el lado derecho.

En segundo lugar, crearé una plantilla para el tipo de publicación personalizada de mis recetas.

Cómo crear una plantilla de página de WordPress personalizada para páginas regulares

Paso 1: crear la estructura de la plantilla de contenido

Primero debe crear la plantilla de contenido para sus páginas. Con Toolset instalado, puede abrir una nueva plantilla de contenido y comenzar a agregar sus bloques.

Primero, organizo la estructura de la plantilla. A continuación, puede ver que agregué el propio bloque de cuadrícula de Toolset, que me permite dividir mi plantilla en secciones. He dividido la plantilla en dos y he ampliado la sección de la izquierda para que ocupe el 75% de la página.

Agregué el bloque Grid para crear la estructura de la plantilla y arrastré la grilla para expandir la sección izquierda.

Paso 2: agrega contenido a tu plantilla

Ahora que tengo la estructura, necesito insertar los bloques con el contenido que quiero mostrar. A la izquierda, agrego el contenido de la publicación. Todo lo que necesito hacer es insertar el bloque de campo único de Toolset, que me permite seleccionar la fuente que desee para el contenido.

A continuación, selecciono el contenido de la publicación en el lado derecho como fuente del bloque.

Para elegir el contenido que aparece en el bloque es necesario seleccionar la fuente.

Para el lado derecho de la plantilla, agregaré el llamado a la acción. Todo lo que tengo que hacer es seleccionar los bloques que desee según el contenido. A continuación, he usado el bloque de encabezado y el bloque de botones de Toolset. Para el bloque de botones, también incluyo un enlace al libro.

Puede agregar un enlace para llevar a su usuario a la página correcta cuando haga clic en el botón.

Paso 3: estilo de los bloques

Cuando combina WordPress con Toolset, puede diseñar los bloques que agrega a su plantilla. Si elige crear bloques “de la manera difícil”, entonces necesitará confiar en sus habilidades de codificación para un buen estilo.

Al hacer clic en un bloque, verá en el lado derecho una serie de opciones para diseñar y mejorar su plantilla.

En “Tipografía” puede cambiar lo siguiente:

  • Fuente
  • Tamaño de fuente
  • Espaciado
  • Estilo
  • Color de texto
En la barra lateral derecha puedo editar la tipografía del bloque.

Eso no es todo. En “Configuración de estilo” también puede cambiar lo siguiente:

  • Color de fondo
  • Margen / relleno
  • Frontera
  • Sombra de la caja

A continuación, agregué un nuevo color de fondo para la llamada a la acción. Tenga en cuenta que no necesita codificar ningún cambio, sino que simplemente selecciona los colores y cualquier otro estilo que desee.

También puede cambiar el color de fondo, el relleno y mucho más en la barra lateral derecha.

Paso 4: ajusta la plantilla para diferentes tamaños de pantalla

Lo más probable es que esté creando su plantilla en una computadora portátil o de escritorio, pero es importante recordar que es posible que sus usuarios no estén viendo el sitio web en el mismo tamaño de pantalla. De hecho, una mayoría cada vez mayor estará en su tableta o dispositivo móvil.

Por lo tanto, es posible que deba ajustar la plantilla para cada tamaño de pantalla. Esto es bastante fácil de hacer con Toolset y WordPress.

En la barra lateral derecha junto a cada elemento de estilo, hay una opción para cambiar entre computadora de escritorio, tableta y dispositivo móvil.

Mientras edita su bloque, puede cambiar entre tamaños de pantalla.

Como puede ver, cuando cambio entre las opciones, la plantilla se ajusta sola para que pueda ver cómo se verá la plantilla en cada dispositivo.

También puede cambiar entre tamaños de pantalla en la parte superior de la página.

Paso 5: asigne la plantilla a sus páginas

Ahora que tengo una plantilla, solo necesito asignarla a las páginas correctas. Una vez que haya hecho esto, cada página mostrará la misma plantilla.

Todo lo que necesito hacer es editar cada página y seleccionar la plantilla de contenido correcta.

En la barra lateral derecha puedo asignar una plantilla.

En el front-end, ahora veré la plantilla en cualquier página a la que la asigne.

Esta es la plantilla en el front-end.

Por qué necesitará una plantilla de página de WordPress personalizada para publicaciones individuales

Además de crear plantillas para publicaciones regulares, lo más probable es que también necesite plantillas para cada una de las publicaciones en un tipo de publicación personalizada.

Para mi sitio web de cocina, he creado un tipo de publicación personalizada para mis recetas. A continuación, puede ver una de mis recetas en el back-end. Observe todos los campos personalizados que he creado para él, como el tiempo de preparación, el tiempo de cocción y la imagen de la receta.

Puedes ver todos los campos personalizados que he creado para mis publicaciones.

Todavía tengo que asignar una plantilla a mis recetas. Vea lo que sucede cuando echamos un vistazo a la receta sin una plantilla en el front-end.

Sin una plantilla, ninguno de los campos personalizados aparecerá en el front-end.

Como puede ver, ninguno de los campos personalizados aparece en el front-end. De hecho, todo lo que puede ver es el contenido principal de la publicación, como el título y el cuerpo de la publicación. Es por eso que una plantilla es tan importante para sus publicaciones individuales, ya que le permite mostrar todo su contenido, incluidos los campos personalizados.

A continuación, puede ver dos de mis recetas en el front-end. Ahora puede ver los campos personalizados porque les he asignado una plantilla.

Así es como se ve mi plantilla en el front-end.
Esta es la misma plantilla que la imagen de arriba pero con una receta diferente.

A continuación te mostraré cómo creé esta plantilla para mis recetas.

Paso 1: crear la plantilla

Lo primero que debo hacer es crear la plantilla en la que agregaré mi contenido. Puedo hacer esto desde el panel de Toolset en el back-end de WordPress.

Al crear una plantilla para mis recetas desde el Panel de herramientas, todas las publicaciones de recetas se asignarán automáticamente a la plantilla.

Al seleccionar la plantilla de esta manera, asigno automáticamente la plantilla a todas las recetas que he creado. Por lo tanto, no necesito volver a cada receta y asignar manualmente la plantilla.

Paso 2: agregar el contenido a la plantilla

Ahora en la plantilla de contenido, puedo comenzar a agregar y estructurar el contenido como lo hice con la plantilla anterior para mis publicaciones habituales.

Una vez más, puedo agregar el bloque Toolset Grid para crear la estructura de la plantilla.

Con el bloque Grid puedo elegir qué tipo de diseño quiero.

Ahora puedo comenzar a agregar mis bloques para mi contenido. Por ejemplo, en mis recetas, tengo una imagen en la columna de la izquierda. Del conjunto de bloques de Gutenberg puedo agregar el bloque de imagen de Toolset. Necesito la versión del bloque de Toolset porque me permite agregar contenido dinámico.

Para agregar un bloque con contenido dinámico, necesito usar el bloque de Toolset en lugar de la versión predeterminada.

El contenido dinámico significa que puede crear un elemento, como una imagen, y para cada una de las publicaciones, dibujará el contenido correcto para esa publicación en particular. Por ejemplo, el contenido dinámico significa que mi receta de pasteles de plátano mostrará, lo has adivinado, un pastel de plátano. De lo contrario, el contenido sería estático y, en lugar de un pastel de plátano, vería cualquier imagen que inserte cuando la creé en la plantilla.

Al usar Toolset y WordPress, puedo seleccionar la fuente dinámica para cada uno de mis bloques para decirle qué mostrar.

Por ejemplo, he creado un nuevo bloque para agregar uno de mis campos personalizados, Prep Time. Una vez que agrego el bloque, puedo seleccionar el campo Prep Time como fuente para el bloque en el lado derecho. Este bloque también es dinámico, ya que el tiempo de preparación variará según los requisitos de la receta.

Para hacer que su bloque sea dinámico, puede seleccionar el campo que desea mostrar en la barra lateral derecha.

Hay varios tipos diferentes de bloques que puede agregar, incluido un bloque de campo repetido para agregar varios elementos (como varias líneas para una receta), un bloque deslizante de imagen, un bloque de YouTube y mucho más.

Paso 3: estiliza tus bloques

Al igual que con la primera plantilla para publicaciones regulares, puedo diseñar cada uno de mis bloques.

Paso 4: ajusta la plantilla para diferentes tamaños de pantalla

Nuevamente, de manera similar a la plantilla anterior, puedo ajustar la estructura para diferentes tamaños de pantalla.

Para ajustar la plantilla para diferentes tamaños de pantalla, puede alternar entre pantallas de escritorio, tabletas y dispositivos móviles.

Paso 5: comprueba cómo se ve la plantilla con cada una de tus publicaciones

Finalmente, también puede elegir qué receta ve en su plantilla para que pueda ver si se ajusta a todas. Use el menú desplegable en la parte superior de la página para alternar entre las publicaciones.

Al usar el menú desplegable, puedo ver cómo se ve cada una de mis recetas con la plantilla.

Una vez que esté listo, puede verificar su plantilla en el front-end.

Cada una de mis recetas ahora tendrá la misma plantilla.

Y así, tengo una plantilla para mis recetas. Ahora, cuando cree una receta nueva, seguirá inmediatamente la estructura de la plantilla.

Comience a crear su propia plantilla de página personalizada de WordPress hoy

Ahora es su turno de ver lo fácil que es crear su propia plantilla de página de WordPress. Todo lo que necesita hacer es descargar Toolset y luego consultar su documentación para ver qué tan rápido puede crear una plantilla para sus publicaciones sin codificación.

Deja un Comentario