4. Plantillas y estructura de directorios de un Tema de WordPress

(El artículo original y en inglés, fue publicado el 26 de octubre de 2012)

ThemeShaper es el sitio del Equipo de Temas de Automattic, que, en junio de 2009, publicaron una muy popular serie de 11 artículos de Ian Stewart, bajo el título: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (Como crear un Tema de WordPress: el tutorial definitivo).
El año pasado, reflotaron y actualizaron ese tutorial. Esta vez con 16 artículos a cargo de Michelle Langston:  The ThemeShaper WordPress Theme Tutorial: 2nd Edition (Tutorial de Temas de WordPress de ThemeShaper. Segunda edición).
Me propongo traducir libremente esas 16 entradas (además de la introducción) e ir publicándolas a medida que las tenga listas.
Al final de cada entrada va el listado con todas las entradas de este tutorial.

Aunque en su mínima expresión los temas de WordPress tan solo necesitan una plantilla index.php y un archivo style.css (o solo el archivo de estilo si se trata de un tema hijo -Child Theme-), la mayoría necesita algo un poco más robusto.
Vamos a crear los directorios y archivos que van a formar nuestro tema "Shape", basado en _s.

Cree un directorio para su Tema dentro de wp-content/themes/ —para este tutorial usaré “shape” como nombre de ese directorio, pero podría ser cualquier otro nombre— y dentro de ese nuevo directorio cree los siguientes directorios y archivos en blanco (no se preocupe, les daremos contenido a medida que avancemos con los trabajos de cada lección).

• inc (directorio)
• js (directorio)
• languages (directorio)
• layouts (directorio)
• 404.php
• archive.php
• comments.php
• content.php
• content-aside.php
• content-page.php
• content-single.php
• footer.php
• functions.php
• header.php
• index.php
• no-results.php
• page.php
• search.php
• searchform.php
• sidebar.php
• single.php
• license.txt
• rtl.css
• style.css

Ahora, en un editor de texto, abra el último de los archivos creados, style.css. Lo primero que necesitamos hacer es agregar una sección en la parte superior de este archivo etiquetada como "comentario" CSS (o sea, entre /* y */). Aquí es donde se debe colocar la información que es relevante para WordPress sobre su Tema. Sin ella, su Tema no se mostrará en el panel de temas.
Aquí yo estoy usando “Shape” como el nombre del Tema, pero siéntase libre de llamar a su tema del modo que quiera. Y, por supuesto, ingrese sus datos en nombre de autor, URLs y descripción.

