WordPress, el popular gestor de co­n­te­ni­dos, se ca­ra­c­te­ri­za por la se­pa­ra­ción entre diseño, por un lado, y pro­gra­ma­ción, por otro. Los de­no­mi­na­dos temas permiten definir la vi­sua­li­za­ción de co­n­te­ni­dos en el frontend sin modificar el código. Bá­si­ca­me­n­te, lo que hace un tema de WordPress es preparar un código fuente que describe cómo se han de solicitar y componer los co­n­te­ni­dos al­ma­ce­na­dos en la base de datos del servidor para que, cuando sea so­li­ci­ta­da, se origine una página web dinámica y pueda ser entregada al navegador web. Con ellos, los ad­mi­ni­s­tra­do­res web pueden diseñar li­bre­me­n­te la página en su totalidad dentro de las po­si­bi­li­da­des que permite cada tema. La es­tru­c­tu­ra 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 lo­ca­li­za­ción, así como archivos Ja­va­S­cri­pt op­cio­na­les y gráficos. A co­n­ti­nua­ción, te mostramos cuáles son los co­m­po­ne­n­tes 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 co­n­te­ni­dos, así como elementos Ja­va­S­cri­pt y elementos CSS, un tema de WordPress está co­n­s­ti­tui­do por varios archivos de plantilla, también de­no­mi­na­dos, se­n­ci­lla­me­n­te, pla­n­ti­llas. Las pla­n­ti­llas 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 al­ma­ce­na­do en la base de datos del servidor de forma integrada. Si su vi­sua­li­za­ción está ligada a ciertas co­n­di­cio­nes, se usan entonces los de­no­mi­na­dos co­n­di­tio­nal tags o etiquetas co­n­di­cio­na­les. Los llamados “ganchos” o template hooks permiten, a su vez, integrar plugins en los temas. La edición de los co­n­te­ni­dos se gestiona mediante un mecanismo conocido en la te­r­mi­no­lo­gía de WordPress como Loop.

Pla­n­ti­llas (template files)

Los temas de WordPress, con todos sus elementos fu­n­da­me­n­ta­les, pueden co­n­si­de­rar­se una especie de plan ar­qui­te­c­tó­ni­co 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 co­n­s­tru­c­ción, se pueden se­le­c­cio­nar de forma in­de­pe­n­die­n­te en función de si el usuario quiere ver la página principal de su blog, un artículo o un co­me­n­ta­rio. Estas piezas básicas reciben el nombre de pla­n­ti­llas 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 exac­ta­me­n­te.

En principio, un tema de WordPress se considera válido cuando contiene las pla­n­ti­llas index.php y style.css, aunque, por regla general, un tema de WordPress suele contener un gran número de pla­n­ti­llas di­fe­re­n­tes capaces de re­pre­se­n­tar distintos tipos de contenido, lo que de­mue­s­tran la gran capacidad en cuanto a funciones de este popular software. La siguiente lista contiene las pla­n­ti­llas básicas que suelen en­co­n­trar­se en casi cada tema de WordPress:

  • style.css: este es uno de los dos elementos de presencia obli­ga­to­ria en cada tema de WordPress y contiene la in­fo­r­ma­ción del en­ca­be­za­do (header), el nombre del tema, una breve de­s­cri­p­ción del mismo, el nombre del autor o de­sa­rro­lla­dor, 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, pe­r­mi­tie­n­do la in­te­gra­ción del código CSS del tema.
  • index.php: este es el segundo elemento obli­ga­to­rio 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 pla­n­ti­llas de WordPress, index.php es co­n­si­de­ra­do el último archivo Fallback: si para la emisión del contenido no se creó ninguna plantilla es­pe­cí­fi­ca, el software recurre entonces al index.php. Su co­n­s­tru­c­ción se guía, bá­si­ca­me­n­te, por la cantidad de código residente en otras pla­n­ti­llas. En un tema de WordPress sencillo, el index.php suele contener la mayor parte del código fuente, incluido el di­re­c­to­rio HTML de raíz, el en­ca­be­za­do (header), el pie de página (footer), las barras laterales (sidebar) y el menú de na­ve­ga­ción, pero en temas más complejos estos elementos suelen definirse en pla­n­ti­llas in­de­pe­n­die­n­tes como el header.php, el footer.php o el sidebar.php, de manera que el index.php acaba cu­m­plie­n­do ex­clu­si­va­me­n­te la función de es­tru­c­tu­ra básica. Esta plantilla muestra ha­bi­tua­l­me­n­te una cierta cantidad de artículos, pre­via­me­n­te definida en el panel de ad­mi­ni­s­tra­ción, en forma de sumario abreviado.
     
  • header.php: cuando se usa, este archivo suele contener in­fo­r­ma­ción fu­n­da­me­n­tal de una página como el doctype, el tag de HTML de apertura, así como el en­ca­be­za­do 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 en­ca­be­za­do visible del tema y la na­ve­ga­ción en el header.php.
  • footer.php: esta plantilla es la co­n­tra­pa­r­ti­da 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 co­n­te­ni­dos de las barras laterales, bien in­tro­du­cie­n­do el código ma­nua­l­me­n­te o re­cu­rrie­n­do a widgets es­pe­cia­les, ac­ce­si­bles desde la función dynamic sidebar (barra lateral dinámica). Este pro­ce­di­mie­n­to tiene la ventaja de que el contenido de la barra lateral se puede gestionar después desde el panel de ad­mi­ni­s­tra­ció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 in­fo­r­ma­ción que permite integrar este archivo, además de metadatos como la fecha del artículo, el autor, las ca­te­go­rí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 op­ti­mi­za­dos para mostrar las entradas de un blog en sucesión cro­no­ló­gi­ca. Junto a estos co­n­te­ni­dos dinámicos, muchos ad­mi­ni­s­tra­do­res ponen a di­s­po­si­ció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 in­di­vi­dua­les 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 in­fo­r­ma­ción deseada.
  • search.php: este archivo permite mostrar los re­su­l­ta­dos 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 pla­n­ti­llas por medio de las cuales se pueden ordenar las entradas según criterios es­pe­cí­fi­cos. Para ello, se pueden usar como filtros las ca­te­go­rías, las etiquetas, los autores o la fecha de pu­bli­ca­ción. Estas pla­n­ti­llas sirven para poder mostrar los co­n­te­ni­dos. Si no figuran estos ficheros, WordPress utiliza la in­fo­r­ma­ción que encuentra en el archive.php.
     
  • comments.php: esta es la plantilla necesaria si se quiere ofrecer a los usuarios la po­si­bi­li­dad de comentar los artículos, ya que contiene el fo­r­mu­la­rio para ello. 
     
  • at­ta­ch­me­nt.php: este archivo permite mostrar a los lectores contenido adicional como gráficos y archivos PDF o mu­l­ti­me­dia en una ventana in­de­pe­n­die­n­te.
     
  • image.php: este es una versión especial del fichero anterior y con él se puede definir una plantilla in­de­pe­n­die­n­te para la vi­sua­li­za­ción de gráficos. Si no se define este archivo, el software utiliza el at­ta­ch­me­nt.php.
     
  • rtl.css: si el tema de WordPress que quieres im­ple­me­n­tar soporta idiomas que se escriben de derecha a izquierda, como el árabe o el hebreo, se necesita este archivo.

