A lo largo de los años, WPBeginner ha recibido muchas preguntas sobre las etiquetas, una de ellas es si vale la pena el esfuerzo de estilizar las etiquetas de WordPress para que destaquen en una página.
Las etiquetas te ayudan a organizar tu contenido en temas. Son como hashtags para tus publicaciones de blog de WordPress y ayudan a los usuarios a descubrir más contenido. Pero, en nuestra experiencia, si no destacan visualmente, podrían pasar desapercibidas.
En este artículo, te mostraremos cómo estilizar fácilmente las etiquetas en WordPress para obtener más participación de los usuarios y visitas a la página en tu sitio web.
Cómo mostrar etiquetas en WordPress
WordPress viene con dos taxonomías principales llamadas categorías y etiquetas. Mientras que las categorías se utilizan para las áreas principales de tu contenido, las etiquetas te permiten organizar el contenido en temas más específicos.
Muchos temas populares de WordPress muestran las etiquetas en la parte superior o inferior de tus publicaciones de forma predeterminada.
Sin embargo, también puedes mostrar etiquetas en páginas de archivo, pie de página, barras laterales y casi en cualquier lugar que desees en WordPress.
Para insertar una nube de etiquetas en tus publicaciones, páginas y widgets de barra lateral, simplemente puedes agregar el bloque 'Nube de etiquetas'.
Una nube de etiquetas da a cada etiqueta un tamaño de fuente diferente según el número de publicaciones. También puedes elegir mostrar el número de publicaciones junto a cada etiqueta.
Esas son solo las opciones predeterminadas disponibles en WordPress, pero ¿qué pasa si quisieras personalizar tus etiquetas aún más? Te mostraremos cómo.
Echemos un vistazo a cómo estilizar fácilmente las etiquetas en WordPress.
Estilizando la Nube de Etiquetas Predeterminada en WordPress
Después de haber agregado el bloque de Nube de Etiquetas a una publicación o página, puedes personalizarlo agregando CSS personalizado.
El bloque de nube de etiquetas incluye automáticamente clases CSS generadas por WordPress que se pueden usar para estilizar.
Para agregar CSS personalizado a tu sitio de WordPress, simplemente ve a la página Apariencia » Personalizar y cambia a la pestaña CSS adicional.
Puedes comenzar agregando este código CSS personalizado como punto de partida.
.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 { font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 { font-size:30px!important; }
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Como puedes ver, puedes usar la clase .tag-link-position para ajustar el estilo según la posición de los enlaces. Las etiquetas con más publicaciones están más arriba en la posición, y las etiquetas con menos publicaciones están más abajo.
Si deseas que todas las etiquetas en tu bloque de nube de etiquetas tengan el mismo tamaño, puedes usar el siguiente CSS en su lugar:
.tag-cloud-link {
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Así es como se veía en nuestro sitio de prueba:
Estilizando las Etiquetas de Publicaciones en WordPress
Además de estilizar tus nubes de etiquetas, también es posible que desees estilizar las etiquetas de publicaciones que se muestran en tus publicaciones de blog individuales. Por lo general, tu tema de WordPress las mostraría en la parte superior o inferior del título de la publicación o del contenido de la publicación.
Puedes pasar el cursor sobre las etiquetas y hacer clic derecho para usar la herramienta Inspeccionar para ver las clases CSS que utiliza tu tema de WordPress.
Después de eso, puedes usar estas clases CSS en tu CSS personalizado. A continuación, se muestra un código de ejemplo basado en las clases CSS de nuestro tema de prueba:
.entry-tag {
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a {
color:#fff;
font-size:small;
font-weight:bold;
}
Así es como se veía en nuestro sitio de prueba.
Creación de una nube de etiquetas personalizada en WordPress
El bloque predeterminado de nube de etiquetas es fácil de usar, pero algunos usuarios avanzados pueden querer personalizarlo para tener más flexibilidad.
Este método te permite agregar tus propias clases HTML y CSS alrededor de la nube de etiquetas. Luego puedes usarlo para personalizar la apariencia de la nube de etiquetas según tus propios requisitos.
Lo primero que debes hacer es copiar y pegar este código en el archivo functions.php de tu tema o en un plugin de fragmentos de código:
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' );
Recomendamos agregar este código con WPCode, el mejor plugin de fragmentos de código para WordPress. Te permite agregar fácilmente código personalizado en WordPress sin editar el archivo functions.php de tu tema, por lo que no romperás tu sitio.
Para empezar, instala y activa el plugin gratuito WPCode. Si necesitas ayuda, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.
Una vez que el plugin esté activado, dirígete a Fragmentos de código » Agregar fragmento desde el panel de WordPress.
Luego, pasa el mouse sobre la opción ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en el botón ‘Usar fragmento’.
Desde aquí, debes seleccionar ‘Fragmento de PHP’ como tipo de código de la lista de opciones que aparecen en la pantalla.
A continuación, puedes agregar un título para el fragmento en la parte superior de la página. Puede ser cualquier cosa que te ayude a recordar para qué es el código.
Luego, simplemente pega el código de arriba en el cuadro ‘Vista previa del código’.
Después de eso, todo lo que necesitas hacer es cambiar el interruptor de ‘Inactivo’ a ‘Activo’ y hacer clic en el botón ‘Guardar fragmento’.
Este código agrega un shortcode que muestra todas tus etiquetas con su recuento de publicaciones al lado.
Para mostrarlo en tu página de archivos o en un widget, necesitas usar este shortcode:
[wpbtags]
Usar este código solo mostrará enlaces de etiquetas y el recuento de publicaciones junto a ellos. Agreguemos algo de CSS para que se vea mejor. Simplemente copie y pegue este CSS personalizado en su sitio web.
.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:
Esperamos que este artículo le haya ayudado a aprender cómo estilizar fácilmente las etiquetas en WordPress. También puede consultar nuestra guía sobre cómo ocultar o estilizar sus subcategorías en WordPress o ver esta lista de útiles consejos, trucos y hacks de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
kzain
El estilo de las etiquetas en WordPress puede marcar una gran diferencia en la apariencia general de un blog. Me encanta que hayas desglosado el proceso en pasos sencillos; los ejemplos de CSS son realmente útiles. Su consejo sobre el uso de un tema hijo para evitar perder personalizaciones también es muy apreciado. ¡Ahora, finalmente puedo darle a mis etiquetas el cambio de imagen que merecen! Gracias por compartir su experiencia y hacer que la personalización de WordPress sea más accesible para todos nosotros.
Jiří Vaněk
Cuando leí este artículo, me entró la urgencia de crear mi propia nube de etiquetas. Usé su fragmento pero modifiqué los colores y redondeé ligeramente las esquinas. Funcionó como por arte de magia. Es agradable tener las etiquetas del mismo color que el tema de todo el sitio web. Puede ser un pequeño detalle, pero es muy agradable.
Dennis Muthomi
la guía paso a paso y los fragmentos de código son realmente útiles
PREGUNTA RÁPIDA: Si aplico estos fragmentos de código para estilizar mis etiquetas y más tarde decido cambiar mi tema de WordPress, ¿el estilo de las etiquetas cambiará según los estilos predeterminados del nuevo tema, o se mantendrán las personalizaciones que hice usando estos fragmentos de código?
Comentarios de WPBeginner
El CSS que agregaste debería permanecer, pero es posible que aún tengas que editar el CSS dependiendo de cómo el CSS del nuevo tema afecte el estilo, y si hay algún conflicto.
Dennis Muthomi
¡Hola, gracias por la útil aclaración!
Mientras pueda mantener las personalizaciones con algunos ajustes menores, eso es muy útil saberlo.
Una pregunta de seguimiento: al cambiar de tema, ¿cuál sería la mejor manera de verificar y resolver cualquier conflicto de CSS que afecte el estilo de las etiquetas?
Soporte de WPBeginner
No tenemos una mejor manera específica que recomendaríamos. Sería algo que necesitarías verificar manualmente.
Jiří Vaněk
Solo dando seguimiento a la pregunta de Dennis. ¿Es mejor agregar CSS usando WP Code o ponerlo directamente en la plantilla? Supongo que si lo pongo en la plantilla, perderé la configuración al cambiar de tema, pero si uso WP Code, los estilos permanecerán incluso después de cambiar de tema. ¿Es correcto?
Comentarios de WPBeginner
Correcto. Esto es similar a usar la sección CSS adicional en el Personalizador del tema.
Dicho esto, el CSS necesario será diferente de un tema a otro, por lo que la utilidad variará.
Nikola
¡Excelente guía, gracias!
¿Sería posible ordenar las etiquetas por las más usadas y limitar el número de etiquetas mostradas?
Soporte de WPBeginner
Por el momento, necesitarías usar un plugin para eso o código personalizado, no tenemos un método recomendado para eso en este momento.
Administrador
Jemma Pollari
Genial, gracias. Esto realmente ayudó.
Soporte de WPBeginner
Glad our guide could help
Administrador
Joe Smith
¡Esto es genial! Exactamente lo que estaba buscando y muy elegante. Solo una pregunta: si quisiera agregar más espacio entre las etiquetas, ¿cómo modificaría el CSS? He intentado cambiar varias de las configuraciones en el CSS anterior, pero ninguna de ellas simplemente agrega espacio en blanco entre las etiquetas.
Soporte de WPBeginner
You would want to increase the padding for what you’re wanting
Administrador
Ibiye Ambille
Hola, me encantaría mover la etiqueta de mi publicación debajo de la imagen destacada
Soporte de WPBeginner
Para eso, deberías contactar al soporte de tu tema específico para obtener ayuda, ya que cada tema tiene su propia ubicación para la imagen destacada.
Administrador
Trishah
Estoy intentando agregar una clase CSS "current" a las etiquetas de una publicación individual. Las pocas soluciones que encontré ya no parecen funcionar. ¿Cómo haría esto?
Soporte de WPBeginner
Eso variaría según tu tema específico; si contactas al soporte de tu tema, deberían poder decirte dónde puedes agregar esa clase para tus etiquetas.
Administrador
uche Peter
Mis etiquetas están listadas en serie... Sin borde, nada de nada,,, solo texto... por favor, ¿cómo le doy un borde con color de fondo?
Kingsolomon
Cómo aplico el CSS, por favor
Hugo
Mi nube de etiquetas no aparece como una nube, sino como una lista, ya que después de cada span se inserta un salto de línea. ¿Cómo puedo eliminar estos saltos de línea?
Soporte de WPBeginner
Hola Hugo,
Este artículo discute cómo estilizar etiquetas de diferentes maneras. Si quieres una nube de etiquetas, puedes usar el widget de nube de etiquetas predeterminado de WordPress. También puedes usar la etiqueta de plantilla
1-click Use in WordPress
Administrador
bob
Entiendo que mostraste otra página sobre cómo limitar las etiquetas a un cierto número, pero ¿cómo puedo hacerlo con este ejemplo incluido? No parece funcionar usando el método enlazado en combinación con esto.
Amy Croson
Estoy teniendo problemas para agregar esto, y creo que es por cómo mi tema 'Chosen' me está limitando. He copiado y pegado todo en mi php, y me está dando errores por todos lados. Actualmente me dice que hay un "." desconocido en este detalle. ¿Hay alguna forma de formatear esto sin usar los "." antes de .taglink, .tagbox y .tagcount?
Val Archer
Hola, estoy buscando una manera de listar las etiquetas en una página category-slug.php. ¿Sabes dónde puedo encontrar ese tutorial?
Hasta ahora he creado una categoría [sitename]/category/recipes y un category-recipes.php.
Estoy etiquetando las recetas, por ejemplo, Desayuno, Cena, etc.
Me gustaría que las etiquetas se mostraran en category-recipes.php así. No sé lo que estoy haciendo. Estoy copiando de mi archivo category.php.
Archivos de la Categoría:
Desayuno
ahora lista todas las publicaciones etiquetadas con Desayuno algo así:
<a href="”>
por / / publicado en cat_name . ‘ ‘;} ?>
Cena
ahora lista todas las publicaciones etiquetadas con Cena algo así:
<a href="”>
por / / publicado en cat_name . ‘ ‘;} ?>
[Luego al final de todas las Etiquetas:]
</div
¿Por favor, sabes dónde puedo obtener ayuda con esto?
¡gracias! – Val
Soporte de WPBeginner
¿Has intentado agregar:
<?php the_tags('publicado en:', '' ,'' ); ?>Administrador
Magistar
El código funciona bien para una nube de etiquetas. Sin embargo, me gustaría aplicar esto a las etiquetas de las publicaciones (es decir, las etiquetas asociadas con una publicación y su recuento, en lugar de la lista grande).
Intenté algo con wp_get_post_tags pero realmente no logré que funcionara. ¿Alguna sugerencia?
Personal de WPBeginner
Puedes usar get_terms en lugar de get_tags, consulta esta página del codex:
http://codex.wordpress.org/Function_Reference/get_terms
DER KUNSTBLOG
Eso es genial, he agregado tu código a un plugin específico del sitio, pero ¿hay alguna posibilidad de cambiarlo de manera que el tamaño de fuente varíe según la frecuencia con la que se usa la etiqueta? ¿Alguna idea por favor? ¡Gracias!
Personal de WPBeginner
Sí es posible, en el primer fragmento de código necesitarías reemplazar get_tags con la función wp_tag_cloud. Así:
$wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');
Invitado
¿Cómo haces lo mismo con la nube de etiquetas personalizada para Categorías y Taxonomías Personalizadas?
Terence O'Neill
Hola amigo; ¿Cómo hago exactamente lo mismo (mostrar con shortcode) para Categorías y Taxonomías Personalizadas? Gracias por el tutorial, por cierto. Funciona a la perfección.