¿Quieres diseñar etiquetas en WordPress para que se vean más prominentes?
Las etiquetas le ayudan a organizar su contenido en temas. Son como hashtags para las publicaciones de tu blog de WordPress y ayudan a los usuarios a descubrir más contenido.
En este artículo, le mostraremos cómo diseñar etiquetas fácilmente en WordPress para obtener más participación del usuario y visitas a la página en su sitio web.
Cómo mostrar etiquetas en WordPress
WordPress viene con dos taxonomías principales llamadas categorías y etiquetas. Si bien las categorías se utilizan para áreas importantes de su contenido, las etiquetas le permiten clasificar 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 etiquetas en páginas de archivo, pie 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 le da 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.
Esas son solo las opciones predeterminadas disponibles en WordPress, pero ¿y si quisiera personalizar aún más sus etiquetas? Te mostraremos cómo.
Echemos un vistazo a cómo diseñar etiquetas fácilmente en WordPress.
Diseñar la nube de etiquetas predeterminada en WordPress
Una vez que haya agregado 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 CSS predeterminadas generadas por WordPress que se pueden usar para diseñarlas.
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 utilizar el .tag-link-position
class para ajustar el estilo en función de la posición de los enlaces. Las etiquetas con más publicaciones tienen una posición más alta y las etiquetas con menos publicaciones son más bajas.
Si desea que todas las etiquetas en su 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ía en nuestro sitio de prueba:
Diseñar etiquetas de publicaciones en WordPress
Además de diseñar las nubes de etiquetas, es posible que también desee diseñar las etiquetas de las publicaciones que se muestran en sus publicaciones de blog individuales. Por lo general, su tema de WordPress los mostraría en la parte superior o inferior del título de la publicación o en el contenido de la publicación.
Puede pasar el mouse sobre las etiquetas y hacer clic con el botón derecho para usar la herramienta Inspeccionar para ver las clases de CSS utilizadas por su tema de WordPress.
Después de eso, puede usar estas clases de CSS en su CSS personalizado. A continuación se muestra un código de muestra 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í es como se veía en nuestro sitio de prueba.
Creación de 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 según sus propios requisitos.
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="'. get_tag_link($tag->term_id) .'">'. $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 corto que muestra todas sus etiquetas con el recuento de publicaciones junto a ellas. Para mostrarlo en su página de archivos 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 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 a diseñar etiquetas fácilmente en WordPress. Es posible que también desee ver nuestra guía sobre cómo crear páginas de destino personalizadas en WordPress o ver esta lista de prácticos consejos, trucos y trucos de WordPress.