Post Top Ad

Your Ad Spot

martes, 28 de julio de 2020

Cómo crear plantillas personalizadas para páginas de WordPress

Cómo controlar el aspecto de las páginas en WordPress con Pagephp

Nuestras aventuras en este tutorial de tema para WordPress están funcionando muy bien hasta ahora. Por supuesto, nuestro tema actual es un ejemplo muy básico de lo que puede hacer al crear un tema de WordPress desde cero. Como sabemos, es el archivo index.php el que maneja la mayor parte del trabajo pesado con respecto a la generación de HTML en nuestras publicaciones y páginas en este momento. ¿No sería bueno si tuviéramos una manera de cambiar el aspecto de nuestras páginas en WordPress para diferenciarlas fácilmente de las publicaciones normales en nuestro tema? Resulta que, de hecho, fue fácil hacerlo, y lo hacemos haciendo uso del archivo page.php en nuestro tema. Examinemos cómo trabajar con este archivo en este tutorial.


¿Para qué son las páginas en WordPress?

Por defecto, WordPress le permite publicar contenido en su sitio web en forma de publicación o página. Son similares pero diferentes. Lo que los distingue es que una página en WordPress es una forma de publicar contenido que no forma parte del flujo normal del blog, por así decirlo. Cuando publica una página, no aparece en la parte superior de su sitio como la primera entrada como lo haría una publicación de blog normal. Las páginas se usan a menudo para contenido como una página "Acerca de nosotros" o una página "Contáctenos".


index.php vs page.php en WordPress

Nuestro tema actual aún no tiene un archivo page.php, pero aún podemos ver las páginas de ejemplo en nuestro navegador. ¿Como sucedió esto?
ver páginas de wordpress usando index-php
Esto es interesante. Claramente podemos visitar un par de páginas de ejemplo en nuestro sitio, pero aún no hay un archivo page.php. Resulta que el archivo page.php no es obligatorio para crear un tema básico. Si este archivo no está presente, sus páginas simplemente usarán el archivo index.php para representar la salida en el navegador. El archivo page.php entra en juego cuando desea personalizar el aspecto y el diseño de las páginas en su sitio de WordPress. Si el archivo page.php está presente, WordPress usará el código en ese archivo en lugar de index.php para representar la página.


Crea tu archivo page.php

Continúe y ahora cree un nuevo archivo en su carpeta de tema llamado page.php. Con este archivo en su lugar, WordPress ya no usará index.php para representar una página, sino page.php. Piense en page.php como una forma de anular la salida predeterminada de index.php. Entonces, con nuestro page.php ahora creado, podemos agregar algo de código a ese archivo para controlar cómo muestra las páginas. Podemos comenzar simplemente incluyendo la función get_header (), ya que cualquier publicación o página va a necesitar esto. Luego probaremos esto.

page.php

usando la función get_header en page-php
¡Esto está muy bien! Realmente podemos tener una idea de lo que esa función get_header () está haciendo por nosotros aquí. El contenido de la página no se muestra, sin embargo, esa llamada a get_header () genera toda la información que hemos incluido en header.php, como el nombre del sitio, el eslogan y, por supuesto, el menú de navegación que hemos estado construyendo.


Salida del contenido de la página

¿Cómo podemos realmente mostrar el contenido de nuestras páginas ahora? Bueno, esto funcionaría igual que con las publicaciones. Tenemos que hacer uso del bucle de WordPress. En otras palabras, seguimos el protocolo estándar de: "Si tiene publicaciones, mientras tenga publicaciones, la publicación". Así que ahora podemos incluir este marcado, similar a index.php pero un poco diferente a continuación:

Entonces, ¿qué hemos cambiado? Bueno, es bastante simple en realidad. Eliminamos el enlace del título de la página. Además de eso, asignamos un nombre de clase especial al artículo de diseño de página. Eso significa que ahora podemos orientar el contenido de las páginas de manera diferente a como lo haríamos para las publicaciones. Así que sigamos adelante y agreguemos un poco de estilo a nuestro archivo style.css para que nuestra página se vea un poco diferente a nuestras publicaciones.

Voila! Podemos ver que las páginas ahora no tienen un enlace para el texto del título, además de que el texto es más grande.
salida de página personalizada wordpress


Uso de lógica condicional para personalizar el encabezado de una página

Tanto nuestras páginas como nuestras publicaciones utilizan el mismo archivo header.php cuando se procesan. Es decir, vemos el mismo nombre de sitio, lema del sitio y menú de navegación, ya sea que estemos en una publicación o en una página. ¿Qué pasa si nos gustaría poder personalizar el aspecto de lo que está en el encabezado solo si estamos visitando una página? ¡Resulta que podemos hacer eso! Lo que haremos es hacer uso de la función is_page () para ver si la consulta actual es para una página. Modifiquemos nuestro archivo header.php como vemos aquí:

