Comprendiendo un tema de WordPress por dentro

Wordpress: "code is poetry"

La mayoría de las plantillas de WordPress, sin importar lo diferentes que sean sus diseños, están confeccionadas con los mismos componentes. Si no conoces su funcionamiento, hoy te introducimos algunas nociones muy básicas que te ayudarán a desenvolverte con más soltura entre sus ficheros. Una vez que comprendas estas primeras claves, verás que es bastante sencillo empezar a hacer esos pequeños cambios que siempre has querido introducir para mejorar tu blog.

Los temas de WordPress (en inglés, ‘themes’) consisten en una carpeta con ficheros de plantillas escritas en código PHP. Cada una de ellas controla una pieza concreta del aspecto de tu blog y del contenido que se muestra en ella. A grandes rasgos, podemos diferenciar cinco elementos clave:

  1. Los elementos comunes, que aparecen en todas partes sin importar en qué página estás, es decir cabecera, lateral y pie. Se definen en las plantillas header.php, sidebar.php y footer.php, respectivamente.
  2. La portada, controlada desde el fichero index.php
  3. Los post, definidos por el fichero single.php
  4. Las páginas estáticas, como “Acerca de” y “Contacto”, creadas desde el panel de control como “Páginas”
  5. Las páginas dinámicas, que se construyen con contenido extraído de la base de datos dependiendo de lo que el usuario esté viendo: páginas de archivo, páginas de categoría, páginas de autor.

1) Elementos comunes

Header.php

La cabecera (header.php) es un fichero global que muestra el título del blog y la navegación principal (los enlaces a las diferentes secciones, páginas, etc.). También contiene código propio de la cabecera HTML como las etiquetas meta y las llamadas a los ficheros básicos de visualización de la plantilla (css, javascript, el fichero del favicon, etc.)

Sidebar.php

La barra lateral (sidebar.php) define lo que se muestra en la columna que hay en el lateral de nuestro blog. Se pueden establecer diferentes ficheros “sidebar” y controlar cuál aparece dónde desde el fichero “functions.php”. Si el ‘sidebar’ está automatizado mediante widgets, puedes configurarlos desde el panel de control de WordPress, en el menú “Apariencia > Widgets” (https://tudominioweb/wp-admin/widgets.php)

En este trozo de código suelen aparecer los enlaces a los últimos post publicados, los archivos de meses anteriores, las categorías, etc. Por ejemplo en Superblogger además de estos elementos es donde tenemos el campo de suscripción, el buscador y las redes sociales.

Footer.php

El fichero del pie de página (footer.php) suele contener algunos enlaces importantes dentro del blog, la información de copyright y similares. A nivel de código, es indispensable porque cierra todas las etiquetas HTML de la plantilla.

2) Portada (index.php)

El fichero index.php controla el aspecto de la portada del blog. Por defecto, contiene un ‘loop’, un fragmento de código que se encarga de consultar en la base de datos si hay post, y en caso de haberlos, mostrárnoslos. Por defecto, se muestran en orden cronológico ascendiente (es decir, los más recientes primero), porque este es el rasgo definitorio de la organización de contenidos en un blog.

Sin embargo, esto es por defecto. En WordPress existe la posibilidad de indicar al sistema que muestre un fichero .php cualquiera que tengamos en nuestra template desde el panel de control, en el menú Ajustes > Lectura (https://tudominioweb/wp-admin/options-reading.php)

3) Artículos (single.php)

El archivo single.php controla cómo se muestran los post individuales una vez accedes a ellos. Contiene otro ‘loop’ encargado de mostrar el post una sola vez, pero en toda su extensión y con toda la información relacionada (autor, fecha, etiquetas, categorías, etc.)

Contiene llamadas a otros ficheros PHP que controlan aspectos estándar de la plantilla de los artículos, como por ejemplo los trozos de código que controlan los comentarios (comments.php)

Lo más interesante de que los artículos estén en un fichero aparte, es que puedes definir un “sidebar.php” específico para ellos, de forma que no tienes por qué mostrar lo mismo en el lateral de los artículos que en el de la portada.

4) Páginas estáticas (page.php)

En page.php están definidos todos los valores que controlan el aspecto de los contenidos de tipo “página”. Al igual que hemos comentado con single.php, puedes decidir eliminar el ‘sidebar’, poner otro específico para las páginas, o incluir un elemento que no existía en la portada.

Un aspecto muy versátil de WordPress es que puedes definir diferentes plantillas de página para cada página. La forma de hacerlo es muy sencilla, basta copiar page.php, ponerle otro nombre y añadir el siguiente código en la parte superior:

<?php 
/* 
Template Name: Nombredelaplantilla 
*/ 
?>

Después, para conectar la página con la plantilla que acabamos de crear, la editamos desde el panel de control y lo indicamos en la caja del lateral derecho.

5) Páginas dinámicas

Nos referimos a las páginas de los ficheros archive.php, category.php, tag-php, etc. Son páginas que principalmente cumplen la función de listados, y para ello emplean el ‘loop’ que comentábamos antes.

Puedes definir el aspecto de diferentes archivos modificando estas plantillas. Si en el tema que estás editando no existe alguna de estas plantillas, WordPress tomará por defecto index.php. Del mismo modo, si creas la plantilla “category.php” lo que definas ahí sobreescribirá lo que estaba indicado en “archive.php”.

Otros ficheros importantes

Para terminar, os explicamos algunos elementos que hemos mencionado de pasada y que también contribuyen de forma esencial al funcionamiento de un tema en WordPress. Los podemos modificar según nuestras necesidades, y juegan un papel decisivo en la forma en que se muestra nuestro blog:

  • Functions.php. Te permite incluir tu propio código PHP para modificar elementos principales del tema. Se utiliza a menudo para indicar múltiples ‘sidebars’, cambiar el número de caracteres en el “Extracto” o añadir opciones personalizadas al panel de administración.
  • Comments.php. Este fichero controla la forma en la que se muestran los comentarios, aunque puedes sobreescribirlo si utilizas plugins específicos de comentarios como Disqus, que sirve para externalizar la funcionalidad de los comentarios.
  • Style.css. Es el principal fichero CSS de tu tema, lo que significa que es donde se establecen los tipos de letra, los colores, los tamaños de texto, las dimensiones de los elementos y todos los parámetros que tienen que ver con el aspecto visual de la plantilla. También contiene texto en la parte superior que le indica a WordPress cómo se llama el tema, quién es el autor y la URL de su sitio web.
Sobre Laura Blanco 57 Artículos
Laura creó su primer blog, "De Madrid al cielo..." en 2005. Desde entonces, no ha parado de escribir: blogs, notas de prensa, textos para páginas web, guiones para vídeos, copy para mailings... Actualmente trabaja como consultora de contenidos en Tíndalos Diseño Intuitivo, empresa de la que es cofundadora. Puedes encontrarla en Twitter como @Intuitiva_

1 comentario

  1. Hola, Necesito que las entradas de una categoria ej. NOTAS, se abran en single-NOTAS.php, esto ya lo he conseguido, ahora quiero quitar de esta página single-NOTAS.php, el encabezado, barra lateral y pie, ¿cómo lo puedo hacer?

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*