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

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

Puede usar herramientas con Gutenberg para crear plantillas de página de WordPress para sus publicaciones únicas. Una plantilla define la aparición de páginas y postes en el front-end. Es el plan que dice cómo y dónde mostrará todo el contenido en cada publicación. Por ejemplo, cualquier cambio que realice a la plantilla de receta en un sitio de cocción afectará cómo aparecen todas las recetas en el frente.
Hay dos tipos de página personalizada de WordPress de WordPress que pasaré:
Una plantilla para páginas ordinarias
Una plantilla para páginas de publicación únicas
¿Por qué necesitará una plantilla de WordPress personalizada para páginas ordinarias? Una plantilla es una manera fácil de asegurarse de que las páginas similares sean la misma estructura. En lugar de crear el aspecto individual para cada página, puede crear la plantilla una vez y asignarla a cualquiera que desee. Estas páginas seguirán la plantilla. Imaginemos un ejemplo. En un sitio web de cocina, puede tener más páginas con consejos de cocina, como “Cómo preparar la pasta perfecta”, “Cómo cocinar huevos”, etc.
Tengo un libro electrónico sobre cocinar que quiero mostrar en todas estas páginas. En lugar de editar cada página con el mismo contenido (que tomaría mucho tiempo), puedo crear una plantilla una vez y asignar la plantilla de página. De esta manera, cada página contendrá un impulso de descargar mi libro electrónico. Por lo tanto, muestra mi plantilla para páginas ordinarias en el front-end.

Esta es exactamente la misma plantilla que la imagen de arriba. Observe cómo la estructura es la misma. En ambas páginas anteriores puedes ver mi impulso en el lado derecho. Eso es porque asigné 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 en que puede crear sus tentaciones de página de WordPress personalizadas:
El camino difícil. Los temas proporcionan automáticamente archivos PHP que definen las plantillas Tempts. Al crear un tipo de publicación personalizada (como recetas), editará estos campos PHP o creará nuevos para asegurarse de que su sitio muestre sus publicaciones.
La manera fácil. Puede usar un complemento de WordPress, como el conjunto de herramientas para crear sus plantillas. El conjunto de herramientas crea plantillas en unos minutos y sin codificación. Además, con los bloques de conjunto de herramientas puede agregar bloques al editor de WordPress Gutenberg con contenido dinámico.
El conjunto de herramientas le permite crear sitios web personalizados sin usar la codificación. A continuación te mostraré la manera fácil.

Primero crearé una plantilla para las páginas habituales que contendrán un impulso a la derecha. En segundo lugar, crearé una plantilla para mis recetas personalizadas de tipo post. Cómo crear una plantilla de página de WordPress personalizada para páginas ordinarias Paso 1: Creación de la estructura de contenido primero debe crear la plantilla de contenido para sus páginas de conjunto de herramientas, puede abrir una nueva plantilla de contenido y puede comenzar a agregar los bloques. En primer lugar, organizo la estructura de la plantilla. A continuación, puede ver que he agregado el propio bloque de cuadrícula del conjunto de herramientas, que me permite dividir la plantilla en las secciones. Dividí la plantilla en dos y extendí la sección izquierda, para ocupar el 75% de la página. Agregué el bloque de cuadrícula para crear la estructura de la plantilla y arrastré la cuadrícula para expandir la sección izquierda. Paso 2: Agregue contenido a su plantilla ahora, que tengo la estructura, tengo que ingresar los bloques con el contenido que quiero mostrar. A la izquierda, agrego el contenido de la publicación. Todo lo que tengo que hacer es ingresar el bloque de campo de conjunto de herramientas único, que me permite seleccionar cualquier fuente para el contenido. A continuación selecciono el contenido de la publicación a la derecha como fuente del bloque.
Para elegir el contenido que aparece en el bloque, debe seleccionar la fuente. Para el lado derecho de la plantilla, agregaré el impulso a la acción. Todo lo que tengo que hacer es seleccionar cualquier bloque que quiera, dependiendo del contenido. A continuación utilicé el bloque de título y el bloque de botones de conjunto de herramientas. Para el bloque de botones, también incluyen un enlace al libro.

Puede agregar un enlace para llevar a su usuario a la página correcta al hacer clic en el botón. Paso 3: Bloques de estilo Al combinar WordPress con el conjunto de herramientas, puede estilizar los bloques que agrega a la plantilla. Si ha optado por crear los bloques “de la manera difícil”, entonces debe confiar en sus habilidades de codificación para un buen estilo. Al hacer clic en un bloque, verá una serie de opciones a la derecha de estilizar y mejorar su plantilla. En “Tipografía” puedes cambiar lo siguiente: Fuente

El tamaño de la fuente

sangría
Estilo
El color del texto
En la barra lateral derecha puede editar la impresión de impresión. Eso no es todo. En “Configuración de estilo” también puede cambiar lo siguiente:
Color de fondo
Margen / forro

