¿Qué es la etiqueta de plantilla en WordPress?

Una función potente que suelen utilizar los desarrolladores y diseñadores de temas al crear o personalizar un sitio web de WordPress es la etiqueta de plantilla. Comprender qué es una etiqueta de plantilla y cómo funciona puede mejorar significativamente su capacidad para estructurar contenido dinámico en su página web.

Ya sea que sea un principiante o un desarrollador experimentado, esta guía explica todo lo que necesita saber sobre las etiquetas de plantilla en WordPress en términos simples.

Introducción a las etiquetas de plantilla

En WordPress, una etiqueta de plantilla es una función PHP que se utiliza para recuperar y mostrar datos dinámicamente. En lugar de codificar valores como el título del sitio o el nombre del autor, se utiliza una etiqueta para extraerlos de la base de datos y mostrarlos donde sea necesario.

Las etiquetas de plantilla se utilizan en archivos de tema de WordPress como header.php, footer.php, index.php y single.php. Estas funciones ayudan a definir la estructura de tu sitio web sin tener que duplicar el código.

Etiqueta de plantilla vs. HTML<template> Elemento

Es importante no confundir las etiquetas de plantilla de WordPress con el HTML<template> elemento. Si bien ambos son útiles, cumplen propósitos muy diferentes.

• El HTML contiene fragmentos de código que no se procesan al cargar la página. Este contenido se puede clonar e insertar posteriormente mediante JavaScript.

• Una etiqueta de plantilla en WordPress es una función PHP que genera contenido o información específica en una página, como el título o la fecha de la publicación.

Aunque están estrechamente relacionados en concepto, uno se utiliza principalmente para la representación frontend basada en JavaScript, y el otro es para el manejo de plantillas PHP backend.

Anatomía de una etiqueta de plantilla

A continuación se muestra un ejemplo sencillo de una etiqueta de plantilla:

<?php the_title(); ?>

Este código muestra el título de una entrada de WordPress. Utiliza una función predefinida de WordPress .

La mayoría de las etiquetas de plantilla siguen un formato similar:

• Una función PHP
• Puede tomar parámetros (opcional)
• Puede hacer eco de la salida directamente o devolver un valor

Eco vs. Retorno

Algunas etiquetas reproducen su contenido directamente, mientras que otras devuelven un valor que puedes asignar a una variable. Consulta siempre la documentación de WordPress para comprobar el comportamiento esperado.

Etiquetas de plantilla de uso común

WordPress cuenta con varias etiquetas de plantilla integradas que facilitan la visualización de contenido dinámico. Estas etiquetas están agrupadas por funcionalidad y se usan ampliamente en los archivos de tema.

Etiquetas estructurales

Las etiquetas de plantilla estructurales incluyen automáticamente varias partes del diseño del tema. Te ayudan a mantener la coherencia entre varias páginas sin tener que reescribir el código.

Estas etiquetas incluyen otros archivos de plantilla como header.php, footer.php y sidebar.php.

Explorar más: Etiquetas de encabezado: ¿Qué son y cómo usarlas?

Etiquetas de contenido

Las etiquetas de plantilla de contenido son esenciales para mostrar datos dinámicos de publicaciones en tu página web. Muestran elementos clave del contenido, como títulos, cuerpos y extractos.

Etiquetas de metadatos

Las etiquetas de metadatos te permiten obtener información adicional relacionada con la publicación, como el nombre del autor, la fecha de publicación o las categorías. Estas enriquecen tu contenido con el contexto adecuado.

Estas etiquetas extraen metadatos sobre la publicación o el usuario que la escribió.

Etiquetas de información del sitio

Las etiquetas de información del sitio recuperan la configuración y la información definidas en el panel de WordPress. Esto puede incluir el nombre, la descripción y la URL base del sitio.

Estas etiquetas extraen datos de la configuración de su sitio.

Leer más: ¿Qué son las metaetiquetas?

Etiquetas de plantilla dentro del bucle

El bucle de WordPress es un bloque de código PHP que procesa y muestra las entradas. La mayoría de las etiquetas de plantilla relacionadas con el contenido funcionan mejor cuando se colocan dentro de este bucle.

Dentro del bucle, etiquetas como the_title() o the_content() funcionan según la publicación actual en contexto.

