Estructura de un theme para WordPress

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 que os comparta una imagen muy importante, la jerarquía de los templates de WordPress cortesía de WPTuts.

WP_CheatSheet_TemplateMap

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.

Theme Name: Twenty Twelve
Theme URI: http://wordpress.org/themes/twentytwelve
Author: the WordPress team
Author URI: http://wordpress.org/
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.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
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.php podemos 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 con get_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?

agobio-lisa

Ya queda poco.

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? 🙂

(Visited 13.736 times, 1 visits today)

5 comentarios en “Estructura de un theme para WordPress”

  1. Pingback: Primeros pasos para crear theme de Wordpress - Blog de Juan Alberola

  2. Hola amigo, primero que nada te quiero felicitar por tu blog, está muy interesante y bien diseñado, me gusta este blog, esta tocao como decimos nosotros los cubanos, si compadre soy cubano y apenas estoy incursionando en todo lo relacionado con WordPress, me estoy volviendo loco con tantas cosas, he buscado muchísimo y no he encontrado un buen libro que explique bien cómo funciona WordPress del todo, tengo unos libros muy buenos sobre Drupal que están muy completos, la consulta que tengo para ti es si conoces de algún libro escrito para WordPress que estén así de completos como estos, los libros de Drupal de los cuales te hablo son los siguientes: Experto en Drupal 7 (Niveles Inicial, Intermedio y Avanzado) escritos por Fran Gil Rodríguez.
    Oye gracias nada más por leer la lata que te estoy dando.

  3. Buenas! Muy interesante la nota! Te hago una consulta haber si podes ayudarme… estoy trabajando sobre correcciones de un site en WP que hizo otra persona y no se como hacer para saber a que pagina .php corresponde cada contenido cuando estoy navegandola ya que los parametros no corren por get, podrias ayudarme? gracias!

  4. Hola decir que me pareció interesante tu entrada.
    Estoy buscando información de como modificar la apariencia de un sistema hecho con symfony de forma parecida a como un usuario podría modificar un tema de wordpress, si tienes idea me dejas los enlaces??
    Gracias de antemano desde Cuba.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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

Ir arriba

Si continuas utilizando este sitio, aceptas el uso de las cookies. Más información

Las opciones de cookie en este sitio web están configuradas para "permitir cookies" para ofrecerte una mejor experiéncia de navegación. Si sigues utilizando este sitio web sin cambiar tus opciones o haces clic en "Aceptar" estarás consintiendo las cookies de este sitio.

Cerrar