WordPress le permite ordenar su contenido en taxonomías. De forma predeterminada, viene con categorías y etiquetas. Si bien 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 ver las etiquetas utilizadas en su sitio en una nube de etiquetas o como una lista. En este artículo, le mostraremos cómo diseñar etiquetas en WordPress.
Mostrar todas las etiquetas con la cantidad de publicaciones en WordPress
Contents
Algunos sitios web populares muestran sus etiquetas más populares como temas en su página de archivo o en el área del pie de página. A continuación, le mostramos cómo ver todas las etiquetas de sus publicaciones, junto con la cantidad 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 como $ etiqueta) {$ cadena. = ‘term_id). ‘»>’. $ etiqueta-> nombre. ‘«. $ etiqueta-> contar. ‘«. » no»; } devuelve $ cadena; } add_shortcode (‘wpbtags’, ‘wpb_tags’); Este código simplemente muestra todas sus etiquetas con el recuento de publicaciones al lado. Sin embargo, para mostrarlo en su página de archivo o en un widget, debe usar este código corto:
[wpbtags]
El uso de este código solo mostrará los enlaces de las etiquetas y la cantidad de publicaciones junto a ellos. No lo hará bonito. Agreguemos algo de CSS para que se vea bonito. Copie y pegue este CSS en la hoja de estilo de su tema. .tagbox {color de fondo: #eee; borde: 1px sólido #ccc; margen: 0px 10px 10px 0px; altura de fila: 200%; relleno: 2px 0 2px 2px; } .taglink {relleno: 2px; } .tagbox a, .tagbox a: visitado, .tagbox a: active {text-decoration: none; } .tagcount {color de fondo: verde; El color blanco; posición: relativa; relleno: 2px; } No dude en modificar el CSS para satisfacer sus necesidades. Así es como se veía en nuestro sitio de demostración:
Estilo de etiquetas en la metainformación de la publicación
Algunos temas de WordPress muestran las etiquetas 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 los apliquen en absoluto o que usted pueda diseñarlos de manera diferente. Veamos cómo podemos diseñar los enlaces de etiquetas debajo de una publicación en WordPress. Primero debe conocer la clase CSS que usa su tema de WordPress para mostrar etiquetas. Para hacer esto, haga clic derecho en las etiquetas y seleccione Inspeccionar elemento en el menú del navegador. Esto dividirá la pantalla del navegador para mostrar el kit de herramientas del desarrollador debajo de la página web. En el kit de herramientas del desarrollador, puede ver la clase CSS que usa su tema de WordPress para mostrar 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 la hoja de estilo de nuestro tema hijo para anular el tema CSS predeterminado. .terms a, .terms a: visitado, .terms a: active {background: #eee; borde: 1px sólido #ccc; radio del borde: 5px; decoración de texto: ninguna; relleno: 3px; margen: 3px; text-transform: mayúsculas; } .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:
Es posible que note la diferencia entre las dos capturas de pantalla además de los cambios de CSS, también cambiamos las etiquetas para marcar y eliminar las comas entre las etiquetas. ¿Cómo hicimos esto? Hemos modificado the_tags (); etiqueta de plantilla en nuestro archivo single.php como este:
Si desea limitar el número total de etiquetas que se muestran a, digamos, 5 o algo más, consulte este artículo para saber cómo mostrar un número limitado de etiquetas después de la publicación. Esperamos que este artículo le haya ayudado a diseñar las etiquetas en WordPress. No dudes en experimentar con CSS hasta que obtengas el resultado que deseas. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para obtener más videos tutoriales de WordPress. También puede encontrarnos en Google+ y Twitter.
Originally posted 2021-02-24 21:46:29.