Cómo crear una etiqueta de plantilla personalizada

A veces, las etiquetas de plantilla predeterminadas no cubren todas tus necesidades. Ahí es donde entran en juego las etiquetas de plantilla personalizadas.

Para crear uno, escribe una función PHP personalizada dentro del archivo functions.php de tu tema:

función mytheme_display_random_number() {
echo rand(1, 100);
}

Luego puedes llamar a esta función en tu plantilla de tema de la siguiente manera:

<?php mytheme_display_random_number(); ?>

Mejores prácticas

• Siempre anteponga el nombre de sus funciones para evitar conflictos de nombres.
• Desinfecte y valide los datos antes de su salida.
• Utilice funciones proporcionadas por WordPress como esc_html() para garantizar una salida segura.

Cuándo y dónde utilizar etiquetas de plantilla

Saber cuándo y dónde usar una etiqueta de plantilla ayuda a garantizar el correcto funcionamiento de tu tema de WordPress. Las etiquetas de plantilla se ubican principalmente en archivos de tema como single.php, archive.php, page.php o incluso index.php, según el tipo de contenido que se muestre.

Por ejemplo:

• Dentro del bucle, llame a the_title() para mostrar el título de cada publicación.
• En page.php o single.php Inserte una barra lateral consistente usando get_sidebar() .
• Para mostrar el lema de su sitio en header.php , utilice bloginfo('description') .

Comprender la estructura de la plantilla ayuda a determinar la ubicación adecuada, garantizando que su página web cargue contenido dinámico de manera eficiente.

Lectura adicional: Cómo corregir etiquetas de título duplicadas en WordPress para mejorar el SEO

Diferencia entre etiquetas de plantilla y archivos de plantilla

Los principiantes a menudo confunden las etiquetas de plantilla con los archivos de plantilla, que cumplen diferentes propósitos en el desarrollo de temas de WordPress.

• Los archivos de plantilla son archivos PHP completos, como home.php, single.php o 404.php, que definen la estructura o el diseño general de una página web.

• Una etiqueta de plantilla es una función escrita dentro de esos archivos para mostrar datos específicos, como contenido de publicaciones, metadatos o información del sitio.

Puede pensar en los archivos de plantilla como contenedores y en las etiquetas de plantilla como elementos individuales que conforman el contenido dentro de ese contenedor.

Uso de etiquetas condicionales con etiquetas de plantilla

Puedes combinar etiquetas de plantilla con etiquetas condicionales de WordPress para controlar cuándo aparece el contenido en una página. Esto permite que tu sitio se comporte dinámicamente según el contexto.

Ejemplo:

php

if ( is_single() ) {
el_título();
el_contenido();
}

Este código garantiza que el título y el contenido de la publicación se muestren solo en las vistas individuales. El uso condicional de etiquetas de plantilla permite adaptar la estructura de la página web y la experiencia del usuario sin necesidad de codificación.

Consejos de rendimiento y seguridad

Las etiquetas de plantilla pueden afectar el rendimiento y la seguridad si no se utilizan correctamente.

• Salida de escape : utilice siempre funciones como esc_url() y esc_html() al imprimir datos.
• Datos de caché : almacene consultas repetidas mediante transitorios para mejorar el rendimiento.
• Evite las llamadas directas a la base de datos : utilice las funciones de la API de WordPress para obtener datos.

Lea también: ¿Cómo pueden las etiquetas de terceros afectar el rendimiento?

Etiquetas de plantilla vs. códigos cortos

Tanto las etiquetas de plantilla como los códigos cortos se utilizan para insertar contenido dinámico, pero difieren en su uso y propósito.

• Las etiquetas de plantilla se utilizan en los archivos PHP del tema para insertar y controlar directamente la salida HTML dinámica.
• Los códigos cortos se utilizan dentro del contenido de publicaciones o páginas a través del editor de WordPress o la función do_shortcode().

Por ejemplo, use the_author() (una etiqueta de plantilla) en single.php para mostrar el nombre del autor, mientras que gallery (un código corto) se puede agregar dentro del cuerpo de una publicación.

Los códigos cortos están más orientados al usuario, mientras que las etiquetas de plantilla operan detrás de escena en el código del tema.

