Tutorial de tema de WordPress para principiantes – Parte 11: Plantillas de página personalizadas

En esta lección del tutorial de temas de WordPress para principiantes, aprendemos sobre las plantillas de página, qué son, cómo crearlas y las mejores prácticas. Haremos una plantilla de ancho completo como ejemplo. En el camino, también agregamos una clase al cuerpo preguntando si la página está usando una plantilla de página específica.

¿Qué son las plantillas de página?

Las plantillas de página son útiles para los casos en los que desea un diseño o configuración diferente para una página específica. Ejemplos comunes de usos de plantillas de página son enumerar publicaciones en un tipo de publicación personalizada (por ejemplo, cartera, libros o servicios), tener un contenido o diseño completamente diferente (por ejemplo, columnas internas) o simplemente hacer una página de ancho completo (sin barra lateral).

La usabilidad de las plantillas de página ha disminuido después de la versión 5.x de WordPress (Gutenberg). El nuevo editor de Gutenberg permite una gran flexibilidad para crear tales páginas sin necesidad de plantillas de página. Independientemente, aprenderemos cómo agregar una plantilla de página personalizada a nuestro tema.

Dentro del metabox "Atributos de página" para páginas es donde aparece la opción de plantilla de página. Pero la opción de plantilla solo aparecerá si el tema activo tiene al menos una plantilla de página.

Las plantillas de página también se pueden usar para publicaciones y tipos de publicaciones personalizadas. Después de WordPress 4.7 y versiones posteriores, puede definir para qué tipos de publicación desea que esté disponible la plantilla. WordPress agregará automáticamente el metabox de "Atributos de página" requerido a esos tipos de publicaciones.

Nombramiento y ubicación de la plantilla de página

Para empezar, normalmente haría una copia de cualquier archivo de plantilla que se parezca más a lo que desea lograr con la plantilla de página. En la mayoría de los casos es page.php. En cuanto al nombre de la plantilla de su página, depende de usted. Pero hay algunas reglas y algo de sentido común.

Es tentador simplemente nombrar la plantilla de su página, por ejemplo, page-books.phppara una plantilla que enumera un tipo de publicación personalizada libros. ¡ Nunca prefije su plantilla de página con ‘ page-‘! Si recuerda la jerarquía de plantillas de WordPress, WordPress buscará page-<slug>.phpantes de intentarlo page.phpy los usuarios de su tema podrían encontrar un comportamiento inesperado.

Una buena práctica es prefijar la plantilla de su página con algo que no sea parte de los nombres de las plantillas de página de WordPress. Por ejemplo ‘ pagetemplate-', ‘ pt-‘, o simplemente el nombre completo ‘ fullwidth-template.php‘. También es una buena práctica mantenerlos en una subcarpeta; /page-templates/sin embargo, esto no es bueno si desea que su tema esté disponible para extenderse con un tema secundario. Un tema secundario no puede anular las plantillas de página que se colocan en una subcarpeta en el tema principal.

Una vez que haya decidido un patrón de nombres, sigamos adelante y creemos una plantilla de página.

Creación de una plantilla de página

Haz una copia page.phpy cámbiale el nombre a pagetemplate-fullwidth.php. Para convertirlo en una plantilla de página, solo necesita agregar un comentario al principio que le dice a WordPress que se trata de una plantilla de página:

<?php 
/*
Template Name: Fullwidth 
*/
get_header(); ?>
<?php 
if (have_posts()) {
...

Todo lo que necesita es un comentario al principio del archivo, con "Nombre de plantilla:" y el nombre de su plantilla después. ¡Eso es todo! Vaya a administración, edite una página y debería ver la opción para elegir "Ancho completo" como plantilla.

Mencioné que en WordPress 4.7 puedes definir para qué tipos de publicaciones quieres que esté disponible la plantilla de página. En este momento, solo está disponible para las páginas, pero ¿quieres la opción de hacer publicaciones de ancho completo también? En ese caso, agregue "Tipo de publicación de plantilla:" dentro del mismo bloque de comentarios y defina sus tipos de publicación separados por comas. Por ejemplo, para que esté disponible tanto para publicaciones como para páginas;

<?php 
/*
Template Name: Fullwidth 
Template Post Type: post, page
*/
get_header(); ?>
<?php 
if (have_posts()) {
...

Edite una publicación y debería ver un nuevo metabox "Atributos de publicación" donde puede elegir la plantilla de ancho completo. ¡Agradable!

Cambiando el código en nuestra plantilla de página

Ahora editemos la plantilla de la página para que realmente haga algo diferente a la vista de una sola página. Eliminemos la solicitud de la plantilla de la barra lateral: (lo comenté para hacerlo más visible, pero puede eliminar la línea).

...
    ?><p><?php _e('No posts, sorry.', 'wptutorial'); ?></p><?php
}
//get_sidebar(); 
get_footer(); ?>

Hagamos una cosa más para que nuestra plantilla de página sea más fácil de diseñar. Cuando agrega CSS, a menudo necesita saber si la página tiene una barra lateral o no, para ajustar las columnas o el diseño. ¿Recuerdas body_classque proporciona un montón de clases útiles para el elemento del cuerpo? ¿Qué pasa si agregamos una clase personalizada en el cuerpo que nos dice si la página actual tiene una barra lateral o no?

Filtrar enbody_class

Nota: es posible que haya notado que cualquier página o publicación que use una plantilla de página ya tiene una clase de cuerpo específica; «plantilla-de-página-" – en nuestro ejemplo "page-template-pagetemplate-fullwidth". Es una clase bastante larga y, además, queremos que nuestro tema sea más flexible y permitir el ancho completo en otras plantillas además de las que usan la plantilla de página. Por ejemplo, normalmente no quieres una barra lateral en la página principal, ¿verdad?

Nota: Esto solo agrega una clase al cuerpo para que el estilo sea más fácil, en realidad no deshabilita la salida de la barra lateral. Tienes que recordar eliminar el get_sidebar()lugar donde no lo quieras.

Agreguemos un filtro para body_classagregar una clase de barra lateral personalizada en nuestro functions.php, para que luego pueda agregar más en otros casos en los que no desea la barra lateral. WordPress tiene una buena etiqueta condicional para verificar si una plantilla de página está en uso; is_page_template()donde pones el nombre de la plantilla de tu página como parámetro. Queremos agregar una clase si esto no es cierto, entonces agregamos el reverso con «!»:

add_filter('body_class', 'wptutorial_body_class_filter');
function wptutorial_body_class_filter($classes) {
    if (!is_page_template('pagetemplate-fullwidth.php')) {
        $classes[] = 'has-sidebar';
    }
    return $classes;
}

Lo más probable es que, mientras desarrolla las plantillas, de vez en cuando se encuentre con plantillas a las que no desee agregar la clase de la barra lateral y, a medida que avanza, agregue esos casos dentro de este archivo if. Por ejemplo, si no desea la clase de barra lateral en la página principal, puede agregar !is_front_page(). Esto agregará la clase ‘has-sidebar’ a todas las páginas excepto a la portada y la plantilla de página:

if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))

Depende de usted cuántas plantillas de página desea y qué deben contener. Esta fue solo una simple introducción. Si está interesado en cómo consultar otras publicaciones dentro de las plantillas de una página, eche un vistazo al siguiente paso.