WordPress, el popular gestor de contenidos, se caracteriza por la separación entre diseño, por un lado, y programación, por otro. Los denominados temas permiten definir la visualización de contenidos en el frontend sin modificar el código. Básicamente, lo que hace un tema de WordPress es preparar un código fuente que describe cómo se han de solicitar y componer los contenidos almacenados en la base de datos del servidor para que, cuando sea solicitada, se origine una página web dinámica y pueda ser entregada al navegador web. Con ellos, los administradores web pueden diseñar libremente la página en su totalidad dentro de las posibilidades que permite cada tema. La estructura básica de un tema de WordPress consiste en varios archivos fuente PHP llamados archivos de plantilla (template files), hojas de estilo y datos de localización, así como archivos JavaScript opcionales y gráficos. A continuación, te mostramos cuáles son los componentes de los temas de WordPress que deberías conocer, qué función tienen y cómo se combinan entre ellos.

Elementos básicos de los temas de WordPress

Mientras que, en esencia, una página web estática consiste en un único documento HTML que incluye todos los contenidos, así como elementos JavaScript y elementos CSS, un tema de WordPress está constituido por varios archivos de plantilla, también denominados, sencillamente, plantillas. Las plantillas de WordPress están unidas entre sí mediante etiquetas include (include tags) y describen, con la ayuda de etiquetas de plantilla o template tags, cómo se ha de mostrar el contenido almacenado en la base de datos del servidor de forma integrada. Si su visualización está ligada a ciertas condiciones, se usan entonces los denominados conditional tags o etiquetas condicionales. Los llamados “ganchos” o template hooks permiten, a su vez, integrar plugins en los temas. La edición de los contenidos se gestiona mediante un mecanismo conocido en la terminología de WordPress como Loop.

Plantillas (template files)

Los temas de WordPress, con todos sus elementos fundamentales, pueden considerarse una especie de plan arquitectónico para una web. La página dinámica que se entrega al navegador cuando un usuario la solicita se compone de una serie de elementos que, a semejanza de las piezas de un juego de construcción, se pueden seleccionar de forma independiente en función de si el usuario quiere ver la página principal de su blog, un artículo o un comentario. Estas piezas básicas reciben el nombre de plantillas o archivos de plantilla (del inglés, template files) y se trata de archivos PHP que contienen elementos HTML, código PHP y etiquetas de plantilla (template tags), cada uno de los cuales tiene una tarea definida exactamente.

