WORDPRESS
Estructura de un theme para WordPress
4 febrero, 2014 by Juan Ignacio Alberola Colomo 3 Comments
Mucha gente, incluso muchas empresas, viven del desarrollo de
temas visuales para WordPress. Debo 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 diseo web, tener gusto y
adems saber programar y controlar los entresijos de WordPress, o
bien te puedes dedicar solamente a programar y tener un socio
diseador ;). Seguramente ser mi caso.
El objetivo de esta entrada es definir la estructura bsica de un
theme para WordPress, iremos desde lo ms simple a lo ms complicado
pero primero de todo dejadme que os comparta una imagen muy
importante, la jerarqua de los templates de WordPress cortesa de
WPTuts.
Si queremos crear un nuevo tema para nuestra instalacin de
WordPress tenemos que crear una carpeta dentro de la carpeta
themes, nombrndola de manera distintiva (es opcional pero
recomendable).
Olvidmonos por unos momentos de la imagen superior, y centrmonos
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 continuacin el ejemplo del tema
Twentytwelve.
1
2
3
4
5
6
7
8
9
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 jerarqua superior, por defecto, si no se
encuentra ningn archivo de la jerarqua se invoca a index.php, por
lo que es indispensable tenerlo. En este archivo podramos ya llamar
al loop de WordPress y hacer lo que quisisemos, pero para crear los
temas para WordPress se sigue el concepto DRY (Dont 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 bsico, pero
lo podemos extender mucho ms. Vamos a ver ahora la jerarqua.
home.php
En este fichero va el contenido que se muestra por defecto en la
pgina 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
pgina que asignamos en WordPress como pgina esttica 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 pgina a
la que hemos navegado dentro de nuestra web, es til para el
usuario, ya que ha obtenido una pgina que no se encuentra,
ofrecerle un formulario de bsqueda.
search.php
Es la pgina que muestra los resultados de bsqueda realizados a
travs del formulario de bsqueda del blog.
searchform.php
Podemos sobrecargar el formulario de bsqueda que trae el ncleo
de WordPress, e invocarlo desde cualquier lado con
get_search_form();
date.php
Muestra la relacin de posts para una fecha (ao, mes o da).
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 especfica para un autor
en concreto, indicando tanto por el nombre como por la id del
autor. Author.php es la plantilla genrica.
category-{slug}.php, category-{id}.php, category.php
Como en el caso anterior podemos tener diferentes plantillas
para diferentes categoras, para la categora Terror podemos querer
un fondo oscuro o una imagen aterradora, pero para la categora
Happy queremos que aparezca ms colorido y con una cara sonriente.
Category.php sera la plantilla genrica para mostrar las entradas de
una categora.
tag-{slug}.php, tag-{id}.php, tag.php
El mismo caso que con las categoras, pero con las etiquetas de
las entradas.
taxonomy-{taxonomy}-{term}.php, taxonomy-{taxonomy}.php,
taxonomy.php
Podemos tener taxonomas personalizadas, estos ficheros, en
orden, nos permiten mostrar las entradas de dicha taxonoma
asociadas a un trmino de la misma. O bien mostrar igual todas las
entradas de esa taxonoma personalizada o mostrar igual todas las
taxonomas.
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 pginas individuales de un
tipo personalizado de templates, mostrar una pgina para un ttulo en
concreto, para una id o cualquier pgina.
Para crear templates personalizados tendramos que en el fichero
php aadirle 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 pgina
podremos seleccionar esta plantilla.
Agobiado?
Ya queda poco.
Adems de los ficheros *.php a nuestro theme podemos aadirle una
serie de carpetas que nos sern tiles para organizar nuestros
ficheros. En mi caso, he creado una serie de carpetas que son las
siguientes:
img: Incluirn todas las imgenes para el theme.
js: Incluirn todos los scripts (JavaScript) que usar el
theme.
3rd: Para aquellas libreras de terceros.
inc: Para aquellos elementos del theme, como taxonomas
personalizadas, tipos de entradas personalizados, etc.
kernel: Aqu ir todo el cdigo de gestin del tema, este cdigo ser
comn a los diferentes temas, por ejemplo, widgets, ficheros JS
generales, panel de administracin personalizado, etc.
Por ltimo, la clave de la personalizacin de los temas. El
fichero functions.php.
Aqu incluiremos todos los ficheros que llaman al ncleo de
WordPress para cualquier accin, llamaremos a los ficheros del
kernel y a los de inc. Functions.php es como el cerebro de nuestro
theme, donde conectamos con el ncleo 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 olvidis vosotros de crear el fichero
screenshot.png, ser la visualizacin 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
