Curso de Wordpress: En el probador de los blogs

Nos proponemos crear un «tema» desde cero para usarlo en nuestro blog. Un tema es el look and feel de nuestra página, el aspecto con que queremos vestirla y presentarla en sociedad. Y sin duda, podrá dar mucho que hablar entre los amantes de los «trapitos» y skins

Redacción

Curso de Wordpress: En el probador de los blogs

12 julio 2007

Paso 1

Introducción

En la anterior lección intentamos tener una idea clara de lo que podemos hacer con WordPress, cuáles son sus ventajas y limitaciones y la manera en la cual está desarrollado. Tenemos una instalación en nuestro servidor, otra instalación en nuestra máquina a modo de desarrollo, un buen editor de texto para modificar el código y crear nuestras páginas, plantillas y temas personalizados, y nos hemos descargado ejemplos de temas ya creados en nuestro idioma desde el repositorio oficial de WordPress, aparte de otras muchas cosas.

En este capítulo, nos proponemos ir un paso más allá, y crear un tema desde cero para usarlo en nuestro blog, aprenderemos su estructura y tocaremos un poco el código PHP para personalizarlo a nuestra voluntad. Antes de nada, comentar que en algunos momentos puede que no entremos en toda la profundidad que sería deseable, debido a la evidente limitación de espacio, por lo cual hemos creado un completo y bonito ejemplo de tema para WordPress, para servir de apoyo a este artículo. Podrás encontrarlo en el cuadro de arriba. Si tienes cualquier duda para seguir el texto, lo mejor es que consultes los documentos del ejemplo y viceversa. Entremos en harina.

Paso 2

¿Qué es un tema?

Básicamente, cuando hablamos de usar temas en WordPress no es sacar un tema de conversación, sino, por decirlo así, es una manera de «vestir» nuestro blog. Realmente, es bastante más que eso, pero esuna imagen muy gráfica que nos ayuda a comprender rápidamente lo que usar un tema implica. Evidentemente, esto quiere decir que, si no vestimos nuestro blog con un tema, este quedará desnudo.
Un tema controla sobre todo la presentación, el look o el estilo de nuestro blog; y le dará buena parte de su personalidad. Hablando más prácticamente, es una colección de ficheros que combinados producen una interfaz gráfica con un diseño unificado para aplicar a nuestro blog dentro de nuestra aplicación. A esos ficheros se les llama plantillas (templates). Un tema controla y puede cambiar la manera en la que se muestra nuestro blog sin afectar para nada la codificación básica de WordPress, el núcleo de la aplicación.

Con lo cual, tiene que tener todo lo necesario para, aun trabajando en conjunto con el código fundamental de WordPress, funcionar de manera autónoma para controlar la presentación. Todo tema se compone principalmente de tres tipos de documentos: plantillas personalizables (creadas principalmente en PHP), imágenes y hojas de estilo. Todos ellos se guardarán dentro de una misma carpeta que nombraremos con el calificativo que deseemos que tenga nuestro tema.

Paso 3

¿Dónde está mi tema?

Mientras lo desarrollemos, será bueno ir viendo qué resultados se van produciendo en la apariencia de nuestro blog en el navegador. Por tanto, lo primero que debemos hacer es una mención a cómo aplicar un tema en el panel de administración. Para ello nos conectaremos a la administración del blog e iremos a Presentation/ Themes donde se nos mostrará una lista de los temas disponibles. El que está activo se mostrará bajo el epígrafe Current Theme. Si deseamos aplicar a nuestro blog cualquier otro, bastará con pulsar sobre el título o imagen de muestra que aparece en la lista.

Para añadir temas a esta lista acudiremos a la carpeta donde tengamos la instalación de WordPress y, allí, seguiremos la ruta wp-content/themes. En esa ubicación, dejaremos la carpeta que contiene los archivos de nuestro tema, la nombraremos como deseemos y listo (es cierto que en algunos casos especiales puede que la instalación de un tema sea algo más complicado, pero es así de sencillo en el 99% restante).