En principio, un tema de WordPress se considera válido cuando contiene las plantillas index.php y style.css, aunque, por regla general, un tema de WordPress suele contener un gran número de plantillas diferentes capaces de representar distintos tipos de contenido, lo que demuestran la gran capacidad en cuanto a funciones de este popular software. La siguiente lista contiene las plantillas básicas que suelen encontrarse en casi cada tema de WordPress:

  • style.css: este es uno de los dos elementos de presencia obligatoria en cada tema de WordPress y contiene la información del encabezado (header), el nombre del tema, una breve descripción del mismo, el nombre del autor o desarrollador, el número de la versión, la licencia bajo la cual figura y un enlace a la misma (License URI). Asimismo, la plantilla style.css actúa como hoja de estilo principal de la página, permitiendo la integración del código CSS del tema.
  • index.php: este es el segundo elemento obligatorio en un tema de WordPress y actúa, por regla general, como sumario de artículos, pudiendo ser utilizado como página principal. En la jerarquía de las plantillas de WordPress, index.php es considerado el último archivo Fallback: si para la emisión del contenido no se creó ninguna plantilla específica, el software recurre entonces al index.php. Su construcción se guía, básicamente, por la cantidad de código residente en otras plantillas. En un tema de WordPress sencillo, el index.php suele contener la mayor parte del código fuente, incluido el directorio HTML de raíz, el encabezado (header), el pie de página (footer), las barras laterales (sidebar) y el menú de navegación, pero en temas más complejos estos elementos suelen definirse en plantillas independientes como el header.php, el footer.php o el sidebar.php, de manera que el index.php acaba cumpliendo exclusivamente la función de estructura básica. Esta plantilla muestra habitualmente una cierta cantidad de artículos, previamente definida en el panel de administración, en forma de sumario abreviado.
     
  • header.php: cuando se usa, este archivo suele contener información fundamental de una página como el doctype, el tag de HTML de apertura, así como el encabezado con los meta tags, enlaces a hojas de estilo y scripts. Además, aquí suele abrirse la etiqueta body, de forma que permite albergar el encabezado visible del tema y la navegación en el header.php.
  • footer.php: esta plantilla es la contrapartida al header.php y alberga la parte visible del pie de página. Aquí suele cerrarse, en general, tanto la etiqueta body como la de HTML.
     
  • sidebar.php: en este archivo se guardan los contenidos de las barras laterales, bien introduciendo el código manualmente o recurriendo a widgets especiales, accesibles desde la función dynamic sidebar (barra lateral dinámica). Este procedimiento tiene la ventaja de que el contenido de la barra lateral se puede gestionar después desde el panel de administración.
     
  • content.php: las entradas en la vista general o en el sumario del blog suelen contener un título enlazado al artículo y una imagen de vista previa, así como un pequeño resumen del contenido de la entrada y el enlace “Leer más”. Esta es la información que permite integrar este archivo, además de metadatos como la fecha del artículo, el autor, las categorías o las etiquetas.
     
  • single.php: este archivo es necesario para poder ver el artículo entero cuando se hace clic en el enlace.
     
  • home.php: esta plantilla permite crear una página principal por separado. Si no se usa, la página muestra, basándose en index.php, una vista general de las entradas más actuales como página principal.
     
  • page.php: los temas de WordPress están optimizados para mostrar las entradas de un blog en sucesión cronológica. Junto a estos contenidos dinámicos, muchos administradores ponen a disposición de sus lectores otros apartados como “Sobre mí” o el Aviso legal como páginas estáticas. Esto es posible gracias a este fichero, que permite crear páginas individuales a partir del diseño de otros ficheros como index.php o single.php.
     
  • 404.php: este archivo sirve para crear una página de error 404 para el blog o la web. En este caso lo mejor es integrar un cuadro de búsqueda para facilitar a los usuarios explorar la página en busca de la información deseada.
  • search.php: este archivo permite mostrar los resultados de la búsqueda.
     
  • archive.php, category.php, tag.php, author.php, date.php: junto a la función de búsqueda, WordPress también ofrece una serie de plantillas por medio de las cuales se pueden ordenar las entradas según criterios específicos. Para ello, se pueden usar como filtros las categorías, las etiquetas, los autores o la fecha de publicación. Estas plantillas sirven para poder mostrar los contenidos. Si no figuran estos ficheros, WordPress utiliza la información que encuentra en el archive.php.
     
  • comments.php: esta es la plantilla necesaria si se quiere ofrecer a los usuarios la posibilidad de comentar los artículos, ya que contiene el formulario para ello. 
     
  • attachment.php: este archivo permite mostrar a los lectores contenido adicional como gráficos y archivos PDF o multimedia en una ventana independiente.
     
  • image.php: este es una versión especial del fichero anterior y con él se puede definir una plantilla independiente para la visualización de gráficos. Si no se define este archivo, el software utiliza el attachment.php.
     
  • rtl.css: si el tema de WordPress que quieres implementar soporta idiomas que se escriben de derecha a izquierda, como el árabe o el hebreo, se necesita este archivo.

Para enlazar las diferentes piezas entre sí y poder cargar los contenidos desde la base de datos en el servidor, dentro de las plantillas se utilizan unas funciones denominadas, en la terminología del CMS, template tags o etiquetas de plantilla.

Etiquetas de plantilla (template tags)

Como template tags se entienden las funciones,  incluidas en las plantillas, necesarias para solicitar contenidos de la base de datos. Mientras que en las páginas estáticas suelen estar incluidas en el código fuente del documento HTML, las plantillas de WordPress contienen únicamente indicaciones respecto a los contenidos que han de ser integrados. Las etiquetas de plantilla permiten al software del CMS generar cada página de forma dinámica en el mismo momento en que se entrega. A la luz del siguiente ejemplo se muestra la ventaja de tal concepto.

Generalmente, un proyecto online dispone de un nombre o título, visible en cada una de sus subpáginas. Para poder integrarlo en una plantilla, se usa la siguiente etiqueta de plantilla:

bloginfo('name')

Esta etiqueta es muy útil, por ejemplo, para publicar el título de la página de forma automática.

<title><?php bloginfo('name'); ?> |<?php wp_title(); ?></title>

Mientras la función bloginfo('name') sirve para introducir el nombre de la web, wp_title() identifica al nombre de la subpágina actual. Los datos que han de revelar estas etiquetas (nombre de la web, nombre de la subpágina) a la hora de abrirse la página se obtienen de la base de datos en el servidor. Según este esquema y, a partir de estos datos, el software del CMS genera entonces este título:

