Cómo dar estilo a las etiquetas en WordPress

WordPress le permite ordenar su contenido en taxonom√≠as. Por defecto viene con categor√≠as y etiquetas. Si bien las categor√≠as se pueden usar para ordenar su contenido en diferentes secciones, las etiquetas se pueden usar para ordenar el contenido en temas m√°s espec√≠ficos. Puede mostrar 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.

Mostrar todas las etiquetas con recuentos de publicaciones en WordPress

Algunos sitios web populares muestran sus etiquetas más populares como temas en su página de archivos o en el área de pie de página. A continuación, le mostramos cómo puede mostrar todas sus 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 complemento específico del sitio.

function wpb_tags() { 
$wpbtags =  get_tags();
foreach ($wpbtags as $tag) { 
$string .= 'term_id) .'">'. $tag->name . ''. $tag->count .'' . "n"   ;
} 
return $string;
} 
add_shortcode('wpbtags' , 'wpb_tags' );

Este código simplemente muestra todas sus etiquetas con su recuento de publicaciones junto a ellas. Sin embargo, para mostrarlo en su página de archivos o en un widget necesita usar este código corto:

[wpbtags]

El uso de este código solo mostrará enlaces de etiquetas y el recuento de publicaciones junto a ellos. No hará que se vea bonita. Agreguemos un poco de CSS para hacerlo bonito. 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;
}

Siéntase libre de modificar el CSS para satisfacer sus necesidades. Así es como se veía en nuestro sitio de demostración:

Mostrar etiquetas con recuento de publicaciones en WordPress

Etiquetas de estilo en la información meta posterior

Algunos temas de WordPress muestran muy bien las etiquetas debajo de la informaci√≥n de metadatos de la publicaci√≥n con fecha de publicaci√≥n, autor y otros metaenlaces. Sin embargo, es posible que algunos temas no los dise√Īen en absoluto, o puede que desee dise√Īarlos de manera diferente.

Veamos c√≥mo podemos dise√Īar enlaces de etiquetas debajo de una publicaci√≥n en WordPress.

Primero debe averiguar la clase CSS utilizada por su tema de WordPress para mostrar etiquetas. Para hacer eso, haga clic 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 etiquetas.

Encontrar la clase css utilizada por el tema para las etiquetas

En la captura de pantalla anterior, puede ver que el tema usa términos para la clase CSS. Ahora usaremos esta clase en nuestro tema o en la hoja de estilo del tema hijo para anular el tema CSS 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 CSS para que coincida con los colores de su tema. Así es como se veían las etiquetas en nuestro sitio de demostración:

Estilo CSS cambiado para las etiquetas debajo de las publicaciones en WordPress

Puede notar la diferencia entre las dos capturas de pantalla adem√°s de los cambios de CSS, tambi√©n cambiamos las etiquetas a Etiquetado y eliminamos las comas entre las etiquetas. ¬ŅC√≥mo hicimos esto?

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


Si desea limitar el n√ļmero total de etiquetas que se muestran para decir 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 te haya ayudado a dise√Īar etiquetas en WordPress. Si√©ntase libre de experimentar con el CSS hasta obtener el resultado deseado.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para obtener más tutoriales en video de WordPress. También nos puede encontrar en Google+ y Twitter.