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

Es casi seguro que un sitio web de WordPress verdaderamente profesional contenga plantillas de página personalizadas. De hecho, muchos de los tipos de sitios web más comunes 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.

Una plantilla define cómo se ven las páginas y las publicaciones en la interfaz. 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 la interfaz.

Hay dos tipos de plantillas de página personalizadas de WordPress que revisaré:

1. Una plantilla para páginas regulares
2. Una plantilla para páginas de una sola publicación

Por qué necesitará una plantilla de 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 varias 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.

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 de 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.

A continuación te mostraré la forma más fácil.

Primero, crearé una plantilla para páginas normales que contendrá una llamada 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.

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 me guste para el contenido.

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

Para el lado derecho de la plantilla, agregaré la llamada a la acción. Todo lo que necesito 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.

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

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.

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.

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.

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 interfaz, ahora veré la plantilla en cualquier página a la que la asigne.

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.

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.

Como puede ver, ninguno de los campos personalizados aparece en la interfaz. 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.

A continuación, les 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 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.

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.

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.

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.

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.

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

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

Comience a construir 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.