/*
Theme Name: Shape
Theme URI: http://themeshaper.com/
Author: ThemeShaper
Author URI: http://themeshaper.com/
Description: The Shape theme is a simple, minimalist theme based on Underscores and the original Shape Theme by Ian Stewart. It was created especially as a learning theme for The ThemeShaper WordPress Theme Tutorial: 2nd Edition.
Version: 2.0
License: GNU General Public License
License URI: license.txt
Tags: light, white, one-column, two-columns, left-sidebar, right-sidebar, flexible-width, custom-backgroud, custom-header, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Hagamos un recorrido por cada uno de estos elementos para que entienda de que se trata cada uno.

• Theme Name – Obviamente, el nombre del Tema.
• Theme URL – La URL de la ubicación de su Tema en la web. Puede ser una sección de su sitio web. Por ejemplo, muchos autores de Temas usarán algo como: “http://www.su-dominio.com/su-tema/”
• Author – Se explica solo: obviamente, su nombre.
• Author URI – Vínculo a su sitio web.
• Description – Provea una descripción corta y clara de su Tema, resumiendo sus propósitos y características en unas pocas oraciones. Esta descripción aparecerá en el Escritorio de WordPress del usuario cuando busque temas, así como en el listado de temas del directorio de temas libres de  WordPress.org.
• Version – El número de versión de su Tema. Depende de usted la forma de numerar las versiones de su Tema, pero puede empezar con 1.0 si es uno totalmente nuevo. Si alguna vez publica actualizaciones, puede cambiar este número en consecuencia.
• License – La licencia de su Tema. Si va a distribuir su Tema (más sobre esto en la última lección de esta serie de tutoriales), se requiere que use la licencia GPL, que es la que usa WordPress.
• License URI – Incluya un vínculo que apunte al texto completo de la licencia. Nosotros estamos incluyendo con nuestro Tema un archivo “license.txt” que rellenaremos en la última lección de esta serie de tutoriales.
• Tags – Estas palabras (Etiquetas) describen las características, colores y tópicos de su Tema. Se requieren si su Tema va a ser distribuido. Las etiquetas le permiten a los usuarios filtrar sus búsquedas por colores, características, etc, cuando buscan Temas en el directorio de temas libres de WordPress o en sus Escritorios de WordPress. Aquí hay una lista de las etiquetas aprobadas.

Algo a tener en cuenta: muchos de los elementos anteriores son opcionales. En realidad, sólo necesita el nombre del tema. Pero si alguna vez piensa en la distribución de su Tema, o si está haciendo una personalización de un Tema para alguien más, tendrá que empezar a incluir la mayoría, si no todos, de los demás elementos. Por lo menos, quiero que se sienta libre de perder algo de tiempo haciendo pruebas con ellos.
Una vez que haya hecho esto puede activar su Tema y navegar por su sitio de pruebas. ¡Hemos hecho un tema en blanco por excelencia! Las cosas deberían comenzar a ponerse interesantes a partir de ahora.

La construcción en nuestra estructura HTML

Ahora vamos a usar nuestra estructura HTML de las lecciones previas. Pero primero, una mini-lección sobre WordPress y las plantillas.
En realidad WordPress solo necesita un archivo de plantilla: index.php. Para ciertas situaciones, podemos usar, y lo haremos, una serie de archivos de plantilla en lugar de index.php (por ejemplo: entradas individuales, páginas de archivo, etc), pero, en un principio, todo lo que necesitamos es index.php.
Ahora, index.php y todos sus hermanos y hermanas (de quienes ya hablaremos) hacen las páginas web que vemos en nuestros navegadores. Son archivos con algo de HTML y HTML generado por PHP, que, en definitiva, hacen las páginas web.
Pensemos en las páginas web como narraciones: algo con un principio, un desarrollo y un final. Bueno, cuando escribimos nuestro archivo index.php (y, más adelante, nuestros single.php, category.php, etc.) nos concentraremos solo en la parte del medio (el "desarrollo"). Pero, vamos a invocar el principio y el final. Es posible que tengamos que estar siempre rehaciendo los "desarrollos", pero vamos a hacer el principio y el final solo una vez.

header.php y footer.php

Abra la estructura HTML de la lección anterior y copie todo hasta <div id="main"> inclusive, péguelo en header.php y guárdelo. Debería quedar de la siguiente manera:



Ahora, copie todo lo que está desde -e inclusive- </div><!– #main –> dentro de footer.php. Debería quedar así:

sidebar.php

Copie lo que sigue de nuestra estructura HTML dentro de sidebar.php.
Debería quedar así:

<div id="secondary" class="widget-area">
</div><!-- #secondary .widget-area -->
 
<div id="tertiary" class="widget-area">
</div><!-- #tertiary .widget-area --> 

index.php

Apuesto que puede adivinar que es lo que tenemos que hacer ahora. Copiar en index.php todo lo que en nuestra estructura HTML original se encuentra dentro del div con el id #main hasta el div de cierre con el id #primary.
Debería verse así:

<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">
    </div><!-- #content .site-content -->
</div><!-- #primary .content-area -->

Con solo dos pequeños agregados más tendremos un Tema de WordPress perfectamente inválido, pero estaremos avanzando en la dirección correcta. Necesitamos invocar la cabecera (header), las barras laterales (sidebars) y el pie de página (footer) para su Tema.
Al inicio de index.php, antes que cualquier otra cosa, agregue la siguiente etiqueta de plantilla:

<?php get_header(); ?>

¡Muy bien! ¿Pueden inducir que llamadas a funciones vamos a poner al final de index.php?

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Sip. Ahora ya tenemos nuestro archivo principal que WordPress necesita para funcionar: index.php. Tiene toda la información central de nuestra página web, así como la llamada superior a la información que le da comienzo a la página y la llamada inferior a la información que concluye la página.
Actualice su página en el navegador y revise el código fuente (en Firefox: botón secundario -> Ver código fuente de esta página). ¡Mire! ¡Es su código!

Ya está encaminado en la construcción de su primer Tema para WordPress.

Sumario de entradas

0. Introducción.
1. El desarrollo de su "sentido temático".
2. Herramientas para el desarrollo de Temas de WordPress.
3. Creación de una estructura HTML para su Tema de Wordpress.
4. Plantillas y estructura de directorios de un Tema de WordPress.
5. Configuración de las funciones de su Tema.
6. Asegure su Tema de WordPress.
7. La plantilla cabecera del Tema de WordPress: header.php.
8. La plantilla Index de su Tema de WordPress.
9. Las plantillas Entrada Individual, Entrada de Adjuntos y error 404 del Tema de WordPress .
10. La plantilla de comentarios de un Tema de WordPress.
11. La plantilla de búsqueda (search) y la plantilla página (page) del Tema de WordPress.
12. La plantilla Archivo.
13. Las plantillas "sidebar" (barra lateral) y "footer" (pie de página) del Tema de WordPress.
14. Como resetear y reconstruir los CSS de su Tema de WordPress y definir su diseño.
15. Fondo y cabecera personalizados.
16. Distribuir su Tema de WordPress.