Cómo diseñar etiquetas en WordPress

WordPress le permite ordenar su contenido en taxonomías. Por defecto viene con categorías y etiquetas. Mientras que las categorías se pueden usar para clasificar su contenido en diferentes secciones, las etiquetas se pueden usar para clasificar 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.

Visualización de todas las etiquetas con recuentos de mensajes en WordPress

Algunos sitios web populares muestran sus etiquetas más populares como temas en su página de archivos o en el área del pie de página. Aquí es cómo puede mostrar todas sus etiquetas de publicación, 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.

 función 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 cuenta de publicaciones junto a ellas. Sin embargo, para mostrarlo en su página de archivos o en un widget, necesita usar este código abreviado:

[wpbtags]

Usar solo este código solo mostrará enlaces de etiquetas y contará las publicaciones junto a ellos. No hará que se vea bonita. Permite agregar algo de CSS para hacerlo bonito. Copia y pega este CSS en la hoja de estilos de tu tema.

 .tagbox background-color: #eee; borde: 1px sólido #ccc; margen: 0px 10px 10px 0px; línea de altura: 200%; relleno: 2px 0 2px 2px;  .taglink relleno: 2px;  .tagbox a, .tagbox a: visitó, .tagbox a: active text-decoration: none;  .tagcount color de fondo: verde; color blanco; posición: relativa; relleno: 2px;  

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

Etiquetas de estilo en la información Meta Meta

Algunos temas de WordPress muestran etiquetas debajo de la información de metadatos con la fecha de publicación, el autor y otros meta enlaces. Sin embargo, es posible que algunos temas no tengan un estilo en absoluto, o puede que desee un estilo diferente..

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

Primero debe encontrar la clase CSS que utiliza su tema de WordPress para mostrar etiquetas. Para hacerlo, haga clic derecho en las etiquetas y seleccione el elemento inspeccionar en el menú del navegador.

Esto dividirá la pantalla del navegador para mostrar la caja de herramientas para desarrolladores 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.

En la captura de pantalla de arriba puedes ver que el tema está usando condiciones para la clase CSS. Ahora usaremos esta clase en nuestra hoja de estilo de tema o tema infantil para anular el tema CSS predeterminado.

 .los términos a, .terms a: visitó, .terms a: active background: #eee; borde: 1px sólido #ccc; radio del borde: 5px; texto-decoración: ninguno; relleno: 3px; margen: 3px; transformación de texto: mayúsculas;  .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:

Puede notar la diferencia entre las dos capturas de pantalla que no sean los cambios de CSS, también cambiamos las etiquetas a las etiquetas 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 la cantidad total de etiquetas mostradas a digamos 5 o algo más, consulte este artículo sobre cómo mostrar la cantidad limitada de etiquetas después de la publicación..

Esperamos que este artículo te haya ayudado a diseñar etiquetas en WordPress. Siéntete libre de experimentar con el CSS hasta que obtengas el resultado deseado..

Si le ha gustado este artículo, suscríbase a nuestro canal de YouTube para obtener más tutoriales en video de WordPress. También puedes encontrarnos en Google+ y Twitter..