Entonces, lo que estamos haciendo aquí es configurar una lógica condicional para que WordPress actúe en función de si una prueba es verdadera o falsa. La función is_page () va a devolver verdadero si estamos haciendo una consulta a una página específica. Si ese es el caso, el mensaje de agradecimiento por visitar nuestra página. aparecerá. Sin embargo, si estamos visitando una publicación o categoría, ese mensaje no debería aparecer. Probémoslo aquí.
lógica condicional en páginas de wordpress


Orientación de una página específica mediante lógica condicional

Fue realmente genial cómo utilizamos la lógica condicional en el ejemplo anterior para personalizar la salida del encabezado en función de si estábamos en una página o no. Podemos llevar este concepto más allá al apuntar no solo a una página que es una página real, sino al apuntar a una página que tiene un slug o id específico. Lo que significa que si queremos ver nuestro mensaje en la página "Acerca de nosotros" pero no en la página "Página de ejemplo de WordPress". Esto es facil. Simplemente pasamos el slug o id de la página a la que intentamos apuntar. Pasemos 'about-us' a la función is_page () y veamos qué sucede. Actualizaremos nuestro código así:

¡Ahora parece que esto funciona perfectamente!
pasar babosa a la función is_page


Crear una plantilla de página personalizada con page- slug-of-page.php

Puede haber ocasiones en que la lógica condicional no sea la mejor opción para personalizar su página. ¿Qué sucede si desea un diseño completamente diferente para una página específica, pero solo para una página específica? No desea que estos cambios radicales se apliquen a todas las páginas de su sitio, solo a una. Puede hacerlo creando un nuevo archivo con el formato page- slug-of-page.php . Entonces, por ejemplo, imaginemos que queremos un diseño completamente nuevo solo para la página "Acerca de nosotros". Podemos crear un nuevo archivo en nuestro tema llamado page-about-us.php . Cambiaremos el diseño para hacer uso de una tabla para nuestro contenido. Colocaremos el título a la izquierda de la página y el contenido a la derecha haciendo uso de las tablas. Probémoslo.

page-about-us.php

Ahora, la única página en todo el sitio que hará uso de este archivo es la página con una barra de "acerca de nosotros". Bastante hábil!
nombre-de-página-de-slug-wordpress

Podemos ver que la página Acerca de nosotros ahora está utilizando un diseño de dos columnas a través de esa tabla.


Cómo usar plantillas de página personalizadas para personalizar el diseño de página

Hemos visto bastantes formas de personalizar el aspecto de una página o un conjunto de páginas en WordPress. He aquí que tenemos aún más formas de personalizar nuestras páginas a través de plantillas de página personalizadas. Veamos cómo podríamos hacer esto.

Continúe y cree un archivo llamado page-template.php . En ese archivo, podemos colocar el siguiente marcado.

Ahora mira esto. Si visita su Panel de WordPress , haga clic en Páginas, luego haga clic en 'Editar' para una de las páginas, notará que hay un nuevo campo debajo del área de Atributos de página o el editor.


plantilla de atributos de página
Ahora tenemos la opción de elegir qué plantilla aplicar a esta página en particular. WordPress puede detectar este nuevo archivo de plantilla porque le dimos al archivo un sufijo de 'plantilla' y configuramos una propiedad especial en los comentarios de ese archivo. En los comentarios agregamos "Nombre de plantilla: Plantilla de página personalizada", por lo que ahora en el editor, tenemos la opción de hacer uso de la Plantilla de página personalizada en el menú desplegable. ¡Muy genial!
En este momento nuestra plantilla de página personalizada está esencialmente vacía, así que vamos a llenarla así:

page-template.php

También agregaremos un poco de estilo a nuestro archivo style.css como este:

style.css

Pasemos ahora al Panel de WordPress y editemos la página de “Página de ejemplo de WordPress” que tenemos en nuestro sitio. Seleccionaremos la plantilla de página personalizada que hemos creado y haremos clic en actualizar.
plantilla establecida en plantilla de página personalizada

Cuando visitamos nuestra página, podemos ver que la plantilla de página personalizada se ha aplicado. Lo bueno de esto es que podemos aplicar esta plantilla a cualquier página que nos guste y en cualquier momento. Es una forma muy flexible de alterar el diseño de varias páginas como mejor le parezca.


plantilla-página-personalizada-en-acción


Cómo crear plantillas personalizadas para páginas de WordPress Resumen

En este tutorial, analizamos varias formas diferentes de aplicar diseños y formatos personalizados a sus páginas en WordPress. En primer lugar, vimos cómo usar la lógica condicional a través de is_page () para determinar si estábamos en una página en particular y luego ejecutar un código especial para esa página. A continuación, vimos cómo puede crear un archivo de plantilla con un slug o ID de página coincidente para aplicar un archivo a una página específica. Por último, analizamos cómo definir plantillas de página personalizadas que luego podrían seleccionarse desde el editor de WordPress para aplicar a cualquier publicación que desee.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas