Creando un tema desde cero para WordPress parte 2: Escribiendo el tema

Hemos visto en el anterior artículo una serie de consideraciones a tener en cuenta antes de desarrollar un tema para WordPress desde cero. Una vez realizado este planteamiento, es hora de ponerse manos a la obra.

Un tema de WordPress es un conjunto de archivos (.php, .js, .css, etc.) que permiten cambiar la apariencia y funcionalidad de nuestro sitio. Sólo son necesarios dos archivos para que un tema “funcione”: style.css e index.php.

Los temas de WordPress se basan en un sistema de plantillas. Una plantilla es un fichero que representa un tipo de contenido dentro de nuestra web. Hay plantillas para la home, para listados de categorías y etiquetas, para páginas, para el detalle de una entrada, para la pantalla de búsqueda, para cuando nos da un error 404, etc… Los archivos y plantillas que podemos encontrar dentro de un tema de WordPress son las siguientes:

  • style.css: hoja de estilos principal, que contiene la información sobre tu tema y puede contener los estilos de tu sitio (veremos más adelante una manera de optimizar esto)
  • index.php: plantilla principal del tema, que se mostrará siempre que no se encuentre otra plantilla dentro de la jerarquía de plantillas de WordPress
  • home.php: plantilla para listado de post en la página principal
  • front-page.php: plantilla para listado de post o página estática
  • header.php: plantilla para cargar la cabecera del sitio. Dentro hay que utilizar la función wp_head() antes del cierre de la etiqueta </head>. Esta función es usada por temas y plugins para cargar dinámicamente CSS, JS, etc. También es donde se abre el <body> de nuestro sitio.
  • footer.php: plantilla para cargar el pie de nuestro sitio. Dentro hay que utilizar la función wp_footer() antes del cierre de la etiqueta </body>. Esta función es usada por temas y plugins para cargar dinámicamente JS, etc. Es donde se cierra la etiqueta </html> de nuestro sitio.
  • page.php: plantilla por defecto para mostrar las páginas.
  • category.php: plantilla para mostrar listados de entradas o posts por categoría. Podemos personalizar categorías concretas creando plantillas con la nomenclatura category-{slug}.php ó category-{id}.php
  • single.php: plantilla para mostrar el detalle de las entradas o posts. Podemos personalizar el detalle de Custom Post Type concretos creando plantillas con la nomenclatura single-{posttype}.php
  • author.php: plantilla para mostrar el autor y sus entradas. Podemos personalizar ésta plantilla para autores concretos creando plantillas con la nomenclatura author-{nicename}.php ó author-{id}.php
  • archive.php: plantilla para mostrar listados de entradas de Custom Post Types. Podemos personalizar listados de CPT concretos creando plantillas con la nomenclatura archive-{posttype}.php
  • tag.php: plantilla para mostrar listados de entradas o posts por etiqueta. Podemos personalizar etiquetas concretas creando plantillas con la nomenclatura tag-{slug}.php ó tag-{id}.php
  • taxonomy.php: plantilla para mostrar listados de entradas o posts por taxonomía. Podemos personalizar taxonomías concretas creando plantillas con la nomenclatura taxonomy-{taxonomy-term}.php ó taxonomy-{taxonomy}.php
  • date.php: plantilla para mostrar listados de entradas o posts por fecha (año, mes y día)
  • search.php: plantilla para mostrar listados de resultados de búsqueda de posts, pages y CPT.
  • searchform.php: plantilla para mostrar el formulario de búsqueda
  • 404.php: plantilla de página no encontrada
  • comments.php: plantilla de formulario de comentarios
  • sidebar.php: plantilla de barra lateral
  • functions.php: archivo donde crear las funcionalidades, configuraciones y ajustes del tema.
  • screenshot.png: pantallazo o portada de tu tema que aparecerá en el listado de temas en el back-end de WordPress (Apariencia => Temas)

archivos tema

Esto es, a grosso modo, los archivos que conforman un tema de WordPress. Vamos a entrar un poco más en detalle en los archivos más importantes.

 

style.css

Éste archivo debe contener las cabeceras de información de nuestro tema. Obligatorio al menos el Theme Name:

Normalmente en este archivo escribirás tus estilos CSS, pero si por ejemplo utilizas gulp o grunt para procesar, concatenar y minificar tus CSS no sería necesario. Es decir, el archivo style.css debe existir y debe tener las cabeceras, pero no hace falta que contenga estilos y no es necesario cargarlo en la web, lo veremos más adelante.

 

header.php