Frontera
La sombra de la caja
A continuación agregué un nuevo color de fondo para la exhortación a la acción. Tenga en cuenta que no tiene que codificar ningún cambio, sino seleccionar los colores y cualquier otro estilo deseado.
También puede cambiar el color de fondo, el relleno y muchos más en la barra lateral derecha. Paso 4: Ajuste la plantilla para diferentes tamaños de pantalla probablemente cree su plantilla en una computadora portátil o escritorio, pero es importante recordar que sus usuarios pueden no ver el sitio web en el mismo tamaño de pantalla. De hecho, una mayoría creciente estará en la tableta o el dispositivo móvil.
Por lo tanto, puede ser necesario ajustar la plantilla para cada tamaño de pantalla. Esto es bastante fácil de ver con el conjunto de herramientas y WordPress. En la barra lateral derecha al lado de cada elemento de estilo, hay una opción para cambiar entre escritorio, tableta y móvil.
Mientras edita el bloque, puede cambiar entre el tamaño de la pantalla. Como puede ver, cuando cambia entre opciones, la plantilla se ajusta usted mismo, para que pueda verificar cómo se verá la plantilla en cada dispositivo. También puede cambiar entre las dimensiones de la pantalla en la parte superior de la página. Paso 5: Asigne la plantilla de sus páginas ahora, que tengo una plantilla, solo tengo que atribuirla a las páginas correctas. Después de hacer esto, cada página mostrará la misma plantilla.

Todo lo que tengo que hacer es editar cada página y seleccionar la plantilla de contenido correcta.
En la barra lateral derecha puede asignar una plantilla. En front-end, ahora veré la plantilla en cualquier página que asigné.

Esta es la plantilla en el frente. Por qué necesitará una plantilla de página de WordPress personalizada para publicaciones individuales, además de crear plantillas para publicaciones ordinarias, lo más probable es que necesite plantillas para cada una de las publicaciones en un tipo de publicación personalizada. Para mi sitio web de cocina, creé un tipo de publicación personalizada para mis recetas. A continuación puedes ver una de mis recetas en el back-end. Observe todos los campos personalizados que creamos, como el tiempo de entrenamiento, el tiempo de cocina y la imagen de la receta.

Puedes ver todos los campos personalizados que creé para mis publicaciones. Todavía no he asignado una plantilla a mis recetas. Vea lo que sucede cuando echamos un vistazo a la receta sin una plantilla en el frente.

Sin una plantilla, ninguno de los campos personalizados aparecerá en el frente. Como puede ver, ninguno de los campos personalizados aparece en el frente. De hecho, todo lo que puede ver es el contenido principal de la publicación, como el título de la publicación y el cuerpo de la publicación. Es por eso que una plantilla es tan importante para sus publicaciones individuales, porque le permite mostrar todo el contenido, incluidos los campos personalizados. A continuación puedes ver dos de mis recetas en el frente. Ahora puedes ver los campos personalizados, porque atribuí una plantilla. Entonces muestra 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: Creación de la plantilla Lo primero que tengo que hacer es crear la plantilla en la que agregaré mi contenido. Puedo hacer esto desde el panel de herramientas en el back-end de WordPress.

Al crear una plantilla para mis recetas en el tablero 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 de todas las recetas que hemos creado. Por lo tanto, no tengo que volver a cada receta y manejar la plantilla manualmente. Paso 2: Agregar el contenido a la plantilla ahora, en la plantilla de contenido, puede comenzar a agregar y estructurar el contenido como lo hice para la plantilla anterior para mis publicaciones habituales. Una vez más, puedo agregar el bloque de cuadrícula del conjunto de herramientas para crear la estructura de la plantilla.

Con el bloque de la cuadrícula puedo elegir qué tipo de look. Ahora puedo comenzar a agregar mis bloques para mi contenido. Por ejemplo, en mis recetas, tengo una imagen en la columna izquierda. Desde el conjunto de bloques de Gutenberg, puedo agregar el bloque de imágenes del conjunto de herramientas. Necesito la versión de conjunto de herramientas del bloque, porque me permite agregar contenido dinámico. Para agregar un bloque dinámico, tengo que usar el bloque de conjunto de herramientas, 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, atraerá el contenido correcto para la posición respectiva. Por ejemplo, el contenido dinámico significa que mi receta de pastel de plátano se mostrará, adivinó, 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 inserté cuando la creé en la plantilla. Usando Toolset y WordPress, puedo seleccionar la fuente dinámica para cada uno de mis bloques para decirle qué mostrar. Por ejemplo, creé un nuevo bloque para agregar uno de mis campos personalizados, tiempo de preparación. Una vez que haya agregado el bloque, puedo seleccionar el campo de tiempo de preparación como fuente para el bloque a la derecha. Este bloque también es dinámico, porque el tiempo de entrenamiento variará según los requisitos de la receta.

Para hacer su bloque 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 campo de campo para agregar más elementos (como múltiples líneas para una receta), un bloque de imagen deslizante, un bloque de YouTube y muchos otros. Paso 3: diseñe sus bloques de la misma manera que en el caso de la primera plantilla para publicaciones ordinarias, pueden estilizar cada uno de mis bloques. Paso 4: Ajuste la plantilla para diferentes tamaños de pantalla nuevamente, similar a la plantilla anterior, puede ajustar la estructura para diferentes tamaños de pantalla. Para ajustar la plantilla para diferentes tamaños de pantalla, puede cambiar entre escritorio, tableta y pantallas móviles. Paso 5: Verifique cómo se ve la plantilla con cada una de sus publicaciones eventualmente, también puede elegir qué receta vea en su plantilla para que pueda ver si todos lo están. Use el menú de caída en la parte superior de la página para cambiar entre publicaciones.

Usando el menú Drop -down, puedo ver cómo se ve cada una de mis recetas con plantilla. Una vez que esté listo, puede verificar su plantilla en el front-end.