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

 

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 está manejando 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 forma 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 es fácil hacer esto, y lo hacemos haciendo uso del archivo page.php en nuestro tema. Examinemos cómo trabajar con este archivo en este tutorial.

---

¿Para qué sirven 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 es 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 utilizan 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?

Esto es interesante. Es evidente que podemos visitar un par de páginas de ejemplo en nuestro sitio, pero todavía 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 mostrar la salida al 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 temas 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 la necesitará. Luego probaremos esto.

page.php

1 2 3

<?php   get_header();

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

---

Salida de contenido de la página

¿Cómo podemos generar 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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<?php   get_header();   if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>           <article class="page-layout">             <h2><?php the_title() ?></h2> <?php the_content() ?>         </article> <?php endwhile;   else : echo '<p>There are no pages!</p>'; endif;   get_footer();   ?>

Entonces, ¿qué hemos cambiado? Bueno, en realidad es bastante simple. 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.

1 2 3

.page-layout h2 {     font-size: 200%; }

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

---

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

Tanto nuestras páginas como nuestras publicaciones utilizan el mismo archivo header.php al renderizar. 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 quisiéramos 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 usar la función is_page () para ver si la consulta actual es para una página. Modifiquemos nuestro archivo header.php como vemos aquí:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<head>     <meta charset="<?php bloginfo( 'charset' ); ?>">     <title><?php bloginfo( 'name' ); ?></title> <?php wp_head() ?> </head>   <body <?php body_class(); ?>> <div class="container">     <header class="site-header">         <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>         <h4><?php bloginfo( 'description' ); ?></h4>         <nav class="navigation-menu"> <?php $args = [ 'theme_location' => 'primary' ]; ?> <?php wp_nav_menu( $args ) ?>         </nav>     </header> <?php if(is_page()) : ?>         <h3>Thanks for visiting our page!</h3> <?php endif ?>

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 () devolverá verdadero si estamos haciendo una consulta a una página específica. Si ese es el caso, ¡el mensaje de Gracias 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í.

---

Orientación a una página específica a través de lógica condicional

Fue 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á apuntándonos no solo a una página que sea una página real, sino también a una página que tenga un slug o id específico. Es decir, ¿qué pasa 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 que estamos tratando de apuntar. Pasemos 'about-us' a la función is_page () y veamos qué sucede. Actualizaremos nuestro código así:

1 2 3

<?php if(is_page( 'about-us' )) : ?>         <h3>Thanks for visiting our page!</h3> <?php endif ?>

¡Ahora parece que esto está funcionando perfectamente!

---

Creación de una plantilla de página personalizada con page- slug-of-page.php

Puede haber ocasiones en las 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 de 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 tablas. Probémoslo.

page-about-us.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<?php   get_header();   if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>           <article class="page-layout">             <table border="0" width="100%">                 <tr>                     <td width="30%"><h2><?php the_title() ?></h2></td>                     <td><?php the_content() ?></td>                 </tr>             </table>         </article> <?php endwhile;   else : echo '<p>There are no pages!</p>'; endif;   get_footer();   ?>

Ahora, la única página en todo el sitio que hará uso de este archivo es la página con la palabra "about-us". ¡Muy hábil!

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

---

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

Hemos visto varias formas de personalizar el aspecto de una página o un conjunto de páginas en WordPress. He aquí, tenemos aún más formas de personalizar nuestras páginas mediante plantillas de página personalizadas. Veamos cómo podemos hacer esto.

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

1 2 3 4 5

<?php   /** Template Name: Custom Page Template */

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 bajo el área de Atributos de la página o el editor.

Ahora tenemos la opción de elegir qué plantilla aplicar a esta página en particular. WordPress es capaz de detectar este nuevo archivo de plantilla porque le dimos al archivo un sufijo de 'plantilla' y establecemos una propiedad especial en los comentarios de ese archivo. En los comentarios agregamos "Nombre de plantilla: Plantilla de página personalizada", así 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 completémosla así:

page-template.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<?php   /** Template Name: Custom Page Template */   get_header();   if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="page-layout"> <table border="0" width="100%"> <tr> <td class="tdcontent"><?php the_content() ?></td> <td class="tdtitle" width="30%"><h2><?php the_title() ?></h2></td> </tr> </table> </article> <?php endwhile;   else : echo '<p>There are no pages!</p>'; endif;   get_footer();   ?>

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

style.css

1 2 3 4 5 6 7 8 9 10 11

.tdcontent {     border: dashed 3px #ffd35e;     background: #fdf5e1;     padding: 10px; }   .tdtitle {     border: dashed 3px #2ecc71;     background: #d7fee8;     padding: 10px; }

Vayamos ahora al panel de WordPress y editemos la página "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.

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 modificar el diseño de varias páginas como mejor le parezca.

---

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

En este tutorial, echamos un vistazo a varias formas diferentes en las que puede 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, vimos cómo definir plantillas de página personalizadas que luego podrían seleccionarse en el editor de WordPress para aplicarlas a cualquier publicación que desee.