¿Qué es la etiqueta de plantilla en WordPress?

Una característica poderosa a menudo utilizada por desarrolladores y diseñadores de temas al construir 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 usted sea un desarrollador 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 utilizada para recuperar y mostrar datos dinámicamente. En lugar de valores de codificación dura como el título de su sitio o el nombre del autor, usa una etiqueta para extraerlos de la base de datos y mostrarlos donde sea necesario.

Las etiquetas de plantilla se usan dentro de los archivos de temas de WordPress como Header.php, Footer.php, index.php y single.php. Estas funciones ayudan a definir la estructura de su sitio sin duplicar el código varias veces.

Etiqueta de plantilla vs. HTML<template> Elemento

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

• El HTML contiene fragmentos de código no renderizados cuando se carga la página. Este contenido se puede clonar e insertar más tarde usando 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á estrechamente relacionado en el concepto, uno se usa principalmente para la representación frontend basada en JavaScript, y el otro es para el manejo de plantillas PHP de backend.

Anatomía de una etiqueta de plantilla

Aquí hay un ejemplo simple de una etiqueta de plantilla:

<?php the_title(); ?>

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

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

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

Echo vs. regreso

Algunas etiquetas hacen eco de su contenido directamente, mientras que otras devuelven un valor que puede asignar a una variable. Siempre consulte la documentación de WordPress para verificar el comportamiento esperado.

Etiquetas de plantilla de uso común

WordPress tiene varias etiquetas de plantilla incorporadas que hacen que sea más fácil mostrar contenido dinámico. Estas etiquetas se agrupan por funcionalidad y se usan ampliamente en los archivos de temas.

Etiquetas estructurales

Las etiquetas de plantilla estructural incluyen automáticamente varias partes del diseño de su tema. Le ayudan a mantener la consistencia en varias páginas sin reescribir el código.

Estas etiquetas incluyen otros archivos de plantilla como Header.php, Footer.php y Sidebar.php.

Explore 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 de publicación dinámica en su página web. Emiten elementos de contenido clave como títulos, cuerpos y extractos.

Etiquetas de metadatos

Las etiquetas de metadatos le permiten extraer información adicional relacionada con la publicación, como el nombre del autor, la fecha de publicación o las categorías. Estos enriquecen su 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

Etiquetas de información del sitio Recuperar la configuración e información definidas en su tablero de WordPress. Esto puede incluir el nombre, la descripción y la URL base de su 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 publicaciones. 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 en función de la publicación actual en contexto.

Cómo crear una etiqueta de plantilla personalizada

A veces, las etiquetas de plantilla predeterminadas no cubren todas sus necesidades. Ahí es donde entran las etiquetas de plantilla personalizada.

Para crear uno, escribe una función PHP personalizada dentro de las funciones de su tema.php File:

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

Luego puede llamar a esta función en su plantilla de tema así:

<?php mytheme_display_random_number(); ?>

Mejores prácticas

• Siempre prefije sus nombres de funciones para evitar nombrar colisiones.
• Desinfectar y validar los datos antes de la salida.
• Use funciones proporcionadas por WordPress como Esc_html () para garantizar una salida segura.

Cuándo y dónde usar etiquetas de plantilla

Saber cuándo y dónde usar una etiqueta de plantilla ayuda a garantizar que su tema de WordPress funcione correctamente. Las etiquetas de plantilla se colocan principalmente dentro de archivos de tema como single.php, archive.php, page.php, o incluso index.php, dependiendo del tipo de contenido que se representa.

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 , use BlogInfo ('Descripción') .

La estructura de comprensión de la plantilla ayuda a determinar la ubicación adecuada, asegurando que su página web cargue el 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 archivos de plantilla, que tienen 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 el diseño o estructura 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 post, metadatos o información del sitio.

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

Uso de etiquetas condicionales con etiquetas de plantilla