Por último, como decíamos, cada tema muestra en la página de presentación una información básica para hacernos una idea rápida de cómo es y qué podemos esperar de él. Parece algo trivial; pero, cuando estás probando varios, o desarrollando tú mismo uno a partir de otro u otros, puede que el lío de nombres resultante del «cortapega» de carpetas sea importante. Por ello, es conveniente lo primero de todo modificar esta información para diferenciar bien unos de otros. La miniatura de la apariencia del tema es un fichero de imagen de extensión PNG que tiene que ir en su carpeta.

El título y la descripción mostrada se recogen desde la hoja de estilo principal del tema, que tiene que alojarse (como la imagen) directamente en el raíz de la carpeta. Dicha información debe ponerse justo al principio de esta hoja de estilo principal (ésta luego puede llamar a otras y pueden estar en subcarpetas tranquilamente) y su apariencia es tal y como se puede ver en el PDF adjunto.

Paso 4

Plantillas básicas

Como hemos comentando, un tema es un conjunto de ficheros que trabajan juntos para crear una presentación única para nuestro sitio. La expresión más mínima de este conjunto de archivos se reduciría a dos: style.css e index.php. Style.css controlaría el estilo e Index.php el código final XHTML a mostrar, además de definir semánticamente nuestro blog. Será el que le dará la estructura. De aquí en adelante podemos crear tantos distintos archivos y subdivisions como queramos para hacer el estilo y la estructura de nuestro blog tan compleja como deseemos.

Existen, para hacerlo más fácil todavía, un número por defecto de plantillas que podremos usar directamente (como pueden ser search.php o comments.php), aun cuando es posible crear las nuestras propias. Existen dos tipos básicos: los módulos, que serán como trozos de código que reutilizaremos en varias páginas; y las plantillas de página. Luego, en la portada y en las páginas de categorías (que crearemos a partir de la plantilla de categoría category.php, por ejemplo), tendremos los módulos header, footer y sidebar, por ejemplo.

WordPress estructura internamente estas plantillas por defecto con una jerarquía propia que debemos conocer para poder usarlas. Y siempre las buscará primeramente dentro de la carpeta que contiene nuestro tema, tanto para los módulos como para las plantillas de páginas. Para llamar a estas plantillas por defecto dentro de cada una de las páginas usaremos códigos y funciones preconfiguradas por el propio WordPress. Un ejemplo de código de página básica sería el del archivo adjunto.

En negrita, aparecen resaltadas las funciones propias de WordPress para llamar a los módulos de la cabecera (header), contenido lateral o secundario (sidebar) y pie de la página (footer). En el tema de ejemplo, hemos usado, además de los citados: comments. php, para mostrar los comentarios; y searchform.php, para el formulario de búsqueda. Hay más, pruébalos y descubre sus posibilidades. También veremos cómo crear nuestros propios módulos más adelante.

Paso 5

La jerarquía de páginas

Las plantillas de páginas por defecto pueden estructurarse por secciones. WordPress tiene una jerarquía propia de plantillas. Es decir, dependiendo del tipo de página o sección a la que queramos llamar o tipo de contenido a mostrar, tiene formas de nombrar a dichas plantillas que le gustan más que otras. Buscará dichos nombres antes que nada, si encuentra plantillas llamadas así las mostrará sin preocuparse de más. Si no, busca el siguiente nombre que más le gusta hasta que termina la jerarquía de nombres y recurre en última instancia a la plantilla base de todas (index.php). Estas son las plantillas por defecto principales. En el listado que ofrecemos a continuación las pondremos por orden de mayor a menor importancia.

-Para la portada o página principal de nuestro blog podemos usar nombres como: 1. home.php o 2. index.php (de hecho index.php es algo así como el "chico-para-todo" y la plantilla de las plantillas).

