Cómo dar estilo fácilmente a las etiquetas en WordPress (con ejemplos)

¿Quieres dar estilo a las etiquetas en WordPress para que tengan un aspecto más destacado?

Las etiquetas ayudan a organizar el contenido por debates. Son como hashtags para las entradas de tu blog de WordPress y ayudan a los usuarios a descubrir más contenido.

En este artículo, le mostraremos cómo aplicar fácilmente estilo a las etiquetas en WordPress para conseguir una mayor participación de los usuarios y más páginas vistas en su sitio web.

Cómo mostrar etiquetas en WordPress

WordPress incluye dos taxonomías principales: categorías y etiquetas. Mientras que las categorías se utilizan para las áreas principales de su contenido, las etiquetas le permiten clasificar el contenido en debates más específicos.

Muchos temas populares de WordPress muestran etiquetas en la parte superior o inferior de sus entradas por defecto.

Sin embargo, también puede mostrar las etiquetas en las páginas de archivo, pie de página, barras laterales, y casi cualquier lugar que desee en WordPress.

Para insertar una nube de etiquetas en tus entradas, páginas y widgets de la barra lateral, sólo tienes que añadir el bloque “Nube de etiquetas”.

Una nube de etiquetas da a cada etiqueta un tamaño de letra diferente en función del número de entradas. También puedes elegir mostrar el número de entradas a continuación de cada etiqueta.

Ésas son sólo las opciones por defecto disponibles en WordPress, pero ¿y si quisieras personalizar aún más tus etiquetas? Le mostraremos cómo.

Veamos cómo dar estilo a las etiquetas en WordPress.

Estilizar la nube de etiquetas por defecto en WordPress

Después de añadir el bloque Nube de etiquetas a una entrada o página, puede personalizarlo añadiendo CSS personalizado.

El bloque de nube de etiquetas incluye automáticamente clases CSS generadas por defecto por WordPress que pueden utilizarse para darles estilo.

Para añadir CSS personalizado a su sitio WordPress, simplemente vaya a la página Apariencia ” Personalizador y cambie a la pestaña CSS adicional.

Puede empezar añadiendo 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 puede ver, puede utilizar la clase .tag-link-position para ajustar el estilo en función de la posición de los enlaces. Las etiquetas con más entradas ocupan una posición más alta y las etiquetas con menos entradas ocupan una posición más baja.

Si desea que todas las etiquetas del bloque de la nube de etiquetas tengan el mismo tamaño, puede utilizar el siguiente CSS:

.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í se ve en nuestro sitio de prueba:

Estilizar etiquetas de entradas en WordPress

Además de estilizar tus nubes de etiquetas, también puedes estilizar las etiquetas de entrada que se muestran en cada una de las entradas de tu blog. Normalmente, el tema de WordPress las mostrará en la parte superior o inferior del título o contenido de la entrada.

Puede pasar el ratón sobre las etiquetas y hacer clic con el botón derecho para utilizar la herramienta Inspeccionar y ver las clases CSS utilizadas por su tema de WordPress.

Después de eso, puede utilizar estas clases CSS en su CSS personalizado. A continuación se muestra un código de ejemplo basado en clases CSS en 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í se ve en nuestro sitio de prueba.

Creación de una nube de etiquetas personalizada en WordPress

El bloque de nube de etiquetas por defecto es fácil de usar, pero algunos usuarios avanzados pueden querer personalizarlo para tener más flexibilidad.

Este método te permite añadir tus propias clases HTML y CSS alrededor de la nube de etiquetas. A continuación, puede utilizarlo para personalizar el aspecto de la nube de etiquetas según sus propios requisitos.

Lo primero que tienes que 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 añadir este código con WPCode, el mejor plugin de fragmentos de código para WordPress. Te permite añadir 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 activado el plugin, diríjase a Fragmentos de código ” Añadir fragmento desde el escritorio de WordPress.

A continuación, pase el ratón por encima de la opción “Añadir su código personalizado (nuevo fragmento)” y haga clic en el botón “Usar fragmento”.

Desde aquí, puedes añadir un título para el fragmento de código en la parte superior de la página. Puede ser cualquier cosa que le ayude a recordar para qué sirve el código.

A continuación, pegue el código anterior en el cuadro “Vista previa del código” y seleccione “Fragmento de código PHP” como tipo de código en el menú desplegable.

Después, basta con cambiar el conmutador de “Inactivo” a “Activo” y hacer clic en el botón “Guardar fragmento de código”.

Este código añade un shortcode que muestra todas tus etiquetas con su número de entradas a continuación.

Para mostrarlo en su página de archivos o en un widget debe utilizar este shortcode:

[wpbtags]

Usando este código sólo se mostrarán los enlaces de las etiquetas y el número de entradas a su lado. Vamos a añadir un poco de CSS para que se vea mejor. Simplemente copia y pega este CSS personalizado en tu 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;
}

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

Esperamos que este artículo te haya ayudado a aprender cómo dar estilo a las etiquetas en WordPress. Puede que también quieras ver nuestra guía sobre cómo crear páginas de destino personalizadas en WordPress o ver esta lista de consejos, trucos y hacks útiles de WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.