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

  1. Arles

    Gracias por este tutorial! :)

  2. Corvinianiano

    Muchas gracias, tu articulo sobre como usar una página plantilla para una personal me ha venido muy bien

  3. RInoa

    Gracias por tu post, es muy interesante. Tengo una mega duda, si creo 4 plantillas dentro de un tema, y quiero después usar esas plantillas en otra instalación, como puedo hacer un paquete de wordpress junto con esas plantillas? Por favor, si se puede hacer y sabes ayúdame.

    Gracias de antemano.

  4. Daniel

    En principio, para reutilizar las plantillas de página basta copiarlas e incluirlas entre los archivos del nuevo tema.

    WordPress detecta estas plantillas automáticamente, o sea que basta incluirlas en el tema y ya las tendremos disponibles para seleccionar desde el editor.

  5. Edwardo

    Hola Daniel,
    Por favor dime como redirecciono mi pagina de wordpress ya que la version que tengo no me aparece el editor.
    Saludos!

  6. Justo lo que estaba buscando, gracias por la información!

  7. Carolina Allen

    Hice una pagina anclada al menu. Cuando se entra a esta pagina se muestran todas las entradas que he agregado. Esta pagina la puedo modificar como plantilla pero que sigan apareciendo las entradas de blog que agregue? Agradeceria tu respuesta!

  8. Anny

    Bueno, yo me queria morir pork no encontraba como dar solucion ami problema ¨excluir barra lateral de una pagina¨ Gracias, al verdda esta muy bueno el tutorial.Yo soy una mas que ha aprendido mucho sobre wordpress

  9. Anny

    Muy muy bueno el tutorial. La verdad salí de un apuro y me servirá para el futuro porque lo aprendí muy bien, Gracias. Pero me queda algo por resolver, tengo dos sidebar y quiero mostrar uno de estos en determinadas páginas y no lo he logrado. Alguien podría ayudarme con esto?

  10. Daniel

    Hola Anny.
    Para mostrar laterales (sidebar) condicionales puedes utilizar “is_page_template()”, como se explica más arriba, en la sección “Condicionales: si la página utiliza cierta plantilla…”

    Normalmente lo puedes añadir directamente en la plantilla “sidebar.php”, para que seleccione uno u otro diseño dependiendo de la página que se muestre.

  11. Emilio

    Hola Daniel.
    Esta muy bien tu artículo pero tengo una duda (seguramente sea algo muy sencillo pero no consigo saber de donde sale) en el paso de recuperar subpáginas de donde sale el 3, es decir, ¿cómo se yo que numero debo poner?.
    Gracias.

  12. Daniel

    Hola Emilio.
    El “3” del ejemplo es el número de identificación (ID) de la página. La manera más fácil de encontrarlo es editar esa página y buscar el parámetro “?post=…” que sale en la barra de direcciones del navegador.

  13. marga

    Hola Daniel,

    Yo tengo una duda, yo he creado un php que es una acción para enviar un formulario de contacto y quisiera que en esa página se mostrase el mismo diseño que tengo en todo la web. De la forma que lo tengo ahora me muestra una página en blanco con el mensaje de que ha envíado los datos del formulario.

    ¿Me podrías ayudar?

    Gracias de antemano y saludos.

  14. Daniel

    Hola Marga.
    Si la página está fuera del alcance de WordPress, puedes añadir este código al principio de la plantilla para poder utilizar las funciones e incluir los elementos de la web (cabecera, contenido, pie de página…):

    <?php 
    define('WP_USE_THEMES', false);
    require('./wp-blog-header.php');
    ?>
    

    Aquí tienes más información sobre este tema (en inglés):
    http://codex.wordpress.org/Integrating_WordPress_with_Your_Website

  15. Maria

    Muchísimas gracias por el post!! Para los que estamos empezando y nos pilla a contrapié todo lo relacionado con PHP es un lujo!

  16. Juanjo

    Estimado, gracias por el tutorial, me ha sido de gran ayuda. Solo tengo un problema, no me aparece el selector de plantillas ni las plantillas al crear nuevas páginas. Solo aparece el selector en “edición rápida”, pero con la única opción de “plantilla predeterminada”. Cuando cree la mayoría de mis páginas si aparecía, de hecho el estilo de las plantillas se sigue aplicando, pero ya no me aparece para aplicarlas a otras y Si edito alguna de las antiguas se pierde el formato de la plantilla. Agradezco tus sugerencias para solucionarlo. De ante mano, muchas gracias!!

  17. Javier

    No me he enterado de nada. Todo esto me suena a chino. Estoy buscando información que significa y diferencia en atributos de página, plantilla predeterminada, archive o blog, pero todos esos códigos me vuelven loco, me suenan a chino. Saludos.

  18. Luca

    Hola, tengo una consulta, mi tema no tiene ningún archivo de nombre page.php o algo así. Uso Presswork y lo que tengo dentro de themes/presswork son comment.php, footer.php, functions.php, header.php, index.php, loop.php y style.css. Quiero crear una página que me muestre sólo las entradas de una categoría en concreto para establecerla como inicio. Gracias!

  19. Xavi Fork

    Hola!!!

    Muchísimas gracias por la info! Lo de is page tamplate me ha salvado!!!! Lo he usado aquí http://www.longboarder.es

    Supongo que no hay problema para usar varios “if” más, ¿verdad?

    Mil gracias otra vez! En serio.

  20. Adolfo

    Muchas gracias amigo. Muy buena informacion :)
    Saludos de Peru.

  21. Rodrigo Crosa

    ¿Cómo puedo duplicar la plantilla? Es lo único que me falta

  22. Teresa

    Muchas gracias por tu ayuda.

  23. JOSE CARLOS

    Hola,
    Gracias por tu articulo y ayuda. Tengo un página por wordpress y varias plantillas que creó el programador, pero ahora quisiera modificar los parámetros de busqueda a una base de datos que es en si la plantilla y no encuentro donde estan guardadas para poder modificarse o como se haria.
    En resumen tengo una plantilla de búsqueda a una base de datos y busca en toda la base de datos y quiero restringir la búsqueda a una serie de campos y no se como hacerlo.
    Gracias saludos.

  24. Percy

    Necesito un profesional para configurar una plantilla de wordpress para una web. Mi correo es: ariesconst@hotmail.com

  25. Cinto

    Gracias, en la simplicidad está el éxito ;-)

  26. Beselel

    Buenas tardes, necesito ayuda con un tema. Descargué una plantilla de internet y esta llega en ingles muchos apartados, mayormente el buscador. Que debo hacer para cambiarle el idioma a la plantilla. Espero me puedan ayudar, muchas gracias.

  27. Daniel

    Hola Beselel.
    Lo primero que tendrías que hacer sería contactar con los creadores de esa plantilla, para ver si tienen y puedes descargar directamente las traducciones en español. Si no es posible, normalmente puedes traducir tú misma los textos a través del archivo .PO o .POT que se suele incluir (para crear las traducciones necesitarás un programa como Poedit).

  28. Demetrio

    Excelente información. Me gustaría saber como puedo cambiar el theme en mi blogspot, saludos y gracias.

  29. Aurora

    Hola, me gustaría saber como añadir las plantillas al theme Tweenty Sixteen. Cuando le pongo la cabecera no me muestra el contenido de la página.

  30. Daniel

    Hola Aurora.
    Después de crear la plantilla PHP, tienes que asignársela a alguna página desde el panel de administración de WordPress, tal como se explica más arriba.

  31. Alonso

    Hola, entonces hay que saber PHP para aplicar varios estilos en una web hecha en wordpress?
    No existe algún plugin que permita aplicar varios estilos distintos en distintas páginas de la misma web?

  32. Daniel

    Hola Alonso.
    No necesariamente. Puedes aplicar estilos a una web sin tocar las plantillas. Por ejemplo, con el plugin Simple Custom CSS puedes crear reglas CSS desde el área de administración.

  33. Virginia

    Buenos días Daniel, necesito saber como puedo asignar una plantilla a un página interna de mi web, para que no me aparezca como si fuera una entrada de blog, sino como si fuera una extensión de la home. He llegado a la fotografía que pones al principio pero no veo cambios. GRACIAS

  34. Daniel

    Hola Virginia.
    Lo primero de todo, ten en cuenta que estas plantillas funcionan sólo para las páginas, no para las entradas. Para que esté disponible la plantilla que has creado y aparezca en los menús correspondientes, lo primero que hay que hacer es darle un nombre (Template Name), que tiene que seguir el mismo formato que en el ejemplo de arriba, y después subir el nuevo archivo al servidor (dentro del tema que esté activo).

  35. Tengo la plantilla Standard News WP que trae opciones en las que aparecen los blocks de las diferentes secciones como DEPORTES, ECONOMIA, ESPECTACULOS, etc, pero resulta que por más que he tratado, las opciones no funcionan y no puedo publicar las entradas o notas de los diferentes temas de noticias.

    Me he comunicado varias veces con el soporte del tema, explicando la situación, pero no responden. Por tanto, las entradas aparecen duplicadas en todas las casillas supuestamente destinadas a diferentes informaciones divididas en secciones.

    Buscando alternativas, compré a WP el tema NEWS7 con dos sidebars (izquierda y derecha), que vienen bastante estrechas. Las modifiqué pero el centro de la página sigue igual, aunque hice el cambio para ampliar el tamaño en CSS del HTML.

    WP tampoco responde a mis inquietudes de este tema, que me lo vendieron como “Premium”, pero con opciones muy limitadas.

  36. Hola, queria saber como puedo cambiar el header o la pagina principal de mi template de wordpress.

  37. Daniel

    Hola Miguel.
    Normalmente, la ayuda que te ofrecen al comprar una plantilla comercial de WordPress no suele incluir los cambios de estilos o estructura que quieras hacer, porque eso ya forma parte de la personalización. Para eso tendrías que encontrar a algún desarrollador que te pueda ayudar con los cambios.

  38. Alhi Collas

    ¡Muchas gracias!

  39. MJose

    Me ha sido de gran utilidad el post, muchas gracias!!
    Sin tener conocimientos de programación en WordPress (soy gerente de cuentas) yo sola he sido capaz de hacer una modificación puntual en una plantilla de página que necesitaba gracias a este artículo
    Gracias de nuevo!!
    Mjose

  40. Mau

    Te pasaste, todo muy claro. Gracias!

  41. mtsa

    Hola! Estoy creando mi propia plantilla de WordPress desde 0.
    El problema me llega cuando quiero que mis páginas se diferencien entre sí, ya que una será un apartado de contacto, otra será una galería de imágenes, etc. y estoy intentando añadir una plantilla desde “edición rápida” como explicas, pero no me aparece dicho desplegable.
    Me podría ayudar alguien? Gracias.

  42. mtsa

    Quería decir, que estoy creando un tema desde 0.

  43. Jagjerez

    Muchas gracias Daniel, te felicito por el post.

  44. Dante

    Hola Daniel, necesito duplicar la portada de mi template (un index2.php) para ir haciendo cambios y pruebas. Como puedo realizarlo? He duplicado el index pero al llamarlo desde la URL no me lo toma.

  45. Muchas gracias por la informacion. Me gustaria aprender como hacer temas para wordpress, algun tutorial que recomienden? Saludos.

  46. jhon

    Hola. Tengo la carpeta template dentro del tema de wordpress, pero no me aparece en el editor de paginas de wordpress.
    Estaba bien, pero desde ayer desapareció ese select.

  47. Daniel

    Hola Jhon.
    Seguramente es porque estás utilizando la versión 4.9 de WordPress (que salió hace unos días), que incluye precisamente el fallo que comentas: las plantillas de páginas personalizadas creadas (custom page templates) no se muestran en el desplegable del editor. Aquí tienes información actualizada (en inglés).

    Como solución provisional (hasta que se publique WordPress 4.9.1), en la entrada anterior proponen utilizar este plugin.

  48. Juan

    Gracias por el artículo. Muy buena info y justo lo que necesitaba.

Y tú qué opinas?

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)