Puede combinar etiquetas de plantilla con etiquetas condicionales de WordPress para controlar cuando el contenido aparece en una página. Esto permite que su sitio se comporte dinámicamente en función del contexto.

Ejemplo:

php

if (is_single ()) {
the_title ();
the_content ();
}

Este código asegura que el título y el contenido de la publicación se muestren solo en vistas de publicación única. El uso de etiquetas de plantilla condicionalmente lo ayuda a adaptar la estructura de la página web y la experiencia del usuario sin codificación difícil.

Consejos de rendimiento y seguridad

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

• Salida de escape : use siempre funciones como esc_url () y esc_html () al imprimir datos.
• Datos de caché : almacene consultas repetidas utilizando transitorios para mejorar el rendimiento.
• Evite las llamadas DB directas : use 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 versus códigos cortos

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

• Las etiquetas de plantilla se utilizan en archivos PHP del tema para insertar y controlar la salida HTML dinámica directamente.
• Los códigos cortos se usan dentro de la publicación o el contenido de la página 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 la galería (un código corto) se puede agregar dentro de un cuerpo post.

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

Explore aún más: cómo configurar los códigos cortos de Elementor para un uso fácil de plantillas

Uso avanzado: pasar parámetros a etiquetas de plantilla

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

Ejemplo con wp_nav_menu ():

php

wp_nav_menu (
array ('thema_location' => 'primario',
'menú_class' => 'Nav-Menu',
'Container' => 'Nav',
));
?>

Aquí, se pasa una variedad de parámetros para definir la apariencia del menú y la estructura HTML. Del mismo modo, etiquetas como get_the_excerpt ($ post_id) le permiten obtener el extracto para una publicación específica, ofreciendo más control sobre cómo se recupera y se muestra la información.

Consideraciones de SEO y accesibilidad

Cuando use etiquetas de plantilla, siga las mejores prácticas para SEO y accesibilidad :

• Use etiquetas semánticas HTML (<article> ,<section> ) junto con etiquetas de plantilla.
• Agregue los atributos ALT a las etiquetas de imagen usando The_Post_Thumbnail ().
• Asegúrese de que los encabezados usen 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:

• Compruebe si está dentro del bucle.
• Verifique la existencia de la función usando function_exists ().
• Use WP_Debug y registros de errores para rastrear problemas.

Ejemplo:

if (function_exists ('the_title')) {
the_title ();
}

Soporte y compatibilidad del navegador

Las etiquetas de plantilla son parte de PHP y WordPress Core, por lo que el soporte del navegador no es una preocupación directa. Sin embargo, al usar JavaScript con el HTML<template> elemento:

• La mayoría de los navegadores modernos (Chrome, Firefox, Safari, Edge) lo admiten.
• Las versiones más antiguas de Internet Explorer no.
• Use un polyfill para agregar soporte si es necesario.

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

Html<template> Elemento y JavaScript

Aunque no es directamente una parte de las etiquetas de plantilla de WordPress, comprender el de JavaScript .

Ejemplo:

consttemate = document.Queryselector ('#tarjeta-platemplato');
const clone = Template.content.clonenode (true);
clone.queryselector ('img'). src = 'image.jpg';
Clone.Queryselector ('. Descripción'). TextContent = 'Card Descripción';
document.body.appendChild (clon);

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

Errores comunes a evitar

Aquí hay algunos errores a tener en cuenta al usar etiquetas de plantilla:

• Usando el contexto incorrecto : las etiquetas como The_Content () deben usarse dentro del bucle; De lo contrario, no funcionarán como se esperaba.

• Olvidando escapar de 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 se usa el

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

La siguiente mejor práctica garantiza que su sitio permanezca seguro, funcionante y fácil de mantener.

Resumen

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

Usarlos garantiza correctamente que sus páginas web estén bien estructuradas, accesibles y amigables con SEO. La creación de etiquetas de plantilla personalizadas también permite la personalización avanzada, lo que le ayuda a controlar exactamente lo que se muestra y cómo.

Preguntas frecuentes