Este archivo contiene las cabeceras de nuestro sitio web, es decir, es donde se define el doctype, el charset, el viewport, se cargan los CSS y JS, etc…y también es donde se abre la etiqueta <body>. Éste archivo suele cargarse en todas las plantillas a través de la función get_header(), por lo tanto es aquí donde pondremos los elementos comunes de nuestro sitio web como puede ser la cabecera, el logo, el menú, etc…

Como puede observarse, antes del cierre de la etiqueta </head> llamamos a la función wp_head(). Más adelante veremos cómo cargar aquí dinámicamente nuestros archivos CSS y JS desde el functions.php.

 

footer.php

Este archivo contiene el pie de página. En él se cierran las etiqueta </body> y </html> abiertas en el header.php:

Disponemos de una función wp_footer() para cargar por ejemplo scripts a través del functions.php.

 

functions.php

Éste es un archivo muy importante en cualquier desarrollo de temas a medida. Contiene todas las configuraciones de nuestro tema. Podremos crear funciones propias para adaptar el tema a nuestras necesidades, crear funciones auxiliares, modificar el funcionamiento de algunas funciones de WordPress, cargar las hojas de estilos y los JS, etc…

Podría extenderme por los siglos de los siglos sobre las cosas que podemos hacer con nuestro functions.php, pero al menos es recomendable tener:

  • Una función de setup, donde indicar el texdomain en caso de que nuestro tema sea multi-idioma, si soporta thumbnails, title-tag, custom-logo, registrar las áreas de menú, etc…
  • Una función para encolar los CSS y JS. Como hemos comentado anteriormente, si usas grunt o gulp para procesar, concatenar y minificar CSS y JS, lo más probable es que tengas en la carpeta /css un archivo llamado styles.min.css y en la carpeta /js un archivo llamado scripts.min.js, por lo tanto:
  • Una función para eliminar algunos links de la cabecera:
  • Una función para establecer el número de palabras que devolverá el extracto:

 

Y así ir creando el tema en base a tus necesidades…

 

index.php

Suele usarse para la página principal de tu sitio:

Ésta estructura nos serviría casi para todas las plantillas, es decir, siempre al principio llamaremos al header, y al final al footer. En medio es donde personalizaremos cada template a nuestro gusto. A continuación muestro cómo sería por ejemplo un page.php estándar en el que contemplamos el uso de bootstrap con el contenido principal a 9 columnas y el sidebar a 3. Para mostrar el contenido usamos el loop, del que hablaré con más detalle en la parte 3 de esta serie de artículos sobre cómo hacer un tema de WordPress desde cero:

 

Crea tus propias plantillas

WordPress te permite crear tus propias plantillas para que puedas asignarlas a cada página a tu antojo. Imagina que quieres una plantilla específica para tu página “Donde estamos” ó “Formulario de contacto”. Solo tendrías que duplicar el archivo page.php de tu tema y nombrarlo como quieras. Yo suelo llamarlos por ejemplo: page-contact.php, page-fullwidth.php, etc…

templates

Para que WordPress lo reconozca como plantilla sólo tienes que poner al inicio:

El nombre que establezcas aquí aparecerá en el back-end a la hora de editar una página. Siguiendo el ejemplo anterior que he puesto para page.php, imagina que quisieras tener una plantilla de ancho completo, sin sidebar. Puedes crear el archivo page-fullwidth.php con la siguiente estructura:

 

Cómo interpreta WordPress qué plantilla mostrar en cada caso

WordPress tiene lo que se llama una jerarquía de plantillas. Cuando un visitante entra en nuestro sitio, a través de unas reglas en nuestro .htaccess si hemos puesto una estructura de enlaces permanentes amigable o a través de parámetros en la URL, detecta el tipo de contenido que quieres ver y te muestra la plantilla correspondiente.

Puedes ver la estructura en la siguiente infografía:

template hierarchy

Se llama jerarquía de plantillas porque si no encuentra una en concreto va a la siguiente, y todas desembocan al final en index.php. Por ejemplo, si queremos visualizar el detalle de un custom post type, primero buscará si existe en nuestro tema un archivo single-{posttype}.php. En caso de no encontrarlo buscará el single.php, y en caso de no encontrarlo, mostrará el index.php.

Es importante entender ésto para tener claro cómo funciona WordPress y permitirnos saber cómo podemos personalizar cada plantilla a nuestro antojo.

Si te ha gustado, valora este artículo para mejorar la calidad del blog o compártelo en Redes Sociales…
1 Star2 Stars3 Stars4 Stars5 Stars (2 votos, valoración 5,00 sobre 5) Loading...

Web Hosting