-Para mostrar una entrada llamará a: single. php o index.php.

-Para una categoría: 1. category-X.php (siendo X el ID de dicha categoría dentro de la base de datos y fácilmente reconocible en el panel de administración), 2. category.php, 3. archive.php o 4. index.php.

-Para mostrar todas las entradas de un mismo autor: 1. author.php, 2. archive.php o 3. index.php.

-Para páginas de archivos mensuales, diarios o semanales: 1. date.php, 2. archive.php o 3. index.php.

-Para páginas específicas (como Acerca de nosotros o Info especial de mi familia, por ejemplo) podremos usar: 1. page.php o 2. index.php.

-Para la página de resultados de búsqueda: search.php o index.php. O para crear la página de error: 404.php o index.php.

Así, por ejemplo, si el usuario intenta acceder a nuestro blog (www.midominio.org), WordPress buscará primero la plantilla llamada home.php, y solo si esta no está, entonces acudirá a index.php para generar la página de inicio de nuestro blog.

Paso 6

Etiquetas condicionales

Supongamos ahora que el usuario quiere acceder a una categoría determinada de nuestro blog para ver sus entradas. Bien, no tenemos creada una plantilla category.php, pero sí archive.php. No la hemos creado porque las diferencias entre la página de categoría y la de archivos del mes eran mínimas y hemos preferido fundirlas en una. Mediante etiquetas condicionales, podemos mostrar esas diferencias mínimas en nuestra página archive.php.

Ver el archivo adjunto

Mediante el condicional básico de PHP if y la función preconfigurada is_category() e is_day(), podemos hacer que aparezcan titulares distintos dependiendo si se está mostrando una categoría o las entradas para un día concreto del año. Hay numerosas opciones posibles. Lo de siempre, estúdiatelas para sacarle el máximo provecho y mira nuestro caso para ver más ejemplo de llamadas condicionales.

Paso 7

Creando nuestras plantillas

Nos queda por ver cómo hacer nuestras propias plantillas. Obsérvese el código que aparece en el archivo adjunto

Queremos mostrar un contenido lateral en nuestra página principal y será muy diferente al que aparece en el resto de las páginas. Para ello, mejor que usar un condicional como en el ejemplo anterior, creamos el fichero sidebarHome.php y lo alojamos en el directorio principal de nuestro tema. Es todo. Solo tenemos que llamarlo desde nuestra plantilla mediante el trozo de código resaltado en negrita.

Paso 8

El nudo que todo lo une

The Loop (El Lazo) es un término que se refiere al proceso principal de WordPress. Se utiliza en las plantillas para mostrar nuestros posts a los visitantes. Si queremos mostrar varios en una misma página, siempre tendremos que usarlo. En el fondo, no es más que un bucle PHP. WordPress trabaja de la siguiente manera: se asegura de que todos los archivos necesarios están presentes, procesa todos los ajustes que ha realizado el usuario (número de posts a mostrar en una determinada página, si los comentarios están disponibles, etc.), mira a ver lo que el usuario está preguntando, se conecta a la base de datos y almacena los resultados en una variable.

Aquí es donde entra en acción The Loop, al acceder a esta variable y usar los valores recogidos para mostrarlos en la página. Cuanto menos específico es lo que pregunta o quiere el usuario, menos complicado será el mostrar este proceso. En el primer archivo adjunto a este paso tenéis un ejemplo de plantilla index.php básica, donde la parte del bucle ha sido resaltada en negrita.

Lo primero que hace es asegurarse de que hay posts para mostrar mediante la función have_post(). Si tenemos posts, un bucle condicional de PHP comienza y se ejecutará, evidentemente, hasta que la condición no se cumpla. Luego, como vemos en el código, mientras tengamos, se ejecutará lo que sea dentro del condicional. La función the_post() recoge la información de cada post dentro del conjunto de entradas agrupadas mendiante la función have_post() y la prepara para ser inmediatamente mostrada.

