Estructura de un theme para WordPress

23 DE SEPTIEMBRE 2015 BY IVAN CANALES OYARCE 

Mucha gente, incluso empresas, viven del desarrollo de temas visuales para WordPress. He de decir que conozco a especialistas en el tema de los que he aprendido mucho, y es todo un arte. Tienes que poseer el arte del diseño web, tener gusto y además saber programar y controlar los entresijos de WordPress, o bien te puedes dedicar solamente a programar y tener un socio diseñador ;). Seguramente será mi caso.

El objetivo de esta entrada es definir la estructura básica de un theme para WordPress, iremos desde lo más simple a lo más complicado pero primero de todo dejadme qu1e os comparta una imagen muy importante, la jerarquía de los templates de WordPress cortesía de WPTuts.

Si queremos crear un nuevo tema para nuestra instalación de WordPress tenemos que crear una carpeta dentro de la carpeta themes, nombrándola de manera distintiva (es opcional pero recomendable).

Olvidémonos por unos momentos de la imagen superior, y centrémonos en el archivo style.css.

Este archivo es el que, en su inicio debe tener un contenido que indica la existencia de ese tema, dicho contenido debe ir entre comentarios. Os muestro a continuación el ejemplo del tema Twentytwelve.

1. Theme Name: Twenty Twelve




2. Theme URI: http://wordpress.org/themes/twentytwelve




3. Author: the WordPress team




4. Author URI: http://wordpress.org/




5. Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no- sidebar page template. Make it yours with a custom menu, header image, and background.




6. Version: 1.3




7. License: GNU General Public License v2 or later




8. License URI: http://www.gnu.org/licenses/gpl-2.0.html




9. Tags: light, gray, white, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready

Con este archivo WordPress nos detecta el tema que estamos creando, pero nos falta un archivo tan importante como este, el index.php. Como veis en la jerarquía superior, por defecto, si no se encuentra ningún archivo de la jerarquía se invoca a index.php, por lo que es indispensable tenerlo. En este archivo podríamos ya llamar al loop de WordPress y hacer lo que quisiésemos, pero para crear los temas para WordPress se sigue el concepto DRY (Don’t Repeat Yourself), por lo que junto con index.phppodemos crear otra serie de archivos e invocarlos desde el fichero de índice.

Index.php por lo general lleva la cabecera, el footer, el sidebar y el bucle mostrando las entradas del blog.

Estos archivos son:

• header.php: Se puede invocar con get_header().
• footer.php: Se puede invocar con get_footer().
• sidebar.php (aunque podemos crear otros sidebars, por ejemplo sidebar-footer.php): Se invoca conget_sidebar() o get_sidebar(“footer”).
• Cualquier fichero nombre.php: Lo podemos incluir con get_template_part(“nombre”).

Con estos ficheros ya podriamos crear un tema visual básico, pero lo podemos extender mucho más. Vamos a ver ahora la jerarquía.

home.php

En este fichero va el contenido que se muestra por defecto en la página que asignamos en WordPress que sea la de “Blog”.

front-page.php

En este fichero va el contenido que se muestra por defecto en la página que asignamos en WordPress como página estática de inicio. Podemos incluir lo que queramos, desde últimas noticias, novedades de nuestros productos, un formulario para captar clientes, etc.

404.php

Es el contenido que se muestra cuando no se encuentra la página a la que hemos navegado dentro de nuestra web, es útil para el usuario, ya que ha obtenido una página que no se encuentra, ofrecerle un formulario de búsqueda.

search.php

Es la página que muestra los resultados de búsqueda realizados a través del formulario de búsqueda del blog.

searchform.php

Podemos sobrecargar el formulario de búsqueda que trae el núcleo de WordPress, e invocarlo desde cualquier lado con get_search_form();

date.php

Muestra la relación de posts para una fecha (año, mes o día).

author-{nicename}.php, author-{id}.php, author.php

Muestra las entradas para un determinado autor, el primero y el segundo de ellos nos permiten una plantilla específica para un autor en concreto, indicando tanto por el nombre como por la id del autor. Author.php es la plantilla genérica.

category-{slug}.php, category-{id}.php, category.php

Como en el caso anterior podemos tener diferentes plantillas para diferentes categorías, para la categoría Terror podemos querer un fondo oscuro o una imagen aterradora, pero para la categoría Happy queremos que aparezca más colorido y con una cara sonriente. Category.php sería la plantilla genérica para mostrar las entradas de una categoría.

tag-{slug}.php, tag-{id}.php, tag.php

El mismo caso que con las categorías, pero con las etiquetas de las entradas.

taxonomy-{taxonomy}-{term}.php, taxonomy-{taxonomy}.php, taxonomy.php

Podemos tener taxonomías personalizadas, estos ficheros, en orden, nos permiten mostrar las entradas de dicha taxonomía asociadas a un término de la misma. O bien mostrar igual todas las entradas de esa taxonomía personalizada o mostrar igual todas las taxonomías.

single.php

Muestra el contenido de una entrada.

single-{posttype}.php

Muestra el contenido de una entrada de un tipo personalizado de post.

{MIME_type}.php, attachment.php

Muestra los ficheros adjuntos a las entradas, dependiendo del tipo o bien en general.

{custom-template}.php, page-{slug}.php, page-{id}.php, page.php

En el mismo orden, podemos mostrar páginas individuales de un tipo personalizado de templates, mostrar una página para un título en concreto, para una id o cualquier página.

Para crear templates personalizados tendríamos que en el fichero php añadirle al comienzo entre comentarios:

/*Template Name: Full Width*/

Para que se entienda, si creo un fichero que se llame template-full.php y en primera linea incluyo el comentario anterior, luego a la hora de elegir la plantilla para cada página podremos seleccionar esta plantilla.

¿Agobiado?

Ya queda poco, termina y descansa...

Además de los ficheros *.php a nuestro theme podemos añadirle una serie de carpetas que nos serán útiles para organizar nuestros ficheros. En mi caso, he creado una serie de carpetas que son las siguientes:

• img: Incluirán todas las imágenes para el theme.
• js: Incluirán todos los scripts (JavaScript) que usará el theme.
• 3rd: Para aquellas librerías de terceros.
• inc: Para aquellos elementos del theme, como taxonomías personalizadas, tipos de entradas personalizados, etc.
• kernel: Aquí irá todo el código de gestión del tema, este código será común a los diferentes temas, por ejemplo, widgets, ficheros JS generales, panel de administración personalizado, etc.

Por último, la clave de la personalización de los temas. El fichero functions.php.

Aquí incluiremos todos los ficheros que llaman al núcleo de WordPress para cualquier acción, llamaremos a los ficheros del kernel y a los de inc. Functions.php es como el cerebro de nuestro theme, donde conectamos con el núcleo de WordPress.

El tema que voy a crear se llama Chead y será del tipo portfolio / blog personal. Poco a poco iré guiando paso a paso como crear un theme conforme lo vaya programando.

¡Ah! Se me olvidaba, no os olvidéis vosotros de crear el fichero screenshot.png, será la visualización previa del theme en el apartado de apariencia de WordPress.

El desarrollo de themes nos permite compartirlo en repositorios como Themeforest, venderlos, crear versiones premium de themes gratis, etc

¿Dudas? ¿Me dejo algo? ¿Comentarios?