Para enlazar las di­fe­re­n­tes piezas entre sí y poder cargar los co­n­te­ni­dos desde la base de datos en el servidor, dentro de las pla­n­ti­llas se utilizan unas funciones de­no­mi­na­das, en la te­r­mi­no­lo­gía del CMS, template tags o etiquetas de plantilla.

Etiquetas de plantilla (template tags)

Como template tags se entienden las funciones,  incluidas en las pla­n­ti­llas, ne­ce­sa­rias para solicitar co­n­te­ni­dos 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 pla­n­ti­llas de WordPress contienen úni­ca­me­n­te in­di­ca­cio­nes respecto a los co­n­te­ni­dos que han de ser in­te­gra­dos. 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.

Ge­ne­ra­l­me­n­te, un proyecto online dispone de un nombre o título, visible en cada una de sus su­b­pá­gi­nas. Para poder in­te­grar­lo 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 au­to­má­ti­ca.

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

Mientras la función bloginfo('name') sirve para in­tro­du­cir el nombre de la web, wp_title() ide­n­ti­fi­ca 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 in­tro­du­cir 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 ma­nua­l­me­n­te en el documento de HTML de cada subpágina, mientras que en el de una página dinámica llevar a cabo ac­tua­li­za­cio­nes 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 co­n­te­ni­dos de las entradas o los metadatos se pueden guardar en pla­n­ti­llas 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 di­s­po­ni­bles.

Etiquetas include (include tags)

Un tipo especial de etiquetas para las pla­n­ti­llas de WordPress son las de­no­mi­na­das etiquetas include, uti­li­za­das 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 pla­n­ti­llas fu­n­da­me­n­ta­les 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 en­ca­be­za­do, para el pie y para la barra lateral se cargan en pla­n­ti­llas previstas para ello, los cambios que se realicen en estas tres pla­n­ti­llas se aplicarán a todas las su­b­pá­gi­nas de la web que obtengan estos co­n­te­ni­dos mediante etiquetas include.

Template hooks (Plugin API)

En el caso de los de­no­mi­na­dos “ganchos” o template hooks, se trata de in­te­r­fa­ces de unión entre el tema de WordPress y las funciones in­di­vi­dua­les o plugins del CMS que permiten a estos “en­ga­n­char­se” o in­co­r­po­rar­se al resto del software. La mayor parte de estas in­te­r­fa­ces ya están de­po­si­ta­das en el núcleo de WordPress y es con ellas que un de­sa­rro­lla­dor de temas o un usuario puede de­te­r­mi­nar 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 in­fo­r­ma­ción especial di­re­c­ta­me­n­te en el en­ca­be­za­do, en el pie o en la barra lateral. Los de­sa­rro­lla­do­res pueden, también, integrar ganchos propios en sus temas.

Etiquetas co­n­di­cio­na­les (co­n­di­tio­nal tags)

Estas etiquetas consisten en in­di­ca­cio­nes en PHP como if, else o while que permiten, en co­m­bi­na­ción con las funciones de WordPress, vincular la re­pre­se­n­ta­ción de de­te­r­mi­na­dos co­n­te­ni­dos a unas co­n­di­cio­nes, como podría ser, por ejemplo, un saludo de bie­n­ve­ni­da para usuarios re­gi­s­tra­dos:

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 re­s­po­n­sa­ble de la vi­sua­li­za­ción de los co­n­te­ni­dos y consiste en diversas funciones de WordPress enlazadas entre sí mediante etiquetas co­n­di­cio­na­les. El siguiente ejemplo muestra la es­tru­c­tu­ra 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 afi­r­ma­ti­vo, 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 co­n­ti­nua­ció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 vi­sua­li­za­ció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 re­pre­se­n­ta­ción de los co­n­te­ni­dos se ha definido que el título del artículo tenga un formato h2 y la vista previa del artículo sea vi­sua­li­za­da 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, co­me­n­za­n­do por la entrada más actual. La cantidad de las pu­bli­ca­cio­nes que se muestran, cada una debajo de la anterior, varía y se puede definir en el panel de ad­mi­ni­s­tra­ció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.

Ir al menú principal