Después, finalmente, mostramos el contenido del post mediante the_content(). Lo que aparecerá en el navegador será un listado de contenidos de nuestras entradas. Entendiendo esto, entendemos el 90% del funcionamiento de WordPress. El resto será complicar el loop tanto como queramos. En el ejemplo del segundo archivo adjunto añadimos información como el título, la fecha y el autor de cada post.

Paso 8

El nudo que todo lo une

The Loop (El Lazo) es un término que se refiere al proceso principal de WordPress. Se utiliza en las plantillas para mostrar nuestros posts a los visitantes. Si queremos mostrar varios en una misma página, siempre tendremos que usarlo. En el fondo, no es más que un bucle PHP. WordPress trabaja de la siguiente manera: se asegura de que todos los archivos necesarios están presentes, procesa todos los ajustes que ha realizado el usuario (número de posts a mostrar en una determinada página, si los comentarios están disponibles, etc.), mira a ver lo que el usuario está preguntando, se conecta a la base de datos y almacena los resultados en una variable.

Aquí es donde entra en acción The Loop, al acceder a esta variable y usar los valores recogidos para mostrarlos en la página. Cuanto menos específico es lo que pregunta o quiere el usuario, menos complicado será el mostrar este proceso. En el primer archivo adjunto a este paso tenéis un ejemplo de plantilla index.php básica, donde la parte del bucle ha sido resaltada en negrita.

Lo primero que hace es asegurarse de que hay posts para mostrar mediante la función have_post(). Si tenemos posts, un bucle condicional de PHP comienza y se ejecutará, evidentemente, hasta que la condición no se cumpla. Luego, como vemos en el código, mientras tengamos, se ejecutará lo que sea dentro del condicional. La función the_post() recoge la información de cada post dentro del conjunto de entradas agrupadas mendiante la función have_post() y la prepara para ser inmediatamente mostrada.

Después, finalmente, mostramos el contenido del post mediante the_content(). Lo que aparecerá en el navegador será un listado de contenidos de nuestras entradas. Entendiendo esto, entendemos el 90% del funcionamiento de WordPress. El resto será complicar el loop tanto como queramos. En el ejemplo del segundo archivo adjunto añadimos información como el título, la fecha y el autor de cada post.

Paso 9

Recomendaciones básicas

Como hemos visto, desarrollar un tema no es un proceso muy complicado. Te hemos dado las bases para entender cómo funciona este elemento y cuál es su estructura básica. Ya sabes lo que es la jerarquía de páginas de WordPress, los módulos y las plantillas. Cómo opera el famoso The Loop o bucle para mostrar varios posts a la vez en tu navegador, e incluso hemos repasado cómo desarrollar plantillas propias. Suficiente para que te lances.

Antes de nada, estructura tu trabajo bien. Pregúntate que estructura deseas para tu blog, si contendrá comentarios o los cerrarás, si quieres tener un calendario o un listado de enlaces, qué clase de módulos, el tipo de gráficos y tipografía, colores, etc... Y en función de ello desarrolla tu tema. Te evitará perder mucho tiempo. Y consulta nuestro ejemplo donde encontrarás con más detalle cada uno de los códigos básicos que hemos visto aquí.

Paso 10

Enlaces interesantes

Cómo usar bien los temas:

http://codex.wordpress.org/Using_Themes

Desarrolla un tema:

http://codex.wordpress.org/Theme_Development

Aprende más de CSS y PHP:

http://codex.wordpress.org/Know_Your_Sources

Listado de artículos para el desarrollo de temas:

http://codex.wordpress.org/Templates

Etiquetas básicas en el desarrollo de temas:

http://codex.wordpress.org/Template_Tags

Etiquetas condicionales:

http://codex.wordpress.org/Conditional_Tags

Repositorio de temas de WordPress:

http://themes.wordpress.net/