¿Quiere diseñar sus etiquetas en WordPress para que se vean más prominentes?
Las etiquetas lo ayudan a organizar su contenido en temas. Son como hashtags para las publicaciones de su blog de WordPress y ayudan a los usuarios a descubrir más contenido.
En este artículo, le mostraremos cómo diseñar fácilmente las etiquetas en WordPress para obtener más participación de los usuarios y vistas de página en su sitio web.
Cómo ver las etiquetas en WordPress
WordPress viene con dos taxonomías principales llamadas categorías y etiquetas. Si bien las categorías se utilizan para las áreas principales de su contenido, las etiquetas le permiten ordenar el contenido en temas más específicos.
Muchos temas populares de WordPress muestran etiquetas en la parte superior o inferior de sus publicaciones de forma predeterminada.
Sin embargo, también puede mostrar las etiquetas en páginas de archivo, pies de página, barras laterales y casi en cualquier lugar que desee.
Para insertar una nube de etiquetas en sus publicaciones, páginas y widgets de la barra lateral, simplemente puede agregar el bloque Nube de etiquetas.
Una nube de etiquetas asigna a cada etiqueta un tamaño de fuente diferente según la cantidad de publicaciones. También puede optar por mostrar el número de publicaciones junto a cada etiqueta.
Estas son solo las opciones predeterminadas disponibles en WordPress, pero ¿qué sucede si desea personalizar aún más sus etiquetas? Le mostraremos cómo.
Echemos un vistazo a cómo diseñar etiquetas fácilmente en WordPress.
Estilo de nube de etiquetas predeterminado en WordPress
Después de agregar el bloque Tag Cloud a una publicación o página, puede personalizarlo agregando CSS personalizado.
El bloque de nube de etiquetas incluye automáticamente clases de CSS generadas por WordPress preconstruidas que se pueden usar para darle estilo.
Para agregar CSS personalizado a su sitio de WordPress, simplemente vaya a Apariencia »Personalizar página y cambie a la pestaña CSS adicional.
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 puede ver, puede usar la clase .tag-link-position para ajustar el estilo según la posición de los enlaces. Las etiquetas con más publicaciones son más altas y las etiquetas con menos publicaciones son más bajas.
Si desea que todas las etiquetas en el 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;
}
Publicar estilo de etiqueta en WordPress
Además de diseñar sus nubes de etiquetas, también puede diseñar las etiquetas de publicación que aparecen en sus publicaciones de blog individuales. 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 las etiquetas y hacer clic derecho para usar la herramienta Inspeccionar para ver las clases de CSS utilizadas por su tema de WordPress.
Más tarde, puede usar estas clases de CSS en su CSS personalizado. A continuación se muestra un código de muestra basado en clases de 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;
}
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 el aspecto de la nube de etiquetas para que se adapte a sus necesidades.
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.
function wpb_tags() {
$wpbtags = get_tags();
foreach ($wpbtags as $tag) {
$string .= '<span class="tagbox"><a class="taglink" href="'.%20get_tag_link($tag->term_id)%20.'">'. $tag->name . '</a><span class="tagcount">'. $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 con el recuento de publicaciones al lado. Para mostrarlo en su página de archivos o en un widget, debe usar este código abreviado:
[wpbtags]
El uso de este código solo mostrará los enlaces a las etiquetas y el recuento de publicaciones junto a ellas. 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;
}
