¿Quieres diseñar tus etiquetas en WordPress para que se vean más prominentes?

Las etiquetas lo ayudan a organizar el contenido en temas. Son como hashtags para las publicaciones de su blog de WordPress, que ayudan a los usuarios a descubrir más contenido.

En este artículo, le mostraremos cómo diseñar fácilmente las pestañas en WordPress para obtener más participación de los usuarios y vistas de página en su sitio web.

Etiquetas de estilo en WordPress

Cómo mostrar pestañas en WordPress

WordPress viene con dos taxonomías principales llamadas categorías y etiquetas. Si bien las categorías se utilizan para el área principal de contenido, las etiquetas le permiten categorizar el contenido en temas más específicos.

Muchos temas populares de WordPress muestran pestañas en la parte superior o inferior de las publicaciones de forma predeterminada.

Las siguientes etiquetas están publicadas en WordPress

Sin embargo, también puede mostrar pestañas en páginas de archivo, pies de página, barras laterales y prácticamente en cualquier lugar que desee.

Para insertar nubes de etiquetas en sus publicaciones, páginas y widgets de la barra lateral, todo lo que necesita hacer es agregar un bloque de nube de etiquetas.

nube de etiquetas

Tag Cloud proporciona diferentes tamaños de fuente para cada etiqueta según la cantidad de publicaciones. También puede optar por mostrar el número de publicaciones junto a cada etiqueta.

Vista previa de la nube de etiquetas

Estas son solo las opciones predeterminadas disponibles en WordPress, pero ¿qué sucede si desea personalizar aún más sus etiquetas? Te mostraremos cómo.

Veamos cómo diseñar pestañas fácilmente en WordPress.

Diseñar la nube de etiquetas predeterminada en WordPress

Después de agregar un bloque de nube de etiquetas a una publicación o página, puede personalizarlo agregando CSS personalizado.

Los bloques de nube de etiquetas incluyen automáticamente clases de CSS generadas por WordPress que se pueden usar para diseñar.

Para agregar CSS personalizado a su sitio de WordPress, solo vaya a Apariencia » Personalizar y cambie a la pestaña CSS adicional.

Nube de etiquetas de estilo

Puede 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 .tag-link-position La clase ajusta el estilo en función de la posición del enlace. Las etiquetas con más publicaciones se colocan más arriba, las etiquetas con menos publicaciones se colocan más abajo.

Si desea que todas las etiquetas en un bloque de nube de etiquetas tengan el mismo tamaño, puede 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 en nuestro sitio de prueba:

Estilos de nube de etiquetas alternativos

Diseñar etiquetas de publicaciones en WordPress

Además de diseñar la nube de etiquetas, también puede diseñar las etiquetas de publicación que aparecen en las publicaciones de su blog personal. Por lo general, su tema de WordPress los mostrará en la parte superior o inferior del título de la publicación o del contenido de la publicación.

Puede pasar el cursor sobre la etiqueta y hacer clic con el botón derecho para usar el inspector para ver las clases de CSS utilizadas por su tema de WordPress.

Use el inspector para encontrar clases de etiquetas

Más tarde, puede usar estas clases de CSS en CSS personalizado. Aquí hay un código de ejemplo basado en la clase 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.

estilo de etiqueta de publicación

Crear una nube de etiquetas personalizada en WordPress

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

Este método le permite agregar sus propias clases de HTML y CSS alrededor de la nube de etiquetas. Luego puede usarlo para personalizar la apariencia de la nube de etiquetas de acuerdo con sus requisitos.

Lo primero que debe hacer es copiar y pegar este código en el archivo functions.php de su tema o en un complemento específico del sitio.

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

Este código agrega un código abreviado que muestra todas sus etiquetas y el recuento de publicaciones junto a ellas. Para mostrarlo en su página de perfil o widget, debe usar este código abreviado:

[wpbtags]

El uso de este código solo mostrará los enlaces de etiquetas y la cantidad 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 en nuestro sitio de demostración:

Nube de etiquetas personalizada

Esperamos que este artículo le haya ayudado a aprender cómo diseñar fácilmente pestañas en WordPress. También puede consultar nuestra guía sobre cómo crear una página de inicio de sesión personalizada en WordPress, o consultar esta práctica lista de consejos, trucos y trucos de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.