Nombre del blog | Título de la subpágina

Por el contrario, en una página web estática, los títulos de las páginas se han de introducir tal cual en cada página HTML del proyecto:

<title>Nombre del blog | Título de la subpágina</title>

Ahora bien, ¿qué pasa si se quiere cambiar al nombre del blog? En el caso de una página estática, se han de realizar los cambios manualmente en el documento de HTML de cada subpágina, mientras que en el de una página dinámica llevar a cabo actualizaciones es mucho más sencillo, ya que los cambios que afectan a todas las páginas de la web se pueden realizar en un único lugar en la base de datos, donde residen, y los cuales se pueden cargar en la página oportuna mediante los template tags.

Los títulos, los contenidos de las entradas o los metadatos se pueden guardar en plantillas siguiendo el mismo esquema:

the_title() 
the_content()
the_author() 
the_time()
the_category() 
the_tags()

En el Codex de WordPress.org se encuentra un sumario con todos los template tags disponibles.

Etiquetas include (include tags)

Un tipo especial de etiquetas para las plantillas de WordPress son las denominadas etiquetas include, utilizadas dentro de un tema para poder cargar archivos como header.php, footer.php o sidebar.php. También en este caso se trata de funciones internas que se integran en plantillas fundamentales como index.php, single.php o page.php de la siguiente forma:

get_header()
get_footer()
get_sidebar()

También aquí es fácil entender cuál es la ventaja de este proceder: si los códigos para el encabezado, para el pie y para la barra lateral se cargan en plantillas previstas para ello, los cambios que se realicen en estas tres plantillas se aplicarán a todas las subpáginas de la web que obtengan estos contenidos mediante etiquetas include.

Template hooks (Plugin API)

En el caso de los denominados “ganchos” o template hooks, se trata de interfaces de unión entre el tema de WordPress y las funciones individuales o plugins del CMS que permiten a estos “engancharse” o incorporarse al resto del software. La mayor parte de estas interfaces ya están depositadas en el núcleo de WordPress y es con ellas que un desarrollador de temas o un usuario puede determinar una acción, antes, por ejemplo, de que comience una tarea o después de que una solicitud a la base de datos haya terminado. Así, se podría integrar información especial directamente en el encabezado, en el pie o en la barra lateral. Los desarrolladores pueden, también, integrar ganchos propios en sus temas.

Etiquetas condicionales (conditional tags)

Estas etiquetas consisten en indicaciones en PHP como if, else o while que permiten, en combinación con las funciones de WordPress, vincular la representación de determinados contenidos a unas condiciones, como podría ser, por ejemplo, un saludo de bienvenida para usuarios registrados:

if ( is_user_logged_in() ):
    echo 'Welcome, registered user!';
else:
    echo 'Welcome, visitor!';
endif;

The Loop

Este mecanismo incluido en el software de WordPress es el responsable de la visualización de los contenidos y consiste en diversas funciones de WordPress enlazadas entre sí mediante etiquetas condicionales. El siguiente ejemplo muestra la estructura básica de un loop de WordPress:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div class="entry">
        <?php the_excerpt(); ?>
    </div>
<?php endwhile; endif; ?>

El fragmento de código if (have_post()) en la primera línea indica a WordPress que compruebe si existen entradas en la base de datos y, en caso afirmativo, el fragmento de código while (have_posts()) : the_post() solicita al software que lleve a cabo las funciones en el loop que siguen a continuación, hasta que have_posts() ya no sea verdad, es decir, hasta que ya no haya más entradas.

De esta manera, el loop abarca todas las funciones hasta el statement de PHP endwhile en la última línea, que, en este ejemplo, serían la función the_title(), que permite la visualización del título del artículo (H2) y la función the_exerpt(), que ordena al software cargar un extracto de la entrada desde la base de datos. Para la representación de los contenidos se ha definido que el título del artículo tenga un formato h2 y la vista previa del artículo sea visualizada en el interior de una caja div con el nombre de clase CSS entry.

Un loop muy sencillo es aquel que muestra el título y la vista previa de las entradas en una lista en la página principal de un blog, comenzando por la entrada más actual. La cantidad de las publicaciones que se muestran, cada una debajo de la anterior, varía y se puede definir en el panel de administración. Sin embargo, lo más habitual son aquellos loops más complejos que, junto a metadatos como autor, fecha, categoría o etiquetas, también contienen un enlace a la página donde se muestra el artículo completo.

¿Le ha resultado útil este artículo?
Ir al menú principal