Formas de personalizar nuestros diseños web

Crear y gestionar plantillas de páginas en WordPress

Selección de plantillas en WordPress

Atributos de página

A diferencia de las entradas (posts), WordPress permite asignar fácilmente plantillas diferentes a las páginas, para poder aplicar una estructura o un diseño único.

Por ejemplo, si la plantilla predeterminada de una web utiliza dos columnas (una principal y un lateral), podemos crear un diseño diferente asignándole otra plantilla que no incluya get_sidebar(), para tener la posibilidad de cambiar entre páginas con o sin columna lateral.

Estas plantillas son archivos alternativos que podemos añadir a nuestro tema, y que podemos personalizar a nuestro gusto, tanto a nivel de estructura (HTML) como de diseño (CSS). Esto es especialmente útil si creamos nuestros propios temas de WordPress con diseños a medida.

Algo muy útil al utilizar estas plantillas es que añaden automáticamente una clase a la etiqueta body (siempre y cuando el tema utilice la función body_class), para poder aplicar estilos concretos con CSS o para realizar alguna acción específica con Javascript.

Después, con reglas como esta, podemos cambiar el diseño a nuestro gusto:

body.no-sidebar-page-php { … Estilos CSS … }

Al hablar de «plantillas», en este caso se hace referencia a los documentos PHP que forman parte del tema (por ejemplo: single.php, page.php, header.php…), no a los diseños (themes, temas) que podemos descargar y activar en WordPress.

Cómo añadir una plantilla de página nueva a nuestro tema

1. El primer paso es duplicar la plantilla «page.php» y renombrar el nuevo archivo, procurando darle un nombre descriptivo (por ejemplo: no-sidebar-page.php)

2. Editar este nuevo documento (eliminando o añadiendo el código necesario) y añadir arriba del todo este fragmento, con el nombre que queremos darle a la plantilla. Este será el nombre que veremos después en los selectores del area de administración:

<?php
/*
Template Name: Página sin lateral
*/
?>

3. Subir el nuevo archivo al servidor (dentro del tema activo, al mismo nivel que «page.php»)

4. Después, ya desde el area de administración de WordPress, pulsamos sobre «Edición rápida» y en el desplegable «Plantilla» seleccionamos la que acabamos de crear (este mismo desplegable se puede encontrar dentro del editor de páginas, en la caja «Atributos de página»).

Edición rápida de páginas

Edición rápida de páginas en WordPress

Selección rápida de plantilla

Esta lista sólo aparecerá si existe al menos una dentro de la carpeta del tema activo. Si cambiamos el diseño de nuestra web con un tema nuevo, estas plantillas no estarán disponibles.

Además, conviene recordar que se trata de plantillas de páginas, por tanto no se pueden utilizar para entradas (posts) u otros tipos personalizados de entrada (custom post types) que hayamos creado.

Aquí encontrarás la documentación oficial (en inglés): http://codex.wordpress.org/Page_Templates

Cómo mostrar todas las páginas que utilizan una plantilla determinada

Estas páginas se pueden agrupar y listar haciendo una consulta a la base de datos a través de get_pages.

Esto quiere decir que si necesitamos reunir determinadas páginas (por diseño, por tipo o simplemente por tema), una de las maneras más sencillas es asignarles una plantilla específica.

Después, para recuperar todas las páginas guardadas que utilizan una plantilla determinada, podemos pasar una serie de argumentos a get_pages que ayuden a precisar la consulta:

<?php

// Recuperamos todas las páginas que utilizan la plantilla "no-sidebar-page.php".
$args = array(
	'post_type' 	=> 'page',
	'post_status' 	=> 'publish',
	'meta_key' 	=> '_wp_page_template',
	'meta_value' 	=> 'no-sidebar-page.php'
);
$pages = get_pages( $args );
echo '<ul>';
foreach ( $pages as $page ) {
	$page_title = $page->post_title;
	$li = '<li><a href="'. get_page_link($page->ID) .'">' . $page_title . '</a></li>';
	echo $li;
}
echo '</ul>';

?>

En este ejemplo estamos pidiendo a WordPress que nos muestre todas las páginas publicadas cuya plantilla sea «page-no-sidebar.php».

Si, por ejemplo, necesitamos recuperar subpáginas (hijas de otra página determinada), podemos añadir child_of a los argumentos de la consulta, seguido del número de página padre o superior:

<?php

// Recuperamos subpáginas que utilizan una plantilla determinada
// añadiendo "child_of" seguido del número de identificador de la página superior.
$args = array(
	'post_type' 	=> 'page',
	'post_status' 	=> 'publish',
	'child_of' 	=> 3,
	'meta_key' 	=> '_wp_page_template',
	'meta_value' 	=> 'no-sidebar-page.php'
);
$pages = get_pages( $args );
echo '<ul>';
foreach ( $pages as $page ) {
	$page_title = $page->post_title;
	$li = '<li><a href="'. get_page_link($page->ID) .'">' . $page_title . '</a></li>';
	echo $li;
}
echo '</ul>';

?>

En este caso el resultado será una lista de todas las subpáginas de una superior, en este caso la correspondiente al número identificador «3».

Condicionales: si la página utiliza cierta plantilla…

Gracias a la etiqueta is_page_template podemos confirmar como verdadero o falso si una página utiliza alguna plantilla en particular:

<?php

if ( is_page_template('no-sidebar-page.php') ) {
	
	/* 
		Código para aplicar a todas las páginas 
		que utilicen la plantilla no-sidebar-page.php.
	*/
	
} else {
	
	/* 
		Este código sólo se activará en el resto de páginas
		que no cumplan la condición anterior.
	*/
	
}

?>

Cómo imprimir el nombre de la plantilla seleccionada

Sea para corregir errores o verificar si una página está realmente utilizando la plantilla que hemos seleccionado, la función get_page_template imprime su nombre y la ruta asignada:

<?php 

echo 'Esta página utiliza la plantilla: ' . basename( get_page_template() ); 

?>

Cómo asignar plantillas a cualquier tipo de entrada

Desde la versión 4.7 (diciembre 2016), WordPress permite asignar este tipo de plantillas a cualquier tipo de entrada (post, product, event…), eliminando la limitación de utilizarlas únicamente en las páginas. Aquí encontrarás más información:

Plantillas personalizadas para entradas en WordPress 4.7

Comentarios

Responder a Mau Cancelar la respuesta

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.