Crea tu plantilla de página para wordpress (1ª parte)

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Si por algo se caracteriza WordPress es por su facilidad y flexibilidad a la hora de manipular y modificar el código para personalizarlo a tus necesidades. En este post os hablaré sobre las posibilidades que nos ofrece WP para crear nuestras propias plantillas de página.

El primer paso es crear la plantilla (template) propiamente dicho.  Cogiendo como base el tema por defecto de WP Twentytwelve, creamos un nuevo archivo (.php) dentro de la carpeta del theme, para tenerlo todo organizado recomiendo hacerlo dentro de la carpeta que se incluyó en este tema ‘page-template’, el archivo lo llamaremos por ejemplo:

1
HOME.php

El nombre del archivo y del template no tiene porque coincidir,  yo lo recomiendo para evitar confusiones y localizar más fácilmente los archivos para su posterior edición. Lo que hará que WP reconozca este archivo recién creado como una plantilla de página del tema es el código con el que debe empezar el archivo:

1
2
3
4
5
6
7
<?php
/**
* Template Name: HOME
*
* Description: podéis también escribir una pequeña descripción aclaratoria
* por si otra persona tiene que cambiar o modificar el código.
*/ ?>

Tras estas líneas de código incluiremos las funciones necesarias para mostrar tanto la cabecera, contenido, sidebar y footer. Una vez tengamos la estructura creada guardamos el archivo.

Con nuestro archivo (HOME.php) guardado, es muy sencillo aplicar la plantilla recien creada a cualquiera de nuestras páginas que hemos creado desde el panel de administración de nuestro sitio. Para ello tendremos que entrar en el panel de administración y abrir la página a la que queremos asignar la plantilla, con el editor de página de abierto, en la parte de la derecha podemos ver un desplegable en el que podemos seleccionar que plantilla utilizará la página, como podemos ver a parte de las plantillas por defecto del tema… aparece nuestra plantilla!!!
seleccion-palntilla-wp

Sólo tendremos que seleccionarla, guardar los cambios y ya está, ya tenemos nuestra página que se mostrará con nuestra plantilla.

Ahora que ya tenemos nuestra plantilla base creada y asignada a una página, el siguiente paso es crear e incluir nuestro contenido personalizado. Empezaremos por las secciones generales como son el ‘header’ y ‘footer’.

Por defecto toda plantilla de WP tiene, dentro del directorio del theme, los archivos comunes para todas las páginas header.php y footer.php, pero en muchos de nuestros proyectos nos encontraremos con la necesidad de utilizar varios ‘headers’ y ‘footers’,por motivos de diseño o programación, en función de la página en la que se encuentre el usuario. WP nos proporciona una solución sencilla y común para ambos casos, que no es otra que la creación directa de nuevos archivos, estos archivos deben seguir un patrón en su nombre de archivo para que WP los reconozca como tales,  dicha nomenclatura es la siguiente:

1
2
3
header-nombredelacabecera.php

footer-nombredelfooter.php

Ejemplo:

1
2
3
header-home.php

footer-home.php

Cuando tengamos los archivos creados, tenemos vía libre para realizar la maquetación necesaria para nuestro proyecto. Con los archivos creados y el contenido maquetado, sólo nos faltaría llamar desde nuestra plantilla a nuestros nuevos archivos para que se carguen y visualicen. Esto lo hacemos con las dos sencillas  funciones que WP pone a nuestra disposición:

1
2
3
<?php get_header('nombredelacabecera'); ?>

<?php get_footer('nombredelfooter'); ?>

Ejemplo:

1
2
3
<?php get_header('home'); ?>

<?php get_footer('home'); ?>

Con lo que nuestro archivo, a falta de incluir el contenido propiamente dicho, quedaría de esta forma:

1
2
3
4
5
6
7
8
9
<?php
/**
* Template Name: HOME
*
* Description: podéis también escribir una pequeña descripción aclaratoria
* por si otra persona tiene que cambiar o modificar el código.
*/ get_header('home') ?>

<?php get_footer('home') ?>

carpeta-wp

Con la estructura básica de página ya creada (cabecera y pie), en los siguientes post os escribiré sobre la creación de contenido (sidebar, menús, shortcodes…) y como incluirlo en nuestras plantillas.

Títulado Superior en Gráfica publicitaria en la Escuela de Artes de Alicante, hace años que me dedico al desarrollo web. Project manager en Dinamiclab, me he especializado en los nuevos lenguajes HTML5&CSS3 y en wordpress. Además soy un apasionado de los motion graphics y, gracias a HTML5 y CSS3, intento aplicarlo a la web.

Comentarios arrow Un Comentario
  1. Muchas gracias Francisco. Me has solucionado un problema que tenía con una pràctica de WordPress que tenía que entregar.

Escribe un comentario

Tu e-mail no será publicado. Los campos marcados con un asterisco son obligatorios.