Explorar más: Cómo configurar códigos cortos de Elementor para usar plantillas fácilmente

Uso avanzado: pasar parámetros a etiquetas de plantilla

Algunas etiquetas de plantilla aceptan parámetros para personalizar la visualización de los datos. Esta flexibilidad permite adaptar la presentación del contenido sin repetir código.

Ejemplo con wp_nav_menu():

php

wp_nav_menu(
array( 'ubicación_del_tema' => 'principal',
'clase_del_menú' => 'menú_nav',
'contenedor' => 'nav',
));
?>

Aquí se pasa una matriz de parámetros para definir la apariencia del menú y la estructura HTML. De igual forma, etiquetas como get_the_excerpt($post_id) permiten obtener el extracto de una publicación específica, lo que ofrece mayor control sobre cómo se recupera y muestra la información.

Consideraciones de SEO y accesibilidad

Al utilizar etiquetas de plantilla, siga las mejores prácticas de SEO y accesibilidad :

• Utilice etiquetas HTML semánticas (<article> ,<section> ) junto con etiquetas de plantilla.
• Agregue atributos alt a las etiquetas de imagen usando the_post_thumbnail().
• Asegúrese de que los encabezados utilicen la estructura correcta (<h1> ,<h2> ).

Ejemplo:

<img src=”<?php echo get_the_post_thumbnail_url(); ?> ” alt=”<?php the_title(); ?> ”>

Etiquetas de plantilla de depuración

Si una etiqueta de plantilla no funciona:

• Comprueba si estás dentro del Loop.
• Verifique la existencia de la función utilizando function_exists().
• Utilice WP_DEBUG y registros de errores para rastrear problemas.

Ejemplo:

si ( función_existe('el_título') ) {
el_título();
}

Compatibilidad y soporte del navegador

Las etiquetas de plantilla forman parte del núcleo de PHP y WordPress, por lo que la compatibilidad con navegadores no es un problema directo. Sin embargo, al usar JavaScript con HTML...<template> elemento:

• La mayoría de los navegadores modernos (Chrome, Firefox, Safari, Edge) lo admiten.
• Las versiones anteriores de Internet Explorer no lo hacen.
• Utilice un relleno de polietileno para agregar soporte si es necesario.

Leer más: Guía esencial sobre cómo actualizar la versión PHP de WordPress de forma segura

HTML<template> Elemento y JavaScript

de JavaScript .

Ejemplo:

const template = document.querySelector('#card-template');
const clone = template.content.cloneNode(true);
clone.querySelector('img').src = 'image.jpg';
clone.querySelector('.description').textContent = 'Descripción de la tarjeta';
document.body.appendChild(clone);

Esto le permite reutilizar estructuras HTML de forma dinámica, de forma similar en concepto a las etiquetas de plantilla pero implementadas con JavaScript.

Errores comunes que se deben evitar

A continuación se muestran algunos errores que se deben tener en cuenta al utilizar etiquetas de plantilla:

• Uso del contexto incorrecto : etiquetas como the_content() deben usarse dentro del bucle; de ​​lo contrario, no funcionarán como se espera.

• Olvidar escapar la salida : para evitar problemas de seguridad, siempre desinfecte la salida con esc_html(), esc_url() o funciones similares.

• No verificar la compatibilidad del navegador : si usa el

• Codificación rígida en lugar de etiquetas : evite valores estáticos cuando una etiqueta de plantilla se puede extraer dinámicamente de la base de datos.

Seguir las mejores prácticas garantiza que su sitio siga siendo seguro, tenga buen rendimiento y sea fácil de mantener.

Resumen

Las etiquetas de plantilla en WordPress ofrecen una forma eficaz de mostrar contenido dinámico, mantener un código limpio y mejorar la flexibilidad del sitio. Ya sea que muestres títulos de entradas, nombres de autores o datos personalizados, las etiquetas de plantilla agilizan el desarrollo de tu tema.

Usarlas correctamente garantiza que tus páginas web estén bien estructuradas, sean accesibles y optimizadas para SEO. Crear etiquetas de plantilla personalizadas también permite una personalización avanzada, lo que te ayuda a controlar exactamente qué se muestra y cómo.

Preguntas frecuentes