Cómo diseñar etiquetas en WordPress

WordPress le permite ordenar su contenido en taxonomías. De forma predeterminada, viene con categorías y etiquetas. Aunque las categorías se pueden usar para clasificar el contenido en diferentes secciones, las etiquetas se pueden usar para clasificar el contenido en temas más específicos. Puede ver las etiquetas utilizadas en su sitio en una nube de etiquetas o en un formato de lista. En este artículo, le mostraremos cómo diseñar etiquetas en WordPress.

Ver todas las etiquetas con recuento de publicaciones en WordPress

Algunos sitios web populares muestran las etiquetas más populares como temas en la página de archivos o en el área del pie de página. A continuación, le mostramos cómo ver todas las etiquetas de publicaciones, con el recuento de publicaciones y sin usar la nube de etiquetas.

Lo primero que debe hacer es copiar y pegar este código en el archivo functions.php de su tema o en el plugin específico del sitio.

function wpb_tags() { 
$wpbtags =  get_tags();
foreach ($wpbtags as $tag) { 
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "n"   ;
} 
return $string;
} 
add_shortcode('wpbtags' , 'wpb_tags' );

Este código simplemente muestra todas sus etiquetas con su número de publicación junto a ellas. Sin embargo, para mostrarlo en la página de archivos o en un widget, debe usar este código corto:

[wpbtags]

El uso de este código solo mostrará los enlaces a las etiquetas y el recuento de publicaciones junto a ellas. No lo hará parecer lindo. Agreguemos algo de CSS para hacerlo lindo. Copie y pegue este CSS en la hoja de estilo de su tema.

.tagbox { 
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;

}
.taglink  { 
padding:2px;
}

.tagbox a, .tagbox a:visited, .tagbox a:active { 
text-decoration:none;
}

.tagcount { 
background-color:green;
color:white;
position: relative;
padding:2px;
}

No dude en modificar el CSS para adaptarlo a sus necesidades. Así es como se veía en nuestro sitio de demostración:

Estilo de etiquetas en la información de la meta publicación

Algunos temas de WordPress muestran etiquetas muy bien debajo de la información de metadatos de la publicación con la fecha de publicación, el autor y otros metavínculos. Sin embargo, es posible que algunos temas no tengan ningún estilo o que desee aplicarles un estilo diferente.

Veamos cómo podemos diseñar los enlaces de etiquetas debajo de una publicación en WordPress.

Primero, debe averiguar la clase CSS utilizada por su tema de WordPress para mostrar las etiquetas. Para hacer esto, haga clic con el botón derecho en las etiquetas y seleccione Inspeccionar elemento en el menú del navegador.

Esto dividirá la pantalla del navegador para mostrar la caja de herramientas del desarrollador debajo de la página web. En la caja de herramientas del desarrollador, puede ver la clase CSS utilizada por su tema de WordPress para mostrar las etiquetas.

En la captura de pantalla anterior, puede ver qué está usando el tema terms para la clase CSS. Ahora usaremos esta clase en la hoja de estilo del tema o tema hijo para anular el CSS del tema predeterminado.

.terms a, .terms a:visited, .terms a:active { 
background:#eee;
border:1px solid #ccc;
border-radius:5px;
text-decoration:none;
padding:3px;
margin:3px;
text-transform:uppercase;
}

.terms a:hover { 
background:#a8281a;
color:#FFF;
}

Siéntase libre de modificar el CSS para que coincida con los colores de su tema. Así es como se veían las etiquetas en nuestro sitio de demostración:

Puede notar la diferencia entre las dos capturas de pantalla además de los cambios de CSS, también cambiamos las etiquetas en Etiquetas y eliminamos las comas entre las etiquetas. ¿Cómo lo hicimos?

Cambiamos the_tags (); etiqueta de plantilla en nuestro archivo single.php como este:

<?php the_tags('Tagged:', '' ,'' ); ?>

Si desea limitar el número total de etiquetas que se muestran a 5 o algo más, consulte este artículo sobre cómo mostrar un número limitado de etiquetas después de la publicación.

Esperamos que este artículo le haya ayudado a definir etiquetas en WordPress. Siéntase libre de experimentar con CSS hasta que obtenga el resultado deseado.